/* ════════════ Módulo CLIENTES — alta única (CRM + Alegra + formulario SAGRILAFT) ════════════
   Mismo lenguaje visual que Cotizaciones Artium (.ca-*), pero con su propio prefijo .cl-*.
   Reglas de la app: celular primero (toques grandes, una columna, acción abajo), formularios por
   pasos y nada de tablas anchas. Los tokens (--azul, --borde, --ok…) vienen de ds.css. */

.panel.cl-host { border: none; box-shadow: none; background: none; padding: 0; }

/* ── Barra superior: estado del enlace con los dos sistemas ── */
.cl-barra { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.cl-conex { display: flex; gap: 6px; flex-wrap: wrap; }
.cl-conex .cl-chip { cursor: default; }

.cl-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: #eef1f5; color: #4a5a70; border: none; font-family: inherit; white-space: nowrap; }
.cl-chip.ok { background: var(--ok-cl); color: var(--ok); }
.cl-chip.mal { background: var(--bad-cl); color: var(--bad); }
.cl-chip.pend { background: var(--warn-cl); color: var(--warn); }
.cl-chip.info { background: var(--info-cl); color: var(--info); }
.cl-chip button { all: unset; cursor: pointer; text-decoration: underline; }

.cl-vacia { border: 1.5px dashed #d5dbe4; border-radius: 12px; padding: 28px 16px; text-align: center; color: #8391a5; font-size: 13.5px; line-height: 1.5; }

/* ── Filtros de gestión y de origen (se combinan; el número es el que hay de verdad) ── */
.cl-filtros { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.cl-chips-f { display: flex; flex-wrap: wrap; gap: 5px; }
.cl-chips-f button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--borde);
  background: #fff; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 600;
  color: #4a5a70; cursor: pointer; min-height: 34px; white-space: nowrap; }
.cl-chips-f button:hover { border-color: var(--azul2); background: #f5f9fd; }
.cl-chips-f button span { font-weight: 700; font-size: 11.5px; color: #8391a5; background: #eef1f5;
  border-radius: 999px; padding: 1px 7px; }
.cl-chips-f button.on { background: var(--azul); border-color: var(--azul); color: #fff; }
.cl-chips-f button.on span { background: rgba(255,255,255,.22); color: #fff; }
.cl-chips-f.origen button.on { background: #5b3fa8; border-color: #5b3fa8; }

/* ── UNA sola lista, en FILAS y por orden alfabético (no una parrilla de tarjetas) ── */
.cl-filas-cli { display: flex; flex-direction: column; gap: 6px; }
.cl-fila-cli { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit;
  background: #fff; border: 1px solid #e2e6ed; border-radius: 10px; padding: 11px 14px; cursor: pointer;
  min-height: 56px; transition: border-color .12s, box-shadow .12s; }
.cl-fila-cli:hover { border-color: #c5cfdd; box-shadow: 0 2px 8px rgba(20,40,70,.07); }
.cl-fila-cli:focus-visible { outline: none; box-shadow: var(--foco); }
.cl-fila-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cl-fila-nom { font-size: 14.5px; font-weight: 700; color: #1d2b3c; line-height: 1.3; overflow-wrap: anywhere; }
.cl-fila-sub { font-size: 12.5px; color: #6b7a8f; overflow-wrap: anywhere; }
.cl-fila-chips { flex: none; display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; max-width: 46%; }

/* Cuenta heredada: se distingue de un vistazo de las que sí gestiona la app */
.cl-chip.heredada { background: #ede9fb; color: #5b3fa8; }

/* Elegir cómo se crea el cliente (RUT o a mano) */
.cl-opciones { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.cl-opcion { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; font: inherit;
  border: 1.5px solid #d9dfe7; border-radius: 12px; background: #fff; padding: 14px 16px; cursor: pointer; min-height: 64px; }
.cl-opcion:hover { border-color: var(--azul2); background: #f5f9fd; }
.cl-opcion b { font-size: 15px; color: #1d2b3c; }
.cl-opcion small { font-size: 12.5px; color: #6b7a8f; line-height: 1.4; }

@media (max-width: 760px) {
  .cl-fila-cli { flex-direction: column; align-items: flex-start; gap: 8px; }
  .cl-fila-chips { max-width: 100%; justify-content: flex-start; }
}

/* ── Ficha: cabecera ── */
.cl-ficha { padding-bottom: 92px; }
.cl-fh { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.cl-fh-txt { flex: 1; min-width: 220px; }
.cl-fh-tit { font-size: 20px; font-weight: 700; color: #1d2b3c; line-height: 1.25; overflow-wrap: anywhere; }
.cl-fh-sub { font-size: 13.5px; color: #5b6b80; margin-top: 2px; overflow-wrap: anywhere; }

/* ── Pasos ── */
.cl-pasos { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 14px 0 0; padding: 0; }
.cl-pasos li { min-width: 0; }
.cl-pasos button { width: 100%; min-width: 0; display: flex; align-items: center; gap: 8px; border: 1px solid #e1e6ee; background: #fff; border-radius: 10px; padding: 9px 10px; font: inherit; text-align: left; cursor: pointer; transition: .12s; }
.cl-pasos button:hover { border-color: var(--azul2); background: #f5f9fd; }
.cl-paso-n { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #eef1f5; color: #6b7a8f; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.cl-paso-t { min-width: 0; display: flex; flex-direction: column; }
.cl-paso-t b { font-size: 13px; color: #33415a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-paso-t small { font-size: 11.5px; color: #98a3b3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-pasos .hecho button { background: #f4f9f5; border-color: #cfe4d4; }
.cl-pasos .hecho .cl-paso-n { background: var(--ok); color: #fff; }
.cl-pasos .actual button { border-color: var(--azul2); box-shadow: inset 0 0 0 1px var(--azul2); }
.cl-pasos .actual .cl-paso-n { background: var(--azul2); color: #fff; }

/* ── Secciones y campos ── */
.cl-sec { border: 1px solid #e6e9ef; border-radius: 12px; background: #fff; padding: 14px; margin-top: 12px; min-width: 0; }
.cl-sec > h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #8391a5; margin: 0 0 10px; }
.cl-sec-ayuda { font-size: 12.5px; color: #8391a5; line-height: 1.45; margin: -4px 0 10px; }

.cl-rej { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 12px; }
.cl-rej.ancho { grid-template-columns: 1fr; }
.cl-f { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; min-width: 0; }
.cl-f > span { font-size: 12.5px; font-weight: 600; color: #4a5a70; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cl-f small { font-weight: 400; color: #98a3b3; }
.cl-f input, .cl-f select, .cl-f textarea { width: 100%; min-width: 0; min-height: 42px; border: 1px solid #d9dfe7; border-radius: 9px; padding: 9px 10px; font: inherit; font-size: 15px; color: #1d2b3c; background: #fff; }
.cl-f input:focus, .cl-f select:focus, .cl-f textarea:focus { outline: none; border-color: var(--azul2); box-shadow: 0 0 0 3px rgba(46,109,164,.15); }
.cl-f input:disabled { background: #f6f7f9; color: #5b6b80; }
.cl-f textarea { resize: vertical; line-height: 1.45; min-height: 84px; }
.cl-f.falta input, .cl-f.falta select, .cl-f.falta textarea { border-color: #e8b4ae; background: #fffafa; }

/* Sí / No: dos botones grandes (en el celular no se falla el toque) */
.cl-sino { display: flex; gap: 8px; }
.cl-sino button { flex: 1; min-height: 42px; border: 1px solid #d9dfe7; border-radius: 9px; background: #fff; font: inherit; font-size: 14.5px; font-weight: 600; color: #5b6b80; cursor: pointer; }
.cl-sino button:hover { border-color: var(--azul2); }
.cl-sino button.on { background: var(--azul); border-color: var(--azul); color: #fff; }
.cl-sino.alerta button.on.si { background: var(--warn); border-color: var(--warn); }

/* Casillas (responsabilidades fiscales, declaraciones) */
.cl-checks { display: flex; flex-direction: column; gap: 2px; }
.cl-check { display: flex; align-items: flex-start; gap: 10px; padding: 9px 4px; min-height: 42px; cursor: pointer; font-size: 14px; color: #33415a; line-height: 1.4; }
.cl-check input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--azul); }

/* ── Filas repetibles (accionistas, beneficiarios finales, junta, PEP) ── */
.cl-filas { display: flex; flex-direction: column; gap: 10px; }
.cl-fila { border: 1px solid #e4e8ef; border-radius: 10px; padding: 10px 11px 2px; background: #fbfcfe; position: relative; }
.cl-fila-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cl-fila-h b { font-size: 12.5px; color: #6b7a8f; text-transform: uppercase; letter-spacing: .04em; }
.cl-add { width: 100%; border: 1.5px dashed #c8d3e0; border-radius: 10px; background: #fbfcfe; padding: 12px; font: inherit; font-size: 14px; font-weight: 600; color: var(--azul2); cursor: pointer; min-height: 44px; }
.cl-add:hover { border-color: var(--azul2); background: #f3f8fd; }

/* ── Documentos ── */
.cl-docs { display: flex; flex-direction: column; gap: 8px; }
.cl-doc { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px solid #e4e8ef; border-radius: 10px; padding: 11px 12px; background: #fff; }
.cl-doc.ok { border-color: #cfe4d4; background: #f7fbf8; }
.cl-doc.falta { border-color: #e8d3b4; background: #fffdf7; }
.cl-doc-ic { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; color: #fff; background: #b0b8c4; }
.cl-doc.ok .cl-doc-ic { background: var(--ok); }
.cl-doc.falta .cl-doc-ic { background: var(--warn); }
.cl-doc-txt { flex: 1; min-width: 140px; }
.cl-doc-txt b { display: block; font-size: 14px; color: #1d2b3c; line-height: 1.3; overflow-wrap: anywhere; }
.cl-doc-txt small { display: block; font-size: 12px; color: #8391a5; margin-top: 2px; overflow-wrap: anywhere; }
.cl-doc input[type=file] { display: none; }

/* ── Alta: tarjetas de estado por sistema ── */
.cl-sistema { display: flex; align-items: flex-start; gap: 10px; border: 1px solid #e1e6ee; border-radius: 10px; padding: 11px 12px; margin-bottom: 8px; background: #fff; }
.cl-sistema.ok { border-color: #cfe4d4; background: #f5faf6; }
.cl-sistema.mal { border-color: #f3c9c9; background: #fdf5f5; }
.cl-sistema.pend { border-color: #f0dcb4; background: #fffaf0; }
.cl-sis-ic { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; background: #8a94a3; }
.cl-sistema.ok .cl-sis-ic { background: var(--ok); }
.cl-sistema.mal .cl-sis-ic { background: var(--bad); }
.cl-sistema.pend .cl-sis-ic { background: var(--warn); }
.cl-sis-txt { flex: 1; min-width: 0; }
.cl-sis-txt b { display: block; font-size: 14.5px; color: #1d2b3c; }
.cl-sis-txt small { display: block; font-size: 12.5px; color: #5b6b80; margin-top: 2px; line-height: 1.45; overflow-wrap: anywhere; }

.cl-falta-lista { margin: 8px 0 0 18px; font-size: 13px; color: #7a4a00; line-height: 1.6; }
.cl-aviso { border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.45; margin-top: 10px; }
.cl-aviso.ambar { background: var(--warn-cl); color: #7a4a00; }
.cl-aviso.gris { background: #f3f5f8; color: #5b6b80; }
.cl-aviso.rojo { background: var(--bad-cl); color: #6b2b2b; }

/* ── Barra de acciones fija abajo (el pulgar llega siempre) ── */
.cl-acciones { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: #fff; border-top: 1px solid #e6e9ef; padding: 10px 24px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 14px rgba(15,23,42,.06); }
.cl-acciones .cl-estado-guardado { flex: 1; min-width: 90px; font-size: 12.5px; color: #8391a5; }
.cl-acciones .btn { min-height: 44px; }
/* 230px = ancho de la barra lateral (.app grid en styles.css). */
@media (min-width: 901px) { .cl-acciones { left: 230px; padding-left: 24px; } }

.cl-borrar { text-align: right; padding: 16px 0 4px; }

@media (max-width: 900px) {
  .cl-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-acciones { padding-left: 14px; padding-right: 14px; }
  .cl-acciones .btn { flex: 1; min-width: 120px; }
  .cl-acciones .cl-estado-guardado { flex-basis: 100%; }
}