/* SBD — «el archivador».
   Cartulina de ficha, tinta azul-negra, renglones azules y la línea roja de las
   fichas de catálogo. Las pestañas son las de una carpeta; el código se escribe
   en una hoja rayada con el margen rojo. Esquinas rectas y sin sombras: es papel. */

:root {
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --mono: "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --t-11: 0.6875rem;
  --t-12: 0.75rem;
  --t-13: 0.8125rem;
  --t-14: 0.875rem;
  --t-15: 0.9375rem;
  --t-18: 1.125rem;
  --t-24: 1.5rem;
  --t-display: clamp(2rem, 1.4rem + 2vw, 2.75rem);

  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;
  --e-8: 64px;

  --margen: 72px;          /* columna del número de entrada */
  --renglon: 40px;         /* altura de una línea de ficha */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  --papel: oklch(96.4% 0.018 88);
  --papel-hondo: oklch(93.2% 0.022 86);
  --cartulina: oklch(98.6% 0.011 92);
  --tinta: oklch(24% 0.025 268);
  --tinta-media: oklch(42% 0.022 268);
  --tinta-tenue: oklch(56% 0.018 268);
  --renglon-azul: oklch(80% 0.055 240);
  --renglon-suave: oklch(89% 0.03 240);
  --rojo: oklch(53% 0.185 29);
  --rojo-suave: oklch(92% 0.04 30);
  --azul-tinta: oklch(46% 0.13 252);
  --marcador: oklch(91% 0.09 98);
  --verde: oklch(46% 0.09 152);
  --velo: oklch(30% 0.03 268 / 0.38);
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="papel"]) {
    --papel: oklch(21% 0.016 262);
    --papel-hondo: oklch(18% 0.016 262);
    --cartulina: oklch(24.5% 0.018 262);
    --tinta: oklch(91% 0.014 90);
    --tinta-media: oklch(76% 0.014 90);
    --tinta-tenue: oklch(62% 0.014 262);
    --renglon-azul: oklch(42% 0.055 242);
    --renglon-suave: oklch(31% 0.035 242);
    --rojo: oklch(68% 0.16 31);
    --rojo-suave: oklch(31% 0.06 30);
    --azul-tinta: oklch(76% 0.1 245);
    --marcador: oklch(38% 0.07 96);
    --verde: oklch(74% 0.1 152);
    --velo: oklch(8% 0.02 262 / 0.6);
    --grano: none;
    color-scheme: dark;
  }
}

:root[data-tema="pizarra"] {
  --papel: oklch(21% 0.016 262);
  --papel-hondo: oklch(18% 0.016 262);
  --cartulina: oklch(24.5% 0.018 262);
  --tinta: oklch(91% 0.014 90);
  --tinta-media: oklch(76% 0.014 90);
  --tinta-tenue: oklch(62% 0.014 262);
  --renglon-azul: oklch(42% 0.055 242);
  --renglon-suave: oklch(31% 0.035 242);
  --rojo: oklch(68% 0.16 31);
  --rojo-suave: oklch(31% 0.06 30);
  --azul-tinta: oklch(76% 0.1 245);
  --marcador: oklch(38% 0.07 96);
  --verde: oklch(74% 0.1 152);
  --velo: oklch(8% 0.02 262 / 0.6);
  --grano: none;
  color-scheme: dark;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 var(--t-14)/1.55 var(--mono);
  color: var(--tinta);
  background: var(--papel) var(--grano);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--marcador); color: var(--tinta); }
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
input[type="checkbox"] { accent-color: var(--rojo); width: 14px; height: 14px; margin: 0; }
:focus-visible { outline: 2px solid var(--rojo); outline-offset: 2px; }
[hidden] { display: none !important; }
kbd { font: 500 var(--t-11) var(--mono); padding: 0 4px; border: 1px solid var(--renglon-azul); }

