/* ═══════════════════════════════════════════════════════════════════
   Versión «Talonario de recibos»
   Cada grabación es un comprobante numerado del talonario: talón con el
   número de numeradora en rojo, troquel punteado, tinta de carbónico azul y
   el sello de goma PAGADO que cae sobre el comprobante al cobrar.
   ═══════════════════════════════════════════════════════════════════ */

html[data-skin="talonario"] {
  --font-display: 'Hanken Grotesk Variable', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Hanken Grotesk Variable', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'Overpass Mono', ui-monospace, monospace;
  --radius:    6px;
  --radius-sm: 5px;
  --radius-xs: 3px;
  --rec: #c8342b;
}

/* ── Papel de talonario (modo nativo: claro) ── */
html[data-skin="talonario"] body {
  --bg:            #e9edf2;
  --surface:       #fbfcfd;
  --surface-2:     #f1f4f8;
  --surface-3:     #e3e8ef;
  --border:        #d5dce5;
  --border-strong: #b9c3cf;
  --text:          #17202c;
  --text-2:        #46526a;
  --text-3:        #5a6578;

  --accent:    #1f3a8a;
  --accent-fg: #ffffff;
  --ink:       #1f3a8a;
  --numeradora: #c8342b;

  --green:    #23774a;
  --green-bg: #e3f1e9;
  --red:      #c8342b;
  --red-bg:   #fbebe9;
  --amber:    #a8620a;
  --amber-bg: #fbf0dd;

  --nav-bg:          #1f3a8a;
  --nav-bg-dark:     #1a3176;
  --nav-text:        rgba(232, 238, 255, .74);
  --nav-text-active: #ffffff;
  --nav-hover:       rgba(255, 255, 255, .09);
  --nav-active:      rgba(255, 255, 255, .16);
  --nav-border:      rgba(255, 255, 255, .2);

  --shadow-sm: 0 1px 1px rgba(23, 40, 80, .08);
  --shadow:    0 1px 2px rgba(23, 40, 80, .08), 0 6px 16px -10px rgba(23, 40, 80, .35);
  --shadow-lg: 0 20px 50px -18px rgba(23, 40, 80, .45), 0 2px 6px rgba(23, 40, 80, .12);
  --ring: 0 0 0 3px rgba(31, 58, 138, .22);
  color-scheme: light;
  background: var(--bg);
}

/* ── Carbónico de noche ── */
html[data-skin="talonario"] body.dark,
html[data-skin="talonario"] body.theme-dark {
  --bg:            #0e1320;
  --surface:       #151c2c;
  --surface-2:     #1b2436;
  --surface-3:     #232e44;
  --border:        #263149;
  --border-strong: #34415e;
  --text:          #e7ebf3;
  --text-2:        #a7b1c4;
  --text-3:        #8592ab;
  --accent:    #9db2ff;
  --accent-fg: #0e1320;
  --ink:       #9db2ff;
  --numeradora: #ff7466;
  --green:    #5bc78f;
  --green-bg: rgba(91, 199, 143, .12);
  --red:      #ff7466;
  --red-bg:   rgba(255, 116, 102, .12);
  --amber:    #f0b25a;
  --amber-bg: rgba(240, 178, 90, .12);
  --nav-bg:          #13224f;
  --nav-border:      rgba(255, 255, 255, .14);
  --ring: 0 0 0 3px rgba(157, 178, 255, .25);
  color-scheme: dark;
}

