/* Los tres mundos. Cada uno presta tipografía, paleta, densidad y una movida firma
   (el sello del cierre); la estructura y los controles son los mismos. */

:root, [data-tema] {
  --r: 10px; --r-sm: 6px; --r-ctl: 8px;
  --fs-body: 15px; --fs-h1: 30px; --fs-h2: 18px; --fs-cifra: 28px;
  --w-display: 600; --w-cifra: 600; --ls-display: -.01em;
}

/* ============================================================ PRECINTO */
[data-tema="precinto"] {
  --font-ui: "Barlow", system-ui, sans-serif;
  --font-display: "Barlow Semi Condensed", "Barlow", sans-serif;
  --font-num: "Barlow Semi Condensed", "Barlow", sans-serif;
  --font-serie: "Barlow Semi Condensed", sans-serif;
  --fs-h1: 34px; --fs-cifra: 32px; --w-display: 700; --w-cifra: 600; --ls-display: 0;
  --r: 4px; --r-sm: 3px; --r-ctl: 4px;

  --bg: #DCE4E8; --surface: #F3F6F7; --field: #FFFFFF; --th-bg: #E8EEF1;
  --ink: #15202A; --ink-2: #33434F; --muted: #52616D; --placeholder: #6B7A86;
  --line: #CCD6DB; --line-strong: #A3B1BA; --hover: #E6ECEF; --chip: #E1E8EC;
  --sel: #1E2A33; --sel-ink: #F3F6F7; --sel-row: #DDE6EB; --focus: #2D6E93; --link: #23577A;
  --accent: #1E2A33; --accent-ink: #F3F6F7; --accent-hover: #2C3B47;
  --audit: #C8202F; --audit-ink: #FFFFFF;
  --good: #1D6B4C; --good-bg: #D5EBDF; --warn: #7A5300; --warn-bg: #F7E7B4; --bad: #A61B26; --bad-bg: #F6D9DB;
  --rail-bg: #1E2A33; --rail-ink: #E3EAEE; --rail-muted: #9DAEBA; --rail-line: #33424E;
  --rail-hover: #28363F; --rail-active: #DCE4E8; --rail-active-ink: #15202A;
  --marca-bg: #2C3B47; --marca-ink: #DCE4E8;
  --serie-1: #2F4858; --serie-2: #2D6E93; --serie-hoy: #F2C230;
  --tip-bg: #1E2A33; --tip-ink: #F3F6F7;
  --cifra-principal-bg: #1E2A33; --cifra-principal-ink: #F3F6F7; --cifra-principal-muted: #A9BAC5;
}
[data-tema="precinto"] .cifra .etq, [data-tema="precinto"] thead th, [data-tema="precinto"] .campo > span {
  text-transform: uppercase; letter-spacing: .06em; font-size: 12px;
}