.salto { position: absolute; left: var(--e-3); top: -80px; z-index: 50; background: var(--cartulina); padding: var(--e-2) var(--e-3); border: 1px solid var(--tinta); }
.salto:focus { top: var(--e-3); }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.enlace {
  border: 0; padding: 0; background: none;
  color: var(--tinta-media); font-size: var(--t-13);
  text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px;
}
.boton-tinta, .boton-linea {
  min-height: 36px; padding: 0 var(--e-4);
  font: 500 var(--t-12) var(--mono); letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid var(--tinta); border-radius: 0;
}
.boton-tinta { background: var(--tinta); color: var(--papel); }
.boton-linea { background: transparent; }
.boton-tinta:active, .boton-linea:active { transform: translateY(1px); }
.boton-tinta:disabled { opacity: 0.45; cursor: wait; }
@media (hover: hover) {
  .enlace:hover { color: var(--rojo); }
  .boton-tinta:hover { background: var(--rojo); border-color: var(--rojo); }
  .boton-linea:hover { border-color: var(--rojo); color: var(--rojo); }
}

.boton-tinta, .boton-linea { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: inherit; white-space: nowrap; }
.boton-tinta { color: var(--papel); }
.boton-tinta.peligro { background: var(--rojo); border-color: var(--rojo); }
.boton-linea.peligro { color: var(--rojo); border-color: var(--rojo); }
.boton-linea:disabled, .accion:disabled { opacity: 0.4; cursor: default; }
@media (hover: hover) {
  .boton-tinta.peligro:hover { background: var(--tinta); border-color: var(--tinta); }
  .boton-linea.peligro:hover { background: var(--rojo); color: var(--papel); }
}
a { color: inherit; }
code { font: inherit; background: var(--papel-hondo); padding: 0 4px; }

/* ----------------------------------------------------------------- mesa */
.mesa { display: grid; grid-template-columns: 264px minmax(0, 1fr); height: 100dvh; }

/* --------------------------------------------------------------- índice */
.indice {
  display: flex; flex-direction: column; gap: var(--e-5);
  padding: var(--e-5) var(--e-4) var(--e-4) var(--e-5);
  background: var(--papel-hondo);
  border-right: 3px double var(--renglon-azul);
  overflow-y: auto;
}
.marca { display: flex; align-items: baseline; gap: var(--e-3); flex-wrap: wrap; }
.marca-sbd {
  font: 600 2.5rem/1 var(--serif); letter-spacing: -0.03em; color: var(--tinta); text-decoration: none;
  border-bottom: 3px solid var(--rojo); padding-bottom: 2px;
}
.marca-sub { font-size: var(--t-11); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-tenue); }
.marca .solo-movil { margin-left: auto; }

.filtro-indice input {
  width: 100%; min-height: 32px; padding: 0 2px; border: 0; border-bottom: 1px solid var(--renglon-azul);
  background: transparent; border-radius: 0; font-size: var(--t-13);
}
.filtro-indice input:focus { outline: none; border-bottom-color: var(--rojo); }

