/* ============================================================
   Ingresos Diarios · Chloe & Lucas, S.L.

   PLAN DE FICHAS
   Color, cinco papeles y uno solo por color:
     acento   verde  · lo que se puede pulsar, y nada más
     peligro  rojo   · lo que no tiene vuelta atrás, y los errores
     hecho    tinta  · lo ya facturado (neutro a propósito: en esta
                       aplicación el verde significa "púlsame", así que
                       no puede significar además "terminado")
     tinta    tres niveles de gris verdoso
     superficie tres planos: fondo, tarjeta y realce
   Tipografía, dos familias:
     IBM Plex Sans · toda la interfaz, con Segoe UI de respaldo
     IBM Plex Mono · fechas, importes y la cifra del día, con Consolas
                     de respaldo. Las dos de respaldo existen en Windows,
                     así que sin conexión no se pierde la jerarquía.
   Elemento distintivo:
     el contador de cobros que quedan por facturar, en cifra de libro
     mayor, que baja cada vez que se marca uno.
   ============================================================ */

:root{
  color-scheme: light dark;

  --bg:#EEF2ED; --surface:#FFFFFF; --surface-2:#E4EAE2;
  --border:#CBD6C7;                  /* decorativo: separa planos */
  --border-soft:#DCE4D9;
  --borde-control:#7E857B;           /* 3,80:1 sobre blanco · WCAG 1.4.11 */

  --ink:#152420;                     /* 16,09:1 sobre blanco */
  --ink-2:#46564C;                   /*  7,79:1 sobre blanco */
  --ink-3:#5F6A61;                   /*  5,64:1 blanco · 4,61:1 realce */

  --acento:#177A5B;                  /*  5,29:1 sobre blanco */
  --acento-ink:#167557;              /*  4,61:1 sobre acento-soft */
  --acento-soft:#DBECE3;
  --acento-contraste:#FFFFFF;        /*  5,29:1 sobre acento */

  --peligro:#A32C22;                 /*  7,14:1 sobre blanco */
  --peligro-ink:#A32C22;             /*  5,57:1 sobre peligro-soft */
  --peligro-soft:#F6DEDB;

  --hecho:#46564C;

  --shadow:0 1px 2px rgba(21,36,32,.06), 0 10px 28px -14px rgba(21,36,32,.22);
  --shadow-alta:0 10px 30px -10px rgba(21,36,32,.35), 0 30px 70px -30px rgba(21,36,32,.45);
  --radius:14px;

  --font-ui:'IBM Plex Sans','Segoe UI',system-ui,Arial,sans-serif;
  --font-cifra:'IBM Plex Mono',Consolas,'SFMono-Regular','Courier New',monospace;
}

/* Un solo juego de valores para el tema oscuro, reutilizado por la
   preferencia del sistema y por la elección explícita de la persona. */
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    --bg:#0F1613; --surface:#17211C; --surface-2:#1E2921;
    --border:#2C3A32; --border-soft:#243029;
    --borde-control:#6B7570;         /* 3,47:1 sobre superficie */
    --ink:#E9F0EA; --ink-2:#B5C4BA; --ink-3:#82938C;
    --acento:#2F9973; --acento-ink:#5BAE90; --acento-soft:#193B2E;
    --acento-contraste:#06120D;
    --peligro:#D9695C; --peligro-ink:#DA6E61; --peligro-soft:#3B1D1A;
    --hecho:#B5C4BA;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.55);
    --shadow-alta:0 10px 30px -10px rgba(0,0,0,.6), 0 30px 70px -30px rgba(0,0,0,.7);
  }
}
:root[data-tema="claro"]{ color-scheme: light; }
:root[data-tema="oscuro"]{
  color-scheme: dark;
  --bg:#0F1613; --surface:#17211C; --surface-2:#1E2921;
  --border:#2C3A32; --border-soft:#243029;
  --borde-control:#6B7570;
  --ink:#E9F0EA; --ink-2:#B5C4BA; --ink-3:#82938C;
  --acento:#2F9973; --acento-ink:#5BAE90; --acento-soft:#193B2E;
  --acento-contraste:#06120D;
  --peligro:#D9695C; --peligro-ink:#DA6E61; --peligro-soft:#3B1D1A;
  --hecho:#B5C4BA;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.55);
  --shadow-alta:0 10px 30px -10px rgba(0,0,0,.6), 0 30px 70px -30px rgba(0,0,0,.7);
}

*{box-sizing:border-box;}
/* Todo el tipográfico va en rem para que la preferencia de tamaño de
   letra del navegador se respete. 1rem = 16px por defecto. */
html{font-size:100%;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-ui);
  font-size:0.875rem; line-height:1.45; -webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:var(--font-ui); letter-spacing:-0.01em;}
a{color:var(--acento);}
[hidden]{display:none !important;}

/* Visible solo para los lectores de pantalla. */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;}

.page{max-width:82.5rem; margin:0 auto; padding-inline:1.25rem; padding-block:1.125rem 3.75rem;}

