/* =========================================================================
   Bytenauta — A la última. El diseño del lienzo de Claude Design, en código
   (ESPEC del 24-09-2026; lienzo: artifact 7SKN95NNS2k4mpogQwJ8CF).

   El número se lee como un libro, en papel cálido, y abre con una lámina negra
   a sangre que es un instrumento: una marca por ayuntamiento, caso o día sobre
   su regla. Se carga DESPUÉS de ../styles.css (nav, pie y tokens de la home).

   Reglas duras: sin degradados; radio 0 salvo el punto de estado (50 %); sin
   sombras salvo el halo del punto teal; el naranja puro nunca es texto;
   --naranja-l como texto solo sobre negro o gris-p; sobre naranja, texto negro.
   Suelo: 12 px en Mono, 14 px en Next. Dianas de 44 px en táctil.
   Nada de style="" en el HTML (CSP): lo que cambia por dato va por clase
   (w-N, pos-N, casos-N, desde-N, lleva-N) o por atributo de SVG.

   Contrastes medidos, sobre papel #f4f3ea: tinta 13,15 · gris-p 10,74 ·
   gris 7,49 · teal-t 5,25. Sobre negro #1a1816: blanco 15,90 · claro 13,79 ·
   txt2 12,01 · txt3 8,35 · naranja-l 6,86 · naranja 5,16 (solo relleno) ·
   teal 3,80 (solo marca) · linea-50 4,85 (borde del campo del buscador).
   ========================================================================= */

/* ===== TOKENS DEL BLOG (del sistema de diseño Bytenauta; no tocan styles.css) ===== */
body.blog {
    --papel: #f4f3ea;
    --papel-2: #ece9df;
    --teal-t: #286e78;
    --linea-14: rgba(244,243,234,.14);
    --linea-16: rgba(244,243,234,.16);
    --linea-25: rgba(244,243,234,.25);
    --linea-35: rgba(244,243,234,.35);
    --linea-50: rgba(244,243,234,.5);
    --linea-60: rgba(244,243,234,.6);
    --tinta-22: rgba(43,40,38,.22);
    --tinta-45: rgba(43,40,38,.45);
    --lateral: 232px;
    --medida: 660px;
    --margen: 300px;
    --hueco: 64px;
    --lienzo: 1440px;
    background: var(--papel); color: var(--tinta);
    font-synthesis: none;
    /* styles.css pone overflow-x:hidden en body y eso rompe position:sticky en Safari. */
    overflow-x: clip;
}
body.blog main { display: block; }
body.blog h1, body.blog h2, body.blog h3 { font-family: var(--sans); letter-spacing: 0; }
body.blog .footer { color: var(--blanco); }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Sobre papel el anillo va en naranja-o: el --naranja-l de styles.css da 2,32:1 sobre #f4f3ea.
   Vale para todo lo que va dentro de <main> (número, portada y páginas legales); la lámina, el
   diario y la franja naranja lo cambian abajo, y el nav y el pie, fuera de main, se quedan como en la home. */
body.blog main :focus-visible { outline: 2px solid var(--naranja-o); outline-offset: 3px; }
body.blog .lamina :focus-visible, body.blog .registro :focus-visible { outline-color: var(--naranja-l); }
body.blog .montamos :focus-visible { outline-color: var(--negro); }
/* La sección en la que se está, en el nav: subrayado naranja, como en el lienzo. */
body.blog .nav-links a[aria-current="page"] { color: var(--blanco); text-decoration: underline; text-decoration-color: var(--naranja); text-decoration-thickness: 2px; text-underline-offset: 8px; }

/* Rótulo y numerador en mono: la retícula técnica. */
.rot { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .04em; color: var(--gris); }
.num { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--gris); margin: 0; }

/* Encuadre: cuatro escuadras de 1 px que sobresalen 7 px. Solo en los instrumentos. */
.lamina-fig, .instrumento { position: relative; }
.esq { position: absolute; width: 12px; height: 12px; border: 0 solid var(--linea-50); pointer-events: none; }
.e1 { top: -7px; left: -7px; border-top-width: 1px; border-left-width: 1px; }
.e2 { top: -7px; right: -7px; border-top-width: 1px; border-right-width: 1px; }
.e3 { bottom: -7px; left: -7px; border-bottom-width: 1px; border-left-width: 1px; }
.e4 { bottom: -7px; right: -7px; border-bottom-width: 1px; border-right-width: 1px; }
.instrumento > .esq { display: none; }

/* Flecha de los enlaces de acción (SVG, trazo por clase). */
svg.flecha { flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; }

/* ===== FICHA: celdas de 1 px, como la cabecera de un informe =====
   El filete va a la izquierda de cada celda y la ficha empieza 23 px antes del margen, recortada
   justo en él: la primera celda de cada fila pierde su filete y todas alinean el texto con el
   margen, también las que bajan a la segunda fila. Con el filete a la derecha, las celdas que
   bajaban quedaban metidas 22 px y la fila de arriba acababa en un filete colgando. */
.ficha-banda { border-bottom: 1px solid var(--tinta-22); }
.ficha { display: flex; flex-wrap: wrap; margin: 0 auto; padding: 0 var(--marco) 0 calc(var(--marco) - 23px); max-width: var(--lienzo);
    clip-path: inset(0 0 0 var(--marco)); }
.ficha .celda { flex: none; display: flex; flex-direction: column; gap: 4px; padding: 12px 22px; border-left: 1px solid var(--tinta-22); }
.ficha .celda:last-child { flex: 1 1 14em; }
.ficha .celda-larga { flex: 1 1 12em; min-width: 0; }
.ficha .celda-larga dd { white-space: normal; }
.ficha dt { font-family: var(--mono); font-size: 12px; color: var(--gris); white-space: nowrap; }
.ficha dd { margin: 0; font-family: var(--mono); font-size: 13px; line-height: 1.4; color: var(--tinta); white-space: nowrap; }
.ficha .celda:last-child dd { white-space: normal; }
.ficha .celda-serie dd { font-weight: 600; }
.ficha-movil { display: none; }

/* ===== CABECERA: titular 7 | firma y entradilla 5 ===== */
.numero-cab {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--hueco); align-items: start;
    max-width: var(--lienzo); margin: 0 auto; padding: 34px var(--marco) 42px;
}
.numero-cab h1 { font-weight: 600; font-size: 50px; line-height: 1.08; letter-spacing: -0.018em; color: var(--tinta); text-wrap: balance; margin: 0; }
.numero-cab h1 .resp, .ultimo h2 .resp { color: var(--gris-p); }
.cab-lado { display: flex; flex-direction: column; gap: 16px; padding-top: 8px; border-top: 2px solid var(--tinta); }
.firma-linea { display: flex; gap: 10px; align-items: baseline; margin: 0; font-family: var(--mono); font-size: 13px; line-height: 1.5; color: var(--gris); }
.firma-linea a { color: var(--tinta); text-decoration: underline; text-decoration-color: var(--naranja-o); text-underline-offset: 4px; }
.punto { flex: none; display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px rgba(47,127,136,.25); transform: translateY(-1px); }
.entradilla { font-family: var(--sans); font-size: 19px; line-height: 29px; color: var(--tinta); margin: 0; }

/* ===== LA LÁMINA: banda negra a sangre ===== */
.lamina { background: var(--negro); color: var(--claro); }
.lamina-lienzo { max-width: var(--lienzo); margin: 0 auto; padding: 40px var(--marco) 52px; }
.lamina-fig { margin: 0; border: 1px solid var(--linea-14); padding: 22px 28px 20px; display: flex; flex-direction: column; gap: 22px; }
.lamina .rot { color: var(--txt3); }
.lamina-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--linea-14); }
.lamina-titulo { display: flex; gap: 14px; align-items: baseline; margin: 0; font-family: var(--mono); font-size: 14px; line-height: 1.45; color: var(--blanco); letter-spacing: .01em; }
.lamina-titulo .rot { flex: none; }
.lamina-unidad { margin: 0; font-family: var(--mono); font-size: 12px; color: var(--txt3); text-align: right; }
.lamina-pie { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--linea-14); }
.lamina-pie > p { margin: 0; font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--txt3); }
.leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin: 0; font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--claro); }
.leyenda > span { display: inline-flex; align-items: center; gap: 7px; }
.muestra { display: inline-block; flex: none; width: 10px; height: 8px; }
.lamina a { color: var(--blanco); text-decoration: underline; text-decoration-color: var(--naranja-l); text-underline-offset: 5px; }

/* Los dibujos: geometría en atributos y color por clase. */
svg.dib { display: block; overflow: visible; }
.dib path { fill: none; stroke-width: 1; }
.dib text { font-family: var(--mono); letter-spacing: 0; }
.dib text.grande { letter-spacing: -0.045em; }
.dib tspan { letter-spacing: 0; }
.k0 { fill: var(--txt3); } .k1 { fill: var(--naranja-l); } .k2 { fill: var(--naranja); }
.k9 { fill: none; stroke: var(--txt3); stroke-width: 1; }
.dib rect.sel, .dib rect.k9.sel { fill: var(--blanco); stroke: none; }
.fondo { fill: var(--negro); }
.s-50 { stroke: var(--linea-50); } .s-60 { stroke: var(--linea-60); }
.s-nl { stroke: var(--naranja-l); } .s-bl { stroke: var(--blanco); }
.dib .raya { stroke-dasharray: 3 3; }
.dib .hoy, .dib .hoy-v { stroke-width: 2; }
.t-cl { fill: var(--claro); } .t-nl { fill: var(--naranja-l); } .t-bl { fill: var(--blanco); }
.t-t2 { fill: var(--txt2); } .t-t3 { fill: var(--txt3); }
.muestra.k0, .mr-m.k0 { background: var(--txt3); } .muestra.k1, .mr-m.k1 { background: var(--naranja-l); }
.muestra.k2, .mr-m.k2 { background: var(--naranja); }
.muestra.k9, .mr-m.k9 { border: 1px solid var(--txt3); }
.muestra.aguja { width: 2px; height: 12px; background: var(--blanco); }
/* Lo que se mueve (blog.js, WAAPI) crece desde su regla. */
.dib .col { transform-box: fill-box; }
.dib .col-a { transform-origin: 50% 100%; }
.dib .col-v { transform-origin: 50% 0; }
.dib .linea-u1 { transform-box: fill-box; transform-origin: 50% 0; }
.dib .pista { transform-box: fill-box; transform-origin: 0 50%; }