.arbol ul { list-style: none; margin: 0; padding: 0; }
.rama + .rama { margin-top: 2px; }
.rama-cab { display: flex; align-items: baseline; gap: var(--e-2); }
.plegar {
  flex: none; width: 20px; height: 24px; border: 0; padding: 0; background: none;
  color: var(--tinta-tenue); font-size: var(--t-12); line-height: 24px;
}
.rama-cab .base {
  flex: 1; min-width: 0; padding: 3px 0; text-decoration: none; color: var(--tinta);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rama.actual > .rama-cab .base { font-weight: 600; }
.rama-cab .base[aria-current="page"] { color: var(--rojo); }
.cifra { color: var(--tinta-tenue); font-size: var(--t-11); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hojas { margin: 2px 0 var(--e-3) 9px !important; padding-left: var(--e-3) !important; border-left: 1px solid var(--renglon-azul); }
.hoja { display: flex; align-items: baseline; gap: var(--e-2); padding: 3px 0; text-decoration: none; color: var(--tinta); font-size: var(--t-13); }
.hoja .nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hoja.es-vista .nombre { font-style: italic; }
.hoja[aria-current="page"] { color: var(--rojo); font-weight: 600; }
.hoja[aria-current="page"] .relleno { border-color: var(--rojo); }
.relleno { flex: 1; min-width: var(--e-3); border-bottom: 1px dotted var(--tinta-tenue); transform: translateY(-4px); }
.nueva-tabla { padding-top: var(--e-1); }
.nueva-tabla .enlace { font-size: var(--t-12); }
.vacio-indice { font-size: var(--t-12); color: var(--tinta-tenue); padding: var(--e-1) 0; }
@media (hover: hover) {
  .rama-cab .base:hover, .hoja:hover .nombre { color: var(--rojo); }
  .plegar:hover { color: var(--rojo); }
}

.pie-indice { margin-top: auto; display: flex; flex-direction: column; gap: var(--e-2); align-items: flex-start; }
.directorio { font-size: var(--t-11); color: var(--tinta-tenue); overflow-wrap: anywhere; }
.quien { font-size: var(--t-12); color: var(--tinta-media); }
.quien b { color: var(--tinta); font-weight: 600; }
.quien .enlace { font-size: var(--t-12); margin-left: var(--e-2); }
.quien.abierto { color: var(--rojo); }

/* -------------------------------------------------------------- carpeta */
.carpeta { display: flex; flex-direction: column; min-width: 0; height: 100dvh; }
.cabecera { padding: var(--e-4) var(--e-7) 0; }
.migas { display: flex; flex-wrap: wrap; gap: var(--e-2); font-size: var(--t-12); color: var(--tinta-tenue); }
.migas a { color: var(--tinta-media); text-decoration: underline dotted; text-underline-offset: 3px; }
.migas a[aria-current="page"] { color: var(--tinta); text-decoration: none; }
.cabecera-fila { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e-3) var(--e-5); margin-top: var(--e-2); }
.cabecera-titulo { margin-right: auto; min-width: 0; }
.titulo { font: italic 500 var(--t-display)/1.05 var(--serif); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.titulo.recto { font-style: normal; }
.meta { margin-top: var(--e-1); font-size: var(--t-12); color: var(--tinta-tenue); }

.sello {
  display: flex; align-items: center; gap: var(--e-3); margin-bottom: var(--e-1);
  padding: 6px var(--e-3); border: 2px solid var(--rojo); color: var(--rojo);
  font: 600 var(--t-11) var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
  transform: rotate(-2deg); animation: sellar 280ms var(--ease);
}
.sello button { border: 0; background: none; padding: 0; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; }
.sello.ajeno { border-style: dashed; color: var(--tinta-media); border-color: var(--tinta-media); }
@keyframes sellar { from { transform: rotate(-6deg) scale(1.25); opacity: 0; } }

/* Las pestañas de la carpeta: la abierta es de la misma cartulina que la hoja y tapa la raya. */
.pestanas {
  display: flex; gap: 3px; padding: var(--e-4) var(--e-7) 0; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--tinta); flex: none;
}
.pestana {
  position: relative; flex: none; margin-bottom: -1px; padding: 9px var(--e-4) 8px;
  border: 1px solid var(--renglon-azul); border-bottom: 0; border-radius: 6px 6px 0 0;
  background: var(--papel-hondo); color: var(--tinta-media); text-decoration: none;
  font: 500 var(--t-12) var(--mono); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  transition: background 140ms, color 140ms;
}
.pestana.de-codigo::before { content: "{ } " / ""; color: var(--rojo); letter-spacing: 0; }
.pestana[aria-current="page"] {
  background: var(--cartulina); color: var(--tinta); border-color: var(--tinta);
  border-bottom: 1px solid var(--cartulina); box-shadow: inset 0 3px 0 var(--rojo);
}
@media (hover: hover) { .pestana:not([aria-current]):hover { color: var(--rojo); background: var(--papel); } }

.vista {
  flex: 1; overflow-y: auto; background: var(--cartulina);
  padding: var(--e-6) var(--e-7) var(--e-8);
  display: grid; align-content: start; gap: var(--e-6);
}
.vista:focus { outline: none; }

/* --------------------------------------------------------------- piezas */
.seccion { min-width: 0; }
.seccion > h2 {
  font: italic 500 var(--t-24)/1.15 var(--serif); letter-spacing: -0.01em;
  border-bottom: 2px solid var(--rojo); padding-bottom: var(--e-1); margin-bottom: var(--e-3);
}
.seccion > * + * { margin-top: var(--e-3); }

.vacio { padding: var(--e-6) 0; max-width: 64ch; }
.vacio h2 { font: italic 400 clamp(1.75rem, 1.2rem + 1.6vw, 2.4rem)/1.15 var(--serif); letter-spacing: -0.015em; text-wrap: balance; }
.vacio p { margin-top: var(--e-3); color: var(--tinta-media); text-wrap: pretty; }
.vacio-acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-5); }