/* ---------- barra superior ----------
   La marca no se repite por toda la aplicación: vive en la pantalla de
   acceso. Aquí manda el contenido. */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding-bottom:0.875rem; margin-bottom:1.125rem; border-bottom:1px solid var(--border);}
.brand{display:flex; align-items:baseline; gap:0.625rem;}
.brand-mark{font-weight:600; font-size:0.75rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--acento); border:1px solid var(--acento); border-radius:999px;
  padding:0.1875rem 0.625rem; white-space:nowrap;}
.brand h1{font-weight:700; font-size:1.3125rem; margin:0;}
.brand .casa{font-size:0.8125rem; color:var(--ink-3);}
.nav{display:flex; align-items:center; gap:0.375rem; flex-wrap:wrap;}
.nav button.enlace{font-size:0.8125rem; font-weight:600; color:var(--ink-2); padding:0.5rem 0.75rem;
  border-radius:0.5625rem; background:none; border:1px solid transparent; cursor:pointer;
  font-family:var(--font-ui); min-height:1.75rem;}
.nav button.enlace:hover{background:var(--surface-2); color:var(--ink);}
/* El apartado en el que se está no se distingue solo por color: lleva
   además su propio borde y el atributo aria-current. */
.nav button.enlace[aria-current]{background:var(--acento-soft); color:var(--acento-ink);
  border-color:var(--acento);}
.nav .quien{font-size:0.78125rem; color:var(--ink-3); padding-left:0.625rem;
  border-left:1px solid var(--border); margin-left:0.25rem; line-height:1.3;}
.nav .quien strong{color:var(--ink); display:block; font-size:0.8125rem;}

/* ---------- distintivo de la carpeta compartida ----------
   Siempre visible: trabajar creyendo que compartes cuando no compartes
   es el error mas caro de esta aplicacion. */
.chip-carpeta{display:inline-flex; align-items:center; gap:0.4375rem; border:1px solid transparent;}
.chip-carpeta .punto{width:0.5rem; height:0.5rem; border-radius:50%; background:currentColor; flex:none;}
.chip-carpeta.bien{color:var(--acento-ink);}
.chip-carpeta.apagada{color:var(--ink-3);}
.chip-carpeta.apagada .punto{background:var(--borde-control);}
.chip-carpeta.alerta{color:var(--peligro); background:var(--peligro-soft); border-color:var(--peligro);}
.chip-carpeta.alerta:hover{background:var(--peligro-soft); color:var(--peligro);}
.aviso code{font-family:var(--font-cifra); font-size:0.78125rem; background:var(--surface-2);
  padding:0.0625rem 0.3125rem; border-radius:0.25rem;}
.ayuda code{font-family:var(--font-cifra); font-size:0.75rem; background:var(--surface-2);
  padding:0.0625rem 0.3125rem; border-radius:0.25rem; color:var(--ink-2);}

/* ---------- avisos ---------- */
.avisos{display:flex; flex-direction:column; gap:0.5rem; margin-bottom:1.125rem;}
.aviso{border-radius:0.6875rem; padding:0.6875rem 0.9375rem; font-size:0.84375rem; line-height:1.5;
  border:1px solid; display:flex; gap:0.625rem; align-items:flex-start;}
.aviso.ok{background:var(--acento-soft); border-color:var(--acento); color:var(--ink);}
.aviso.error{background:var(--peligro-soft); border-color:var(--peligro); color:var(--ink);}
.aviso.atencion{background:var(--surface-2); border-color:var(--borde-control); color:var(--ink);}

#notificaciones{position:fixed; right:1.125rem; bottom:1.125rem; z-index:80; display:flex;
  flex-direction:column; gap:0.5rem; max-width:26rem;}
.nota{background:var(--surface); border:1px solid var(--border); border-left-width:4px;
  border-radius:0.6875rem; padding:0.6875rem 0.75rem 0.6875rem 0.9375rem; box-shadow:var(--shadow-alta);
  font-size:0.84375rem; display:flex; align-items:center; gap:0.625rem; animation:entra .18s ease-out;}
.nota.ok{border-left-color:var(--acento);}
.nota.error{border-left-color:var(--peligro);}
.nota.info{border-left-color:var(--borde-control);}
.nota > span{flex:1;}
.nota .accion{background:none; border:1px solid var(--acento); color:var(--acento-ink);
  font-family:var(--font-ui); font-size:0.78125rem; font-weight:600; border-radius:0.5rem;
  padding:0.3125rem 0.625rem; cursor:pointer; min-height:1.75rem; white-space:nowrap;}
.nota .accion:hover{background:var(--acento-soft);}
.nota .cerrar{background:none; border:none; color:var(--ink-3); cursor:pointer; font-size:1.125rem;
  line-height:1; padding:0.25rem 0.375rem; border-radius:0.375rem; min-width:1.75rem; min-height:1.75rem;}
.nota .cerrar:hover{background:var(--surface-2); color:var(--ink);}
@keyframes entra{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}