/* --- Lecturas: la cifra de la lámina en grande --- */
.lecturas { display: flex; flex-direction: column; gap: 20px; }
.lect-bloque { display: flex; flex-direction: column; gap: 10px; }
.lect-bloque + .lect-bloque { padding-top: 18px; border-top: 1px solid var(--linea-16); }
.lect-cab { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--mono); font-size: 13px; line-height: 1.45; color: var(--claro); }
.lect-cab .muestra { width: 14px; height: 7px; }
.lect-n { display: flex; align-items: baseline; gap: 12px; margin: 0; font-family: var(--mono); line-height: .9; }
.lect-n .n { font-size: 80px; font-weight: 700; letter-spacing: -0.04em; color: var(--blanco); font-variant-numeric: tabular-nums; }
.lect-n .que, .lect-med .que { font-size: 13px; color: var(--txt2); letter-spacing: .02em; }
.lect-med { display: flex; flex-direction: column; gap: 4px; }
.lect-med .rot { color: var(--txt2); }
.lect-med p { margin: 0; display: flex; align-items: baseline; gap: 8px; font-family: var(--mono); line-height: 1; }
.lect-med .n { font-size: 36px; font-weight: 700; letter-spacing: -0.02em; color: var(--blanco); }
.lect-med .que { font-size: 14px; letter-spacing: 0; }

/* ===== CONTADO: contador en espejo, lectura y buscador ===== */
.contado-ancho { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 36px; align-items: start; }
.contado-ancho .lecturas { border-left: 1px solid var(--linea-16); padding-left: 32px; align-self: stretch; }
.contado-dib { overflow: hidden; }
.lecturas-fila { flex-direction: row; flex-wrap: wrap; gap: 20px 56px; padding-bottom: 18px; border-bottom: 1px solid var(--linea-16); margin-bottom: 14px; }
.lecturas-fila .lect-bloque { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 10px 28px; }
.lecturas-fila .lect-bloque > .rot, .lecturas-fila .lect-cab { flex-basis: 100%; }
.lecturas-fila .lect-bloque + .lect-bloque { padding-top: 0; border-top: 0; }
.lecturas-fila .lect-n .n { font-size: 72px; }
.lecturas-movil .lect-n .n { font-size: 64px; }
.prov-rot { margin: 0; padding: 6px 0 8px; font-family: var(--mono); font-size: 12px; color: var(--blanco); }
.apiladas { display: none; }
.apiladas-fila { display: flex; flex-direction: column; gap: 4px; }
.apiladas-fila p { display: flex; justify-content: space-between; gap: 12px; margin: 0; font-family: var(--mono); font-size: 12px; color: var(--txt2); }
.apiladas-fila b { color: var(--blanco); font-weight: 500; }
.apiladas-nota { margin: 0; font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--txt2); }

/* Buscador «tu municipio»: sin JS, la tabla completa por nombre con su minirregla. */
.buscador { display: grid; grid-template-columns: 268px minmax(0, 1fr) 300px; gap: 40px; padding-top: 32px; }
.bus-control { display: flex; flex-direction: column; gap: 18px; }
.bus-nota { margin: 0; font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--txt2); }
.bus-campo { display: flex; flex-direction: column; gap: 8px; }
.bus-campo label { font-family: var(--mono); font-size: 12px; color: var(--txt2); }
.bus-campo input {
    box-sizing: border-box; display: block; width: 100%; height: 48px; margin: 0; padding: 0 14px;
    background: var(--gris-p); border: 1px solid var(--linea-50); border-radius: 0; -webkit-appearance: none; appearance: none;
    font-family: var(--mono); font-size: 16px; color: var(--blanco);
}
.bus-campo input:focus { outline: 2px solid var(--naranja-l); outline-offset: 3px; }
.bus-orden { display: flex; }
.bus-orden button {
    min-height: 44px; padding: 0 16px; background: transparent; color: var(--txt2); cursor: pointer;
    border: 1px solid var(--linea-35); border-radius: 0; font-family: var(--mono); font-size: 13px;
    transition: background-color .15s var(--ease), color .15s var(--ease);
}
.bus-orden button + button { border-left: 0; }
.bus-orden button[aria-pressed="true"] { background: var(--claro); color: var(--negro); border-color: var(--claro); }
.bus-lista { display: flex; flex-direction: column; min-width: 0; }
.tabla-datos-marco { max-height: 528px; overflow: auto; overscroll-behavior: contain; }
.tabla-datos { width: 100%; border-collapse: collapse; font-family: var(--mono); color: var(--blanco); }
.tabla-datos thead th {
    position: sticky; top: 0; z-index: 1; background: var(--negro); padding: 0 14px 8px; text-align: left;
    font-size: 12px; font-weight: 400; color: var(--txt3); border-bottom: 1px solid var(--linea-25);
}
.tabla-datos tbody tr { border-bottom: 1px solid var(--linea-14); }
.tabla-datos tbody th, .tabla-datos td { padding: 6px 14px; height: 48px; text-align: left; vertical-align: middle; }
.tabla-datos tbody th { font-family: var(--sans); font-size: 16px; font-weight: 600; color: var(--blanco); border-left: 2px solid transparent; }
.tabla-datos .prov { font-size: 13px; color: var(--txt2); width: 90px; }
.tabla-datos .n { text-align: right; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; width: 80px; white-space: nowrap; }
.tabla-datos thead th.n, .tabla-datos thead th.prov { font-size: 12px; font-weight: 400; color: var(--txt3); }
.tabla-datos td.sd { font-size: 13px; font-weight: 400; color: var(--txt3); }
.tabla-datos .escala { width: 176px; }
.tabla-datos tr[hidden] { display: none; }
.tabla-datos tr.elegible { cursor: pointer; }
.tabla-datos tr.elegible:hover { background: rgba(58,54,51,.6); }
.tabla-datos tr.sel { background: var(--gris-p); }
.tabla-datos tr.sel th { border-left-color: var(--blanco); }
.tabla-datos th button { all: unset; cursor: pointer; }
.fila-nota { display: block; margin-top: 2px; font-family: var(--mono); font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--txt2); }
.bus-notas { margin: 10px 0 0; font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--txt2); }
.tabla-datos th button:focus-visible { outline: 2px solid var(--naranja-l); outline-offset: 3px; }
.bus-pie { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0; padding-top: 6px; font-family: var(--mono); font-size: 12px; color: var(--txt3); }
.bus-pie a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; }
.bus-pie button { min-height: 44px; background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--mono); font-size: 13px; color: var(--blanco); text-decoration: underline; text-decoration-color: var(--naranja-l); text-underline-offset: 5px; }
.tabla-nota { font-family: var(--mono); font-size: 13px; color: var(--txt3); margin: 0; }
/* Minirregla: la misma escala que la lámina, con la línea del primer umbral. */
.mr { display: inline-flex; align-items: flex-end; gap: 8px; width: 160px; height: 14px; vertical-align: middle; }
.mr-zona { position: relative; flex: 1; height: 14px; border-bottom: 1px solid var(--linea-35); }
.mr-fuera { position: relative; width: 14px; height: 14px; border-bottom: 1px solid var(--linea-35); }
.mr-u { position: absolute; top: 0; bottom: -1px; width: 0; border-left: 1px solid var(--naranja-l); }
.mr-m { position: absolute; bottom: 3px; width: 8px; height: 6px; margin-left: -4px; }
.mr-fuera .mr-m { left: 7px; }
/* Mes a mes del municipio elegido (lo rellena blog.js con el JSON del número). */
.bus-mes { display: flex; flex-direction: column; gap: 10px; padding-top: 30px; }
.bus-mes:empty { display: none; }
.bus-mes .mes { display: grid; grid-template-columns: 52px minmax(0, 1fr) 56px; align-items: center; gap: 10px; margin: 0; font-family: var(--mono); font-size: 12px; color: var(--txt2); }
.bus-mes .mes b { font-size: 13px; font-weight: 400; color: var(--blanco); text-align: right; }
.bus-mes .barra { position: relative; display: block; height: 12px; }
.bus-mes .barra i { position: absolute; top: 3px; left: 0; height: 6px; background: var(--txt3); }
.bus-mes .barra .u { top: 0; bottom: 0; height: auto; width: 0; background: none; border-left: 1px solid var(--naranja-l); }
.bus-mes .nota { margin: 0; font-family: var(--mono); font-size: 12px; line-height: 1.55; color: var(--txt2); max-width: 26em; }