.aviso { padding: var(--e-3) var(--e-4); border: 1px solid var(--renglon-azul); border-left-width: 4px; background: var(--papel); min-width: 0; }
.aviso.bien { border-left-color: var(--verde); }
.aviso.mal { border-left-color: var(--rojo); }
.aviso.nota { border-left-color: var(--marcador); }
.aviso-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2) var(--e-3); }
.aviso-cab b { font: 600 var(--t-11) var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.aviso.bien .aviso-cab b { color: var(--verde); }
.aviso.mal .aviso-cab b { color: var(--rojo); }
.aviso-texto { font-size: var(--t-14); margin-right: auto; }
.aviso pre.orden { margin-top: var(--e-2); }
.aviso .hoja-datos { margin-top: var(--e-3); }

pre.orden { margin: 0; font: 500 var(--t-13)/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
pre.orden.grande { font-size: var(--t-15); padding: var(--e-3) 0; }
pre.en-linea { display: inline; margin: 0; font: inherit; white-space: pre-wrap; }
.orden-viva {
  margin: 0; padding: var(--e-2) 0 var(--e-2) var(--e-3); border-left: 2px solid var(--renglon-azul);
  font: 400 var(--t-13)/1.6 var(--mono); color: var(--tinta-media); white-space: pre-wrap; overflow-wrap: anywhere;
}
.orden-viva.grande { font-size: var(--t-14); }
.orden-ejecutada { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2) var(--e-4); padding-left: var(--e-3); border-left: 2px solid var(--renglon-azul); }
.orden-ejecutada pre { flex: 1; min-width: 0; color: var(--tinta-media); }
.orden-ejecutada:empty { display: none; }

.k { font-weight: 600; color: var(--tinta); }
.s { color: var(--azul-tinta); }
.c { color: var(--tinta-tenue); font-style: italic; }
.n { color: var(--tinta-media); }

.mensaje { color: var(--tinta-media); font-size: var(--t-13); }
.mensaje .ok { color: var(--verde); }
.ms { color: var(--tinta-tenue); }
.pista { font-size: var(--t-12); color: var(--tinta-tenue); text-wrap: pretty; }
.tenue { color: var(--tinta-tenue); }
.fuerte { font-weight: 600; color: var(--tinta); text-decoration: none; }
a.fuerte:hover { color: var(--rojo); text-decoration: underline; text-underline-offset: 3px; }
.etiqueta { margin-left: var(--e-2); padding: 0 6px; border: 1px solid var(--rojo); color: var(--rojo); font-size: var(--t-11); }
.empuje { flex: 1; }
.fallo { padding: var(--e-2) 0 var(--e-2) var(--e-3); border-left: 3px solid var(--rojo); font-size: var(--t-14); max-width: 90ch; overflow-wrap: anywhere; }
.fallo b { color: var(--rojo); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--t-11); display: block; margin-bottom: 2px; }
.trabajando { color: var(--tinta-tenue); font-size: var(--t-13); }
.trabajando::after { content: "…"; animation: pulso 1s steps(3) infinite; }
@keyframes pulso { 50% { opacity: 0.3; } }

.barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); }
.barra .filtro { display: flex; align-items: baseline; gap: var(--e-2); font-size: var(--t-13); }
.barra .filtro span { color: var(--tinta-tenue); }
.barra input[type="search"] {
  width: min(280px, 60vw); min-height: 32px; padding: 0 2px; border: 0; border-bottom: 1px solid var(--renglon-azul);
  background: transparent; border-radius: 0;
}
.barra input[type="search"]:focus { outline: none; border-bottom-color: var(--rojo); background: var(--marcador); }

.accion {
  border: 0; background: none; padding: 0; margin-right: var(--e-3); font-size: var(--t-12); color: var(--tinta-media);
  text-decoration: underline dotted; text-underline-offset: 3px; white-space: nowrap;
}
.accion:last-child { margin-right: 0; }
.accion.peligro { color: var(--rojo); }
@media (hover: hover) { .accion:hover { color: var(--rojo); text-decoration-style: solid; } }

