/* Sistema visual de la web: papel cálido, tinta de marca y color solo para estados.
 * Profundidad: solo trazos finos (herramienta densa); nada de sombras salvo menús flotantes.
 * Escala tipográfica 1.2 desde 14 px; cifras tabulares en todo lo que cambia.
 * --marca y --marca-tinta llegan en el atributo style del <html> desde la cuenta.
 */
:root {
  color-scheme: light;
  --marca: #3d4e81;
  --marca-tinta: #fbfaf7;
  --papel: oklch(0.972 0.005 85);
  --hoja: oklch(0.993 0.003 85);
  --hundido: oklch(0.953 0.006 85);
  --tinta: oklch(0.25 0.01 80);
  --tinta-2: oklch(0.43 0.01 80);
  --tinta-3: oklch(0.55 0.008 80);
  --tinta-4: oklch(0.68 0.006 80);
  --trazo: oklch(0.3 0.01 80 / 0.13);
  --trazo-suave: oklch(0.3 0.01 80 / 0.07);
  --trazo-fuerte: oklch(0.3 0.01 80 / 0.24);
  --ok: oklch(0.54 0.12 152);
  --aviso: oklch(0.66 0.14 72);
  --peligro: oklch(0.54 0.18 27);
  --ok-fondo: oklch(0.95 0.035 152);
  --aviso-fondo: oklch(0.955 0.045 85);
  --peligro-fondo: oklch(0.95 0.03 27);
  --marca-suave: color-mix(in oklch, var(--marca) 11%, var(--hoja));
  --marca-texto: color-mix(in oklch, var(--marca) 82%, var(--tinta));
  --sombra-flotante: 0 0 0 1px var(--trazo), 0 8px 24px oklch(0.2 0.01 80 / 0.12);
  --sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  --t-xs: 11.5px; --t-s: 12.5px; --t-m: 14px; --t-l: 16px; --t-xl: 19px; --t-2xl: 23px; --t-3xl: 34px;
  --r-s: 4px; --r-m: 6px; --r-l: 10px;
  --salida: cubic-bezier(0.23, 1, 0.32, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --papel: oklch(0.185 0.006 80); --hoja: oklch(0.215 0.006 80); --hundido: oklch(0.165 0.006 80);
    --tinta: oklch(0.93 0.006 85); --tinta-2: oklch(0.78 0.007 85); --tinta-3: oklch(0.66 0.007 85); --tinta-4: oklch(0.5 0.006 85);
    --trazo: oklch(0.95 0.01 85 / 0.1); --trazo-suave: oklch(0.95 0.01 85 / 0.06); --trazo-fuerte: oklch(0.95 0.01 85 / 0.2);
    --ok: oklch(0.7 0.13 152); --aviso: oklch(0.78 0.13 78); --peligro: oklch(0.68 0.16 27);
    --ok-fondo: oklch(0.3 0.05 152); --aviso-fondo: oklch(0.31 0.05 78); --peligro-fondo: oklch(0.3 0.06 27);
    --marca-suave: color-mix(in oklch, var(--marca) 26%, var(--hoja));
    --marca-texto: color-mix(in oklch, var(--marca) 45%, var(--tinta));
    --sombra-flotante: 0 0 0 1px var(--trazo-fuerte), 0 8px 24px oklch(0 0 0 / 0.4);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --papel: oklch(0.185 0.006 80); --hoja: oklch(0.215 0.006 80); --hundido: oklch(0.165 0.006 80);
  --tinta: oklch(0.93 0.006 85); --tinta-2: oklch(0.78 0.007 85); --tinta-3: oklch(0.66 0.007 85); --tinta-4: oklch(0.5 0.006 85);
  --trazo: oklch(0.95 0.01 85 / 0.1); --trazo-suave: oklch(0.95 0.01 85 / 0.06); --trazo-fuerte: oklch(0.95 0.01 85 / 0.2);
  --ok: oklch(0.7 0.13 152); --aviso: oklch(0.78 0.13 78); --peligro: oklch(0.68 0.16 27);
  --ok-fondo: oklch(0.3 0.05 152); --aviso-fondo: oklch(0.31 0.05 78); --peligro-fondo: oklch(0.3 0.06 27);
  --marca-suave: color-mix(in oklch, var(--marca) 26%, var(--hoja));
  --marca-texto: color-mix(in oklch, var(--marca) 45%, var(--tinta));
  --sombra-flotante: 0 0 0 1px var(--trazo-fuerte), 0 8px 24px oklch(0 0 0 / 0.4);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-size-adjust: 100%; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 var(--t-m)/1.5 var(--sans); }
h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; letter-spacing: -0.005em; }
h2 { font-size: var(--t-l); }
h3 { font-size: var(--t-m); }
p { margin: 0 0 0.75em; text-wrap: pretty; }
a { color: var(--marca-texto); text-underline-offset: 2px; }
code, kbd { font-family: var(--mono); font-size: 0.92em; background: var(--hundido); padding: 0.1em 0.35em; border-radius: var(--r-s); }
pre { font: var(--t-s)/1.55 var(--mono); background: var(--hundido); padding: 12px 14px; border-radius: var(--r-m); overflow-x: auto; margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.cifra, td.num, .num { font-variant-numeric: tabular-nums; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--hoja); padding: 8px 12px; border-radius: var(--r-m); }
.saltar:focus { left: 8px; }
.tenue { color: var(--tinta-3); }
.pequeno { font-size: var(--t-s); }
[hidden] { display: none !important; }