/* ---------- cabecera del punto de venta ---------- */
.pv-row{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:0.875rem; margin-bottom:1.125rem;}
.pv-titulo{font-weight:700; font-size:1.5rem; margin:0;}
.pv-row label{display:block; font-size:0.75rem; color:var(--ink-3); margin-bottom:0.3125rem;}
.accounts{display:flex; flex-wrap:wrap; gap:0.5rem;}
.account-chip{display:flex; align-items:center; gap:0.5rem; background:var(--surface);
  border:1px solid var(--border); border-radius:0.625rem; padding:0.4375rem 0.75rem;
  font-size:0.78125rem; box-shadow:var(--shadow);}
.account-chip .bank{font-weight:600;}
.account-chip .iban{font-family:var(--font-cifra); color:var(--ink-3);}
/* Una cuenta inactiva se dice con palabras y con el borde, no bajando la opacidad. */
.account-chip.apagada{background:var(--surface-2); border-style:dashed;}
.account-chip.apagada .bank{color:var(--ink-2); font-weight:500;}

/* ---------- la cifra del día ----------
   El trabajo que queda hoy es lo único que puja en primer plano.
   Es un recuento de cobros, no una cantidad de euros: lo que se cuenta
   es cuántas facturas faltan por emitir. */
.lead{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.375rem 1.5rem; box-shadow:var(--shadow); margin-bottom:1.25rem;
  display:flex; align-items:baseline; gap:1.125rem; flex-wrap:wrap;}
.lead-cifra{font-family:var(--font-cifra); font-weight:600; font-size:3.5rem; line-height:1;
  color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-0.02em;}
.lead-texto{display:flex; flex-direction:column; gap:0.1875rem;}
.lead-frase{font-size:1.0625rem; font-weight:600; color:var(--ink);}
.lead-sub{font-size:0.8125rem; color:var(--ink-3);}
.lead-sub strong{font-family:var(--font-cifra); color:var(--ink-2); font-weight:600;}
.lead-desglose{margin-left:auto; text-align:right; font-size:0.8125rem; color:var(--ink-3);
  max-width:20rem; line-height:1.55;}
.lead.al-dia .lead-cifra{color:var(--hecho);}

/* ---------- pestañas de estado ---------- */
.estado-tabs{display:flex; gap:1.375rem; border-bottom:1px solid var(--border); flex-wrap:wrap;}
.estado-tabs button{font-family:var(--font-ui); font-size:0.9375rem; font-weight:600; background:none;
  border:none; border-bottom:2px solid transparent; color:var(--ink-3); padding:0.5rem 0 0.625rem;
  margin-bottom:-1px; display:flex; align-items:center; gap:0.4375rem; cursor:pointer; min-height:1.75rem;}
.estado-tabs button:hover{color:var(--ink);}
/* Además del color, la pestaña activa lleva peso y subrayado. */
.estado-tabs button[aria-current]{color:var(--ink); border-bottom-color:var(--acento); font-weight:700;}
.estado-tabs .count{font-size:0.75rem; font-weight:600; background:var(--surface-2); color:var(--ink-2);
  border-radius:999px; padding:0.125rem 0.5rem; font-variant-numeric:tabular-nums;}
.estado-tabs button[aria-current] .count{background:var(--acento-soft); color:var(--acento-ink);}

/* ---------- herramientas: buscar y filtrar ----------
   El buscador es la herramienta principal de la pantalla, no un filtro
   más: va en su propia fila y con el doble de ancho. */
.tools{display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap;
  gap:0.75rem; margin:0.875rem 0 0.75rem;}
.buscar-fila{display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap; margin-top:0.875rem;}
.buscar-fila input[type=search]{min-width:22.5rem; flex:1; max-width:34rem; font-size:0.9375rem;
  padding:0.625rem 0.875rem;}
.filtros-form{display:flex; align-items:flex-end; gap:0.625rem; flex-wrap:wrap;}
.filtros-form label{font-size:0.75rem; color:var(--ink-3); display:block; margin-bottom:0.25rem;}
.hint{font-size:0.78125rem; color:var(--ink-3); max-width:35rem;}

/* ---------- barra de selección ---------- */
.barra-seleccion{display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap;
  background:var(--acento-soft); border:1px solid var(--acento); border-radius:0.6875rem;
  padding:0.625rem 0.875rem; margin-bottom:0.75rem; font-size:0.84375rem;}
.barra-seleccion strong{font-variant-numeric:tabular-nums; font-family:var(--font-cifra);}

/* ---------- formularios ---------- */
input[type=text], input[type=password], input[type=date], input[type=number], input[type=search],
select, textarea{
  font-family:var(--font-ui); font-size:0.84375rem; color:var(--ink); background:var(--surface);
  border:1px solid var(--borde-control); border-radius:0.5625rem; padding:0.5rem 0.6875rem;
  min-height:1.75rem;}
textarea{width:100%; min-height:5.625rem; font-family:var(--font-cifra); font-size:0.78125rem; line-height:1.5;}
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible,
textarea:focus-visible, .table-wrap:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--acento); outline-offset:2px;}
input[type=file]{font-size:0.8125rem; padding:0.5625rem; background:var(--surface);
  border:1px dashed var(--borde-control); border-radius:0.5625rem; width:100%;}