/* ===== MONTADO: entran, se apartan, bandeja; antes y después ===== */
.mo-flujo { display: grid; grid-template-columns: 170px 120px minmax(0, 330px) 48px minmax(0, 1fr); align-items: start; }
.mo-ent, .mo-ap { display: flex; flex-direction: column; gap: 14px; }
.mo-solo-bandeja { display: block; max-width: 660px; }
.bj-nota { margin: 4px 0 0; font-family: var(--mono); font-size: 12px; color: var(--txt3); }
.mo-ap { gap: 10px; }
.rejilla-ent { display: grid; grid-template-columns: repeat(4, 30px); gap: 6px; }
.cas { display: block; flex: none; width: 30px; height: 30px; }
.c-ent { background: var(--txt3); }
.c-ap { border: 1px solid var(--txt3); }
.c-bj { width: 12px; height: 12px; border: 1px solid var(--naranja-l); }
.c-bj.c-hecha { background: var(--txt3); border-color: var(--txt3); }
.c-mal { width: 22px; height: 22px; background: var(--naranja); }
.pista .c-ap { width: 22px; height: 22px; }
.muestra.c-ent { background: var(--txt3); } .muestra.c-ap { border: 1px solid var(--txt3); } .muestra.c-bj { border: 1px solid var(--naranja-l); }
.mo-nota { margin: 0; font-family: var(--mono); font-size: 13px; line-height: 1.45; color: var(--claro); }
.mo-flecha1 { margin-top: 34px; }
.lista-ap { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lista-ap li { display: grid; grid-template-columns: 30px 60px minmax(0, 1fr); gap: 12px; align-items: center; }
.lista-ap .fac { font-family: var(--mono); font-size: 12px; color: var(--txt2); }
.lista-ap .motivo { font-family: var(--mono); font-size: 13px; line-height: 1.35; color: var(--claro); }
.mo-resto { margin: 10px 0 0; height: 30px; display: flex; align-items: center; border-bottom: 1px solid var(--linea-50); font-family: var(--mono); font-size: 13px; color: var(--claro); }
.mo-baja { display: none; align-items: center; gap: 10px; margin: 0; min-height: 24px; font-family: var(--mono); font-size: 12px; color: var(--txt2); }
.mo-bandeja { border: 1px solid var(--linea-25); padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bj-cab-f { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; }
.bj-rot { font-family: var(--mono); font-size: 12px; color: var(--claro); }
.bj-total { display: flex; align-items: baseline; gap: 12px; margin: 0; font-family: var(--mono); line-height: 1; }
.bj-total .n { font-size: 72px; font-weight: 700; letter-spacing: -0.04em; color: var(--naranja-l); }
.bj-total .que { font-size: 16px; color: var(--claro); }
.bj-total strong { color: var(--blanco); font-weight: 700; }
.bj-fila { display: grid; grid-template-columns: 12px 72px 110px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 30px; border-bottom: 1px solid var(--linea-14); font-family: var(--mono); font-size: 12px; }
.bj-fila.bj-cab { min-height: 0; padding-bottom: 6px; border-bottom-color: var(--linea-25); color: var(--txt3); }
.bj-fila .fac { color: var(--claro); }
.bj-fila .n { color: var(--blanco); text-align: right; font-variant-numeric: tabular-nums; }
.bj-fila .tono { color: var(--txt2); }
.bj-fila .bj-estado { color: var(--naranja-l); }
.bj-fila.bj-cab .bj-estado, .bj-fila.bj-cab .n, .bj-fila.bj-cab .tono { color: var(--txt3); }
.mo-ad { display: flex; flex-direction: column; }
.ad-fila { display: grid; grid-template-columns: 260px minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--linea-14); }
.ad-fila.ad-cab { padding: 0 0 10px; border-bottom-color: var(--linea-25); }
.ad-nombre { font-family: var(--sans); font-size: 16px; line-height: 1.35; color: var(--blanco); }
.ad-col { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-family: var(--mono); }
.ad-col .n { min-width: 30px; font-size: 34px; font-weight: 700; line-height: 1; color: var(--blanco); }
.ad-despues .n { color: var(--naranja-l); }
.ad-texto { font-size: 13px; color: var(--txt2); }
.ad-de { font-size: 13px; color: var(--claro); }
.ad-et { display: none; font-size: 12px; color: var(--txt2); }
.pista { display: flex; gap: 5px; align-items: center; min-height: 22px; }
.pista-barra { flex: 1; min-width: 120px; max-width: 360px; height: 22px; }
.pista-barra i { display: block; height: 100%; background: var(--naranja); transform-origin: 0 50%; }
.ad-despues .pista-barra i { background: var(--naranja-l); }
.ad-col .n small { font-size: 13px; font-weight: 400; color: var(--claro); margin-left: 6px; letter-spacing: 0; }
.pista .cero { display: block; width: 150px; height: 22px; border-bottom: 1px dashed var(--linea-50); }
.muestra.c-mal { background: var(--naranja); }
/* En la leyenda, todas las muestras del mismo tamaño: .c-mal y .c-bj traen el de su casilla. */
.muestra.c-mal, .muestra.c-bj { width: 10px; height: 8px; }

/* ===== CON FECHA: cuenta atrás sobre la regla de días ===== */
.lamina-con-fecha .lamina-fig { gap: 18px; }
.cf-cuerpo { position: relative; }
.cuenta { display: flex; flex-direction: column; gap: 8px; }
.cuenta-flota .cuenta { position: absolute; top: 6px; left: 0; z-index: 1; width: 190px; }
.cuenta-flota .cuenta-desde { font-size: 13px; }
.cuenta-desde { margin: 0; font-family: var(--mono); font-size: 14px; line-height: 1.45; color: var(--blanco); max-width: 17em; }
.regla { overflow: hidden; padding-top: 6px; }
/* Cada variante está dibujada al ancho más estrecho de su banda: se estira, nunca se encoge. */
.regla svg.regla-dib { width: 100%; height: auto; }
.rv-s { display: none; }
.cf-pie { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; }
.lamina-lista { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-family: var(--mono); font-size: 13px; }
.lamina-lista .s-bl { stroke-width: 1.8; }

/* ===== MEDIDO: una casilla por caso y el fallo en grande ===== */
.prueba { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.prueba + .prueba { padding-top: 26px; border-top: 1px solid var(--linea-14); }
.tira { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(24px, 1fr)); gap: 0; }
.caso { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; }
.casilla { display: block; width: 100%; max-width: 30px; height: 72px; transform-origin: 50% 100%; }
.caso.ok .casilla { background: var(--teal); }
.caso.fallo .casilla { border: 2px solid var(--naranja); }
.caso.sin .casilla { border: 1px dashed var(--txt3); }
.caso-n { font-family: var(--mono); font-size: 12px; color: var(--txt3); }
.caso.fallo .caso-n { color: var(--naranja-l); }
.muestra.c-ok { background: var(--teal); } .muestra.c-fallo { border: 1px solid var(--naranja); } .muestra.c-sin { border: 1px dashed var(--txt3); }
.tira-fallo { display: grid; margin-top: 6px; }
.guia-fallo { padding: 22px 0 4px 20px; border-left: 1px solid var(--naranja-l); margin-left: calc(100% / var(--lleva, 1) / 2); transform-origin: 0 0; }
.guia-der { padding: 22px 20px 4px 0; border-left: 0; border-right: 1px solid var(--naranja-l); margin-left: 0; margin-right: calc(100% / var(--lleva, 1) / 2); text-align: right; }
.guia-fallo.sin-guia { grid-column: 1 / -1; margin: 0; }
.guia-fallo .rot-nl { color: var(--naranja-l); margin: 0 0 12px; }
.guia-fallo dl { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px 14px; align-items: baseline; margin: 0; }
.guia-der dl { grid-template-columns: minmax(0, 1fr) 64px; }
.guia-der dt { order: 2; } .guia-der .escribio { order: 1; } .guia-der dd:last-child { order: 3; }
.guia-fallo dt { font-family: var(--mono); font-size: 12px; color: var(--txt3); }
.guia-fallo dd { margin: 0; font-family: var(--mono); font-weight: 700; font-size: 48px; line-height: 1; letter-spacing: -0.02em; color: var(--blanco); overflow-wrap: anywhere; }
.guia-fallo .escribio { color: var(--naranja-l); }
.lecturas-medido { border-left: 1px solid var(--linea-16); padding-left: 32px; gap: 18px; }
.lect-frac { margin: 0; font-family: var(--mono); font-weight: 700; line-height: .9; letter-spacing: -0.04em; }
.lect-frac .n { font-size: 96px; color: var(--blanco); }
.lect-frac .de, .lect-frac .tot { font-size: 40px; color: var(--txt2); }
.lect-que { margin: 0; font-family: var(--mono); font-size: 13px; color: var(--claro); }
.lect-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding-top: 14px; border-top: 1px solid var(--linea-16); }
.lect-datos dd small { font-size: 14px; font-weight: 400; color: var(--claro); }
.lect-datos dd { white-space: nowrap; margin: 0; font-family: var(--mono); font-weight: 700; font-size: 28px; color: var(--blanco); }
.veredicto { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; min-height: 34px; margin: 0; padding: 0 12px;
    border: 1px solid var(--txt3); font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--blanco); }
.veredicto i { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--txt3); }
.veredicto.v-lo-usaria-el-lunes { border-color: var(--teal); }
.veredicto.v-lo-usaria-el-lunes i { background: var(--teal); }

/* ===== EL LIBRO: índice lateral | columna de 660 | de dónde sale ===== */
.libro {
    display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); column-gap: var(--hueco); align-items: start;
    max-width: var(--lienzo); margin: 0 auto; padding: 72px var(--marco) 88px;
}
.libro-lateral { position: sticky; top: 96px; }
.indice-post { display: flex; flex-direction: column; gap: 14px; }
.folio { margin: 0; font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--gris); }
.folio-linea { position: relative; height: 1px; background: var(--tinta-22); }
.folio-linea::after { content: ''; position: absolute; inset: 0; background: var(--tinta); transform-origin: left; transform: scaleX(0); }
@supports (animation-timeline: scroll(root)) {
    .folio-linea::after { animation: leido linear both; animation-timeline: scroll(root); }
}
@keyframes leido { to { transform: scaleX(1); } }
.indice-post ol, .indice-movil ol { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--tinta-22); }
.indice-post a, .indice-movil a {
    display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 6px; min-height: 30px; padding: 7px 0 7px 12px;
    font-family: var(--mono); font-size: 13px; line-height: 1.4; color: var(--gris); text-decoration: none;
    border-left: 2px solid transparent; margin-left: -1px; transition: color .15s var(--ease);
}
.indice-post a:hover, .indice-movil a:hover { color: var(--tinta); }
.indice-post a[aria-current="true"] { color: var(--tinta); border-left-color: var(--tinta); padding-left: 10px; }
.indice-post .n, .indice-movil .n { font-size: 12px; }
.indice-movil { display: none; border: 1px solid var(--tinta-22); margin: 0 0 36px; }
.indice-movil summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 0 14px; cursor: pointer; font-family: var(--mono); font-size: 13px; color: var(--tinta); }
.indice-movil summary::-webkit-details-marker { display: none; }
.indice-movil .im-n { color: var(--gris); }
.indice-movil ol { margin: 0 14px 14px; }
.abrir::after { content: ' · abrir +'; }
details[open] > summary .abrir::after { content: ' · cerrar −'; }