/* barra superior: el lomo azul del talonario */
html[data-skin="talonario"] .topbar { -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 0; }
html[data-skin="talonario"] .topbar-nav { background: rgba(0, 0, 0, .14); border-color: transparent; }
html[data-skin="talonario"] .nav-btn.active { background: #fff; color: var(--ink); box-shadow: none; }
html[data-skin="talonario"] body.dark .nav-btn.active { background: rgba(255,255,255,.14); color: #fff; }
html[data-skin="talonario"] .logo-text::before { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.18); animation: none; }

/* títulos */
html[data-skin="talonario"] .view-title { font-weight: 700; letter-spacing: -0.035em; }

/* botones: tinta azul plena, esquinas de papel */
html[data-skin="talonario"] .btn-primary { background: var(--ink); color: var(--accent-fg); box-shadow: 0 1px 0 rgba(0,0,0,.2); }
html[data-skin="talonario"] .chip.active,
html[data-skin="talonario"] body.dark .chip.active { background: var(--ink); color: var(--accent-fg); }

/* ── El comprobante ── */
html[data-skin="talonario"] .lista { gap: 8px; }
html[data-skin="talonario"] .card {
  border-radius: 4px;
  border-color: var(--border);
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box;
  box-shadow: var(--shadow-sm);
}
html[data-skin="talonario"] .card:hover { transform: none; box-shadow: var(--shadow); }
html[data-skin="talonario"] .card-header { position: relative; padding-left: 0; gap: 0; }
/* talón con el número de numeradora y el troquel */
html[data-skin="talonario"] .card-num {
  display: flex; align-items: center; justify-content: center;
  align-self: stretch;
  width: 86px; flex: 0 0 86px;
  margin: -16px 18px -16px 0;
  border-right: 1px dashed var(--border-strong);
  font: 600 .74rem var(--font-mono);
  letter-spacing: .06em;
  color: var(--numeradora);
  font-variant-numeric: tabular-nums;
  background:
    radial-gradient(circle at 100% 50%, var(--bg) 0 4px, transparent 4.5px) 0 0 / 100% 12px repeat-y;
}
html[data-skin="talonario"] .card-left { flex: 1 1 auto; }
html[data-skin="talonario"] .card-programa { font-weight: 650; letter-spacing: -0.015em; }
html[data-skin="talonario"] .card-episodio,
html[data-skin="talonario"] .card-estudio-inline { border-radius: 3px; background: var(--surface-2); }
html[data-skin="talonario"] .card-monto { color: var(--text); font-weight: 600; }
html[data-skin="talonario"] .card.pagada { opacity: 1; }

/* el sello de goma: ver «Correcciones de la revisión final» */

/* botón de pago como casillero del recibo */
html[data-skin="talonario"] .btn-pago { border-radius: 3px; }
html[data-skin="talonario"] .badge-antiguedad { border-radius: 3px !important; }

/* ── «Te deben»: el talón resumen ── */
html[data-skin="talonario"] .deuda {
  border-radius: 4px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
html[data-skin="talonario"] .deuda-titulo { font-weight: 700; color: var(--ink); }
html[data-skin="talonario"] .deuda-monto { color: var(--numeradora); }

/* separador de mes: total al margen, como la suma al pie del talonario */
html[data-skin="talonario"] .mes-separator-label { color: var(--ink) !important; }
html[data-skin="talonario"] .mes-separator::after { background: repeating-linear-gradient(90deg, var(--border-strong) 0 4px, transparent 4px 8px); }
html[data-skin="talonario"] .mes-separator-total { color: var(--text-2); }

/* estadísticas y tarifas: fichas de papel */
html[data-skin="talonario"] .stat-card,
html[data-skin="talonario"] .tarifa-card,
html[data-skin="talonario"] .estudio-card,
html[data-skin="talonario"] .mes-bloque-card { border-radius: 4px; box-shadow: var(--shadow-sm); }
html[data-skin="talonario"] .stat-card.red .stat-card-value { color: var(--numeradora); }
html[data-skin="talonario"] .tarifa-nombre { color: var(--ink); }

/* modales como formulario impreso */
html[data-skin="talonario"] .modal-panel,
html[data-skin="talonario"] .modal-box { border-radius: 8px !important; border: 0 !important; }

/* login / registro / admin */
html[data-skin="talonario"] body.auth-page { background: var(--bg) !important; }
html[data-skin="talonario"] .auth-card { border-radius: 8px !important; border: 0 !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-skin="talonario"] .login-logo-text::before,
html[data-skin="talonario"] .sidebar-logo-text::before { background: var(--numeradora); animation: none; box-shadow: none; }
html[data-skin="talonario"] .admin-page .sidebar { background: var(--nav-bg) !important; border-right: 0 !important; }
html[data-skin="talonario"] .admin-page .sidebar,
html[data-skin="talonario"] .admin-page .sidebar-user,
html[data-skin="talonario"] .admin-page .sidebar-logo-text { color: #fff !important; }
html[data-skin="talonario"] .admin-page .nav-item { color: var(--nav-text) !important; }
html[data-skin="talonario"] .admin-page .nav-item:hover { background: var(--nav-hover) !important; color: #fff !important; }
html[data-skin="talonario"] .admin-page .nav-item.active { background: #fff !important; color: var(--ink) !important; }
html[data-skin="talonario"] .admin-page .lang-btn { color: #fff !important; border-color: rgba(255,255,255,.25) !important; }

@media (max-width: 768px) {
  /* en celular el talón se vuelve una línea de numeradora sobre el título */
  html[data-skin="talonario"] .card-header { padding-left: 16px; display: flex; flex-wrap: wrap; }
  html[data-skin="talonario"] .card-num {
    flex: 1 1 100%; width: auto; justify-content: flex-start; align-self: auto;
    margin: 0 0 4px; border-right: 0; background: none; font-size: .66rem;
  }
}

/* ── Piso de legibilidad: nada funcional por debajo de 11px ── */
html[data-skin="talonario"] .nav-badge,
html[data-skin="talonario"] .deuda-moneda,
html[data-skin="talonario"] .mes-separator-label,
html[data-skin="talonario"] .card-episodio,
html[data-skin="talonario"] .card-estudio-inline,
html[data-skin="talonario"] .badge-antiguedad,
html[data-skin="talonario"] .moneda-badge,
html[data-skin="talonario"] .btn-pago,
html[data-skin="talonario"] .loops-count,
html[data-skin="talonario"] .label-opt,
html[data-skin="talonario"] .stat-card-label,
html[data-skin="talonario"] .admin-page th,
html[data-skin="talonario"] .admin-page .kpi-label,
html[data-skin="talonario"] .perfil-precio-metodos,
html[data-skin="talonario"] .pwd-label-mini,
html[data-skin="talonario"] .pwd-strength-label,
html[data-skin="talonario"] .footer { font-size: .76rem !important; }

/* rótulos de formulario en frase, no en mayúsculas (son largos) */
html[data-skin="talonario"] .field label,
html[data-skin="talonario"] .detail-item label {
  text-transform: none; letter-spacing: 0; font-size: .8rem; font-weight: 600; color: var(--text-2);
}
html[data-skin="talonario"] .admin-page th { text-transform: none; letter-spacing: 0; }
html[data-skin="talonario"] .admin-page .kpi-label { text-transform: none; letter-spacing: 0; }
html[data-skin="talonario"] .modal-panel, html[data-skin="talonario"] .modal-box { box-shadow: var(--shadow-lg) !important; }

/* ── Pantallas de acceso: el logo y el idioma van en tinta, no en blanco de barra ── */
html[data-skin="talonario"] .auth-page .login-logo-text,
html[data-skin="talonario"] .auth-page .logo-text { color: var(--ink) !important; }
html[data-skin="talonario"] .auth-page .lang-btn { color: var(--text-2) !important; border-color: var(--border-strong) !important; }
html[data-skin="talonario"] .auth-page .lang-btn:hover { color: var(--text) !important; background: var(--surface-2) !important; }
html[data-skin="talonario"] .auth-alt,
html[data-skin="talonario"] .login-link { margin-top: 18px; text-align: center; font-size: .86rem; color: var(--text-2); }
html[data-skin="talonario"] .admin-page .sidebar-user,
html[data-skin="talonario"] .admin-page .sidebar-user strong { color: #fff !important; }
html[data-skin="talonario"] .admin-page .sidebar-user { opacity: .85; }
html[data-skin="talonario"] .auth-page .logo-text::before,
html[data-skin="talonario"] .auth-page .login-logo-text::before { background: var(--numeradora); box-shadow: none; }
html[data-skin="talonario"] .gratis-badge { background: var(--green-bg) !important; color: var(--green) !important; border: 1px solid color-mix(in srgb, var(--green) 30%, transparent) !important; }
html[data-skin="talonario"] .admin-page #pwd-modal-valor { color: var(--text) !important; }


/* ═══════════ Correcciones de la revisión final ═══════════ */

/* 4. sello en la fila, después de las etiquetas; filas pagadas legibles (sin opacidad) */
html[data-skin="talonario"] .card-sello {
  all: unset;
  display: inline-block; flex: 0 0 auto;
  width: 104px; height: 32px; margin-left: 6px;
  color: var(--green);
  rotate: -7deg;
  opacity: .9;
  pointer-events: none;
}
html[data-skin="talonario"] body:not(.dark) .card-sello { mix-blend-mode: multiply; }
html[data-skin="talonario"] .card.sello-nuevo .card-sello { animation: selloCae .42s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes selloCae {
  0%   { opacity: 0; scale: 1.8; rotate: -1deg; }
  65%  { opacity: 1; scale: .95; rotate: -8deg; }
  100% { opacity: .9; scale: 1; rotate: -7deg; }
}
html[data-skin="talonario"] .card.pagada .card-left,
html[data-skin="talonario"] .card.pagada .card-loops,
html[data-skin="talonario"] .card.pagada .card-monto { opacity: 1; }
html[data-skin="talonario"] .card.pagada .card-programa { color: var(--text-2); }
html[data-skin="talonario"] .card.pagada .card-episodio,
html[data-skin="talonario"] .card.pagada .card-estudio-inline { color: var(--text-2); }

/* 2. loops visibles en celular, en mono junto al monto */
html[data-skin="talonario"] .card-loops { font-family: var(--font-mono); color: var(--text-2); }
@media (max-width: 768px) {
  html[data-skin="talonario"] .card-loops { display: inline; order: -1; font-size: .78rem; }
  html[data-skin="talonario"] .card-sello { width: 88px; height: 28px; }
}

/* 3. la firma del pie nunca queda bajo el botón flotante */
@media (max-width: 768px) {
  html[data-skin="talonario"] .app-footer { padding-bottom: calc(54px + 32px + env(safe-area-inset-bottom)); }
}
html[data-skin="talonario"] .credito { color: inherit !important; text-decoration: none !important; font-weight: 600; white-space: nowrap; }
html[data-skin="talonario"] .credito:hover { color: var(--ink) !important; }

/* 6. admin: una sola tira de totales del talonario, alineada a la tabla */
html[data-skin="talonario"] .admin-page .kpi-grid {
  display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 !important;
  background: var(--surface); border-radius: 4px; box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
}
html[data-skin="talonario"] .admin-page .kpi {
  background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  border-right: 1px dashed var(--border-strong) !important; padding: 16px 20px !important; min-width: 0 !important;
}
html[data-skin="talonario"] .admin-page .kpi:last-child { border-right: 0 !important; }
html[data-skin="talonario"] .admin-page .kpi-value { font-family: var(--font-mono) !important; font-size: 1.9rem !important; }
html[data-skin="talonario"] .admin-page .kpi-value.red { color: var(--numeradora) !important; }
html[data-skin="talonario"] .admin-page .table-wrap { border-radius: 4px !important; box-shadow: var(--shadow-sm); border: 0 !important; }
html[data-skin="talonario"] .admin-page td { font-variant-numeric: tabular-nums; }
@media (max-width: 768px) {
  html[data-skin="talonario"] .admin-page .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-skin="talonario"] .admin-page .kpi:nth-child(2) { border-right: 0 !important; }
}

/* 7. Estadísticas: cifras en mono; desglose plano (un libro por mes, monedas como subtítulos) */
html[data-skin="talonario"] .stat-card-value,
html[data-skin="talonario"] .stat-card-sub,
html[data-skin="talonario"] .stat-card-anterior,
html[data-skin="talonario"] .mes-row-value,
html[data-skin="talonario"] .estudio-stat-value,
html[data-skin="talonario"] .detalle-monto,
html[data-skin="talonario"] .detalle-fecha { font-family: var(--font-mono) !important; font-variant-numeric: tabular-nums; }
html[data-skin="talonario"] .mes-stat {
  background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  padding: 10px 0 4px !important; border-top: 1px dashed var(--border-strong) !important;
}
html[data-skin="talonario"] .mes-stat:first-of-type { border-top: 0 !important; }
html[data-skin="talonario"] .moneda-tag { background: transparent !important; border: 0 !important; padding: 0 !important; color: var(--ink) !important; font-weight: 700; }
html[data-skin="talonario"] .estudio-card { border-left: 1px solid var(--border); }
html[data-skin="talonario"] .estudio-badge { border-radius: 3px; font-size: .76rem; }

/* 8. House: un solo borde (el del contenedor) */
html[data-skin="talonario"] .house-input-wrap input {
  border: 0 !important; background: transparent !important; box-shadow: none !important; min-height: 0;
}
html[data-skin="talonario"] .house-input-wrap { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); }
html[data-skin="talonario"] .house-input-wrap:focus-within { border-color: var(--border-strong); box-shadow: var(--ring); background: var(--surface); }

/* Te deben: sin columna vacía, el ranking ocupa su lugar natural */
html[data-skin="talonario"] .deuda { align-items: start; }
html[data-skin="talonario"] .badge-antiguedad,
html[data-skin="talonario"] .card-episodio,
html[data-skin="talonario"] .card-estudio-inline,
html[data-skin="talonario"] .badge-provisional { white-space: nowrap; }
html[data-skin="talonario"] .card-left { min-width: 0; flex-wrap: wrap; row-gap: 6px; }

/* ── Celular: fila-comprobante con pie fijo y sello en la línea del número ── */
@media (max-width: 768px) {
  html[data-skin="talonario"] .card-header { position: relative; }
  html[data-skin="talonario"] .card-sello {
    position: absolute; top: 8px; right: 12px; margin: 0;
    width: 84px; height: 26px;
  }
  html[data-skin="talonario"] .card-right {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: auto auto;
    column-gap: 8px; row-gap: 0;
    align-items: center;
    width: 100%; flex: 1 1 100%;
    margin-top: 4px;
  }
  html[data-skin="talonario"] .card-right .card-loops { grid-column: 1; grid-row: 1; order: 0; line-height: 1.2; }
  html[data-skin="talonario"] .card-right .card-monto { grid-column: 1; grid-row: 2; display: inline-flex !important; margin: 0; font-size: 1.02rem; }
  html[data-skin="talonario"] .card-right .btn-pago { grid-column: 2; grid-row: 1 / span 2; white-space: nowrap; }
  html[data-skin="talonario"] .card-right .card-actions-quick { grid-column: 3; grid-row: 1 / span 2; display: flex; gap: 0; }
  html[data-skin="talonario"] .card-right .card-actions-quick .btn-icon { width: 32px; height: 32px; }
  html[data-skin="talonario"] .card-right .card-chevron { display: none; }
  html[data-skin="talonario"] .card-left { padding-right: 0; }
}

/* ── Alineado con DESIGN.md (desvíos señalados por el documentador) ── */
html[data-skin="talonario"] .lang-opt.active::before { content: none; }
html[data-skin="talonario"] .lang-opt.active { color: var(--ink); font-weight: 700; box-shadow: inset 2px 0 0 var(--ink); }
/* +60 días: ámbar de antigüedad (sin naranja suelto), +90: rojo numeradora */
html[data-skin="talonario"] .badge-antiguedad.vencida-60 { color: var(--amber) !important; border-color: color-mix(in srgb, var(--amber) 45%, transparent) !important; background: var(--amber-bg) !important; }
html[data-skin="talonario"] .tour-spotlight { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--ink), 0 8px 24px -6px rgba(31, 58, 138, .35) !important; }
html[data-skin="talonario"] .stat-card-label { text-transform: none; letter-spacing: 0; font-weight: 600; }
html[data-skin="talonario"] .chip, html[data-skin="talonario"] .nav-btn { border-radius: 4px; }
html[data-skin="talonario"] .filter-chips, html[data-skin="talonario"] .topbar-nav { border-radius: 6px; }
html[data-skin="talonario"] .deuda-monto { font-weight: 600; }
html[data-skin="talonario"] .admin-page td.tabla-vacia { padding: 28px 20px !important; text-align: center; color: var(--text-2); font-size: .86rem; }
html[data-skin="talonario"] a.mobile-nav-btn { text-decoration: none; }
html[data-skin="talonario"] .mobile-nav-admin { color: var(--ink); font-weight: 600; }