input[disabled], select[disabled]{background:var(--surface-2); color:var(--ink-3); cursor:not-allowed;}
input[type=checkbox]{width:1.25rem; height:1.25rem; accent-color:var(--acento); cursor:pointer;}
/* Área de pulsación cómoda alrededor de la casilla sin engordar la fila. */
.celda-check{display:inline-flex; align-items:center; justify-content:center;
  width:1.75rem; height:1.75rem; cursor:pointer;}

.boton{display:inline-flex; align-items:center; justify-content:center; gap:0.4375rem;
  font-family:var(--font-ui); font-size:0.8125rem; font-weight:600; border-radius:0.5625rem;
  padding:0.5rem 0.875rem; cursor:pointer; border:1px solid var(--acento);
  background:var(--acento); color:var(--acento-contraste); text-decoration:none;
  white-space:nowrap; min-height:1.875rem;}
.boton:hover{filter:brightness(1.07);}
.boton:disabled{background:var(--surface-2); border-color:var(--border); color:var(--ink-3);
  cursor:not-allowed; filter:none;}
.boton.secundario{background:var(--surface); color:var(--ink-2); border-color:var(--borde-control);}
.boton.secundario:hover{color:var(--ink); border-color:var(--ink-2); background:var(--surface-2); filter:none;}
.boton.secundario:disabled{color:var(--ink-3); border-color:var(--border); background:var(--surface-2);}
.boton.peligro{background:var(--surface); color:var(--peligro); border-color:var(--peligro);}
.boton.peligro:hover{background:var(--peligro-soft); filter:none;}
.boton.pequeno{font-size:0.75rem; padding:0.3125rem 0.625rem; min-height:1.75rem;}
.boton.ancho{width:100%;}

.tarjeta{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.25rem; box-shadow:var(--shadow); margin-bottom:1.375rem;}
.tarjeta h2{font-size:1.125rem; margin:0 0 0.875rem; font-weight:700;}
.tarjeta h3{font-size:0.9375rem; margin:1.375rem 0 0.625rem; color:var(--ink-2); font-weight:600;}
.rejilla{display:grid; grid-template-columns:repeat(auto-fit, minmax(11.875rem, 1fr));
  gap:0.75rem; align-items:end;}
.campo label{display:block; font-size:0.75rem; color:var(--ink-3); margin-bottom:0.25rem;}
.campo input, .campo select{width:100%;}
.ayuda{font-size:0.78125rem; color:var(--ink-3); margin-top:0.375rem; line-height:1.55;}

/* ---------- zona de arrastre ---------- */
.soltar{border:2px dashed var(--borde-control); border-radius:var(--radius); padding:1.875rem 1.375rem;
  text-align:center; background:var(--surface-2); transition:border-color .15s, background .15s;}
.soltar.encima{border-color:var(--acento); background:var(--acento-soft);}
.soltar .icono{margin-bottom:0.5rem; color:var(--acento);}
.soltar .titulo{font-size:1.0625rem; font-weight:600; margin-bottom:0.25rem;}
.soltar .sub{font-size:0.78125rem; color:var(--ink-3); margin-bottom:0.875rem;}

/* ---------- progreso real ---------- */
.progreso{margin-top:0.875rem;}
.progreso .barra{height:0.375rem; background:var(--surface-2); border-radius:999px; overflow:hidden;}
.progreso .barra > div{height:100%; background:var(--acento); transition:width .2s;}
.progreso .texto{font-size:0.78125rem; color:var(--ink-2); margin-top:0.5rem;}

/* ---------- tablas ---------- */
.table-wrap{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:auto; max-height:clamp(26rem, calc(100vh - 21rem), 68rem);}
.table-wrap.libre{max-height:none;}
table{width:100%; border-collapse:collapse; min-width:55rem; font-size:0.84375rem;}
thead th{position:sticky; top:0; background:var(--surface-2); text-align:left; font-size:0.75rem;
  color:var(--ink-2); font-weight:600; padding:0.5rem 0.875rem; border-bottom:1px solid var(--border);
  white-space:nowrap; z-index:2;}
thead th.ordenable{padding:0;}
/* La cabecera ordenable es un botón de verdad: se alcanza con el tabulador. */
thead th.ordenable button{width:100%; display:flex; align-items:center; gap:0.25rem;
  background:none; border:none; font:inherit; color:inherit; text-align:inherit; cursor:pointer;
  padding:0.6875rem 0.875rem; min-height:1.75rem;}