/* ---- marco ---- */
.marco { display: grid; grid-template-columns: 216px minmax(0, 1fr); min-height: 100dvh; }
.lateral { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; border-right: 1px solid var(--trazo); background: var(--papel); }
.lateral-marca { display: flex; align-items: center; gap: 10px; padding: 16px 16px 14px; }
.sello { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-m); background: var(--marca); color: var(--marca-tinta); font-weight: 650; font-size: var(--t-m); flex: none; }
.lateral-nombre { font-weight: 600; font-size: var(--t-m); line-height: 1.25; }
.nav { flex: 1; overflow-y: auto; padding: 4px 8px 12px; }
.nav-seccion { margin: 16px 10px 4px; font-size: var(--t-xs); font-weight: 600; color: var(--tinta-3); letter-spacing: 0.04em; text-transform: uppercase; }
.nav-enlace { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--r-m); color: var(--tinta-2); text-decoration: none; font-weight: 500; transition: background-color 120ms, color 120ms; }
.nav-enlace:hover { background: var(--hundido); color: var(--tinta); }
.nav-enlace[aria-current="page"] { background: var(--marca-suave); color: var(--marca-texto); }
.nav-enlace .icono { flex: none; opacity: 0.85; }
.nav-cuenta { margin-left: auto; display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--marca); color: var(--marca-tinta); font: 600 var(--t-xs)/1 var(--sans); }
.lateral-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 12px 12px 16px; border-top: 1px solid var(--trazo-suave); }
.lateral-pie form { margin: 0; }
.quien { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.quien strong { font-weight: 600; font-size: var(--t-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quien small { color: var(--tinta-3); font-size: var(--t-xs); }
.principal { min-width: 0; display: flex; flex-direction: column; }
.barra { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 24px; background: color-mix(in oklch, var(--papel) 92%, transparent); border-bottom: 1px solid var(--trazo-suave); backdrop-filter: saturate(1.2) blur(6px); }
.barra-titulo { flex: 1; min-width: 0; }
.barra h1 { font-size: var(--t-xl); line-height: 1.2; }
.barra-sub { margin: 2px 0 0; color: var(--tinta-3); font-size: var(--t-s); }
.barra-acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.selector-cuenta { margin: 0; }
.enlace-manual { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 8px; border-radius: var(--r-m); color: var(--tinta-3); font-size: var(--t-s); text-decoration: none; white-space: nowrap; transition: background-color 120ms, color 120ms; }
.enlace-manual:hover { background: var(--hundido); color: var(--tinta); }
@media (max-width: 640px) { .texto-largo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.contenido { width: 100%; max-width: 1240px; padding: 20px 24px 48px; }
.contenido-completo { max-width: none; }
.contenido:focus { outline: none; }
.barra .solo-movil { display: none; }
[data-theme="dark"] .si-claro, :root:not([data-theme]) .si-oscuro { display: none; }
[data-theme="light"] .si-oscuro { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .si-oscuro { display: inline; } :root:not([data-theme]) .si-claro { display: none; } }

/* ---- controles ---- */
.boton, .boton-icono { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 500 var(--t-m)/1 var(--sans); border-radius: var(--r-m); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color 120ms, border-color 120ms, color 120ms, transform 100ms var(--salida); }
.boton { min-height: 34px; padding: 0 14px; border: 1px solid transparent; background: var(--marca); color: var(--marca-tinta); }
.boton:hover { background: color-mix(in oklch, var(--marca) 88%, var(--tinta)); }
.boton:active, .boton-icono:active { transform: scale(0.97); }
.boton-sutil { background: var(--hoja); color: var(--tinta); border-color: var(--trazo-fuerte); }
.boton-sutil:hover { background: var(--hundido); }
.boton-peligro { background: var(--peligro); color: oklch(0.99 0.005 85); }
.boton-peligro:hover { background: color-mix(in oklch, var(--peligro) 85%, var(--tinta)); }
.boton-texto { background: none; color: var(--marca-texto); border-color: transparent; padding: 0 6px; }
.boton-texto:hover { background: var(--hundido); }
.boton-pequeno { min-height: 28px; padding: 0 10px; font-size: var(--t-s); }
.boton[disabled], .boton[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.boton[aria-busy="true"] { cursor: progress; opacity: 0.7; }
.boton-icono { width: 36px; height: 36px; border: 1px solid transparent; background: none; color: var(--tinta-2); }
.boton-icono:hover { background: var(--hundido); color: var(--tinta); }
input:not([type]), input[type=text], input[type=search], input[type=password], input[type=email], input[type=url], input[type=tel], input[type=number], input[type=date], input[type=color], select, textarea {
  font: 400 var(--t-m)/1.3 var(--sans); color: var(--tinta); background: var(--hundido); border: 1px solid var(--trazo); border-radius: var(--r-m); min-height: 34px; padding: 6px 10px; width: 100%; transition: border-color 120ms, background-color 120ms; }
input:hover, select:hover, textarea:hover { border-color: var(--trazo-fuerte); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--marca); background: var(--hoja); box-shadow: 0 0 0 3px color-mix(in oklch, var(--marca) 22%, transparent); }
input[type=color] { padding: 2px; width: 52px; }
input[type=checkbox], input[type=radio] { accent-color: var(--marca); width: 16px; height: 16px; margin: 0; }
textarea { min-height: 80px; resize: vertical; font-family: var(--mono); font-size: var(--t-s); }
label { font-weight: 500; font-size: var(--t-s); color: var(--tinta-2); }
.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo small { color: var(--tinta-3); font-size: var(--t-xs); font-weight: 400; }
.casilla { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-m); color: var(--tinta); font-weight: 400; min-height: 32px; }
.rejilla-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px 16px; }
.rejilla-form .ancho { grid-column: 1 / -1; }
.form-acciones { display: flex; gap: 8px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.filtros { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; padding: 12px 14px; margin-bottom: 16px; background: var(--hoja); border: 1px solid var(--trazo); border-radius: var(--r-l); }
.filtros .campo { width: auto; flex: 1 1 140px; max-width: 220px; }
.filtros .filtros-acciones { display: flex; gap: 6px; margin-left: auto; }

/* ---- superficies ---- */
.panel { background: var(--hoja); border: 1px solid var(--trazo); border-radius: var(--r-l); margin-bottom: 20px; }
.panel-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--trazo-suave); flex-wrap: wrap; }
.panel-cab p { margin: 0; color: var(--tinta-3); font-size: var(--t-s); }
.panel-cuerpo { padding: 16px; }
.seccion { margin: 28px 0 10px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.seccion:first-child { margin-top: 0; }
.desplegable { border-top: 1px solid var(--trazo-suave); }
.desplegable > summary { cursor: pointer; padding: 12px 16px; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 8px; }
.desplegable > summary::-webkit-details-marker { display: none; }
.desplegable > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform 150ms var(--salida); }
.desplegable[open] > summary::before { transform: rotate(45deg); }

/* ---- tablas ---- */
.tabla-marco { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.tabla th { text-align: left; font-weight: 600; color: var(--tinta-3); font-size: var(--t-xs); letter-spacing: 0.03em; text-transform: uppercase; padding: 9px 12px; border-bottom: 1px solid var(--trazo); white-space: nowrap; background: var(--hoja); position: sticky; top: 0; }
.tabla td { padding: 8px 12px; border-bottom: 1px solid var(--trazo-suave); vertical-align: middle; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover td { background: color-mix(in oklch, var(--hundido) 60%, transparent); }
.tabla th.num, .tabla td.num { text-align: right; }
.tabla td.num, .tabla td.cifra { white-space: nowrap; }
.tabla td.acciones { text-align: right; white-space: nowrap; }
.tabla a.fila-enlace { color: inherit; text-decoration: none; font-weight: 500; }
.tabla a.fila-enlace:hover { color: var(--marca-texto); text-decoration: underline; }
.tabla .inactivo td { color: var(--tinta-4); }
.paginador { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--trazo-suave); }
.paginador-cuenta { margin-right: auto; color: var(--tinta-3); font-size: var(--t-s); font-variant-numeric: tabular-nums; }

/* ---- piezas pequeñas ---- */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 7px; border-radius: 999px; font-size: var(--t-s); font-weight: 500; white-space: nowrap; background: color-mix(in oklch, var(--chip) 14%, var(--hoja)); color: var(--tinta); }
.chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--chip); flex: none; }
.etiqueta { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--r-s); font-size: var(--t-xs); font-weight: 600; background: var(--hundido); color: var(--tinta-2); white-space: nowrap; }
.etiqueta-ok { background: var(--ok-fondo); color: color-mix(in oklch, var(--ok) 70%, var(--tinta)); }
.etiqueta-aviso { background: var(--aviso-fondo); color: color-mix(in oklch, var(--aviso) 45%, var(--tinta)); }
.etiqueta-peligro { background: var(--peligro-fondo); color: color-mix(in oklch, var(--peligro) 75%, var(--tinta)); }
.etiqueta-marca { background: var(--marca-suave); color: var(--marca-texto); }
.aviso { padding: 10px 14px; border-radius: var(--r-m); margin: 0 0 16px; background: var(--hundido); }
.aviso-ok { background: var(--ok-fondo); }
.aviso-error { background: var(--peligro-fondo); }
.aviso-aviso { background: var(--aviso-fondo); }
.vacio { padding: 36px 20px; text-align: center; color: var(--tinta-2); max-width: 520px; margin: 0 auto; }
.vacio-titulo { font-weight: 600; color: var(--tinta); font-size: var(--t-l); margin-bottom: 6px; }
.secreto { display: flex; gap: 8px; align-items: center; }
.secreto code { flex: 1; padding: 8px 10px; font-size: var(--t-s); word-break: break-all; user-select: all; }
.dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; font-size: var(--t-s); }
.dl dt { color: var(--tinta-3); }
.dl dd { margin: 0; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }

/* ---- cifras en línea (no tarjetas) ---- */
.cifras { display: flex; flex-wrap: wrap; gap: 8px 36px; margin: 0 0 20px; padding: 2px 2px 0; }
.cifra-bloque { display: flex; flex-direction: column; }
.cifra-bloque dt { font-size: var(--t-xs); color: var(--tinta-3); font-weight: 500; order: 2; }
.cifra-bloque dd { margin: 0; font-size: var(--t-2xl); font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.cifra-bloque.foco dd { font-size: var(--t-3xl); }
.cifra-bloque.alerta dd { color: color-mix(in oklch, var(--peligro) 85%, var(--tinta)); }

/* ---- login ---- */
.acceso { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.acceso-caja { width: min(380px, 100%); }
.acceso-marca { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.acceso-marca .sello { width: 36px; height: 36px; font-size: var(--t-l); }
.acceso-marca strong { font-size: var(--t-l); font-weight: 600; }
.acceso h1 { font-size: var(--t-2xl); margin-bottom: 4px; }
.acceso form { display: grid; gap: 14px; margin-top: 22px; }
.acceso .boton { min-height: 40px; }

@media (max-width: 900px) {
  .marco { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 40; transform: translateX(-100%); transition: transform 220ms var(--salida); box-shadow: var(--sombra-flotante); }
  .lateral[data-abierto="true"] { transform: none; }
  .barra .solo-movil { display: inline-flex; }
  .barra { padding: 8px 16px; flex-wrap: wrap; row-gap: 6px; }
  .barra-titulo { flex: 1 1 60%; }
  .barra-acciones { order: 3; width: 100%; justify-content: flex-start; }
  .contenido { padding: 16px 16px 40px; }
  .filtros .campo { max-width: none; flex-basis: 45%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
@media (forced-colors: active) {
  .chip i, .sello { forced-color-adjust: none; }
}