.libro-cuerpo { min-width: 0; }
.libro-cuerpo [id] { scroll-margin-top: 96px; }
.que-haria { max-width: var(--medida); border-top: 2px solid var(--tinta); padding-top: 18px; display: flex; flex-direction: column; gap: 16px; }
.qh-cab { display: flex; gap: 16px; align-items: flex-end; }
.qh-cab > div { display: flex; flex-direction: column; gap: 6px; }
.qh-bytolo img { display: block; width: 49px; height: 72px; }
.libro-cuerpo h2 { font-weight: 600; font-size: 28px; line-height: 1.25; color: var(--tinta); margin: 0; text-wrap: balance; }
.qh-texto { margin: 0; font-family: var(--sans); font-size: 21px; line-height: 32px; color: var(--tinta); }
.que-haria-firma { margin: 0; font-family: var(--mono); font-size: 12px; color: var(--gris); }

.bloque { display: grid; grid-template-columns: minmax(0, var(--medida)) var(--margen); column-gap: var(--hueco); align-items: start; margin-top: 72px; }
.bloque-texto { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.texto { font-family: var(--sans); font-size: 19px; line-height: 30px; color: var(--gris-p); hyphens: auto; hyphenate-limit-chars: 7 4 3; }
.texto p { margin: 0; }
.texto p + p { text-indent: 1.5em; }
.texto strong { font-weight: 600; color: var(--tinta); }
.texto em { font-style: italic; }
.texto a { color: var(--tinta); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--tinta-45); text-underline-offset: 3px; }
.texto a:hover { text-decoration-color: var(--naranja-o); }
.texto h3 { font-weight: 600; font-size: 21px; line-height: 1.3; color: var(--tinta); margin: 28px 0 8px; }
.texto ul, .texto ol { list-style: none; margin: 14px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.texto ol { counter-reset: punto; }
.texto li { position: relative; padding-left: 38px; }
.texto ol > li { counter-increment: punto; }
.texto ol > li::before, .texto ul > li::before { position: absolute; left: 0; top: 3px; font-family: var(--mono); font-size: 14px; line-height: 24px; color: var(--gris); }
.texto ol > li::before { content: counter(punto, decimal-leading-zero); }
.texto ul > li::before { content: '—'; }
.texto blockquote { margin: 18px 0; padding: 0 0 0 28px; font-style: italic; font-size: 18px; line-height: 29px; color: var(--tinta); }
.texto blockquote p + p { text-indent: 0; margin-top: 10px; }
.texto table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 13px; line-height: 1.45; color: var(--tinta); }
.texto th, .texto td { border-bottom: 1px solid var(--tinta-22); padding: 9px 12px 9px 0; text-align: left; vertical-align: top; font-weight: 400; }
.texto th { color: var(--gris); font-weight: 500; border-bottom-color: var(--tinta-45); }
.tabla-scroll { overflow-x: auto; margin: 20px 0; }

/* De dónde sale cada cifra del bloque (cifras.json). */
.donde-sale { padding-top: 58px; min-width: 0; }
.donde-sale ul { list-style: none; margin: 6px 0 0; padding: 0; border-top: 1px solid var(--tinta-45); }
.donde-sale li { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--tinta-22); break-inside: avoid; }
.ds-cifra { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--tinta); }
.ds-cifra.medida { color: var(--teal-t); }
.ds-frase { font-family: var(--sans); font-size: 14px; line-height: 1.45; color: var(--gris-p); }
.ds-tipo { display: flex; align-items: baseline; gap: 8px; font-family: var(--mono); font-size: 12px; line-height: 1.4; color: var(--gris); }
.ds-tipo i { flex: none; display: block; width: 8px; height: 8px; transform: translateY(1px); }
.t-oficial { background: var(--tinta); } .t-calculo { border: 1px solid var(--tinta); } .t-medido { background: var(--teal); }
/* Si la procedencia mide bastante más que el texto, va debajo, a lo ancho, en tres columnas. Solo en
   escritorio ancho: por debajo de 1416 px toda la procedencia ya va debajo, en dos columnas o en una. */
@media (min-width: 1416px) {
    .donde-sale.donde-abajo { grid-column: 1 / -1; padding-top: 26px; }
    .donde-sale.donde-abajo ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
}

/* ===== ESTO TE LO MONTAMOS: franja naranja, texto negro (5,16:1) ===== */
.montamos { background: var(--naranja); color: var(--negro); }
.montamos-rejilla {
    display: grid; grid-template-columns: var(--lateral) minmax(0, var(--medida)) minmax(0, 1fr); gap: var(--hueco); align-items: start;
    max-width: var(--lienzo); margin: 0 auto; padding: 56px var(--marco);
}
.montamos .num { color: var(--negro); }
.montamos-cab { display: flex; flex-direction: column; gap: 6px; }
.montamos h2 { font-weight: 600; font-size: 28px; line-height: 1.2; color: var(--negro); margin: 0; }
.montamos-texto { margin: 0; font-family: var(--sans); font-weight: 500; font-size: 22px; line-height: 1.42; color: var(--negro); }
.montamos-accion { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.montamos-accion p { margin: 0; font-family: var(--mono); font-size: 13px; line-height: 1.5; color: var(--negro); }
.btn-negro {
    display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 22px; background: var(--negro); color: var(--blanco);
    font-family: var(--mono); font-size: 14px; font-weight: 600; text-decoration: none; transition: background-color .15s var(--ease);
}
.btn-negro:hover { background: var(--gris-p); }

/* ===== LA COLA: descargable, reenvío y pie ===== */
.cola {
    display: grid; grid-template-columns: var(--lateral) minmax(0, var(--medida)); column-gap: var(--hueco); row-gap: 64px;
    max-width: var(--lienzo); margin: 0 auto; padding: 72px var(--marco) 72px;
}
.cola > * { grid-column: 2; }
.cola h2 { font-weight: 600; margin: 0; color: var(--tinta); }
.descargable, .reenvio, .pie-numero { display: flex; flex-direction: column; gap: 14px; }
.desc-caja { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: end; padding: 20px 0; border-top: 1px solid var(--tinta-45); border-bottom: 1px solid var(--tinta-22); }
.desc-caja > div { display: flex; flex-direction: column; gap: 8px; }
.descargable h2 { font-size: 21px; line-height: 1.3; }
.descargable-meta { margin: 0; font-family: var(--mono); font-size: 12px; color: var(--gris); }
.enlace-accion {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; align-self: flex-start;
    font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--tinta); text-decoration: none;
    border-bottom: 2px solid var(--naranja-o); transition: color .15s var(--ease);
}
/* Al pasar el ratón cambia el subrayado, no el texto: naranja-o sobre papel da 4,04:1 y a 14 px
   no llega al 4,5:1 (el sistema de diseño solo lo admite como texto a 24 px o más). */
.enlace-accion:hover { border-bottom-color: var(--tinta); }
.desc-caja .enlace-accion { align-self: end; }
.reenvio h2, .pie-numero h2 { font-size: 24px; line-height: 1.25; }
.reenvio p { margin: 0; }
.reenvio-texto { font-family: var(--sans); font-size: 20px; line-height: 1.5; color: var(--tinta); max-width: 34em; }
.pie-filas { margin: 0; }
.pie-fila { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; padding: 14px 0; border-top: 1px solid var(--tinta-22); }
.pie-fila dt { font-family: var(--mono); font-size: 12px; color: var(--gris); padding-top: 3px; }
.pie-fila dd { margin: 0; font-family: var(--sans); font-size: 15px; line-height: 1.55; color: var(--gris-p); min-width: 0; }
.pie-fila p { margin: 0; }
.pie-firma strong { color: var(--tinta); font-weight: 600; }
.fuentes, .licencias { list-style: none; margin: 0; padding: 0; }
.fuentes li { padding: 8px 0; border-bottom: 1px solid var(--tinta-22); overflow-wrap: anywhere; }
.fuentes li:first-child { padding-top: 0; }
.fuentes a, .licencias a { color: var(--tinta); text-decoration: underline; text-decoration-color: var(--tinta-45); text-underline-offset: 3px; }
.fuentes a:hover, .licencias a:hover { text-decoration-color: var(--naranja-o); }
.fuente-meta { display: block; margin-top: 3px; font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--gris); }
.pie-errata { margin: 0; font-family: var(--sans); font-size: 15px; line-height: 1.55; color: var(--gris); }
.pie-errata a { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }
.registro { background: var(--negro); border: 1px solid var(--linea-14); font-family: var(--mono); font-size: 13px; line-height: 1.55; color: var(--claro); }
.registro summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 0 16px; color: var(--txt2); cursor: pointer; }
.registro summary::-webkit-details-marker { display: none; }
.registro[open] summary { border-bottom: 1px solid var(--linea-14); }
.reg-modelo { display: flex; gap: 8px; align-items: center; }
.reg-modelo .punto { box-shadow: none; transform: none; }
.registro-lineas { list-style: none; margin: 0; padding: 12px 16px 14px; }
.registro-lineas li { display: grid; grid-template-columns: 120px 150px minmax(0, 1fr); gap: 14px; padding: 5px 0; }
.registro .hora { color: var(--txt3); }
.registro .quien { color: var(--naranja-l); }
.registro .que { color: var(--claro); }