thead th.ordenable button:hover{color:var(--ink); background:var(--border-soft);}
thead th.num.ordenable button{justify-content:flex-end;}
thead th .flecha{color:var(--acento-ink);}
th.num, td.num{text-align:right;}
th.medio, td.medio{text-align:center; width:2.75rem;}
tbody td{padding:0.625rem 0.875rem; border-bottom:1px solid var(--border-soft); vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover td{background:var(--surface-2);}
tbody tr.marcada td{background:var(--acento-soft);}
tbody th[scope=row]{font-weight:600; text-align:left; padding:0.625rem 0.875rem;
  border-bottom:1px solid var(--border-soft);}

/* Fila separadora de día: convierte la lista en un libro de cobros. */
tr.dia td{background:var(--surface-2); border-top:1px solid var(--border);
  border-bottom:1px solid var(--border); padding:0.4375rem 0.875rem;}
tr.dia .etiqueta-dia{font-weight:700; font-size:0.8125rem; color:var(--ink);}
tr.dia .resumen-dia{color:var(--ink-3); font-size:0.78125rem; font-family:var(--font-cifra);
  float:right; font-variant-numeric:tabular-nums;}

/* Una sola línea por concepto, para que la tabla mantenga su ritmo.
   El texto completo se revela al pasar el puntero. */
.concepto{max-width:30rem; line-height:1.4;}
.concepto .contraparte{display:block; font-weight:600; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis;}
.concepto .detalle{display:block; font-size:0.75rem; color:var(--ink-3); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;}
.fecha{font-family:var(--font-cifra); color:var(--ink-2); white-space:nowrap;}
.importe{font-family:var(--font-cifra); font-weight:600; font-variant-numeric:tabular-nums;
  white-space:nowrap;}
.importe.negativo{color:var(--peligro);}
.entidad{color:var(--ink-2); white-space:nowrap;}
.vacio{padding:2.5rem 0.875rem; text-align:center; color:var(--ink-2); font-size:0.875rem;}
.vacio strong{display:block; font-size:1rem; color:var(--ink); margin-bottom:0.375rem;}
.vacio .boton{margin-top:0.875rem;}
tfoot td{padding:0.6875rem 0.875rem; border-top:1px solid var(--border); background:var(--surface-2);
  font-weight:600; font-size:0.8125rem; position:sticky; bottom:0;}

/* El tipo de cobro es un dato secundario: va en neutro. El color de
   esta aplicación está reservado a lo que se puede pulsar. */
.tipo-chip{display:inline-block; font-size:0.75rem; font-weight:600; padding:0.1875rem 0.5rem;
  border-radius:0.5rem; white-space:nowrap; background:var(--surface-2); color:var(--ink-2);
  border:1px solid var(--border);}

.etiqueta{display:inline-block; font-size:0.75rem; font-weight:600; border-radius:0.5rem;
  padding:0.1875rem 0.5625rem; background:var(--surface-2); color:var(--ink-2);
  border:1px solid var(--border); white-space:nowrap;}
.etiqueta.verde{background:var(--acento-soft); color:var(--acento-ink); border-color:var(--acento);}
.etiqueta.roja{background:var(--peligro-soft); color:var(--peligro-ink); border-color:var(--peligro);}

/* La marca de facturado es neutra, no verde: aquí el verde es para pulsar. */
.marcado{display:flex; align-items:center; gap:0.5625rem;}
.marcado .tick{width:1.25rem; height:1.25rem; border-radius:50%; background:var(--surface-2);
  color:var(--hecho); display:flex; align-items:center; justify-content:center; font-size:0.6875rem;
  font-weight:700; flex:none; border:1px solid var(--border);}
.marcado .quien{font-size:0.78125rem; line-height:1.35;}
.marcado .quien span{color:var(--ink-3); font-family:var(--font-cifra); font-size:0.71875rem;}
/* Un movimiento descartado se reconoce por el tachado del importe y por
   su motivo, no por bajarle la opacidad a todo el texto. */
tr.excluida td{color:var(--ink-2);}
tr.excluida .importe{text-decoration:line-through;}

/* ---------- paginación ---------- */
.paginacion{display:flex; align-items:center; justify-content:space-between; gap:0.75rem;
  flex-wrap:wrap; margin-top:0.75rem; font-size:0.78125rem; color:var(--ink-3);}
.paginacion .botones{display:flex; gap:0.375rem; align-items:center;}

/* ---------- acceso ---------- */
.acceso{max-width:25rem; margin:7vh auto 0;}
.acceso .tarjeta{padding:1.625rem;}
.acceso .brand{justify-content:center; margin-bottom:1.25rem; flex-direction:column;
  align-items:center; gap:0.625rem;}
.acceso .brand h1{font-size:1.625rem;}
.acceso .campo{margin-bottom:0.875rem;}
.acceso .boton{width:100%; margin-top:0.375rem;}
.acceso .pie{text-align:center; font-size:0.78125rem; color:var(--ink-3); margin-top:1rem; line-height:1.55;}
.acceso .separador{display:flex; align-items:center; gap:0.625rem; margin:1.125rem 0 0.875rem;
  color:var(--ink-3); font-size:0.78125rem;}
.acceso .separador::before,.acceso .separador::after{content:""; flex:1; height:1px; background:var(--border);}

/* ---------- administración ---------- */
.sub-tabs{display:flex; gap:0.375rem; flex-wrap:wrap; margin-bottom:1.25rem; background:var(--surface-2);
  padding:0.3125rem; border-radius:0.6875rem; border:1px solid var(--border);}
.sub-tabs button{font-size:0.8125rem; font-weight:600; color:var(--ink-2); background:none;
  border:1px solid transparent; padding:0.4375rem 0.875rem; border-radius:0.5rem; cursor:pointer;
  font-family:var(--font-ui); min-height:1.75rem;}
.sub-tabs button:hover{color:var(--ink);}
.sub-tabs button[aria-current]{background:var(--surface); color:var(--acento-ink);
  border-color:var(--borde-control); box-shadow:var(--shadow);}

.dos-columnas{display:grid; grid-template-columns:repeat(auto-fit, minmax(20.625rem,1fr));
  gap:1.375rem; align-items:start;}
.dos-columnas > .tarjeta{margin-bottom:0;}
.lista-datos{display:grid; grid-template-columns:auto 1fr; gap:0.375rem 1rem; font-size:0.8125rem;}
.lista-datos dt{color:var(--ink-3);}
.lista-datos dd{margin:0; font-weight:600; font-family:var(--font-cifra);
  font-variant-numeric:tabular-nums;}

/* ---------- diálogo ---------- */
.velo{position:fixed; inset:0; background:rgba(8,16,13,.55); display:flex; align-items:center;
  justify-content:center; padding:1.25rem; z-index:90;}
.modal{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-alta); max-width:32.5rem; width:100%; padding:1.5rem; max-height:85vh;
  overflow:auto;}