.lista-simple { list-style: none; margin: 0; padding: 0; }
.lista-simple li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2) var(--e-3); padding: 6px 0; border-bottom: 1px solid var(--renglon-suave); font-size: var(--t-13); }
.lista-simple .accion { margin-left: auto; }
.marcas { display: inline-flex; flex-wrap: wrap; gap: var(--e-2); }
.marcas span { font-size: var(--t-12); }
.marcas .clave { color: var(--rojo); }
.definicion-caja { display: grid; gap: var(--e-2); justify-items: start; }
.definicion-caja > pre { justify-self: stretch; }
pre.definicion {
  margin: 0; padding: var(--e-3) 0 var(--e-3) var(--e-4); border-left: 2px solid var(--rojo);
  font: 400 var(--t-13)/1.65 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; background: var(--papel);
}
.descargas { display: flex; flex-wrap: wrap; gap: var(--e-3); }

/* --------------------------------------------------------- formularios */
.subformulario { margin-top: var(--e-5) !important; padding: var(--e-4) var(--e-5); background: var(--papel); border-left: 3px solid var(--renglon-azul); display: grid; gap: var(--e-3); }
.subformulario h3 { font: 500 var(--t-11)/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-media); }
.seccion > .subformulario:first-of-type { margin-top: var(--e-3) !important; }
.en-linea { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e-3) var(--e-5); }
.campo { display: grid; gap: 2px; min-width: 0; }
.campo > span, .campo-grande > span { font-size: var(--t-11); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-tenue); }
.campo input, .campo select {
  min-height: 36px; min-width: 14ch; padding: 0 2px; border: 0; border-bottom: 1px solid var(--tinta-tenue);
  background: transparent; border-radius: 0; font: 500 var(--t-14) var(--mono);
}
.campo.corto input { min-width: 0; width: 7ch; }
.campo input:focus, .campo select:focus { outline: none; border-bottom-color: var(--rojo); background: var(--marcador); }
.campo input:disabled { opacity: 0.4; }
.casilla { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-size: var(--t-13); white-space: nowrap; }
.casilla.separada { margin-left: var(--e-3); }
.campo-grande { display: grid; gap: 4px; max-width: 520px; }
.campo-grande input {
  border: 0; border-bottom: 1px solid var(--renglon-azul); background: transparent; border-radius: 0;
  font: italic 500 var(--t-24) var(--serif); padding: 2px 0; width: 100%;
}
.campo-grande input:focus { outline: none; border-bottom-color: var(--rojo); }
.botones-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4); }
.formulario-fila, .diseno-form, .formulario-buscar { display: grid; gap: var(--e-4); }
.renglones { max-width: 760px; border-top: 1px solid var(--renglon-azul); }

.tabla-form { border-collapse: collapse; font-size: var(--t-13); width: min(100%, 860px); }
.tabla-form th { text-align: left; font: 500 var(--t-11) var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-tenue); padding: 0 var(--e-3) 4px 0; }
.tabla-form td { border-bottom: 1px solid var(--renglon-azul); padding: 0 var(--e-3) 0 0; height: 42px; }
.tabla-form td small { display: block; color: var(--tinta-tenue); font-size: var(--t-11); }
.tabla-form td.c, .diseno td.c { text-align: center; }
.tabla-form select, .tabla-form input[type="text"] { width: 100%; min-height: 30px; border: 0; border-bottom: 1px dotted var(--tinta-tenue); background: transparent; padding: 0 2px; border-radius: 0; }
.tabla-form td:nth-child(3) { width: 22ch; }
.tabla-form td:nth-child(4) { width: 40%; }
.tabla-form select:focus, .tabla-form input:focus { outline: none; background: var(--marcador); }

.diseno { width: 100%; border-collapse: collapse; font-size: var(--t-13); }
.diseno th { text-align: left; font: 500 var(--t-11) var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-tenue); padding: var(--e-3) var(--e-2) 4px 0; white-space: nowrap; }
.diseno td { border-bottom: 1px solid var(--renglon-azul); padding: 0 var(--e-2) 0 0; height: var(--renglon); }
.diseno td.corto { width: 7ch; }
.diseno input[type="text"], .diseno select { width: 100%; min-width: 6ch; min-height: 32px; border: 0; background: transparent; padding: 0 2px; border-radius: 0; }
.diseno input[type="text"]:focus, .diseno select:focus { outline: none; background: var(--marcador); }
.diseno input:disabled { opacity: 0.35; }