/* El precinto: tira roja con dientes y número de serie. */
[data-tema="precinto"] .sello {
  --diente: radial-gradient(circle at 50% 0, transparent 4px, #000 4.5px) top / 14px 51% repeat-x,
            radial-gradient(circle at 50% 100%, transparent 4px, #000 4.5px) bottom / 14px 51% repeat-x;
  position: relative; display: grid; gap: 2px; min-width: 300px; padding: 14px 22px 13px 56px;
  background: #C8202F; color: #fff; -webkit-mask: var(--diente); mask: var(--diente);
}
[data-tema="precinto"] .sello::before {
  content: ""; position: absolute; left: 16px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%;
  background: #8E1520; box-shadow: inset 0 0 0 5px #C8202F, inset 0 0 0 7px #8E1520;
}
[data-tema="precinto"] .sello .sello-etq { font: 600 11px/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
[data-tema="precinto"] .sello .sello-num { font: 700 26px/1.05 var(--font-serie); letter-spacing: .06em; }
[data-tema="precinto"] .sello .sello-pie { font-size: 12px; opacity: .85; }
[data-tema="precinto"] .sello.abierto {
  -webkit-mask: none; mask: none; background: transparent; color: var(--ink);
  border: 2px dashed var(--line-strong); padding-left: 22px;
}
[data-tema="precinto"] .sello.abierto::before { display: none; }
[data-tema="precinto"] .sello.abierto .sello-num { color: #66737D; }
[data-tema="precinto"] .sello.violado, [data-tema="precinto"] .void {
  background-color: #C8202F;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='34'%3E%3Cg transform='rotate(-12 42 17)' fill='none' stroke='%23ffffff' stroke-opacity='.3' stroke-width='3'%3E%3Cpath d='M12 9l6 16 6-16M30 9h9v16h-9zM45 9v16M51 9h6a5 5 0 0 1 5 5v6a5 5 0 0 1-5 5h-6z'/%3E%3C/g%3E%3C/svg%3E");
}
[data-tema="precinto"] tr.void td { background: #F6D9DB; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='34'%3E%3Cg transform='rotate(-12 42 17)' fill='none' stroke='%23C8202F' stroke-opacity='.2' stroke-width='3'%3E%3Cpath d='M12 9l6 16 6-16M30 9h9v16h-9zM45 9v16M51 9h6a5 5 0 0 1 5 5v6a5 5 0 0 1-5 5h-6z'/%3E%3C/g%3E%3C/svg%3E");  background-attachment: fixed; }
[data-tema="precinto"] .caja-bolsa { border-top: 4px solid var(--line-strong); }
[data-tema="precinto"] .caja-bolsa.cuadra { border-top-color: #1D6B4C; }
[data-tema="precinto"] .caja-bolsa.faltante, [data-tema="precinto"] .caja-bolsa.sobrante { border-top-color: #C8202F; }

/* ============================================================ TALONARIO */
[data-tema="talonario"] {
  --font-ui: "Source Sans 3", system-ui, sans-serif;
  --font-display: "Source Sans 3", sans-serif;
  --font-num: "Source Sans 3", sans-serif;
  --font-serie: "Spline Sans Mono", ui-monospace, monospace;
  --fs-body: 15.5px; --fs-h1: 30px; --fs-cifra: 29px; --w-display: 700; --w-cifra: 700;
  --r: 2px; --r-sm: 2px; --r-ctl: 3px;

  --bg: #E4E8E1; --surface: #F6F8F3; --field: #FFFFFF; --th-bg: #EDF1EA;
  --ink: #1C2B38; --ink-2: #34465A; --muted: #556474; --placeholder: #6E7C89;
  --line: #CFD7CB; --line-strong: #A9B6A7; --hover: #EAEFE6; --chip: #E3E9DF;
  --sel: #2F5DA8; --sel-ink: #FFFFFF; --sel-row: #E1E9F5; --focus: #2F5DA8; --link: #234C8F;
  --accent: #2F5DA8; --accent-ink: #FFFFFF; --accent-hover: #264E8F;
  --audit: #B23A3A; --audit-ink: #FFFFFF;
  --good: #276B43; --good-bg: #D9EBDD; --warn: #7D5600; --warn-bg: #F3E6BF; --bad: #A33232; --bad-bg: #F4DCDA;
  --rail-bg: #22313F; --rail-ink: #E6ECF0; --rail-muted: #A3B2BF; --rail-line: #35475A;
  --rail-hover: #2B3D4F; --rail-active: #F6F8F3; --rail-active-ink: #1C2B38;
  --marca-bg: #2F5DA8; --marca-ink: #FFFFFF;
  --serie-1: #2F5DA8; --serie-2: #6B8FC7; --serie-hoy: #B88A1E;
  --tip-bg: #22313F; --tip-ink: #F6F8F3;
  --cifra-principal-bg: #F6F8F3; --cifra-principal-ink: #1C2B38; --cifra-principal-muted: #556474;
}
/* Fondo de papel de seguridad: un guilloche muy suave en el rail. */
[data-tema="talonario"] .rail {
  background-image: repeating-radial-gradient(circle at 0 100%, transparent 0 9px, rgb(255 255 255 / .035) 9px 10px),
                    repeating-radial-gradient(circle at 100% 0, transparent 0 13px, rgb(255 255 255 / .03) 13px 14px);
}
/* El talón: el sello del cierre es la colilla de una chequera, con el borde perforado. */
[data-tema="talonario"] .sello {
  position: relative; display: grid; gap: 3px; min-width: 300px; padding: 14px 20px 14px 30px;
  background: #F6F8F3; border: 1px solid #A9B6A7; color: var(--ink);
  background-image: radial-gradient(circle at 0 50%, #C3CCBF 6px, transparent 6.5px);
  background-size: 14px 18px; background-repeat: repeat-y; background-position: -7px 0;
  border-left: 1px dashed #A9B6A7;
}
[data-tema="talonario"] .sello::after {
  content: "DUPLICADO AUDITADO"; position: absolute; right: 14px; top: 10px; font: 600 10px/1 var(--font-serie);
  letter-spacing: .12em; color: #2F5DA8; border: 1.5px solid #2F5DA8; padding: 3px 5px; transform: rotate(-4deg);
}
[data-tema="talonario"] .sello .sello-etq { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
[data-tema="talonario"] .sello .sello-num { font: 600 22px/1.1 var(--font-serie); color: #2F5DA8; }
[data-tema="talonario"] .sello .sello-pie { font-size: 12.5px; color: var(--muted); }
[data-tema="talonario"] .sello.abierto::after { content: "ORIGINAL SIN DUPLICAR"; color: #7D5600; border-color: #7D5600; }
[data-tema="talonario"] .sello.abierto .sello-num { color: #6F7F8C; }
[data-tema="talonario"] .sello.violado { border-color: #B23A3A; }
[data-tema="talonario"] .sello.violado::after { content: "DUPLICADO NO COINCIDE"; color: #B23A3A; border-color: #B23A3A; }
[data-tema="talonario"] .sello.violado .sello-num { color: #B23A3A; text-decoration: line-through; }
[data-tema="talonario"] td.talon, [data-tema="talonario"] th.talon {
  border-left: 2px dashed #A9B6A7; background: #EEF2EA; font-family: var(--font-serie); font-size: 12px; color: #2F5DA8;
}
[data-tema="talonario"] tr.void td { background: #F4DCDA; }
[data-tema="talonario"] .cifras { border-style: solid; }
[data-tema="talonario"] .cifra.principal { background: #E1E9F5; }
[data-tema="talonario"] .cifra.principal .val { color: #234C8F; }
[data-tema="talonario"] .caja-bolsa { border-top: 3px double var(--line-strong); }

/* ============================================================ ESTÁNDAR */
[data-tema="estandar"] {
  --font-ui: "Inter", system-ui, sans-serif;
  --font-display: "Inter", sans-serif;
  --font-num: "Inter", sans-serif;
  --font-serie: "Inter", sans-serif;
  --fs-body: 14.5px; --fs-h1: 28px; --fs-cifra: 27px; --w-display: 650; --w-cifra: 650; --ls-display: -.02em;
  --r: 12px; --r-sm: 8px; --r-ctl: 8px;

  --bg: #F6F7F9; --surface: #FFFFFF; --field: #FFFFFF; --th-bg: #F8FAFC;
  --ink: #0F172A; --ink-2: #334155; --muted: #5B6779; --placeholder: #7A8597;
  --line: #E4E8EE; --line-strong: #CBD3DD; --hover: #F1F4F8; --chip: #EEF2F6;
  --sel: #2563EB; --sel-ink: #FFFFFF; --sel-row: #EAF1FE; --focus: #2563EB; --link: #1D4ED8;
  --accent: #2563EB; --accent-ink: #FFFFFF; --accent-hover: #1D4ED8;
  --audit: #DC2626; --audit-ink: #FFFFFF;
  --good: #15803D; --good-bg: #DCFCE7; --warn: #A15C07; --warn-bg: #FEF3C7; --bad: #B91C1C; --bad-bg: #FEE2E2;
  --rail-bg: #FFFFFF; --rail-ink: #1E293B; --rail-muted: #64748B; --rail-line: #E4E8EE;
  --rail-hover: #F1F4F8; --rail-active: #EAF1FE; --rail-active-ink: #1D4ED8;
  --marca-bg: #0F172A; --marca-ink: #FFFFFF;
  --serie-1: #2563EB; --serie-2: #7C9CF0; --serie-hoy: #F59E0B;
  --tip-bg: #0F172A; --tip-ink: #F8FAFC;
  --cifra-principal-bg: #FFFFFF; --cifra-principal-ink: #0F172A; --cifra-principal-muted: #5B6779;
}
@media (prefers-color-scheme: dark) {
  [data-tema="estandar"] {
    --bg: #0B1120; --surface: #111a2e; --field: #0F172A; --th-bg: #131d33;
    --ink: #E2E8F0; --ink-2: #CBD5E1; --muted: #94A3B8; --placeholder: #7C8AA0;
    --line: #1F2A40; --line-strong: #33415A; --hover: #18233a; --chip: #1A2540;
    --sel-row: #172a52; --link: #93B4FF; --accent: #3B82F6; --accent-hover: #2563EB;
    --good: #4ADE80; --good-bg: #0f2e1c; --warn: #FBBF24; --warn-bg: #33270a; --bad: #F87171; --bad-bg: #3a1414;
    --rail-bg: #0E1628; --rail-ink: #E2E8F0; --rail-muted: #94A3B8; --rail-line: #1F2A40;
    --rail-hover: #16213a; --rail-active: #172a52; --rail-active-ink: #BFD3FF;
    --marca-bg: #3B82F6; --serie-1: #60A5FA; --serie-2: #A5B4FC;
    --tip-bg: #E2E8F0; --tip-ink: #0B1120; --audit: #EF4444;
    --cifra-principal-bg: #111a2e; --cifra-principal-ink: #E2E8F0; --cifra-principal-muted: #94A3B8;
  }
}
[data-tema="estandar"] .cifras { border: 0; background: transparent; gap: 14px; }
[data-tema="estandar"] .cifra { background: var(--surface); border: 1px solid var(--line) !important; border-radius: var(--r); }
[data-tema="estandar"] .sello {
  display: grid; gap: 2px; padding: 10px 14px; border-radius: var(--r); background: var(--good-bg); color: var(--good); min-width: 260px;
}
[data-tema="estandar"] .sello .sello-etq { font-size: 12px; font-weight: 600; }
[data-tema="estandar"] .sello .sello-num { font-weight: 650; font-size: 18px; letter-spacing: .02em; }
[data-tema="estandar"] .sello .sello-pie { font-size: 12px; opacity: .9; }
[data-tema="estandar"] .sello.abierto { background: var(--warn-bg); color: var(--warn); }
[data-tema="estandar"] .sello.abierto .sello-num { opacity: .7; }
[data-tema="estandar"] .sello.violado { background: var(--bad-bg); color: var(--bad); }
[data-tema="estandar"] tr.void td { background: var(--bad-bg); }