.modal h2{margin-top:0;}
.modal .acciones{display:flex; gap:0.5625rem; justify-content:flex-end; margin-top:1.25rem; flex-wrap:wrap;}

footer{margin-top:1.375rem; font-size:0.78125rem; color:var(--ink-3); border-top:1px solid var(--border);
  padding-top:0.875rem;}

@media (max-width:52rem){
  .pv-row{flex-direction:column; align-items:stretch;}
  .nav{width:100%;}
  .page{padding-inline:0.875rem;}
  .lead{flex-direction:column; align-items:flex-start; gap:0.625rem;}
  .lead-desglose{margin-left:0; text-align:left;}
  .lead-cifra{font-size:2.75rem;}
  .buscar-fila input[type=search]{min-width:0; width:100%;}
}
@media print{
  .topbar,.tools,.buscar-fila,.estado-tabs,.barra-seleccion,.paginacion,#notificaciones,
  footer,.sub-tabs{display:none !important;}
  .table-wrap{max-height:none; box-shadow:none; border:none; overflow:visible;}
  .lead{box-shadow:none;}
  body{background:#fff;}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important; scroll-behavior:auto !important;}
}

/* Revisión visual: superficies neutras, jerarquía del libro de cobros y
   controles accesibles. Sin recursos externos ni transparencias. */
:root {
  --bg:#F5F6F8; --surface:#FFFFFF; --surface-2:#ECEFF2;
  --border:#D8DDE3; --border-soft:#E7EBEF; --borde-control:#7A828C;
  --ink:#20262D; --ink-2:#49535F; --ink-3:#606B78;
  --acento:#146C50; --acento-ink:#125E46; --acento-soft:#E4F1EA;
  --acento-contraste:#FFFFFF; --hecho:#49535F;
  --shadow:0 2px 6px rgba(24,36,48,.025),0 12px 32px -24px rgba(24,36,48,.2);
  --shadow-alta:0 20px 64px -24px rgba(24,36,48,.3);
  --radius:18px;
  --font-ui:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --font-cifra:ui-monospace,'SFMono-Regular',Consolas,monospace;
}
@media(prefers-color-scheme:dark) {
  :root:not([data-tema="claro"]) {
    --bg:#14171C; --surface:#1D2229; --surface-2:#282F38;
    --border:#414A56; --border-soft:#323A45; --borde-control:#85909E;
    --ink:#F0F3F6; --ink-2:#CCD3DC; --ink-3:#AAB5C2;
    --acento:#77D4AD; --acento-ink:#A2E4C7; --acento-soft:#203D32;
    --acento-contraste:#102B20; --hecho:#CCD3DC;
    --shadow:0 2px 10px rgba(0,0,0,.12); --shadow-alta:0 20px 64px rgba(0,0,0,.35);
  }
}
:root[data-tema="oscuro"] {
  --bg:#14171C; --surface:#1D2229; --surface-2:#282F38;
  --border:#414A56; --border-soft:#323A45; --borde-control:#85909E;
  --ink:#F0F3F6; --ink-2:#CCD3DC; --ink-3:#AAB5C2;
  --acento:#77D4AD; --acento-ink:#A2E4C7; --acento-soft:#203D32;
  --acento-contraste:#102B20; --hecho:#CCD3DC;
  --shadow:0 2px 10px rgba(0,0,0,.12); --shadow-alta:0 20px 64px rgba(0,0,0,.35);
}
body {font-size:.9375rem;line-height:1.55;}
.page {max-width:90rem;padding:1.75rem clamp(1rem,3vw,3rem) 3rem;}
.topbar {gap:1.25rem;padding-bottom:1.5rem;margin-bottom:2rem;}
.brand {flex-wrap:wrap;gap:.375rem 1rem;}
.brand h1 {font-size:1.375rem;letter-spacing:-.04em;}
.brand .casa {font-size:.8125rem;}
.nav {gap:.375rem;}
.nav button.enlace {min-height:2.5rem;font-size:.8125rem;padding:.5rem .75rem;border-radius:10px;}
.nav button.enlace[aria-current] {background:var(--surface);border-color:var(--border);color:var(--ink);box-shadow:var(--shadow);}
.nav .quien {padding-left:1rem;margin-left:.5rem;}
.pv-row {gap:1.25rem;margin-bottom:1.5rem;}
.pv-titulo {font-size:1.75rem;letter-spacing:-.035em;}
.account-chip {box-shadow:none;border-radius:9px;padding:.5rem .75rem;flex-wrap:wrap;}
.lead {padding:1.75rem 2rem;gap:1.25rem;align-items:center;margin-bottom:1.75rem;}
.lead-cifra {font-size:3.5rem;font-weight:600;letter-spacing:-.06em;}
.lead-frase {font-size:1.1875rem;letter-spacing:-.025em;}
.lead-sub {margin-top:.375rem;font-size:.875rem;}
.lead-desglose {font-size:.8125rem;border-left:1px solid var(--border);padding-left:1.5rem;}
.estado-tabs {gap:1.5rem;}
.estado-tabs button {min-height:3rem;font-size:.875rem;padding:.625rem .125rem .875rem;}
.estado-tabs button:hover {background:var(--surface-2);}
.estado-tabs .count {margin-left:.375rem;padding:.1875rem .5rem;}
.buscar-fila {margin-top:1.5rem;gap:1.25rem;}
.buscar-fila input[type=search] {max-width:36rem;min-height:2.875rem;padding:.75rem 1rem;}
.hint {font-size:.8125rem;line-height:1.65;}
.tools {margin:1rem 0 1.25rem;}
.filtros-form {gap:.875rem;}
.campo label,.filtros-form label,.pv-row label {font-size:.8125rem;font-weight:600;color:var(--ink-2);margin-bottom:.4375rem;}
input[type=text],input[type=password],input[type=date],input[type=number],input[type=search],select,textarea {
  min-height:2.625rem;font-size:.875rem;border-radius:10px;padding:.625rem .75rem;max-width:100%;
}
input::placeholder {color:var(--ink-3);opacity:1;}
.boton {min-height:2.625rem;padding:.625rem 1rem;font-size:.8125rem;border-radius:10px;white-space:normal;line-height:1.4;}
.boton.pequeno {min-height:2.25rem;font-size:.8125rem;padding:.5rem .75rem;}
button {transition:background-color .12s,border-color .12s,box-shadow .12s;}
button:active:not(:disabled) {box-shadow:inset 0 0 0 2px currentColor;}
:is(button,input,select,textarea,a,[tabindex]):focus-visible {outline:3px solid var(--acento);outline-offset:3px;}
.tarjeta {padding:1.5rem;}
.tarjeta h2 {font-size:1.25rem;letter-spacing:-.025em;}
.table-wrap {border-radius:14px;max-width:100%;}
table {font-size:.875rem;}
thead th {background:var(--surface-2);font-size:.75rem;}
thead th.ordenable button {min-height:2.75rem;padding:.75rem 1rem;}
tbody td {padding:.875rem 1rem;}
tr.dia td {padding:.625rem 1rem;}
.concepto .contraparte {font-size:.875rem;}
.concepto .detalle {font-size:.8125rem;margin-top:.1875rem;}
.concepto:focus-within .detalle,.concepto:hover .detalle {white-space:normal;overflow-wrap:anywhere;}
.celda-check {min-width:2rem;min-height:2rem;}
.vacio {padding:3.5rem 1.25rem;white-space:normal;}
.vacio strong {font-size:1.125rem;letter-spacing:-.02em;}
.ayuda,.paginacion {font-size:.8125rem;}
.sub-tabs {width:fit-content;max-width:100%;padding:.375rem;gap:.25rem;border-radius:12px;}
.sub-tabs button {min-height:2.5rem;padding:.5rem 1rem;}
.sub-tabs button[aria-current] {border-color:var(--border);color:var(--ink);}
.dos-columnas {grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:1.5rem;}
.rejilla {grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:1rem;}
.dos-columnas > *,.rejilla > * {min-width:0;}
.soltar {padding:2.5rem 1.5rem;background:var(--bg);}
.soltar .titulo {font-size:1.1875rem;}
.soltar .sub {font-size:.875rem;}
.modal {padding:1.75rem;border-radius:20px;}
#notificaciones {max-width:min(28rem,calc(100vw - 2rem));}
.nota .cerrar {min-width:2.25rem;min-height:2.25rem;}
.acceso {max-width:28rem;margin:clamp(1rem,7vh,5rem) auto 0;}
.acceso .brand {gap:.75rem;margin-bottom:2rem;}
.acceso .brand-mark {border:0;background:var(--acento-soft);color:var(--acento-ink);padding:.4375rem .875rem;font-size:.6875rem;letter-spacing:.13em;}
.acceso .brand h1 {font-size:2.125rem;font-weight:650;letter-spacing:-.05em;}
.acceso-intro {margin:0;color:var(--ink-2);font-size:.9375rem;text-align:center;max-width:25rem;}
.acceso .tarjeta {padding:2rem;border-radius:22px;}
.acceso .tarjeta h2 {font-size:1.1875rem;margin-bottom:.375rem;}
.acceso-ayuda {color:var(--ink-3);font-size:.875rem;margin:0 0 1.5rem;}
.acceso .campo {margin-bottom:1.125rem;}
.acceso input {min-height:3rem;font-size:1rem;}
.acceso .boton {min-height:3rem;font-size:.875rem;}
.acceso .pie {font-size:.8125rem;margin:1.25rem 0 0;}
.acceso .separador {margin:1.5rem 0 1rem;}
footer {margin-top:1.75rem;padding-top:1rem;line-height:1.65;overflow-wrap:anywhere;}
@media(max-width:52rem) {
  .page {padding:1.25rem 1rem 2rem;}
  .topbar {margin-bottom:1.5rem;}
  .lead {align-items:flex-start;padding:1.5rem;gap:.875rem;}
  .lead-desglose {border-left:0;border-top:1px solid var(--border);padding:1rem 0 0;margin:0;max-width:none;width:100%;text-align:left;}
  .buscar-fila input[type=search] {max-width:none;}
  .filtros-form {width:100%;}
  .filtros-form > div {flex:1 1 9rem;min-width:0;}
  .filtros-form input,.filtros-form select {width:100%;min-width:0;}
  .nav .quien {margin-left:0;}
}
@media(max-width:30rem) {
  .acceso .tarjeta,.tarjeta,.modal {padding:1.25rem;}
  .acceso .brand h1 {font-size:1.875rem;}
  .estado-tabs {gap:.375rem .875rem;}
  .estado-tabs button {font-size:.8125rem;}
  .account-chip {max-width:100%;}
  .accounts {gap:.375rem;}
  .lead-frase {font-size:1.0625rem;}
  .lista-datos {grid-template-columns:1fr;gap:.25rem;}
  .lista-datos dd {margin-bottom:.75rem;overflow-wrap:anywhere;}
  .paginacion .botones {flex-wrap:wrap;}
}
@media(pointer:coarse) {
  .boton,.boton.pequeno,.nav button.enlace,.sub-tabs button,.nota .accion,.nota .cerrar,.celda-check {min-height:44px;}
  .celda-check,.nota .cerrar {min-width:44px;}
}
@media(prefers-contrast:more) {
  :root {--border:var(--borde-control);--border-soft:var(--borde-control);}
}
@media(prefers-reduced-motion:reduce) {button {transition:none;}}
@media print {
  :root {--bg:#FFFFFF;--surface:#FFFFFF;--surface-2:#F0F0F0;--ink:#111111;--ink-2:#333333;--ink-3:#444444;}
  .page {padding:0;}.lead-desglose {border:0;}
}


#id-status{position:fixed;bottom:10px;right:12px;z-index:9999;background:var(--fondo,#fff);color:var(--texto,#222);border:1px solid #aaa;border-radius:8px;padding:8px 12px;font:12px system-ui;max-width:90vw} #id-status[data-error="1"]{background:#fff0ed;color:#9c2010} body.id-busy #app{pointer-events:none;opacity:.7}

/* Fondo de acceso: imagen original con desenfoque solo en la capa de fondo. */
body.idi-login::before{content:"";position:fixed;inset:-24px;z-index:-2;background:url("fondo-acceso.jpg") center center/cover no-repeat;filter:blur(12px);pointer-events:none;}
body.idi-login::after{content:"";position:fixed;inset:0;z-index:-1;background:rgba(238,242,237,.55);pointer-events:none;}
body.idi-login{isolation:isolate;background:#e4e6e2;}
body.idi-login .acceso>.brand{padding:1.25rem;border-radius:16px;background:var(--surface);}
body.idi-login .acceso .tarjeta{background:var(--surface);box-shadow:0 16px 48px #0002;}
.fecha-control{display:flex;align-items:center;gap:.35rem;}
.fecha-control .fecha-texto{width:10rem;min-width:0;}
.fecha-calendario{position:relative;display:grid;place-items:center;width:2.75rem;height:2.75rem;border:1px solid var(--borde-control);border-radius:6px;background:var(--surface);font-size:1.5rem;flex-shrink:0;}
.fecha-calendario:focus-within{outline:2px solid var(--ink);outline-offset:2px;}
.fecha-calendario .fecha-picker{position:absolute;inset:0;opacity:0;width:100%;height:100%;padding:0;cursor:pointer;}
.fecha-picker::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;cursor:pointer;}

.editar-usuario form{min-width:16rem;max-width:24rem;padding:1rem;background:var(--surface-2);border-radius:8px;margin-top:.5rem;}
.editar-usuario label{display:block;margin-top:.6rem;}
.editar-usuario input{width:100%;box-sizing:border-box;}
.editar-usuario summary{cursor:pointer;}