/* ===== ANTERIOR / SIGUIENTE ===== */
.numero-nav { max-width: var(--lienzo); margin: 0 auto; padding: 0 var(--marco) 56px; font-family: var(--mono); font-size: 13px; line-height: 1.4; color: var(--tinta); }
.numero-nav .cont { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 24px; align-items: center; padding: 16px 0; border-top: 1px solid var(--tinta-22); border-bottom: 1px solid var(--tinta-22); }
.numero-nav a, .numero-nav .vacio { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--gris); }
.numero-nav a:hover { color: var(--tinta); }
.numero-nav .ant { justify-self: start; }
.numero-nav .sig { justify-self: end; text-align: right; }
.numero-nav .todos { justify-self: center; color: var(--tinta); border-bottom: 2px solid var(--naranja-o); }
.numero-nav .flecha { flex: none; }

/* ===== PORTADA: «_A la última», el último número y el registro ===== */
.portada-cab {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--hueco); align-items: end;
    max-width: var(--lienzo); margin: 0 auto; padding: 64px var(--marco) 56px;
}
.pag-portada .portada-cab { border-bottom: 1px solid var(--tinta-22); }
.pc-izq, .pc-der { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.pc-der { gap: 10px; }
body.blog .portada-cab h1 { font-family: var(--mono); font-weight: 500; font-size: 104px; line-height: .95; letter-spacing: -0.07em; color: var(--tinta); margin: 0; }
.guion-o { color: var(--naranja-o); }
.lema { margin: 0; font-family: var(--sans); font-size: 24px; line-height: 1.4; color: var(--gris-p); max-width: 30em; }
.sumario { margin: -8px 0 0; font-family: var(--sans); font-size: 17px; line-height: 1.5; color: var(--gris); max-width: 36em; }
.series { list-style: none; margin: 0; padding: 0; }
.series li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; padding: 9px 0; border-top: 1px solid var(--tinta-22); font-family: var(--mono); font-size: 13px; line-height: 1.45; color: var(--gris); }
.series b { font-weight: 600; color: var(--tinta); }

.ultimo {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start;
    max-width: var(--lienzo); margin: 0 auto; padding: 56px var(--marco) 64px;
}
.ultimo-texto { display: flex; flex-direction: column; gap: 18px; padding-top: 16px; border-top: 2px solid var(--tinta); min-width: 0; }
.ultimo-rot { display: flex; justify-content: space-between; gap: 12px; margin: 0; }
.rot-serie { color: var(--tinta); font-weight: 600; }
.ultimo h2 { font-weight: 600; font-size: 36px; line-height: 1.12; letter-spacing: -0.015em; margin: 0; color: var(--tinta); }
.ultimo h2 a, .entrada-titular a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: transparent; transition: text-decoration-color .15s var(--ease); }
.ultimo h2 a:hover, .entrada-titular a:hover { text-decoration-color: var(--naranja-o); }
.ultimo-entradilla { margin: 0; font-family: var(--sans); font-size: 19px; line-height: 1.5; color: var(--gris-p); }
.ultimo-folio { margin: 0; font-family: var(--mono); font-size: 12px; line-height: 1.6; color: var(--gris); }

.numeros { max-width: var(--lienzo); margin: 0 auto; padding: 8px var(--marco) 80px; }
.reg-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 14px; }
.reg-cab h2.rot { font-family: var(--mono); font-size: 13px; font-weight: 400; margin: 0; }
.reg-cab p.rot { margin: 0; }
.registro-numeros { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--tinta-45); }
.entrada { display: grid; grid-template-columns: 150px minmax(0, 1fr) 360px; gap: 40px; align-items: start; margin: 0; padding: 30px 0; border-top: 1px solid var(--tinta-45); }
.entrada-folio { margin: 0; font-family: var(--mono); font-size: 13px; line-height: 1.6; color: var(--gris); }
.entrada-texto { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.entrada-serie { margin: 0; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--tinta); }
.entrada-titular { font-weight: 600; font-size: 24px; line-height: 1.25; color: var(--tinta); margin: 0; max-width: 26em; }
.entrada-entradilla { margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.5; color: var(--gris-p); max-width: 36em; }
.entrada-firma { margin: 0; font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--gris); }
.numeros .vacio { display: flex; align-items: center; gap: 20px; padding: 24px 0; font-family: var(--mono); font-size: 14px; color: var(--gris); border-top: 1px solid var(--tinta-45); }
.numeros .vacio img { width: 49px; height: 72px; }
.quien-escribe {
    display: grid; grid-template-columns: 150px minmax(0, var(--medida)); gap: 40px;
    max-width: var(--lienzo); margin: 0 auto; padding: 0 var(--marco) 88px;
}
.quien-escribe .rot { margin: 0; }
.transparencia { margin: 0; font-family: var(--sans); font-size: 15px; line-height: 1.55; color: var(--gris); }
.transparencia strong { color: var(--gris-p); font-weight: 600; }
.transparencia a { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }

/* Miniatura: la cifra de la lámina en grande sobre la lámina compacta, en su bloque negro. */
.mini { background: var(--negro); color: var(--claro); display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 14px; min-width: 0; }
.mini p { margin: 0; }
.mini-cab { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; line-height: 1.4; color: var(--claro); }
.mini-cab .muestra { width: 12px; height: 6px; }
.mini-cifras { display: flex; flex-wrap: wrap; gap: 4px 24px; font-family: var(--mono); font-weight: 700; line-height: .9; }
.mini-cifras > span { display: flex; align-items: baseline; gap: 8px; }
.mini-cifras .n { font-size: 56px; letter-spacing: -0.04em; color: var(--blanco); }
.mini-cifras.mini-nl .n { color: var(--naranja-l); }
.mini-cifras .que { font-size: 12px; font-weight: 400; letter-spacing: .02em; color: var(--txt2); line-height: 1.3; }
.mini-nl .que { font-size: 14px; color: var(--claro); }
.mini-dib { overflow: hidden; }
.mini-dib svg { max-width: 100%; height: auto; }
.mini-cas { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.mini-cas .cas { width: 14px; height: 14px; }
.mini-cas .que { margin-left: 6px; font-family: var(--mono); font-size: 12px; color: var(--txt2); }
.mini-tira .cas { width: 8px; height: 20px; }
.mini-cas .c-ok { background: var(--teal); } .mini-cas .c-fallo { border: 1px solid var(--naranja); } .mini-cas .c-sin { border: 1px dashed var(--txt3); }
.mini-pie { font-family: var(--mono); font-size: 12px; line-height: 1.45; color: var(--txt3); }
.mini-grande { padding: 28px 30px 22px; gap: 16px; }
.mini-grande .mini-cab { font-size: 14px; gap: 10px; }
.mini-grande .mini-cab .muestra { width: 16px; height: 8px; }
.mini-grande .mini-cifras { gap: 4px 40px; }
.mini-grande .mini-cifras .n { font-size: 120px; letter-spacing: -0.045em; }
.mini-grande .mini-cifras .que { font-size: 16px; }

/* ===== PÁGINAS (aviso legal, privacidad, kit y pruebas, 404) ===== */
.pagina-cab { background: var(--papel); color: var(--tinta); padding: 48px var(--marco) 36px; border-bottom: 1px solid var(--tinta-22); }
.cont { max-width: 1040px; margin: 0 auto; }
.numero-meta { display: flex; align-items: baseline; gap: 8px 18px; flex-wrap: wrap; margin: 0 0 20px; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--gris); }
.pagina-cab h1 { font-weight: 600; letter-spacing: -0.015em; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.12; max-width: 19em; margin: 0; }
.numero.pagina { max-width: calc(1040px + 2 * var(--marco)); margin: 0 auto; padding: 48px var(--marco) 72px; color: var(--tinta); }
.numero-cuerpo { max-width: var(--medida); font-family: var(--sans); font-size: 18px; line-height: 29px; color: var(--gris-p); hyphens: auto; }
.numero-cuerpo p { margin: 0; }
.numero-cuerpo p + p { margin-top: 14px; }
.numero-cuerpo p + ul, .numero-cuerpo p + ol, .numero-cuerpo ul + p, .numero-cuerpo ol + p, .numero-cuerpo .tabla-scroll + p { margin-top: 18px; }
.numero-cuerpo strong { font-weight: 600; color: var(--tinta); }
.numero-cuerpo a { color: var(--tinta); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--tinta-45); }
.numero-cuerpo a:hover { text-decoration-color: var(--naranja-o); }
.numero-cuerpo h2 { font-weight: 600; font-size: 26px; line-height: 1.25; color: var(--tinta); margin: 56px 0 14px; }
.numero-cuerpo > h2:first-child { margin-top: 0; }
.numero-cuerpo h3 { font-weight: 600; font-size: 20px; line-height: 1.3; color: var(--tinta); margin: 32px 0 8px; }
.numero-cuerpo ul, .numero-cuerpo ol { margin: 0; padding-left: 26px; }
.numero-cuerpo li { margin: 0 0 8px; padding-left: 4px; }
.numero-cuerpo li::marker { font-family: var(--mono); font-size: 14px; color: var(--gris); }
.numero-cuerpo blockquote { margin: 24px 0; padding: 0 0 0 28px; font-style: italic; color: var(--tinta); }
.numero-cuerpo table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 13px; line-height: 1.45; color: var(--tinta); }
.numero-cuerpo th, .numero-cuerpo td { border-bottom: 1px solid var(--tinta-22); padding: 9px 12px 9px 0; text-align: left; vertical-align: top; font-weight: 400; }
.numero-cuerpo th { color: var(--gris); font-weight: 500; }
.numero-cuerpo dl { margin: 0; }
.numero-cuerpo dt { font-family: var(--mono); font-size: 13px; color: var(--gris); margin-top: 14px; }
.numero-cuerpo dd { margin: 4px 0 0; }

/* ===== RESPONSIVE (ESPEC §7) ===== */
/* Variantes de ancho fijo de las láminas: el CSS enseña la que cabe. */
.v-l, .v-medio, .v-estrecho, .v-movil { display: none; }