/* --------------------------------------------------- registros (tablas) */
.hoja-datos { max-height: 64vh; overflow: auto; min-width: 0; }
.hoja-datos.alta { max-height: max(320px, calc(100dvh - 380px)); }
table.registro { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: var(--t-13); font-variant-numeric: tabular-nums; }
.registro th {
  position: sticky; top: 0; z-index: 1; background: var(--cartulina);
  padding: var(--e-2) var(--e-4) 6px 0; text-align: left; white-space: nowrap; vertical-align: bottom;
  font: 500 var(--t-11)/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-media);
  border-bottom: 2px solid var(--rojo);
}
.aviso .registro th { background: var(--papel); }
.registro th small { display: block; text-transform: none; letter-spacing: 0; color: var(--tinta-tenue); font-weight: 400; }
.registro th.num, .registro td.num { text-align: right; }
.registro th button { all: unset; cursor: pointer; }
.registro th button:focus-visible { outline: 2px solid var(--rojo); outline-offset: 2px; }
.registro th .flecha, .registro th .marca-clave { color: var(--rojo); }
.registro th .marca-clave { margin-left: 4px; }
.registro td {
  padding: 0 var(--e-4) 0 0; height: 34px; border-bottom: 1px solid var(--renglon-azul);
  max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.registro tfoot td { border-top: 2px solid var(--tinta); border-bottom: 0; font-size: var(--t-12); font-weight: 600; }
.registro td.acciones { max-width: none; overflow: visible; }
.registro td.sel, .registro th.sel { width: 1%; padding-right: var(--e-3); }
.registro td.ops { width: 1%; max-width: none; padding-right: var(--e-4); }
.registro td.ops .accion { opacity: 0.55; }
.registro tr:hover td.ops .accion, .registro tr:focus-within td.ops .accion { opacity: 1; }
.registro tr.marcada td { background: var(--marcador); }
.registro tr.es-vista .fuerte { font-style: italic; }
.registro td.editable { cursor: text; }
.registro td input[type="text"] { width: 100%; min-width: 10ch; height: 28px; padding: 0 4px; border: 0; background: var(--marcador); font: inherit; border-radius: 0; }
.registro td input[type="text"]:focus { outline: 1px solid var(--rojo); }
.nulo { color: var(--tinta-tenue); font-style: italic; }
@media (hover: hover) { .registro tbody tr:hover td { background: color-mix(in oklch, var(--marcador) 40%, transparent); } }

.paginas { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-4); margin-top: var(--e-3); font-size: var(--t-12); color: var(--tinta-tenue); font-variant-numeric: tabular-nums; }
.paginas button { border: 0; background: none; padding: 0; color: var(--tinta-media); text-decoration: underline dotted; text-underline-offset: 3px; font-size: inherit; }
.paginas button:disabled { color: var(--tinta-tenue); text-decoration: none; cursor: default; opacity: 0.5; }
.paginas select { border: 0; border-bottom: 1px solid var(--renglon-azul); background: transparent; font-size: inherit; padding: 0 2px; }
.zona-datos { min-width: 0; }

/* --------------------------------------------------------------- código */
.mesa-codigo { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--e-6); align-items: start; }
.columna-codigo { display: grid; gap: var(--e-3); min-width: 0; }
.plantilla {
  border: 1px solid var(--renglon-azul); background: var(--papel); padding: 3px 10px;
  font-size: var(--t-12); color: var(--tinta-media);
}
@media (hover: hover) { .plantilla:hover { border-color: var(--rojo); color: var(--rojo); } }
.anteriores { max-width: 280px; border: 0; border-bottom: 1px solid var(--renglon-azul); background: transparent; font-size: var(--t-12); color: var(--tinta-media); padding: 2px; }

