/* ═══════════════════════════════════════════════════════════════════════
   EssencePOS · Admin — Pestaña CLIENTES (?tab=tenants)
   Estilos propios de la pestaña. Todo va prefijado con .cli- para no
   pisar nada de admin2.css ni de las otras pestañas.
   Se apoya en la paleta del POS; las variables tienen valor por defecto
   para que este archivo funcione aunque admin2.css todavía no exista.

   Dos reglas de criterio que se respetan en todo el archivo:
   · El fondo de una fila es SIEMPRE blanco. Un fondo distinto solo puede
     significar "seleccionado" o "el cursor está encima"; si además lo
     usáramos para decir "vencido", el mismo color diría dos cosas.
     El color del estado vive en un punto y en la palabra que lo acompaña,
     nunca en la superficie. Y como el color nunca va solo, cada fila dice
     su estado con palabras ("Vencido", "Vence en 3 días").
   · La fila es de una sola línea por columna (~52 px) para que quepan más
     negocios. Lo que no responde a "¿qué hago con este cliente?" está en
     la ficha, no en la fila.
   ═══════════════════════════════════════════════════════════════════ */

.cli-scope{
  --cli-fondo:#f8fafc;
  --cli-super:#ffffff;
  --cli-super2:#fafbfc;
  --cli-super3:#f1f5f9;
  --cli-txt:#0f172a;
  --cli-txt2:#475569;
  --cli-txt3:#94a3b8;
  --cli-borde:#e2e8f0;
  --cli-borde2:#cbd5e1;
  --cli-verde:#047857;      --cli-verde-suave:#ecfdf5;
  --cli-ambar:#92400e;      --cli-ambar-suave:#fef3c7;
  --cli-rojo:#991b1b;       --cli-rojo-suave:#fee2e2;
  --cli-violeta:#6d28d9;    --cli-violeta-suave:#ede9fe;
  --cli-radio:12px;
  --cli-mono:'DM Mono',ui-monospace,Menlo,Consolas,monospace;
  color:var(--cli-txt);
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ── Barra de herramientas ───────────────────────────────────────── */
.cli-barra{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  margin-bottom:14px;
}
.cli-buscador{position:relative;flex:1 1 260px;min-width:200px;}

/* Los desplegables de la barra heredaban el `width:100%` que la hoja base da a
   todos los campos, así que cada uno ocupaba el ancho entero y los tres se
   apilaban en columna: tres barras enormes donde debía haber una fila. Aquí se
   les devuelve su ancho natural y se ordenan junto al buscador. */
.cli-barra select{
  width:auto;min-width:150px;flex:0 0 auto;
  padding:10px 34px 10px 13px;
  border:1.5px solid var(--cli-borde);border-radius:var(--cli-radio);
  background:var(--cli-super) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%2364748b'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'%3E%3C/path%3E%3C/svg%3E") no-repeat right 11px center/13px;
  color:var(--cli-txt);font:inherit;font-size:13.5px;
  appearance:none;-webkit-appearance:none;cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.cli-barra select:hover{border-color:var(--cli-borde-f, #cbd5e1);}
.cli-barra select:focus{
  outline:none;border-color:var(--cli-verde);
  box-shadow:0 0 0 3px rgba(4,120,87,.12);
}

/* El botón de alta se va al final de la fila, separado de los filtros: es una
   acción, no un filtro más, y mezclado con ellos se pulsaba por error. */
.cli-barra .cli-nuevo{margin-left:auto;flex:0 0 auto;}
.cli-buscador svg{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:var(--cli-txt3);pointer-events:none;
}
.cli-buscador input{
  width:100%;box-sizing:border-box;
  padding:11px 38px 11px 40px;
  border:1.5px solid var(--cli-borde);border-radius:var(--cli-radio);
  background:var(--cli-super);color:var(--cli-txt);
  font:inherit;font-size:14px;
  transition:border-color .15s,box-shadow .15s;
}
.cli-buscador input::placeholder{color:var(--cli-txt3);}
.cli-buscador input:focus{
  outline:none;border-color:var(--cli-verde);
  box-shadow:0 0 0 3px rgba(4,120,87,.12);
}
.cli-buscador-limpiar{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:24px;height:24px;border:none;border-radius:50%;
  background:var(--cli-super3);color:var(--cli-txt2);
  font-size:15px;line-height:1;cursor:pointer;display:none;
}
.cli-buscador.tiene-texto .cli-buscador-limpiar{display:block;}

.cli-select{
  padding:10px 12px;border:1.5px solid var(--cli-borde);
  border-radius:var(--cli-radio);background:var(--cli-super);
  color:var(--cli-txt2);font:inherit;font-size:13px;font-weight:600;
  cursor:pointer;
}
.cli-select:focus{outline:none;border-color:var(--cli-verde);}

.cli-nuevo{
  display:inline-flex;align-items:center;gap:7px;
  padding:11px 16px;border-radius:var(--cli-radio);
  background:var(--cli-verde);color:#fff;border:1.5px solid var(--cli-verde);
  font:inherit;font-size:13.5px;font-weight:700;text-decoration:none;
  white-space:nowrap;
}
.cli-nuevo:hover{filter:brightness(1.08);}

/* ── Fichas de filtro (focos) ────────────────────────────────────── */
.cli-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.cli-chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:999px;
  border:1.5px solid var(--cli-borde);background:var(--cli-super);
  color:var(--cli-txt2);font:inherit;font-size:12.5px;font-weight:600;
  cursor:pointer;transition:all .14s;
}
.cli-chip:hover{border-color:var(--cli-borde2);background:var(--cli-super2);}
.cli-chip b{font-weight:800;font-family:var(--cli-mono);font-size:12px;}
/* Aquí el fondo sí significa "filtro activo": es un control, no una fila. */
.cli-chip.on{background:var(--cli-verde);border-color:var(--cli-verde);color:#fff;}
.cli-chip--alerta{border-color:#fcd34d;color:var(--cli-ambar);}
.cli-chip--alerta.on{background:var(--cli-ambar);border-color:var(--cli-ambar);color:#fff;}
.cli-chip--alerta.vacio{border-color:var(--cli-borde);color:var(--cli-txt3);}

/* ── Lista: una tabla blanca con líneas de 1 px ──────────────────── */
.cli-lista{
  background:var(--cli-super);
  border:1.5px solid var(--cli-borde);border-radius:14px;
  overflow:hidden;
}
.cli-item{
  background:var(--cli-super);          /* siempre blanco, pase lo que pase */
  border-bottom:1px solid var(--cli-borde);
}
.cli-item:last-child{border-bottom:none;}
/* Gris neutro: significa "el cursor está aquí", no un estado del cliente. */
.cli-cab:hover{background:var(--cli-super2);}
.cli-item.abierta{border-bottom-color:var(--cli-borde2);}
.cli-item.abierta>.cli-cab{background:var(--cli-super3);}
/* El menú de acciones se sale de la fila: mientras esté abierto, no recortamos */
.cli-lista:has(.cli-menu.abierto){overflow:visible;}

/* Cabecera: una línea por columna, ~52 px de alto */
.cli-cab{
  display:grid;
  /* identidad · situación · uso · plan · menú · flecha */
  grid-template-columns:minmax(190px,2.4fr) minmax(190px,1.7fr) minmax(140px,1.1fr) auto auto auto;
  align-items:center;gap:14px;
  min-height:52px;padding:6px 14px;box-sizing:border-box;
  cursor:pointer;width:100%;text-align:left;font:inherit;color:inherit;
  border:none;background:none;
  transition:background .12s;
}
.cli-cab:focus-visible{outline:2px solid var(--cli-verde);outline-offset:-3px;}

.cli-ident{display:flex;align-items:baseline;gap:9px;min-width:0;}
.cli-nombre{
  font-size:14px;font-weight:700;color:var(--cli-txt);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cli-slug{
  font-family:var(--cli-mono);font-size:10.5px;color:var(--cli-txt3);
  white-space:nowrap;flex:0 0 auto;
}

/* Situación de cobro: punto + palabra + fecha, todo en una línea */
.cli-sit{
  display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;color:var(--cli-txt2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cli-sit-punto{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:var(--cli-txt3);}
.cli-sit-fecha{color:var(--cli-txt3);font-weight:500;}
.cli-sit--ok      .cli-sit-punto{background:#059669;}
.cli-sit--prueba  .cli-sit-punto{background:#7c3aed;} .cli-sit--prueba{color:var(--cli-violeta);}
.cli-sit--nuevo   .cli-sit-punto{background:#2563eb;} .cli-sit--nuevo{color:#1d4ed8;}
.cli-sit--pronto  .cli-sit-punto{background:#d97706;} .cli-sit--pronto{color:var(--cli-ambar);font-weight:700;}
.cli-sit--vencido .cli-sit-punto{background:#dc2626;} .cli-sit--vencido{color:var(--cli-rojo);font-weight:700;}
.cli-sit--susp    .cli-sit-punto{background:#dc2626;} .cli-sit--susp{color:var(--cli-rojo);font-weight:700;}
.cli-sit--gris    .cli-sit-punto{background:#94a3b8;} .cli-sit--gris{color:var(--cli-txt3);}

/* Uso del POS */
.cli-uso{
  display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--cli-txt2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cli-uso-punto{width:7px;height:7px;border-radius:50%;flex:0 0 auto;}
.cli-uso--hoy    .cli-uso-punto{background:#059669;}
.cli-uso--semana .cli-uso-punto{background:#84cc16;}
.cli-uso--frio   .cli-uso-punto{background:#d97706;} .cli-uso--frio{color:var(--cli-ambar);}
.cli-uso--nunca  .cli-uso-punto{background:#cbd5e1;} .cli-uso--nunca{color:var(--cli-txt3);}

.cli-plan{
  font-size:11.5px;font-weight:700;color:var(--cli-txt2);
  white-space:nowrap;
}

.cli-flecha{color:var(--cli-txt3);transition:transform .18s;flex:0 0 auto;display:inline-flex;}
.cli-item.abierta .cli-flecha{transform:rotate(180deg);}

/* ── Menú de acciones rápidas ────────────────────────────────────── */
.cli-menu{position:relative;flex:0 0 auto;}
.cli-menu-btn{
  width:30px;height:30px;border-radius:8px;
  border:1px solid transparent;background:none;
  color:var(--cli-txt3);cursor:pointer;font-size:16px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
}
.cli-menu-btn:hover{background:var(--cli-super3);border-color:var(--cli-borde);color:var(--cli-txt2);}
.cli-menu-lista{
  display:none;position:absolute;right:0;top:calc(100% + 6px);z-index:40;
  min-width:216px;padding:6px;
  background:var(--cli-super);border:1.5px solid var(--cli-borde);
  border-radius:12px;box-shadow:0 10px 30px rgba(15,23,42,.14);
}
.cli-menu.abierto .cli-menu-lista{display:block;}
.cli-menu-item{
  display:flex;align-items:center;gap:9px;width:100%;box-sizing:border-box;
  padding:9px 11px;border:none;border-radius:8px;background:none;
  color:var(--cli-txt2);font:inherit;font-size:13px;font-weight:600;
  text-align:left;text-decoration:none;cursor:pointer;
}
.cli-menu-item:hover{background:var(--cli-super3);color:var(--cli-txt);}
.cli-menu-sep{height:1px;background:var(--cli-borde);margin:5px 4px;}
/* Las que cobran o cortan el servicio van separadas y con color propio */
.cli-menu-item--cobra{color:var(--cli-verde);}
.cli-menu-item--cobra:hover{background:var(--cli-verde-suave);}
.cli-menu-item--corta{color:var(--cli-ambar);}
.cli-menu-item--corta:hover{background:var(--cli-ambar-suave);}

/* ── Detalle desplegable ─────────────────────────────────────────── */
.cli-detalle{display:none;border-top:1px solid var(--cli-borde);background:var(--cli-super2);}
.cli-item.abierta .cli-detalle{display:block;}

.cli-detalle .t-section{border-bottom:1px solid var(--cli-borde);}
.cli-detalle .t-section:last-child{border-bottom:none;}
.cli-detalle .t-section-head{
  display:flex;align-items:center;gap:9px;padding:12px 16px;
  background:var(--cli-super3);
}
.cli-detalle .t-section-head svg{width:16px;height:16px;stroke:var(--cli-verde);fill:none;stroke-width:2;}
.cli-detalle .t-section-title{font-size:12.5px;font-weight:800;letter-spacing:.3px;}
.cli-detalle .t-section-meta{margin-left:auto;font-size:11.5px;color:var(--cli-txt3);}
.cli-detalle .t-section-body{padding:14px 16px;background:var(--cli-super);}
.cli-detalle .t-info-row{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;
  padding:8px 0;border-bottom:1px dashed var(--cli-borde);font-size:13px;
}
.cli-detalle .t-info-row:last-child{border-bottom:none;}
.cli-detalle .t-info-key{color:var(--cli-txt3);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;}
.cli-detalle .t-info-val{font-weight:600;display:flex;align-items:center;gap:7px;overflow-wrap:anywhere;}
.cli-detalle label{
  display:block;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.4px;color:var(--cli-txt3);margin-bottom:5px;
}
.cli-detalle input,.cli-detalle select{
  padding:9px 11px;border:1.5px solid var(--cli-borde);border-radius:9px;
  background:var(--cli-super);color:var(--cli-txt);font:inherit;font-size:13px;
}
.cli-detalle .t-edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:700px){.cli-detalle .t-edit-grid{grid-template-columns:1fr;}}
.cli-detalle .t-muted{color:var(--cli-txt3);font-size:12px;}

/* Zona crítica: colapsada, hay que abrirla a propósito.

   OJO CON LA FLECHA. Antes salían DOS: la del `::before` de esta hoja y el
   icono SVG que pinta el propio HTML. Y en Firefox aparecía una tercera, la
   del navegador, porque `list-style:none` no basta ahí: hace falta
   `display:flex` (o block) en el <summary> para quitarle el marcador.
   Ahora manda solo el SVG, que además gira al abrir. */
.cli-critica{border-top:1px solid var(--cli-borde);background:var(--cli-super);}
.cli-critica>summary{
  display:flex;align-items:center;gap:8px;
  padding:13px 16px;cursor:pointer;list-style:none;
  font-size:12.5px;font-weight:700;color:var(--cli-rojo);
  user-select:none;
}
.cli-critica>summary::-webkit-details-marker{display:none;}
.cli-critica>summary::marker{content:'';}
.cli-critica>summary:hover{background:rgba(153,27,27,.04);}
.cli-critica-caret{display:inline-flex;transition:transform .15s ease;}
.cli-critica[open] .cli-critica-caret{transform:rotate(90deg);}

.cli-critica-cuerpo{padding:0 16px 16px;}
.cli-critica-nota{
  margin:0 0 12px;font-size:12.5px;line-height:1.55;color:var(--cli-txt2);
  max-width:60ch;
}
.cli-critica-nota strong{color:var(--cli-rojo);font-weight:700;}
.cli-critica-botones{display:flex;gap:8px;flex-wrap:wrap;}

/* El botón destructivo NO puede verse igual que el de al lado: es el único
   de todo el panel que borra datos sin vuelta atrás. Rojo de relleno, que
   con blanco encima da 8,3:1. */
.cli-btn-peligro{
  background:var(--cli-rojo);border:1px solid var(--cli-rojo);color:#fff;
  font-weight:700;
}
.cli-btn-peligro:hover{background:#7f1d1d;border-color:#7f1d1d;}

/* ── Pie: paginación y vacíos ────────────────────────────────────── */
.cli-pie{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:12px;padding:18px 4px 4px;
}
.cli-conteo{font-size:12.5px;color:var(--cli-txt3);}
.cli-mas{
  padding:10px 20px;border-radius:var(--cli-radio);
  border:1.5px solid var(--cli-borde2);background:var(--cli-super);
  color:var(--cli-txt2);font:inherit;font-size:13px;font-weight:700;cursor:pointer;
}
.cli-mas:hover{background:var(--cli-super3);}
.cli-vacio{
  padding:44px 20px;text-align:center;color:var(--cli-txt3);
  background:var(--cli-super);border:1.5px dashed var(--cli-borde);
  border-radius:14px;font-size:14px;
}
.cli-item[hidden]{display:none;}

/* ── Móvil: la fila se vuelve tarjeta, también sin fondos de estado ── */
@media(max-width:780px){
  .cli-cab{
    grid-template-columns:1fr auto auto;
    grid-template-areas:'ident menu flecha' 'sit sit sit' 'uso plan plan';
    gap:6px 10px;padding:12px 14px;min-height:0;
  }
  .cli-cab>.cli-ident{grid-area:ident;flex-wrap:wrap;gap:2px 9px;}
  .cli-cab>.cli-sit{grid-area:sit;}
  .cli-cab>.cli-uso{grid-area:uso;}
  .cli-cab>.cli-plan{grid-area:plan;justify-self:end;}
  .cli-cab>.cli-menu{grid-area:menu;justify-self:end;}
  .cli-cab>.cli-flecha{grid-area:flecha;justify-self:end;}
  .cli-nombre{white-space:normal;font-size:14.5px;}
  .cli-sit,.cli-uso{white-space:normal;}
  .cli-menu-btn{width:38px;height:38px;}   /* objetivo táctil cómodo */
  .cli-menu-item{padding:12px;}
  .cli-menu-lista{min-width:min(260px,78vw);}
  .cli-nuevo{flex:1 1 100%;justify-content:center;}
}

/* Campos de la tarjeta de cobros (pestaña Ajustes). Sin esto salen pegados:
   `.campo` solo apila etiqueta, control y pista, no separa un campo del
   siguiente. */
.cobros-campos { display: flex; flex-direction: column; gap: 18px; }
.cobros-campos .pista code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; background: #f1f5f9; padding: 1px 5px; border-radius: 5px;
}

/* ── Cuentas Bre-B (pestaña Ajustes) ────────────────────────────────
   Un <select> no servía: estas cuentas se distinguen por el banco y por los
   últimos dígitos de la llave, y en una lista desplegable eso no se ve de un
   vistazo. Aquí cada una es una tarjeta elegible, como en el panel de
   EssencePay, para que reconozcas la tuya sin abrir otra pestaña. */
.cuentas-breb { display: grid; gap: 8px; }
/* OJO: este bloque se usa TAMBIEN en la pestana Ajustes, fuera de .cli-scope.
   Uso --cli-* y las declaraciones quedaban invalidas alli (una var() indefinida
   invalida la declaracion entera): la tarjeta perdia borde y fondo. Van los
   tokens del panel, que estan en :root, y ademas con valor de respaldo por si
   alguna vez se usa en un tercer sitio sin tokens. */
.cuenta {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1.5px solid var(--borde, #e2e8f0);
  border-radius: 14px; background: var(--sup, #fff); cursor: pointer;
  transition: border-color .15s, background .15s;
  /* Anula la regla de la hoja de compatibilidad para etiquetas viejas. */
  text-transform: none; letter-spacing: normal; margin: 0; font-size: inherit;
}
.cuenta:hover { border-color: #cbd5e1; }
.cuenta input { position: absolute; width: 1px; height: 1px; opacity: 0; }
/* EL RESALTADO LO PONÍA SOLO PHP AL RECARGAR.
   Al pulsar otra cuenta el radio sí cambiaba, pero la tarjeta seguía marcando
   la anterior: no había una sola señal de que el clic hubiera hecho algo, y
   leía como que el panel no dejaba cambiarla. Con :has la selección responde
   al instante y «Guardar ajustes» solo confirma lo que ya se ve.

   .cuenta--on se conserva como respaldo para un navegador sin :has (ahí la
   regla entera se descarta y vuelve el comportamiento de antes, que al menos
   marca la cuenta guardada). Donde :has existe, se apaga la marca del
   servidor en cuanto su radio deja de estar elegido. */
.cuenta--on { border-color: #047857; background: #f6fdfa; }

.cuenta__marca {
  width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; color: #fff; background: #64748b;
}
/* Color por banco: se reconocen antes por el color que leyendo el nombre. */
.cuenta__marca[data-banco="nequi"]       { background: #200020; }
.cuenta__marca[data-banco="bancolombia"] { background: #ffcc00; color: #1f2937; }
.cuenta__marca[data-banco="bold"]        { background: #0b1220; }
.cuenta__marca[data-banco="davivienda"]  { background: #d3111c; }
.cuenta__marca--vacia { background: #e2e8f0; color: #64748b; }

.cuenta__datos { flex: 1; min-width: 0; }
.cuenta__nombre { display: block; font-size: 13.5px; font-weight: 700; color: var(--tinta, #0f172a); }
.cuenta__meta { display: block; font-size: 12px; color: var(--tinta-3, #64748b); margin-top: 2px; }

/* La palomita solo aparece en la elegida: sin esto habría cinco marcas de
   «esta es» y ninguna diría nada. */
.cuenta__tic { flex-shrink: 0; color: #047857; opacity: 0; transition: opacity .15s; }
.cuenta--on .cuenta__tic { opacity: 1; }