@media (max-width: 1415px) {
    .v-xl { display: none; }
    .v-l { display: block; }
    /* La lectura sube encima del contador, en fila. */
    .contado-ancho { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .contado-ancho .lecturas { order: -1; border-left: 0; padding-left: 0; flex-direction: row; flex-wrap: wrap; gap: 20px 56px;
        padding-bottom: 18px; border-bottom: 1px solid var(--linea-16); margin-bottom: 18px; align-self: auto; }
    .contado-ancho .lect-bloque { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 10px 28px; }
    .contado-ancho .lect-bloque > .rot, .contado-ancho .lect-cab { flex-basis: 100%; }
    .contado-ancho .lect-bloque + .lect-bloque { padding-top: 0; border-top: 0; }
    .contado-ancho .lect-n .n { font-size: 72px; }
    /* El contador llena la lámina: cada variante se estira hasta su banda (1,3 veces como mucho). */
    .contado-dib svg.contador { width: 100%; height: auto; }
    /* De dónde sale baja al final de su bloque, en dos columnas. */
    .libro { grid-template-columns: var(--lateral) minmax(0, var(--medida)); }
    .bloque { grid-template-columns: minmax(0, 1fr); }
    .donde-sale { padding-top: 22px; }
    .donde-sale ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
    .prueba { grid-template-columns: minmax(0, 1fr) 260px; }
}

@media (max-width: 1180px) {
    body.blog { --lateral: 200px; }
    .v-ancho, .v-xl, .v-l { display: none; }
    .v-medio { display: block; }
    .numero-cab h1 { font-size: 44px; line-height: 1.1; }
    .lamina-lienzo { padding: 36px var(--marco) 44px; }
    .lamina-fig { padding: 20px 22px 18px; }
    .buscador { grid-template-columns: minmax(0, 1fr) 280px; column-gap: 32px; }
    .bus-control { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 32px; align-items: end; }
    .bus-control > .rot { grid-column: 1 / -1; }
    .mo-flujo { grid-template-columns: 170px 120px minmax(0, 1fr); row-gap: 28px; }
    .mo-flujo svg.mo-flecha2 { display: none; }
    .mo-bandeja { grid-column: 1 / -1; }
    .ad-fila { grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
    .prueba { grid-template-columns: minmax(0, 1fr); }
    .lecturas-medido { border-left: 0; padding-left: 0; padding-top: 18px; border-top: 1px solid var(--linea-16); }
    .guia-fallo dd { font-size: 40px; }
    .montamos-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .montamos-cab { grid-column: 1 / -1; }
    .ultimo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
    .portada-cab { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    body.blog .portada-cab h1 { font-size: 80px; }
    .mini-grande .mini-cifras .n { font-size: 88px; }
}

@media (max-width: 1040px) {
    .v-medio { display: none; }
    .v-estrecho { display: block; }
    .numero-cab { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .libro { grid-template-columns: minmax(0, 1fr); padding-top: 48px; }
    .libro-lateral { display: none; }
    .indice-movil { display: block; max-width: var(--medida); }
    .libro-cuerpo { max-width: var(--medida); }
    .buscador { grid-template-columns: minmax(0, 1fr); }
    .bus-mes { padding-top: 0; }
    .cola { grid-template-columns: minmax(0, 1fr); }
    .cola > * { grid-column: 1; max-width: var(--medida); }
    .montamos-rejilla { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .ultimo { grid-template-columns: minmax(0, 1fr); }
    .entrada { grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; }
    .entrada-folio { grid-column: 1 / -1; }
    .entrada-folio br { display: none; }
    .quien-escribe { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

@media (max-width: 860px) {
    .v-medio, .v-estrecho, .v-no-movil, svg.dib.v-no-movil { display: none; }
    .v-movil { display: block; }
    /* El contador móvil está dibujado a 280 px y se estira 1,25 veces como mucho. */
    svg.contador.c-movil { width: 100%; height: auto; max-width: 336px; }
    .ficha { display: none; }
    .ficha-movil { display: flex; flex-direction: column; gap: 4px; padding: 12px var(--marco); font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--gris); }
    .ficha-movil p { margin: 0; }
    .ficha-movil p:first-child { display: flex; justify-content: space-between; gap: 12px; }
    .ficha-movil b { font-size: 13px; font-weight: 600; color: var(--tinta); }
    .numero-cab { padding: 20px var(--marco) 22px; gap: 14px; }
    .cuenta-flota .cuenta { position: static; width: auto; }
    .numero-cab h1 { font-size: 26px; line-height: 1.15; letter-spacing: -0.015em; }
    .cab-lado { border-top: 0; padding-top: 0; gap: 14px; }
    .entradilla { font-size: 17px; line-height: 26px; }
    /* La lámina en el móvil: sin marco de figura; el encuadre va en cada instrumento. */
    .lamina-lienzo { padding: 28px var(--marco) 36px; }
    .lamina-fig { border: 0; padding: 0; gap: 20px; }
    .lamina-fig > .esq { display: none; }
    .instrumento { padding: 14px 0 8px; }
    .instrumento > .esq { display: block; width: 10px; height: 10px; }
    .instrumento > .e1 { top: -5px; left: -5px; } .instrumento > .e2 { top: -5px; right: -5px; }
    .instrumento > .e3 { bottom: -5px; left: -5px; } .instrumento > .e4 { bottom: -5px; right: -5px; }
    .lamina-cab { flex-direction: column; align-items: flex-start; gap: 6px; padding-bottom: 0; border-bottom: 0; }
    .lamina-titulo { flex-direction: column; gap: 6px; }
    .lamina-unidad { text-align: left; }
    .lamina-contado .lamina-lienzo { padding-top: 16px; }
    .apiladas { display: flex; flex-direction: column; gap: 10px; padding-bottom: 22px; margin-bottom: 20px; border-bottom: 1px solid var(--linea-16); }
    .contado-movil { display: flex; flex-direction: column; gap: 22px; }
    .contado-movil .instrumento { padding: 14px 0 8px; }
    .lecturas-movil .lect-bloque + .lect-bloque { display: none; }
    .buscador { padding-top: 28px; gap: 16px; }
    /* align-items: stretch deshace el «end» de ≤1180: sin él, campo, botones y nota se iban a la derecha. */
    .bus-control { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
    .tabla-datos thead { display: none; }
    .tabla-datos, .tabla-datos tbody { display: block; }
    .tabla-datos tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 10px 12px; }
    .tabla-datos tbody th, .tabla-datos td { height: auto; padding: 0; width: auto; }
    .tabla-datos tbody th { grid-column: 1; grid-row: 1; }
    .tabla-datos .n { grid-column: 2; grid-row: 1; }
    .tabla-datos .prov { grid-column: 1; grid-row: 2; font-size: 12px; }
    .tabla-datos .escala { grid-column: 2; grid-row: 2; }
    .tabla-datos .mr { width: 120px; }
    .tabla-datos-marco { max-height: 440px; }
    .mo-flujo { display: flex; flex-direction: column; gap: 14px; }
    .rejilla-ent { grid-template-columns: repeat(8, 24px); }
    .rejilla-ent .cas, .lista-ap .cas { width: 24px; height: 24px; }
    .lista-ap li { grid-template-columns: 24px 60px minmax(0, 1fr); gap: 10px; }
    .mo-baja.v-movil { display: flex; }
    .mo-resto { display: none; }
    .bj-cab-f { flex-direction: column; align-items: flex-start; }
    .bj-total .n { font-size: 56px; }
    .bj-total .que { font-size: 14px; }
    .bj-fila { grid-template-columns: 12px 64px minmax(0, 1fr) 96px; }
    .bj-fila .tono { text-align: right; }
    .bj-estado { display: none; }
    .ad-fila { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
    .ad-fila.ad-cab { padding-bottom: 8px; }
    .ad-col { display: grid; grid-template-columns: 132px 34px minmax(0, 1fr); gap: 10px; }
    .ad-col .n { font-size: 28px; }
    .ad-texto { grid-template-columns: 132px minmax(0, 1fr); }
    .ad-et.v-movil { display: block; }
    .ad-de { grid-column: 2 / -1; font-size: 12px; }
    .pista .cas { width: 18px; height: 18px; }
    .regla.instrumento { overflow: visible; }
    .cf-pie { flex-direction: column; align-items: flex-start; }
    .prueba { gap: 22px; }
    .tira-bloque { padding: 14px 0 10px; }
    .lamina-medido .tira, .lamina-medido .tira-fallo { grid-template-columns: repeat(auto-fill, minmax(26px, 1fr)); row-gap: 16px; }
    .casilla { max-width: 16px; height: 48px; }
    .lamina-medido .guia-fallo { grid-column: 1 / -1; margin: 10px 0 0; border: 0; border-top: 1px solid var(--naranja-l); padding: 14px 0 0; text-align: left; }
    .guia-der dl { grid-template-columns: 64px minmax(0, 1fr); }
    .guia-der dt, .guia-der dd { order: 0; }
    .guia-fallo dd { font-size: 28px; }
    .lect-frac .n { font-size: 76px; }
    .lect-datos dd { font-size: 24px; }
    .libro { padding: 44px var(--marco) 56px; }
    .libro-cuerpo h2 { font-size: 24px; }
    .qh-bytolo img { width: 38px; height: 56px; }
    .qh-texto { font-size: 19px; line-height: 29px; }
    .bloque { margin-top: 48px; }
    .texto { font-size: 17px; line-height: 27px; }
    .donde-sale { margin-top: 4px; padding-top: 10px; border-top: 2px solid var(--tinta); }
    .donde-sale ul { display: block; border-top: 0; }
    .montamos-rejilla { padding: 40px var(--marco); }
    .montamos h2 { font-size: 24px; }
    .montamos-texto { font-size: 19px; }
    .btn-negro { width: 100%; justify-content: space-between; }
    .cola { padding: 48px var(--marco) 56px; row-gap: 48px; }
    .reenvio h2, .pie-numero h2 { font-size: 22px; }
    .reenvio-texto { font-size: 18px; }
    .desc-caja { grid-template-columns: minmax(0, 1fr); }
    .desc-caja .enlace-accion { align-self: start; }
    .pie-fila { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .fuentes a { display: inline-block; padding: 12px 0 10px; }
    .fuentes li { padding: 0 0 8px; }
    .registro-lineas li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .numero-nav .cont { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 0; }
    .numero-nav .sig, .numero-nav .todos { justify-self: start; text-align: left; }
    .numero-nav .vacio { display: none; }
    .portada-cab { padding: 32px var(--marco) 36px; gap: 28px; }
    body.blog .portada-cab h1 { font-size: 48px; }
    .lema { font-size: 19px; }
    .series li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .ultimo { padding: 32px var(--marco) 40px; gap: 24px; }
    .ultimo h2 { font-size: 27px; }
    .ultimo-entradilla { font-size: 17px; }
    .mini-grande { padding: 20px 18px 14px; gap: 12px; }
    .mini-grande .mini-cab { font-size: 12px; }
    .mini-grande .mini-cifras { gap: 4px 28px; }
    .mini-grande .mini-cifras .n { font-size: 64px; }
    .mini-grande .mini-cifras .que { font-size: 14px; }
    .numeros { padding: 8px var(--marco) 56px; }
    .reg-cab { flex-direction: column; gap: 4px; }
    .entrada { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 24px 0; }
    .entrada-folio { display: none; }
    .entrada-titular { font-size: 21px; }
    .quien-escribe { padding-bottom: 56px; }
}

/* Tableta (760-860): cabe la variante estrecha de la lámina (720 px) y se usa esa, no la de móvil. */
@media (min-width: 760px) and (max-width: 860px) {
    .v-estrecho, .v-ley-ancha { display: block; }
    .v-dib-movil { display: none; }
}

/* Por debajo de 390 px, la regla vertical de 280: la de 350 no cabe y encogida bajaría de 12 px. */
@media (max-width: 389px) {
    .rv-l { display: none; }
    .rv-s { display: block; }
}

@media (hover: none) and (pointer: coarse) {
    .indice-post a, .indice-movil a, .numero-nav .todos, .fuentes a { min-height: 44px; }
    /* En línea, min-height no hace nada: estos enlaces pasan a caja en línea para llegar a 44 px. */
    .licencias a, .firma-linea a { display: inline-flex; align-items: center; min-height: 44px; }
    .indice-movil a { align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
    .folio-linea::after { animation: none; transform: scaleX(0); }
    .bus-orden button, .enlace-accion, .btn-negro, .indice-post a { transition: none; }
}

/* ===== IMPRESO ===== */
@media print {
    .nav, .footer, .numero-nav, .libro-lateral, .indice-movil, .saltar, .buscador .bus-campo, .bus-orden, .reenvio, .registro, .apiladas { display: none; }
    /* En papel, los tokens claros de la lámina pasan a tinta, y con ellos las rayas y las cifras.
       Los rellenos de las marcas y las casillas se imprimen tal cual, que son el dato. */
    .lamina, .mini { background: none; color: var(--tinta);
        --blanco: var(--tinta); --claro: var(--tinta); --txt2: var(--gris-p); --txt3: var(--gris-p);
        --linea-14: var(--tinta-22); --linea-16: var(--tinta-22); --linea-25: var(--tinta-22); --linea-35: var(--tinta-45);
        --linea-50: var(--tinta-45); --linea-60: var(--tinta-45); }
    .lamina .fondo { fill: #fff; }
    .tabla-datos thead th { background: none; position: static; }
    .tabla-datos-marco { max-height: none; overflow: visible; }
    .lamina .k0, .lamina .k1, .lamina .k2, .lamina .cas, .lamina .casilla, .lamina .muestra, .lamina .mr-m, .montamos, .mini .cas {
        -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .libro, .cola { display: block; padding: 24px 0; }
    .bloque { display: block; }
}

/* ===== ANCHURAS Y POSICIONES CUANTIZADAS =====
   El generador escribe w-N (anchura) y pos-N (posición) con N de 0 a 100, y casos-N, desde-N y
   lleva-N en la tira de Medido. Van aquí y no en un style="" porque la CSP (style-src 'self')
   no admite estilos en línea. */
.w-0{width:0%} .w-1{width:1%} .w-2{width:2%} .w-3{width:3%} .w-4{width:4%} .w-5{width:5%} .w-6{width:6%} .w-7{width:7%} .w-8{width:8%} .w-9{width:9%}
.w-10{width:10%} .w-11{width:11%} .w-12{width:12%} .w-13{width:13%} .w-14{width:14%} .w-15{width:15%} .w-16{width:16%} .w-17{width:17%} .w-18{width:18%} .w-19{width:19%}
.w-20{width:20%} .w-21{width:21%} .w-22{width:22%} .w-23{width:23%} .w-24{width:24%} .w-25{width:25%} .w-26{width:26%} .w-27{width:27%} .w-28{width:28%} .w-29{width:29%}
.w-30{width:30%} .w-31{width:31%} .w-32{width:32%} .w-33{width:33%} .w-34{width:34%} .w-35{width:35%} .w-36{width:36%} .w-37{width:37%} .w-38{width:38%} .w-39{width:39%}
.w-40{width:40%} .w-41{width:41%} .w-42{width:42%} .w-43{width:43%} .w-44{width:44%} .w-45{width:45%} .w-46{width:46%} .w-47{width:47%} .w-48{width:48%} .w-49{width:49%}
.w-50{width:50%} .w-51{width:51%} .w-52{width:52%} .w-53{width:53%} .w-54{width:54%} .w-55{width:55%} .w-56{width:56%} .w-57{width:57%} .w-58{width:58%} .w-59{width:59%}
.w-60{width:60%} .w-61{width:61%} .w-62{width:62%} .w-63{width:63%} .w-64{width:64%} .w-65{width:65%} .w-66{width:66%} .w-67{width:67%} .w-68{width:68%} .w-69{width:69%}
.w-70{width:70%} .w-71{width:71%} .w-72{width:72%} .w-73{width:73%} .w-74{width:74%} .w-75{width:75%} .w-76{width:76%} .w-77{width:77%} .w-78{width:78%} .w-79{width:79%}
.w-80{width:80%} .w-81{width:81%} .w-82{width:82%} .w-83{width:83%} .w-84{width:84%} .w-85{width:85%} .w-86{width:86%} .w-87{width:87%} .w-88{width:88%} .w-89{width:89%}
.w-90{width:90%} .w-91{width:91%} .w-92{width:92%} .w-93{width:93%} .w-94{width:94%} .w-95{width:95%} .w-96{width:96%} .w-97{width:97%} .w-98{width:98%} .w-99{width:99%}
.w-100{width:100%}
.pos-0{left:0%} .pos-1{left:1%} .pos-2{left:2%} .pos-3{left:3%} .pos-4{left:4%} .pos-5{left:5%} .pos-6{left:6%} .pos-7{left:7%} .pos-8{left:8%} .pos-9{left:9%}
.pos-10{left:10%} .pos-11{left:11%} .pos-12{left:12%} .pos-13{left:13%} .pos-14{left:14%} .pos-15{left:15%} .pos-16{left:16%} .pos-17{left:17%} .pos-18{left:18%} .pos-19{left:19%}
.pos-20{left:20%} .pos-21{left:21%} .pos-22{left:22%} .pos-23{left:23%} .pos-24{left:24%} .pos-25{left:25%} .pos-26{left:26%} .pos-27{left:27%} .pos-28{left:28%} .pos-29{left:29%}
.pos-30{left:30%} .pos-31{left:31%} .pos-32{left:32%} .pos-33{left:33%} .pos-34{left:34%} .pos-35{left:35%} .pos-36{left:36%} .pos-37{left:37%} .pos-38{left:38%} .pos-39{left:39%}
.pos-40{left:40%} .pos-41{left:41%} .pos-42{left:42%} .pos-43{left:43%} .pos-44{left:44%} .pos-45{left:45%} .pos-46{left:46%} .pos-47{left:47%} .pos-48{left:48%} .pos-49{left:49%}
.pos-50{left:50%} .pos-51{left:51%} .pos-52{left:52%} .pos-53{left:53%} .pos-54{left:54%} .pos-55{left:55%} .pos-56{left:56%} .pos-57{left:57%} .pos-58{left:58%} .pos-59{left:59%}
.pos-60{left:60%} .pos-61{left:61%} .pos-62{left:62%} .pos-63{left:63%} .pos-64{left:64%} .pos-65{left:65%} .pos-66{left:66%} .pos-67{left:67%} .pos-68{left:68%} .pos-69{left:69%}
.pos-70{left:70%} .pos-71{left:71%} .pos-72{left:72%} .pos-73{left:73%} .pos-74{left:74%} .pos-75{left:75%} .pos-76{left:76%} .pos-77{left:77%} .pos-78{left:78%} .pos-79{left:79%}
.pos-80{left:80%} .pos-81{left:81%} .pos-82{left:82%} .pos-83{left:83%} .pos-84{left:84%} .pos-85{left:85%} .pos-86{left:86%} .pos-87{left:87%} .pos-88{left:88%} .pos-89{left:89%}
.pos-90{left:90%} .pos-91{left:91%} .pos-92{left:92%} .pos-93{left:93%} .pos-94{left:94%} .pos-95{left:95%} .pos-96{left:96%} .pos-97{left:97%} .pos-98{left:98%} .pos-99{left:99%}
.pos-100{left:100%}
.casos-1{grid-template-columns:repeat(1,minmax(0,1fr))} .desde-1{grid-column-start:1} .lleva-1{grid-column-end:span 1;--lleva:1}
.casos-2{grid-template-columns:repeat(2,minmax(0,1fr))} .desde-2{grid-column-start:2} .lleva-2{grid-column-end:span 2;--lleva:2}
.casos-3{grid-template-columns:repeat(3,minmax(0,1fr))} .desde-3{grid-column-start:3} .lleva-3{grid-column-end:span 3;--lleva:3}
.casos-4{grid-template-columns:repeat(4,minmax(0,1fr))} .desde-4{grid-column-start:4} .lleva-4{grid-column-end:span 4;--lleva:4}
.casos-5{grid-template-columns:repeat(5,minmax(0,1fr))} .desde-5{grid-column-start:5} .lleva-5{grid-column-end:span 5;--lleva:5}
.casos-6{grid-template-columns:repeat(6,minmax(0,1fr))} .desde-6{grid-column-start:6} .lleva-6{grid-column-end:span 6;--lleva:6}
.casos-7{grid-template-columns:repeat(7,minmax(0,1fr))} .desde-7{grid-column-start:7} .lleva-7{grid-column-end:span 7;--lleva:7}
.casos-8{grid-template-columns:repeat(8,minmax(0,1fr))} .desde-8{grid-column-start:8} .lleva-8{grid-column-end:span 8;--lleva:8}
.casos-9{grid-template-columns:repeat(9,minmax(0,1fr))} .desde-9{grid-column-start:9} .lleva-9{grid-column-end:span 9;--lleva:9}
.casos-10{grid-template-columns:repeat(10,minmax(0,1fr))} .desde-10{grid-column-start:10} .lleva-10{grid-column-end:span 10;--lleva:10}
.casos-11{grid-template-columns:repeat(11,minmax(0,1fr))} .desde-11{grid-column-start:11} .lleva-11{grid-column-end:span 11;--lleva:11}
.casos-12{grid-template-columns:repeat(12,minmax(0,1fr))} .desde-12{grid-column-start:12} .lleva-12{grid-column-end:span 12;--lleva:12}
.casos-13{grid-template-columns:repeat(13,minmax(0,1fr))} .desde-13{grid-column-start:13} .lleva-13{grid-column-end:span 13;--lleva:13}
.casos-14{grid-template-columns:repeat(14,minmax(0,1fr))} .desde-14{grid-column-start:14} .lleva-14{grid-column-end:span 14;--lleva:14}
.casos-15{grid-template-columns:repeat(15,minmax(0,1fr))} .desde-15{grid-column-start:15} .lleva-15{grid-column-end:span 15;--lleva:15}
.casos-16{grid-template-columns:repeat(16,minmax(0,1fr))} .desde-16{grid-column-start:16} .lleva-16{grid-column-end:span 16;--lleva:16}
.casos-17{grid-template-columns:repeat(17,minmax(0,1fr))} .desde-17{grid-column-start:17} .lleva-17{grid-column-end:span 17;--lleva:17}
.casos-18{grid-template-columns:repeat(18,minmax(0,1fr))} .desde-18{grid-column-start:18} .lleva-18{grid-column-end:span 18;--lleva:18}
.casos-19{grid-template-columns:repeat(19,minmax(0,1fr))} .desde-19{grid-column-start:19} .lleva-19{grid-column-end:span 19;--lleva:19}
.casos-20{grid-template-columns:repeat(20,minmax(0,1fr))} .desde-20{grid-column-start:20} .lleva-20{grid-column-end:span 20;--lleva:20}
.casos-21{grid-template-columns:repeat(21,minmax(0,1fr))} .desde-21{grid-column-start:21} .lleva-21{grid-column-end:span 21;--lleva:21}
.casos-22{grid-template-columns:repeat(22,minmax(0,1fr))} .desde-22{grid-column-start:22} .lleva-22{grid-column-end:span 22;--lleva:22}
.casos-23{grid-template-columns:repeat(23,minmax(0,1fr))} .desde-23{grid-column-start:23} .lleva-23{grid-column-end:span 23;--lleva:23}
.casos-24{grid-template-columns:repeat(24,minmax(0,1fr))} .desde-24{grid-column-start:24} .lleva-24{grid-column-end:span 24;--lleva:24}
.casos-25{grid-template-columns:repeat(25,minmax(0,1fr))} .desde-25{grid-column-start:25} .lleva-25{grid-column-end:span 25;--lleva:25}
.casos-26{grid-template-columns:repeat(26,minmax(0,1fr))} .desde-26{grid-column-start:26} .lleva-26{grid-column-end:span 26;--lleva:26}
.casos-27{grid-template-columns:repeat(27,minmax(0,1fr))} .desde-27{grid-column-start:27} .lleva-27{grid-column-end:span 27;--lleva:27}
.casos-28{grid-template-columns:repeat(28,minmax(0,1fr))} .desde-28{grid-column-start:28} .lleva-28{grid-column-end:span 28;--lleva:28}
.casos-29{grid-template-columns:repeat(29,minmax(0,1fr))} .desde-29{grid-column-start:29} .lleva-29{grid-column-end:span 29;--lleva:29}
.casos-30{grid-template-columns:repeat(30,minmax(0,1fr))} .desde-30{grid-column-start:30} .lleva-30{grid-column-end:span 30;--lleva:30}
.casos-31{grid-template-columns:repeat(31,minmax(0,1fr))} .desde-31{grid-column-start:31} .lleva-31{grid-column-end:span 31;--lleva:31}
.casos-32{grid-template-columns:repeat(32,minmax(0,1fr))} .desde-32{grid-column-start:32} .lleva-32{grid-column-end:span 32;--lleva:32}
.casos-33{grid-template-columns:repeat(33,minmax(0,1fr))} .desde-33{grid-column-start:33} .lleva-33{grid-column-end:span 33;--lleva:33}
.casos-34{grid-template-columns:repeat(34,minmax(0,1fr))} .desde-34{grid-column-start:34} .lleva-34{grid-column-end:span 34;--lleva:34}
.casos-35{grid-template-columns:repeat(35,minmax(0,1fr))} .desde-35{grid-column-start:35} .lleva-35{grid-column-end:span 35;--lleva:35}
.casos-36{grid-template-columns:repeat(36,minmax(0,1fr))} .desde-36{grid-column-start:36} .lleva-36{grid-column-end:span 36;--lleva:36}
.casos-37{grid-template-columns:repeat(37,minmax(0,1fr))} .desde-37{grid-column-start:37} .lleva-37{grid-column-end:span 37;--lleva:37}
.casos-38{grid-template-columns:repeat(38,minmax(0,1fr))} .desde-38{grid-column-start:38} .lleva-38{grid-column-end:span 38;--lleva:38}
.casos-39{grid-template-columns:repeat(39,minmax(0,1fr))} .desde-39{grid-column-start:39} .lleva-39{grid-column-end:span 39;--lleva:39}
.casos-40{grid-template-columns:repeat(40,minmax(0,1fr))} .desde-40{grid-column-start:40} .lleva-40{grid-column-end:span 40;--lleva:40}
.casos-41{grid-template-columns:repeat(41,minmax(0,1fr))} .desde-41{grid-column-start:41} .lleva-41{grid-column-end:span 41;--lleva:41}
.casos-42{grid-template-columns:repeat(42,minmax(0,1fr))} .desde-42{grid-column-start:42} .lleva-42{grid-column-end:span 42;--lleva:42}
.casos-43{grid-template-columns:repeat(43,minmax(0,1fr))} .desde-43{grid-column-start:43} .lleva-43{grid-column-end:span 43;--lleva:43}
.casos-44{grid-template-columns:repeat(44,minmax(0,1fr))} .desde-44{grid-column-start:44} .lleva-44{grid-column-end:span 44;--lleva:44}
.casos-45{grid-template-columns:repeat(45,minmax(0,1fr))} .desde-45{grid-column-start:45} .lleva-45{grid-column-end:span 45;--lleva:45}
.casos-46{grid-template-columns:repeat(46,minmax(0,1fr))} .desde-46{grid-column-start:46} .lleva-46{grid-column-end:span 46;--lleva:46}
.casos-47{grid-template-columns:repeat(47,minmax(0,1fr))} .desde-47{grid-column-start:47} .lleva-47{grid-column-end:span 47;--lleva:47}
.casos-48{grid-template-columns:repeat(48,minmax(0,1fr))} .desde-48{grid-column-start:48} .lleva-48{grid-column-end:span 48;--lleva:48}
.casos-49{grid-template-columns:repeat(49,minmax(0,1fr))} .desde-49{grid-column-start:49} .lleva-49{grid-column-end:span 49;--lleva:49}
.casos-50{grid-template-columns:repeat(50,minmax(0,1fr))} .desde-50{grid-column-start:50} .lleva-50{grid-column-end:span 50;--lleva:50}
.casos-51{grid-template-columns:repeat(51,minmax(0,1fr))} .desde-51{grid-column-start:51} .lleva-51{grid-column-end:span 51;--lleva:51}
.casos-52{grid-template-columns:repeat(52,minmax(0,1fr))} .desde-52{grid-column-start:52} .lleva-52{grid-column-end:span 52;--lleva:52}
.casos-53{grid-template-columns:repeat(53,minmax(0,1fr))} .desde-53{grid-column-start:53} .lleva-53{grid-column-end:span 53;--lleva:53}
.casos-54{grid-template-columns:repeat(54,minmax(0,1fr))} .desde-54{grid-column-start:54} .lleva-54{grid-column-end:span 54;--lleva:54}
.casos-55{grid-template-columns:repeat(55,minmax(0,1fr))} .desde-55{grid-column-start:55} .lleva-55{grid-column-end:span 55;--lleva:55}
.casos-56{grid-template-columns:repeat(56,minmax(0,1fr))} .desde-56{grid-column-start:56} .lleva-56{grid-column-end:span 56;--lleva:56}
.casos-57{grid-template-columns:repeat(57,minmax(0,1fr))} .desde-57{grid-column-start:57} .lleva-57{grid-column-end:span 57;--lleva:57}
.casos-58{grid-template-columns:repeat(58,minmax(0,1fr))} .desde-58{grid-column-start:58} .lleva-58{grid-column-end:span 58;--lleva:58}
.casos-59{grid-template-columns:repeat(59,minmax(0,1fr))} .desde-59{grid-column-start:59} .lleva-59{grid-column-end:span 59;--lleva:59}
.casos-60{grid-template-columns:repeat(60,minmax(0,1fr))} .desde-60{grid-column-start:60} .lleva-60{grid-column-end:span 60;--lleva:60}