/* La hoja de código: renglones azules, números en el margen y la línea roja del margen. */
.codigo {
  --alto: 24px;
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  border: 1px solid var(--tinta); background-color: var(--papel);
  background-image: linear-gradient(to bottom, transparent calc(var(--alto) - 1px), var(--renglon-suave) calc(var(--alto) - 1px));
  background-size: 100% var(--alto); background-position: 0 var(--e-3);
}
.codigo:focus-within { border-color: var(--rojo); }
.codigo-numeros {
  padding: var(--e-3) var(--e-2) var(--e-3) var(--e-3); min-width: 5ch; text-align: right;
  border-right: 2px solid var(--rojo); color: var(--tinta-tenue); user-select: none;
  font: 400 var(--t-12)/var(--alto) var(--mono); font-variant-numeric: tabular-nums;
}
.codigo-numeros span { display: block; }
.codigo-hoja { position: relative; min-width: 0; }
.codigo-hoja pre, .codigo-hoja textarea, .codigo-medidor {
  margin: 0; padding: var(--e-3) var(--e-4); border: 0;
  font: 500 var(--t-14)/var(--alto) var(--mono); white-space: pre; tab-size: 2; letter-spacing: 0;
}
.codigo-hoja pre { position: absolute; inset: 0; pointer-events: none; overflow: hidden; color: var(--tinta); }
.codigo-hoja textarea {
  position: relative; display: block; width: 100%; min-height: calc(var(--alto) * 12 + var(--e-3) * 2);
  resize: none; overflow-x: auto; overflow-y: hidden; border-radius: 0;
  background: transparent; color: transparent; caret-color: var(--rojo); outline: none;
}
.codigo-hoja textarea::selection { color: transparent; background: var(--marcador); }
.codigo-medidor { position: absolute; inset: 0; visibility: hidden; pointer-events: none; overflow: hidden; }

.resultados { display: grid; gap: var(--e-5); min-width: 0; }
.resultado { display: grid; gap: var(--e-2); padding-top: var(--e-3); border-top: 1px solid var(--renglon-azul); min-width: 0; }
.resultado-cab { display: flex; gap: var(--e-3); align-items: baseline; }
.resultado-cab .numero { font: italic 500 var(--t-18)/1 var(--serif); color: var(--rojo); min-width: 2ch; }
.resultado-cab pre { flex: 1; min-width: 0; }

.chuleta {
  position: sticky; top: 0; max-height: calc(100dvh - 240px); overflow-y: auto;
  padding-left: var(--e-5); border-left: 3px double var(--renglon-azul); display: grid; gap: var(--e-2);
}
.chuleta h2 { font: italic 500 var(--t-18)/1.2 var(--serif); }
.chuleta details { border-top: 1px solid var(--renglon-suave); padding: var(--e-2) 0; }
.chuleta summary { cursor: pointer; font: 500 var(--t-11) var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-media); }
.chuleta details p { font-size: var(--t-12); color: var(--tinta-tenue); margin: var(--e-2) 0; text-wrap: pretty; }
.ejemplo {
  display: block; width: 100%; margin-top: var(--e-1); border: 0; border-left: 2px solid var(--renglon-azul);
  background: none; padding: 2px 0 2px var(--e-2); text-align: left; color: var(--tinta);
}
pre.mini { margin: 0; font: 400 var(--t-12)/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
@media (hover: hover) { .ejemplo:hover { border-left-color: var(--rojo); background: var(--papel); } }

/* ----------------------------------------------------------------- ficha */
.ficha {
  width: min(680px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 0;
  border: 1px solid var(--tinta); border-radius: 0; background: var(--cartulina); color: var(--tinta);
}
.ficha::backdrop { background: var(--velo); }
.ficha[open] { animation: ficha-entra 260ms var(--ease); }
@keyframes ficha-entra { from { transform: translateY(14px) rotate(-0.6deg); opacity: 0; } }
.ficha-cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-4); padding: var(--e-5) var(--e-6) var(--e-3); border-bottom: 2px solid var(--rojo); }
.ficha-cab h2 { font: italic 500 var(--t-24)/1.1 var(--serif); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.ficha-cab .folio { font: 600 var(--t-11) var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rojo); white-space: nowrap; }
.ficha-cuerpo { padding: var(--e-2) var(--e-6) 0; overflow-y: auto; max-height: calc(100dvh - 280px); }
.ficha .explicacion { font-size: var(--t-13); color: var(--tinta-media); padding: var(--e-3) 0 0; text-wrap: pretty; }
.ficha-pie { padding: var(--e-4) var(--e-6) var(--e-5); display: grid; gap: var(--e-3); }
.ficha-pie > pre { margin: 0; font: 400 var(--t-12)/1.6 var(--mono); color: var(--tinta-media); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 8em; overflow: auto; }
.ficha-pie .botones { display: flex; justify-content: flex-end; gap: var(--e-4); align-items: center; }
.ficha .campo-grande { padding: var(--e-4) 0 var(--e-2); }
.confirmar { width: min(560px, calc(100vw - 24px)); }
.confirmar .ficha-cuerpo { border-bottom: 1px solid var(--renglon-azul); }

.renglon {
  display: grid; grid-template-columns: minmax(14ch, 24ch) minmax(0, 1fr) auto; align-items: center; gap: var(--e-3);
  min-height: var(--renglon); border-bottom: 1px solid var(--renglon-azul);
}
.renglon label { font-size: var(--t-12); color: var(--tinta-media); overflow-wrap: anywhere; padding: 6px 0; }
.renglon label small { display: block; font-size: var(--t-11); color: var(--tinta-tenue); }
.renglon input, .renglon select {
  width: 100%; min-height: calc(var(--renglon) - 6px); padding: 0 var(--e-1);
  border: 0; border-radius: 0; background: transparent; font: 500 var(--t-15) var(--mono);
}
.renglon input:focus, .renglon select:focus { outline: none; background: var(--marcador); }
.renglon input:disabled { color: var(--tinta-tenue); font-style: italic; }
.renglon input::placeholder { color: var(--tinta-tenue); font-weight: 400; }
.renglon .vaciar { border: 0; background: none; padding: 0 var(--e-1); font-size: var(--t-12); color: var(--tinta-tenue); text-decoration: underline dotted; text-underline-offset: 3px; }
.renglon .vaciar[aria-pressed="true"] { color: var(--rojo); }
.entrar { width: min(420px, calc(100vw - 24px)); }
.entrar p.nota { font-size: var(--t-12); color: var(--tinta-tenue); padding: var(--e-3) 0; }

/* --------------------------------------------------------- autocompletar */
.sugerencias {
  position: fixed; z-index: 45; margin: 0; padding: 4px 0; list-style: none;
  min-width: 260px; max-width: min(460px, calc(100vw - 24px));
  background: var(--cartulina); border: 1px solid var(--tinta); border-top: 2px solid var(--rojo);
}
.sugerencias li {
  display: flex; align-items: baseline; gap: var(--e-3); padding: 4px var(--e-3);
  font-size: var(--t-13); cursor: pointer; border-bottom: 1px solid var(--renglon-suave);
}
.sugerencias li:last-child { border-bottom: 0; }
.sugerencias li[aria-selected="true"] { background: var(--marcador); }
.sugerencias .que { margin-left: auto; font-size: var(--t-11); color: var(--tinta-tenue); white-space: nowrap; }
.sugerencias .clase { font-size: var(--t-11); color: var(--rojo); min-width: 6ch; text-transform: uppercase; letter-spacing: 0.08em; }
.sugerencias mark { background: none; color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: var(--rojo); text-underline-offset: 3px; }

/* ------------------------------------------------------------- responsive */
.solo-movil { display: none; }
.velo { position: fixed; inset: 0; background: var(--velo); z-index: 30; }

@media (max-width: 1100px) {
  .mesa-codigo { grid-template-columns: minmax(0, 1fr); }
  .chuleta { position: static; max-height: none; padding: var(--e-4) 0 0; border-left: 0; border-top: 3px double var(--renglon-azul); }
}

@media (max-width: 900px) {
  .mesa { grid-template-columns: minmax(0, 1fr); }
  .indice { position: fixed; inset: 0 auto 0 0; width: min(320px, 88vw); z-index: 40; transform: translateX(-102%); transition: transform 260ms var(--ease); }
  .indice.abierto { transform: none; }
  .solo-movil { display: inline-block; }
  .cabecera { padding: var(--e-3) var(--e-4) 0; }
  .cabecera > .solo-movil { margin-bottom: var(--e-2); }
  .pestanas { padding: var(--e-3) var(--e-4) 0; }
  .vista { padding: var(--e-5) var(--e-4) var(--e-7); gap: var(--e-5); }
  .subformulario { padding: var(--e-3); }
  .renglon { grid-template-columns: minmax(0, 1fr) auto; }
  .renglon label { grid-column: 1 / -1; padding-top: var(--e-2); }
  .registro td.ops .accion { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ------------------------------------------------------------ mi cuenta */
.consumos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--e-4) var(--e-6); max-width: 900px; }
.consumo-cab { display: flex; justify-content: space-between; gap: var(--e-3); font-size: var(--t-13); }
.consumo-raya { margin-top: 6px; height: 8px; border: 1px solid var(--tinta-tenue); background: var(--papel); }
.consumo-raya span { display: block; height: 100%; background: var(--tinta); }
.consumo.casi .consumo-raya span { background: var(--rojo); }