/* ==========================================================================
   MARCA.CSS · kit visual del estudio (Juan Sigliano) · VERSIÓN 2
   Dirección: "editorial espaciado" (ronda 7, aprobada por Juan el 18/10/2026: "el espaciado es el camino").
   Reemplaza a la V1 (editorial azul apretada, ronda 4 · B), archivada en
   01_marca_personal/04_archivo_descartado/manual-marca-v1/.
   ESTA ES LA ÚNICA FUENTE DE VERDAD. Si cambia algo, se cambia acá y se recopia a
   01_marca_personal/branding/manual/ con branding/manual/sincronizar.sh.

   La idea, en una línea: papel crudo con grano muy suave, un solo azul, mucho aire, letra chica bien ubicada
   y pocos elementos con intención. Títulos a tamaño moderado, no gigantes.

   Qué hay, en orden:
     1. Tokens (colores, familias, nombre del estudio, escala)
     2. Fuentes y papel
     3. Base
     4. Tipografía (título, versalita, etiqueta, bajada, texto, dato, cifra)
     5. Firma (estudio, lockup, membrete, pie, marca de registro "+")
     6. Formatos y grilla (hoja A4, lámina 16:9, sitio web, tablero)
     7. Componentes (iconos, tapa con línea de crayón, índice, KPI, variación, tabla, barras de dos series,
        dato del mes, "lo que sigue", semáforo, tip, nota, paso de guía, captura, ficha, recuadro de imagen)
     8. Tablero (interfaz): tokens y componentes propios de la pantalla
     9. Impresión (A4, para armar_pdf.py)

   REGLAS DE LA MARCA QUE ESTE ARCHIVO HACE CUMPLIR (decididas por Juan):
     - Un solo azul (#0A1FDC). Sin color complementario. El color solo aparece en el icono del semáforo.
     - Courier Prime siempre alineado a la izquierda, nunca justificado. IBM Plex Mono Medium para todas las cifras,
       salvo el número protagonista en recuadro (el "22"), que va en Inter Tight 800.
     - Texto con datos a 19 px como mínimo en una hoja A4 de 1240 px (unos 9 pt). 15 px solo en membrete y pie.
     - Nada de gestos decorativos (estrellas, subrayados, flechas sueltas), filetes finos, rotaciones, rombos
       ni rojo decorativo. La separación es aire.
     - La línea de crayón va solo en tapas. La "+" de registro, con moderación (dos por hoja).
     - La firma manuscrita (firma/) es PROPUESTA, a validar con Juan; no va en reportes de datos.

   COMPATIBILIDAD CON LA V1: se mantienen todos los tokens (--estudio, --f-etiqueta, --azul, --crudo, etc.) y los
   nombres de clase de los componentes que sobreviven (.titulo, .etiqueta, .bajada, .texto, .dato, .kpi, .tabla,
   .barras, .semaforo, .paso, .tip, .nota, .captura, .recuadro, .grilla, .membrete, .pie, .hoja, .lamina,
   .tablero, .sitio, .inverso). Se retiró .abraza (la tapa con título gigante). Ver LEEME.md.
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root{
  /* Nombre del estudio. Cambiar acá cuando haya nombre propio (se ve en .estudio, el lockup y el membrete). */
  --estudio: "Juan Sigliano";

  /* Colores base (decididos) */
  --azul:  #0A1FDC;   /* único color de marca. Sobre papel: 8,6:1 (AA y AAA) */
  --crudo: #F8F7F2;   /* papel. No blanco puro. (V1: #FBFAF6; el espaciado usa #F8F7F2 con grano) */
  --papel: var(--crudo);

  /* Segundo tono para gráficos y filas marcadas (propuesta aprobada con la ronda 7) */
  --azul-claro: #7384E8;  /* serie secundaria de un gráfico. Solo relleno, nunca texto. */
  --azul-velo:  #DDE3FC;  /* fila marcada de una tabla, fondo de capturas */
  --velo-suave: color-mix(in srgb, var(--azul-velo) 42%, var(--crudo));  /* fondos grandes (capturas) */

  /* Semáforo: COLOR SOLO EN EL ICONO, con la palabra al lado (Juan, 18/10: "sí, el semáforo por color").
     Tonos tomados de las reglas de interfaz del tablero; granate o rojo queda a validar con Juan. */
  --verde:   #0E7C3A;
  --ambar:   #B26A00;
  --granate: #8E1B2E;
  --gris:    #6B6B7B;   /* "sin revisar" / en curso en el tablero */
  --amarillo: var(--ambar);    /* alias V1 */
  --rojo:     var(--granate);  /* alias V1. El rojo afiche #E3242B queda retirado */
  --verde-texto:#FFFFFF; --amarillo-texto:#0A1FDC; --rojo-texto:#FFFFFF;  /* alias V1, ya no se usan */

  /* Colores "activos": los componentes usan --fg y --bg, así funcionan igual sobre papel o sobre azul (.inverso) */
  --fg: var(--azul);
  --bg: var(--crudo);
  --velo: var(--azul-velo);
  --tono: var(--azul-claro);

  /* Familias */
  --f-titulo:   "Inter Tight", "Helvetica Neue", Arial, sans-serif;   /* títulos de página, nombres, versalitas, protagonista */
  --f-texto:    "Archivo", "Helvetica Neue", Arial, sans-serif;        /* texto corrido, rótulos de componentes */
  --f-dato:     "IBM Plex Mono", ui-monospace, Menlo, monospace;       /* cifras (Medium), metadatos y rótulos de datos */
  /* Courier Prime Regular: bajadas, etiquetas y "ft.". Siempre a la izquierda. Todo cuelga de estos tokens. */
  --f-etiqueta: "Courier Prime", "Courier New", monospace;
  --etiqueta-estilo: normal;
  --etiqueta-peso: 400;
  --etiqueta-escala: 1;   /* V1: .66 (era para una serif). En la V2 la etiqueta mide lo mismo que el texto de datos */
  --ft-escala: 1;         /* el "ft." mide lo mismo que el nombre que lo acompaña (V1: .62) */
  --etiqueta-ls: 0;

  /* Título: valores por tamaño (se aplican con .xl .l .m .s .xs). Moderados, no gigantes. */
  --ls-xl: -0.04em;   --lh-xl: 1;
  --ls-l:  -0.035em;  --lh-l:  1;
  --ls-m:  -0.03em;   --lh-m:  1.02;
  --ls-s:  -0.025em;  --lh-s:  1.05;
  --ls-xs: -0.012em;  --lh-xs: 1.1;

  /* Unidad: 1 --px es 1 píxel de una hoja A4 de 1240 px de ancho (la medida en la que se aprobaron las piezas).
     Cada formato la redefine: en A4 vale 210 mm / 1240; en la lámina 16:9, 1,5 px; en pantalla, 1 px. */
  --px: 1px;
  --grano-tam: calc(1024 * var(--px));  /* tamaño del tile de papel */
}


/* ==========================================================================
   2. FUENTES (todas OFL, ver fonts/OFL-*.txt) Y PAPEL
   ========================================================================== */
@font-face{font-family:"Inter Tight";src:url(fonts/InterTight-var.ttf);font-weight:100 900;font-style:normal;font-display:block}
@font-face{font-family:"Archivo";src:url(fonts/Archivo-var.ttf);font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:block}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/PlexMono-Regular.ttf);font-weight:400;font-display:block}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/PlexMono-Medium.ttf);font-weight:500;font-display:block}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/PlexMono-SemiBold.ttf);font-weight:600;font-display:block}
@font-face{font-family:"Courier Prime";src:url(fonts/CourierPrime-Regular.ttf);font-weight:400;font-style:normal;font-display:block}

/* Papel: crudo con grano muy suave, horneado en un tile continuo (papel/papel.jpg). Sin blend modes, así
   sale igual en pantalla y en PDF. Lo llevan la hoja, la lámina y el manual (body.papel). El tablero va en blanco. */
.papel{background:var(--crudo) url(papel/papel.jpg) 0 0 / var(--grano-tam) var(--grano-tam)}


/* ==========================================================================
   3. BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:var(--crudo);-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--fg);
  font-family:var(--f-texto);font-stretch:100%;font-weight:500;
  font-size:var(--texto,calc(22 * var(--px)));line-height:1.3;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p,figure,ul,ol,dl,dd,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
img{display:block;max-width:100%}
a{color:inherit}
table{border-collapse:separate;border-spacing:0}

/* Fondo azul con letras en papel */
.inverso{--fg:var(--crudo);--bg:var(--azul);--velo:color-mix(in srgb,var(--crudo) 12%,var(--azul));--tono:color-mix(in srgb,var(--crudo) 45%,var(--azul));background:var(--bg);color:var(--fg)}


/* ==========================================================================
   4. TIPOGRAFÍA
   ========================================================================== */

/* Título: Inter Tight 800, mayúsculas, interletrado cerrado, a tamaño moderado. Una sola línea siempre que se pueda.
   .xl = título de página (A2 · PAUTA) · .l = título de sección grande · .m = subtítulo grande · .s = nombre o lockup
   · .xs = ítem de índice. */
.titulo{
  font-family:var(--f-titulo);font-weight:800;text-transform:uppercase;
  letter-spacing:var(--ls,var(--ls-xl));line-height:var(--lh,var(--lh-xl));
  font-size:var(--t-xl);color:var(--fg);font-stretch:100%;
}
.titulo.xl{--ls:var(--ls-xl);--lh:var(--lh-xl);font-size:var(--t-xl)}
.titulo.l {--ls:var(--ls-l); --lh:var(--lh-l); font-size:var(--t-l)}
.titulo.m {--ls:var(--ls-m); --lh:var(--lh-m); font-size:var(--t-m)}
.titulo.s {--ls:var(--ls-s); --lh:var(--lh-s); font-size:var(--t-s)}
.titulo.xs{--ls:var(--ls-xs);--lh:var(--lh-xs);font-size:var(--t-xs)}
.titulo.nowrap{white-space:nowrap}

/* Versalita: nombre de sección chico (CAMPAÑAS, LO QUE SIGUE, REPORTE DE OCTUBRE). Inter Tight 600, abierta. */
.versalita{
  font-family:var(--f-titulo);font-weight:600;text-transform:uppercase;letter-spacing:.07em;line-height:1;
  font-size:var(--t-versalita);color:var(--fg);
}

/* Etiqueta: voz suelta en Courier Prime, minúscula (una aclaración al margen). NO es rótulo de sección: los rótulos de
   sección (lo que dejó, lo que sigue, campañas, el dato del mes, tip, nota...) van todos en .versalita. */
.etiqueta{
  font-family:var(--f-etiqueta);font-style:var(--etiqueta-estilo);font-weight:var(--etiqueta-peso);
  letter-spacing:var(--etiqueta-ls);line-height:1.2;
  font-size:calc(var(--t-etiqueta) * var(--etiqueta-escala));color:var(--fg);text-transform:none;
}
.etiqueta.s{font-size:calc(var(--t-etiqueta-s) * var(--etiqueta-escala))}
.der{text-align:right}

/* Bajada: Courier Prime a la izquierda, NUNCA justificada. El aire de máquina de escribir sale del ancho de
   columna corto (unas 4 líneas). */
.bajada{
  font-family:var(--f-etiqueta);font-weight:400;font-size:var(--bajada);line-height:1.3;
  text-align:left;hyphens:manual;color:var(--fg);max-width:var(--medida-bajada,calc(470 * var(--px)));
}
.bajada.m{font-size:calc(21 * var(--px))}

/* Texto corrido: Archivo 500, a la izquierda. Nunca justificado. */
.texto{font-size:var(--texto);line-height:1.38;color:var(--fg);max-width:var(--medida,62ch);font-weight:500;text-align:left}
.texto + .texto{margin-top:.8em}
.grilla > .texto + .texto{margin-top:0}
.justificado,.texto.justificado{text-align:left}  /* V1 justificaba: ya no */
.texto b,.texto strong{font-weight:700}

/* Subtítulo: Archivo 700 */
.subtitulo{font-family:var(--f-texto);font-stretch:100%;font-weight:700;font-size:var(--t-sub);line-height:1.15;letter-spacing:-.01em;color:var(--fg)}

/* Dato: IBM Plex Mono, mayúsculas. Rótulos de KPI, encabezados de tabla, leyendas, "lo que sigue" (responsable y fecha).
   19 px como mínimo; en el membrete y el pie baja a 15 px (única excepción). */
.dato{font-family:var(--f-dato);font-weight:400;font-size:var(--t-dato);line-height:1.4;text-transform:uppercase;letter-spacing:.03em;color:var(--fg)}
.dato b{font-weight:600}

/* Cifra: IBM Plex Mono Medium. Toda cifra del sistema (KPI, tabla, gráfico, páginas del índice).
   Única excepción: .protagonista (el "22" en recuadro), en Inter Tight 800. */
.cifra{font-family:var(--f-dato);font-weight:500;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}


/* ==========================================================================
   5. FIRMA: estudio, lockup, membrete, pie, marca de registro
   ========================================================================== */

/* El nombre del estudio sale de --estudio. Heredá mayúsculas/minúsculas del contexto. */
.estudio::before{content:var(--estudio)}

/* Wordmark: el nombre del estudio como logotipo. Inter Tight 800, mayúsculas. */
.wordmark{
  display:inline-block;font-family:var(--f-titulo);font-weight:800;text-transform:uppercase;
  letter-spacing:-.035em;word-spacing:.08em;line-height:.88;white-space:nowrap;color:var(--fg);font-size:var(--t-marca);
}
.wordmark::before{content:var(--estudio)}
.wordmark.apilado{white-space:normal;width:min-content}

/* Lockup "<Cliente> ft. Juan Sigliano": en una línea, como un título chico.
   <p class="titulo s lockup"><span class="cliente">Nicco</span> <span class="ft">ft.</span> <span class="estudio"></span></p> */
.lockup .cliente{display:inline}
.ft{
  font-family:var(--f-etiqueta);font-style:var(--etiqueta-estilo);font-weight:var(--etiqueta-peso);
  font-size:calc(1em * var(--ft-escala));text-transform:none;letter-spacing:var(--etiqueta-ls);margin:0 .06em;
}

/* Membrete: arriba de cada hoja. Tres metadatos mono en una fila: el segundo arranca a 560 px de la hoja,
   el tercero va a la derecha. Con solo dos, uno a cada lado. */
.membrete{display:grid;grid-template-columns:42.2% 1fr auto;align-items:baseline;color:var(--fg);padding-left:calc(40 * var(--px))}
.membrete:has(> :nth-child(2):last-child){display:flex;justify-content:space-between;gap:var(--gap)}
.membrete .dato,.pie .dato{font-size:var(--t-meta)}
.membrete > :last-child{text-align:right}

/* Pie: fuente y fecha de los datos a la izquierda (dos líneas), el lockup y el número a la derecha. */
.pie{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--gap);color:var(--fg)}
.pie .dato{line-height:1.5}
.pie .hoja-n::before,.pag::before{content:counter(hoja,decimal-leading-zero)}
.pag::before{content:"Pág. " counter(hoja,decimal-leading-zero)}
.pag[data-total]::after{content:" de " attr(data-total)}
.pie .der{text-align:right;white-space:nowrap}

/* Marca de registro: una cruz de 22 px en una esquina. Máximo dos por hoja (arriba a la izquierda y abajo,
   a la izquierda en tapas y a la derecha en interiores). */
.mas{position:absolute;width:calc(22 * var(--px));height:calc(22 * var(--px));pointer-events:none;color:var(--fg)}
.mas::before,.mas::after{content:"";position:absolute;background:currentColor}
.mas::before{left:calc(10 * var(--px));top:0;width:calc(2 * var(--px));height:100%}
.mas::after{left:0;top:calc(10 * var(--px));width:100%;height:calc(2 * var(--px))}
.mas.tl{left:calc(62 * var(--px));top:calc(62 * var(--px))}
.mas.tr{right:calc(62 * var(--px));top:calc(62 * var(--px))}
.mas.bl{left:calc(62 * var(--px));bottom:calc(62 * var(--px))}
.mas.br{right:calc(62 * var(--px));bottom:calc(62 * var(--px))}


/* ==========================================================================
   6. FORMATOS Y GRILLA
   Cada formato define su escala (tokens). Los componentes leen tokens y --px, así el mismo componente sirve en
   A4, lámina, web y tablero. Las medidas están en "px de una hoja de 1240": 19 px = unos 9 pt en A4.
   ========================================================================== */

/* --- A4 vertical: 210 x 297 mm. 1 --px = 210 mm / 1240. Margen lateral 90 px (15,2 mm), 12 columnas, gutter 20 px --- */
.hoja{
  --px:calc(210mm / 1240);
  --margen:calc(90 * var(--px));--gap:calc(20 * var(--px));--sec:calc(90 * var(--px));
  --t-xl:calc(84 * var(--px));--t-l:calc(56 * var(--px));--t-m:calc(40 * var(--px));--t-s:calc(30 * var(--px));--t-xs:calc(22 * var(--px));
  --t-prot:calc(140 * var(--px));--t-num:calc(58 * var(--px));--t-unidad:calc(21 * var(--px));--t-sub:calc(24 * var(--px));
  --texto:calc(22 * var(--px));--bajada:calc(19 * var(--px));--t-etiqueta:calc(19 * var(--px));--t-etiqueta-s:calc(19 * var(--px));
  --t-dato:calc(19 * var(--px));--t-meta:calc(15 * var(--px));--t-versalita:calc(19 * var(--px));--t-marca:calc(15 * var(--px));
  position:relative;width:210mm;height:297mm;
  padding:calc(62 * var(--px)) calc(90 * var(--px)) calc(26 * var(--px));
  display:flex;flex-direction:column;overflow:hidden;
  color:var(--fg);font-size:var(--texto);counter-increment:hoja;
  background:var(--crudo) url(papel/papel.jpg) 0 0 / var(--grano-tam) var(--grano-tam);
}
.hoja.inverso{background:var(--azul)}
.hoja > .relleno,.lamina > .relleno{flex:1 1 auto}
.hoja > .sec,.lamina > .sec{margin-top:var(--sec)}
.sec.s{--sec:calc(36 * var(--px) * var(--k,1))}.sec.m{--sec:calc(60 * var(--px) * var(--k,1))}.sec.l{--sec:calc(110 * var(--px) * var(--k,1))}
.cabecera{display:grid;grid-template-columns:minmax(0,1fr) calc(450 * var(--px));column-gap:calc(40 * var(--px));align-items:start}
.cabecera .bajada{margin-top:calc(8 * var(--px))}

/* --- Lámina 16:9: 1920 x 1080 px. 1 --px = 1,5 px (la misma composición de la hoja, ampliada para proyectar) --- */
.lamina{
  --px:1.5px;
  --margen:calc(90 * var(--px));--gap:calc(20 * var(--px));--sec:calc(60 * var(--px));
  --t-xl:calc(84 * var(--px));--t-l:calc(56 * var(--px));--t-m:calc(40 * var(--px));--t-s:calc(30 * var(--px));--t-xs:calc(22 * var(--px));
  --t-prot:calc(140 * var(--px));--t-num:calc(58 * var(--px));--t-unidad:calc(21 * var(--px));--t-sub:calc(24 * var(--px));
  --texto:calc(22 * var(--px));--bajada:calc(19 * var(--px));--t-etiqueta:calc(19 * var(--px));--t-etiqueta-s:calc(19 * var(--px));
  --t-dato:calc(19 * var(--px));--t-meta:calc(15 * var(--px));--t-versalita:calc(19 * var(--px));--t-marca:calc(15 * var(--px));
  position:relative;width:1920px;height:1080px;overflow:hidden;
  padding:calc(62 * var(--px)) calc(90 * var(--px)) calc(26 * var(--px));
  display:flex;flex-direction:column;color:var(--fg);font-size:var(--texto);
  background:var(--crudo) url(papel/papel.jpg) 0 0 / var(--grano-tam) var(--grano-tam);
}

/* --- Sitio web (el manual, páginas de cliente): fluido. 1 --px = 1 px; los títulos usan clamp() --- */
.sitio{
  --px:1px;
  --margen:clamp(20px,5vw,90px);--gap:clamp(12px,2vw,24px);--sec:clamp(56px,8vw,110px);
  --t-xl:clamp(40px,9.5vw,84px);--t-l:clamp(34px,6.5vw,56px);--t-m:clamp(28px,4.6vw,40px);--t-s:clamp(22px,3.4vw,30px);--t-xs:clamp(19px,2.2vw,22px);
  --t-prot:clamp(80px,14vw,140px);--t-num:clamp(40px,6vw,58px);--t-unidad:clamp(19px,2vw,21px);--t-sub:clamp(21px,2.4vw,24px);
  --texto:clamp(19px,.4vw + 17px,22px);--bajada:clamp(19px,.3vw + 17.5px,21px);--t-etiqueta:19px;--t-etiqueta-s:19px;
  --t-dato:clamp(16px,.3vw + 14px,19px);--t-meta:15px;--t-versalita:clamp(16px,.3vw + 14px,19px);--t-marca:clamp(15px,1.6vw,19px);
  max-width:1280px;margin:0 auto;padding:0 var(--margen);font-size:var(--texto);
}

/* --- Pantalla: las hojas A4 se ven centradas sobre un fondo neutro; en impresión desaparece --- */
.documento{page:documento;counter-reset:hoja}
@media screen{
  .documento{background:#E4E6F0;padding:12mm 0}
  .documento .hoja{margin:0 auto 12mm}
}

/* --- Grilla de 12 columnas. Se coloca con .col-N (desde la columna N) y .ancho-N (cuántas columnas) --- */
.grilla{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:var(--gap)}
.grilla > *{grid-column:1 / -1}
.col-1{grid-column-start:1}.col-2{grid-column-start:2}.col-3{grid-column-start:3}.col-4{grid-column-start:4}
.col-5{grid-column-start:5}.col-6{grid-column-start:6}.col-7{grid-column-start:7}.col-8{grid-column-start:8}
.col-9{grid-column-start:9}.col-10{grid-column-start:10}.col-11{grid-column-start:11}.col-12{grid-column-start:12}
.grilla > .ancho-1{grid-column-end:span 1}.grilla > .ancho-2{grid-column-end:span 2}.grilla > .ancho-3{grid-column-end:span 3}
.grilla > .ancho-4{grid-column-end:span 4}.grilla > .ancho-5{grid-column-end:span 5}.grilla > .ancho-6{grid-column-end:span 6}
.grilla > .ancho-7{grid-column-end:span 7}.grilla > .ancho-8{grid-column-end:span 8}.grilla > .ancho-9{grid-column-end:span 9}
.grilla > .ancho-10{grid-column-end:span 10}.grilla > .ancho-11{grid-column-end:span 11}.grilla > .ancho-12{grid-column-end:span 12}
.abajo{align-self:end}
.arriba{align-self:start}

/* En el sitio web, en pantallas angostas la grilla pasa a una columna */
@media (max-width:760px){
  .sitio .grilla > *{grid-column:1 / -1 !important}
  .sitio .cabecera{grid-template-columns:minmax(0,1fr)}
  .sitio .fila-kpis,.sitio .sigue{grid-template-columns:repeat(2,minmax(0,1fr)) !important;row-gap:calc(40 * var(--px))}
  .sitio .sigue{grid-template-columns:minmax(0,1fr) !important}
  .sitio .paso{grid-template-columns:calc(64 * var(--px)) minmax(0,1fr)}
  .sitio .paso .captura{grid-column:1 / -1}
  .sitio .membrete{grid-template-columns:1fr;row-gap:4px;padding-left:0}
  .sitio .membrete > :last-child{text-align:left}
  .sitio{--t-num:32px}
  .sitio .var{white-space:normal;align-items:flex-start}
  .sitio .barras{--bw:19px;--bgap:18px;--bgrupo:5px}
  .sitio .pie{flex-wrap:wrap}
  .sitio .pie .der{white-space:normal;text-align:left}
  .sitio .nombre{white-space:normal}
}

/* Apilar: separación vertical estándar entre bloques */
.pila{display:flex;flex-direction:column;gap:var(--sep,var(--gap))}
.sep-s{--sep:calc(var(--gap) * .5)}.sep-m{--sep:calc(var(--gap) * 2)}.sep-l{--sep:calc(var(--gap) * 4)}


/* ==========================================================================
   7. COMPONENTES
   ========================================================================== */

/* --- Icono: set de 13 iconos, pluma de fibra fina (iconos/). UN ICONO POR CONCEPTO, el mismo en todas las piezas.
       <i class="icono pauta"></i>. Tamaños: sin clase = 34 (rótulo de KPI) · .s = 25 (variación, tabla; trazo más
       grueso) · .m = 40 (índice) · .l = 48. Color: azul por defecto, crudo sobre .inverso o con .crudo; los de estado
       aceptan .verde .ambar .granate .gris. Dictionary completo en el manual (sección Iconografía).
       El lienzo del SVG lleva 6 % de margen a cada lado: el margen negativo lo compensa, el icono mide lo que dice. */
.icono{
  --ico:calc(34 * var(--px));
  display:inline-block;flex:none;vertical-align:middle;
  width:calc(var(--ico) * 1.12);height:calc(var(--ico) * 1.12);margin:calc(var(--ico) * -.06);
  background-repeat:no-repeat;background-position:center;background-size:100% 100%;
}
.icono.s{--ico:calc(25 * var(--px))}
.icono.m{--ico:calc(40 * var(--px))}
.icono.l{--ico:calc(48 * var(--px))}
/* ICONOS:INICIO (generado por branding/exploracion-2026-10/ronda-7/_assets/exportar_kit.py, no editar a mano) */
.icono.pauta{background-image:url("iconos/azul/pauta.svg")}
.icono.s.pauta{background-image:url("iconos/azul/chico/pauta.svg")}
.icono.crudo.pauta,.inverso .icono.pauta{background-image:url("iconos/crudo/pauta.svg")}
.icono.s.crudo.pauta,.inverso .icono.s.pauta{background-image:url("iconos/crudo/chico/pauta.svg")}
.icono.contenido{background-image:url("iconos/azul/contenido.svg")}
.icono.s.contenido{background-image:url("iconos/azul/chico/contenido.svg")}
.icono.crudo.contenido,.inverso .icono.contenido{background-image:url("iconos/crudo/contenido.svg")}
.icono.s.crudo.contenido,.inverso .icono.s.contenido{background-image:url("iconos/crudo/chico/contenido.svg")}
.icono.sistema{background-image:url("iconos/azul/sistema.svg")}
.icono.s.sistema{background-image:url("iconos/azul/chico/sistema.svg")}
.icono.crudo.sistema,.inverso .icono.sistema{background-image:url("iconos/crudo/sistema.svg")}
.icono.s.crudo.sistema,.inverso .icono.s.sistema{background-image:url("iconos/crudo/chico/sistema.svg")}
.icono.inversion{background-image:url("iconos/azul/inversion.svg")}
.icono.s.inversion{background-image:url("iconos/azul/chico/inversion.svg")}
.icono.crudo.inversion,.inverso .icono.inversion{background-image:url("iconos/crudo/inversion.svg")}
.icono.s.crudo.inversion,.inverso .icono.s.inversion{background-image:url("iconos/crudo/chico/inversion.svg")}
.icono.alcance{background-image:url("iconos/azul/alcance.svg")}
.icono.s.alcance{background-image:url("iconos/azul/chico/alcance.svg")}
.icono.crudo.alcance,.inverso .icono.alcance{background-image:url("iconos/crudo/alcance.svg")}
.icono.s.crudo.alcance,.inverso .icono.s.alcance{background-image:url("iconos/crudo/chico/alcance.svg")}
.icono.mensajes{background-image:url("iconos/azul/mensajes.svg")}
.icono.s.mensajes{background-image:url("iconos/azul/chico/mensajes.svg")}
.icono.crudo.mensajes,.inverso .icono.mensajes{background-image:url("iconos/crudo/mensajes.svg")}
.icono.s.crudo.mensajes,.inverso .icono.s.mensajes{background-image:url("iconos/crudo/chico/mensajes.svg")}
.icono.sube{background-image:url("iconos/azul/sube.svg")}
.icono.s.sube{background-image:url("iconos/azul/chico/sube.svg")}
.icono.crudo.sube,.inverso .icono.sube{background-image:url("iconos/crudo/sube.svg")}
.icono.s.crudo.sube,.inverso .icono.s.sube{background-image:url("iconos/crudo/chico/sube.svg")}
.icono.sube.gris,.inverso .icono.sube.gris{background-image:url("iconos/gris/sube.svg")}
.icono.s.sube.gris,.inverso .icono.s.sube.gris{background-image:url("iconos/gris/chico/sube.svg")}
.icono.baja{background-image:url("iconos/azul/baja.svg")}
.icono.s.baja{background-image:url("iconos/azul/chico/baja.svg")}
.icono.crudo.baja,.inverso .icono.baja{background-image:url("iconos/crudo/baja.svg")}
.icono.s.crudo.baja,.inverso .icono.s.baja{background-image:url("iconos/crudo/chico/baja.svg")}
.icono.baja.gris,.inverso .icono.baja.gris{background-image:url("iconos/gris/baja.svg")}
.icono.s.baja.gris,.inverso .icono.s.baja.gris{background-image:url("iconos/gris/chico/baja.svg")}
.icono.siguiente{background-image:url("iconos/azul/siguiente.svg")}
.icono.s.siguiente{background-image:url("iconos/azul/chico/siguiente.svg")}
.icono.crudo.siguiente,.inverso .icono.siguiente{background-image:url("iconos/crudo/siguiente.svg")}
.icono.s.crudo.siguiente,.inverso .icono.s.siguiente{background-image:url("iconos/crudo/chico/siguiente.svg")}
.icono.hecho{background-image:url("iconos/azul/hecho.svg")}
.icono.s.hecho{background-image:url("iconos/azul/chico/hecho.svg")}
.icono.crudo.hecho,.inverso .icono.hecho{background-image:url("iconos/crudo/hecho.svg")}
.icono.s.crudo.hecho,.inverso .icono.s.hecho{background-image:url("iconos/crudo/chico/hecho.svg")}
.icono.hecho.verde,.inverso .icono.hecho.verde{background-image:url("iconos/verde/hecho.svg")}
.icono.s.hecho.verde,.inverso .icono.s.hecho.verde{background-image:url("iconos/verde/chico/hecho.svg")}
.icono.atencion{background-image:url("iconos/azul/atencion.svg")}
.icono.s.atencion{background-image:url("iconos/azul/chico/atencion.svg")}
.icono.crudo.atencion,.inverso .icono.atencion{background-image:url("iconos/crudo/atencion.svg")}
.icono.s.crudo.atencion,.inverso .icono.s.atencion{background-image:url("iconos/crudo/chico/atencion.svg")}
.icono.atencion.ambar,.inverso .icono.atencion.ambar{background-image:url("iconos/ambar/atencion.svg")}
.icono.s.atencion.ambar,.inverso .icono.s.atencion.ambar{background-image:url("iconos/ambar/chico/atencion.svg")}
.icono.urgente{background-image:url("iconos/azul/urgente.svg")}
.icono.s.urgente{background-image:url("iconos/azul/chico/urgente.svg")}
.icono.crudo.urgente,.inverso .icono.urgente{background-image:url("iconos/crudo/urgente.svg")}
.icono.s.crudo.urgente,.inverso .icono.s.urgente{background-image:url("iconos/crudo/chico/urgente.svg")}
.icono.urgente.granate,.inverso .icono.urgente.granate{background-image:url("iconos/granate/urgente.svg")}
.icono.s.urgente.granate,.inverso .icono.s.urgente.granate{background-image:url("iconos/granate/chico/urgente.svg")}
.icono.en-curso{background-image:url("iconos/azul/en-curso.svg")}
.icono.s.en-curso{background-image:url("iconos/azul/chico/en-curso.svg")}
.icono.crudo.en-curso,.inverso .icono.en-curso{background-image:url("iconos/crudo/en-curso.svg")}
.icono.s.crudo.en-curso,.inverso .icono.s.en-curso{background-image:url("iconos/crudo/chico/en-curso.svg")}
.icono.en-curso.gris,.inverso .icono.en-curso.gris{background-image:url("iconos/gris/en-curso.svg")}
.icono.s.en-curso.gris,.inverso .icono.s.en-curso.gris{background-image:url("iconos/gris/chico/en-curso.svg")}
.icono.sin-revisar{background-image:url("iconos/azul/sin-revisar.svg")}
.icono.s.sin-revisar{background-image:url("iconos/azul/chico/sin-revisar.svg")}
.icono.crudo.sin-revisar,.inverso .icono.sin-revisar{background-image:url("iconos/crudo/sin-revisar.svg")}
.icono.s.crudo.sin-revisar,.inverso .icono.s.sin-revisar{background-image:url("iconos/crudo/chico/sin-revisar.svg")}
.icono.sin-revisar.gris,.inverso .icono.sin-revisar.gris{background-image:url("iconos/gris/sin-revisar.svg")}
.icono.s.sin-revisar.gris,.inverso .icono.s.sin-revisar.gris{background-image:url("iconos/gris/chico/sin-revisar.svg")}
/* variación: la flecha sale del propio .var (clases .sube / .baja) */
.var:not(.sube):not(.baja)::before{display:none}
.var.sube::before{background-image:url("iconos/azul/chico/sube.svg")}
.inverso .var.sube::before{background-image:url("iconos/crudo/chico/sube.svg")}
.tablero .var.sube::before{background-image:url("iconos/gris/chico/sube.svg")}
.var.baja::before{background-image:url("iconos/azul/chico/baja.svg")}
.inverso .var.baja::before{background-image:url("iconos/crudo/chico/baja.svg")}
.tablero .var.baja::before{background-image:url("iconos/gris/chico/baja.svg")}
/* semáforo: el color vive solo en el icono */
.semaforo::before,.semaforo.verde::before{background-image:url("iconos/verde/chico/hecho.svg")}
.semaforo.ambar::before,.semaforo.amarillo::before{background-image:url("iconos/ambar/chico/atencion.svg")}
.semaforo.granate::before,.semaforo.rojo::before{background-image:url("iconos/granate/chico/urgente.svg")}
.semaforo.gris::before{background-image:url("iconos/gris/chico/sin-revisar.svg")}
/* ICONOS:FIN */

/* --- Línea de crayón: UNA línea azul que da la vuelta y se va de la hoja. SOLO EN TAPAS. Va debajo del texto, sin
       tocarlo: el título de la tapa queda adentro del lazo. Es un asset (crayon/): provisorio, la versión final la dibuja
       Juan con crayón o lápiz de cera azul y se escanea. --- */
.crayon{position:absolute;inset:0;pointer-events:none;background:url("crayon/linea-a4@2x.png") 0 0 / 100% 100% no-repeat}
.lamina .crayon{background-image:url("crayon/linea-16x9.png")}

/* --- Tapa A4 (hoja con .tapa): composición fija en px de hoja. Membrete arriba; bajada y fecha arriba a la izquierda;
       línea de crayón al medio con el nombre adentro del lazo; abajo, el dato del mes a la izquierda y el índice a la derecha. --- */
.tapa > .bajada,.tapa > .fecha,.tapa > .nombre,.tapa > .tipo,.tapa > .dato-mes,.tapa > .izq,.tapa > .indice,.tapa > .der-pie,.tapa > .pie{position:absolute}
.hoja.tapa > .bajada{left:calc(90 * var(--px));top:calc(150 * var(--px));width:calc(470 * var(--px))}
.hoja.tapa > .fecha{left:calc(90 * var(--px));top:calc(262 * var(--px))}
.hoja.tapa > .nombre{left:calc(90 * var(--px));top:calc(806 * var(--px))}
.hoja.tapa > .tipo{right:calc(90 * var(--px));top:calc(812 * var(--px))}
.hoja.tapa > .dato-mes,.hoja.tapa > .izq{left:calc(90 * var(--px));top:calc(1326 * var(--px))}
.hoja.tapa > .izq{width:calc(580 * var(--px))}
.hoja.tapa > .indice,.hoja.tapa > .der-pie{left:calc(778 * var(--px));top:calc(1362 * var(--px));width:calc(372 * var(--px))}
.hoja.tapa > .pie{left:calc(90 * var(--px));right:calc(90 * var(--px));bottom:calc(65 * var(--px))}
.fecha{font-family:var(--f-etiqueta);font-size:var(--t-dato);line-height:1.3;color:var(--fg)}
.nombre{white-space:nowrap}
.sitio .nombre{white-space:normal}
/* Tapa 16:9: lo mismo, más ancho. El lazo de crayón rodea el nombre; el dato del mes abajo a la izquierda. */
.lamina.tapa > .bajada{left:calc(90 * var(--px));top:calc(150 * var(--px));width:calc(520 * var(--px))}
.lamina.tapa > .fecha{left:calc(90 * var(--px));top:calc(262 * var(--px))}
.lamina.tapa > .nombre{left:calc(90 * var(--px));top:calc(400 * var(--px))}
.lamina.tapa > .tipo{right:calc(90 * var(--px));top:calc(406 * var(--px))}
.lamina.tapa > .pie{left:calc(90 * var(--px));right:calc(90 * var(--px));bottom:calc(52 * var(--px))}

/* --- Índice de tapa: código y nombre de cada página (A1 · Resumen), icono a la izquierda si hay uno que funcione
       (A1 y los que no tienen icono arrancan en el mismo borde), número de página a la derecha en mono. --- */
.indice{display:flex;flex-direction:column}
.indice li{display:grid;grid-template-columns:calc(58 * var(--px)) minmax(0,1fr) calc(50 * var(--px));align-items:center;height:calc(54 * var(--px))}
.indice li > .icono{grid-column:1}
.indice li > .cap{grid-column:2}
.indice li > .cifra{grid-column:3;text-align:right;font-size:var(--t-dato)}
.indice.sin-icono li{grid-template-columns:minmax(0,1fr) calc(50 * var(--px))}
.indice.sin-icono li > .cap{grid-column:1}.indice.sin-icono li > .cifra{grid-column:2}
.cap{font-family:var(--f-titulo);font-weight:700;text-transform:uppercase;letter-spacing:-.012em;line-height:1;font-size:var(--t-xs);color:var(--fg);text-decoration:none}

/* --- Dato del mes: el número protagonista dentro de un recuadro azul (la "palabra en recuadro" de la referencia 11).
       ÚNICA cifra fuera de IBM Plex Mono Medium: va en Inter Tight 800. Etiqueta arriba, texto abajo o al lado. --- */
.dato-mes{display:flex;flex-direction:column;gap:calc(14 * var(--px));align-items:flex-start}
.dato-mes .caja{
  background:var(--azul);color:var(--crudo);min-width:calc(250 * var(--px));height:calc(160 * var(--px));
  padding:calc(28 * var(--px)) calc(26 * var(--px)) 0 calc(14 * var(--px));
}
.protagonista{
  display:block;font-family:var(--f-titulo);font-weight:800;font-size:var(--t-prot);letter-spacing:-.04em;line-height:.9;
  color:var(--crudo);white-space:nowrap;
}
.dato-mes .bajada{max-width:calc(390 * var(--px));font-size:calc(21 * var(--px))}
/* en la tapa el texto va al lado del recuadro */
.dato-mes.al-lado{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"etq etq" "caja txt";column-gap:calc(30 * var(--px));row-gap:calc(24 * var(--px));align-items:start;width:calc(640 * var(--px))}
.dato-mes.al-lado > .dato,.dato-mes.al-lado > .versalita{grid-area:etq}
.dato-mes.al-lado > .caja{grid-area:caja}
.dato-mes.al-lado > .bajada{grid-area:txt;margin-top:calc(30 * var(--px));max-width:calc(330 * var(--px))}

/* --- KPI: rótulo (con icono o sin él), cifra en mono Medium, variación con signo. Sin icono, el rótulo
       arranca en el mismo borde que su cifra. --- */
.fila-kpis{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));column-gap:calc(var(--gap) * .75);row-gap:calc(40 * var(--px));align-items:start}
.kpi{display:flex;flex-direction:column;min-width:0}
.kpi .rotulo{display:flex;align-items:center;gap:calc(10 * var(--px));min-height:calc(34 * var(--px));
  font-family:var(--f-dato);font-weight:400;font-size:var(--t-dato);line-height:1.15;text-transform:uppercase;letter-spacing:.03em;color:var(--fg)}
.kpi .num{
  display:block;margin-top:calc(46 * var(--px));font-family:var(--f-dato);font-weight:500;font-size:var(--t-num);
  line-height:.9;letter-spacing:-.04em;white-space:nowrap;color:var(--fg);
}
.kpi .num small{font-family:var(--f-texto);font-stretch:100%;font-weight:600;font-size:var(--t-unidad);letter-spacing:0;margin-right:.3em;text-transform:none}
.kpi .num small.d{margin:0 0 0 .3em}
.kpi .var{margin-top:calc(26 * var(--px))}
/* Si el KPI no lleva icono, el rótulo ya arranca en el borde de la cifra (no hay hueco: no se pone el <i>). */

/* --- Variación: SIEMPRE con signo y con la palabra "mejora" o "empeora" cuando hay juicio (−12 % · mejora).
       La flecha de tendencia (sube / baja) va a la izquierda del signo. Sin color: el juicio lo dice la palabra. --- */
.var{display:inline-flex;align-items:center;gap:calc(8 * var(--px));font-family:var(--f-texto);font-weight:600;font-size:var(--t-dato);line-height:1.1;white-space:nowrap;color:var(--fg)}
.var::before{content:"";flex:none;width:calc(28 * var(--px));height:calc(28 * var(--px));margin:calc(-1.5 * var(--px));background-size:100% 100%;background-repeat:no-repeat}

/* --- Tabla de datos: sin líneas ni encabezado de color. Encabezado en mono, cifras en mono Medium a la derecha,
       fila marcada en azul velo, sello "mejor" opcional. El total va en una fila velo. --- */
.tabla{width:100%;table-layout:fixed;font-size:calc(21 * var(--px));line-height:1.2;color:var(--fg)}
.tabla th{
  font-family:var(--f-dato);font-weight:500;font-size:var(--t-dato);line-height:1.15;text-transform:uppercase;letter-spacing:.02em;
  text-align:left;padding:0 calc(14 * var(--px)) calc(16 * var(--px));vertical-align:bottom;color:var(--fg);
}
.tabla td{height:calc(50 * var(--px));padding:0 calc(14 * var(--px));font-weight:600;white-space:nowrap;vertical-align:middle}
.tabla th.num,.tabla td.num{text-align:right}
.tabla td.num{font-family:var(--f-dato);font-weight:500;font-size:calc(22 * var(--px));letter-spacing:-.01em}
.tabla td.txt{white-space:normal;font-weight:500;line-height:1.25}
.tabla td.var-celda{font-size:var(--t-dato);text-align:right}
.tabla td.var-celda .var{justify-content:flex-end}
.tabla tr.m td,.tabla tfoot td{background:var(--velo)}
.tabla tfoot td{font-weight:800}
.tabla thead{display:table-header-group}
.tabla tr{break-inside:avoid;page-break-inside:avoid}
.sello{
  display:inline-block;font-family:var(--f-dato);font-weight:600;font-size:var(--t-dato);letter-spacing:.04em;text-transform:uppercase;
  background:var(--fg);color:var(--bg);padding:calc(3 * var(--px)) calc(8 * var(--px)) calc(2 * var(--px));margin-left:calc(14 * var(--px));vertical-align:calc(2 * var(--px));line-height:1.2;
}

/* --- Gráfico de barras de dos series (HTML/CSS, sin librerías). Serie principal en azul, la de comparación en
       azul claro, SIEMPRE con valores arriba y leyenda. Parámetros: --max en .barras, --v en cada .barra, --alto. --- */
.barras{--max:30;--alto:calc(300 * var(--px));position:relative;display:flex;align-items:flex-end;gap:var(--bgap,calc(42 * var(--px)));height:var(--alto);padding-top:calc(36 * var(--px));margin-bottom:calc(30 * var(--px))}
.barras .grupo{position:relative;flex:none;height:100%;display:flex;align-items:flex-end;gap:var(--bgrupo,calc(10 * var(--px)))}
.barras .barra{position:relative;flex:none;width:var(--bw,calc(38 * var(--px)));height:calc(var(--v) / var(--max) * 100%);background:var(--fg)}
.barras .barra.claro{background:var(--tono)}
.barras .barra em{
  position:absolute;left:50%;transform:translateX(-50%);bottom:100%;margin-bottom:calc(8 * var(--px));text-align:center;font-style:normal;
  font-family:var(--f-dato);font-weight:500;font-size:var(--t-dato);line-height:1;color:var(--fg);
}
.barras .grupo u{
  position:absolute;left:50%;transform:translateX(-50%);top:100%;margin-top:calc(16 * var(--px));text-align:center;text-decoration:none;white-space:nowrap;
  font-family:var(--f-dato);font-size:var(--t-dato);text-transform:uppercase;line-height:1;color:var(--fg);
}
.grafico-titulo{font-family:var(--f-titulo);font-weight:600;text-transform:uppercase;letter-spacing:.07em;line-height:1;font-size:var(--t-versalita)}
.leyenda{display:flex;gap:calc(26 * var(--px));margin-top:calc(18 * var(--px));margin-bottom:calc(4 * var(--px))}
.leyenda span{display:inline-flex;align-items:center;gap:calc(8 * var(--px));font-family:var(--f-dato);font-size:var(--t-dato);text-transform:uppercase;letter-spacing:.03em;line-height:1.2}
.leyenda span::before{content:"";width:calc(15 * var(--px));height:calc(15 * var(--px));background:var(--fg)}
.leyenda span.claro::before{background:var(--tono)}

/* --- Lo que sigue: tres pasos como máximo, cada uno con su responsable y su fecha (en mono, mayúsculas). Texto en
       minúscula normal. Encabezado con icono "siguiente" (lamparita). --- */
.sigue-cab{display:flex;align-items:center;gap:calc(14 * var(--px));margin-bottom:calc(24 * var(--px))}
.sigue{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:calc(20 * var(--px))}
.sigue li{display:flex;flex-direction:column;gap:calc(18 * var(--px));max-width:calc(340 * var(--px))}
.sigue li p{font-size:var(--texto);line-height:1.28;font-weight:500;min-height:calc(3 * 1.28em)}

/* --- Semáforo: UN icono de color + la palabra al lado. El color vive solo en el icono (verde, ámbar, granate, gris);
       la palabra va en el color del texto. Nunca solo color. Un semáforo por cliente y por pantalla.
       <span class="semaforo">Al día</span> · .ambar / .amarillo (atención) · .granate / .rojo (urgente) · .gris (sin revisar) --- */
.semaforo{display:inline-flex;align-items:center;gap:calc(12 * var(--px));align-self:flex-start;font-family:var(--f-dato);font-weight:500;font-size:var(--t-dato);line-height:1.1;text-transform:uppercase;letter-spacing:.03em;color:var(--fg);white-space:nowrap}
.semaforo::before{content:"";flex:none;width:calc(32 * var(--px));height:calc(32 * var(--px));margin:calc(-2 * var(--px));background-size:100% 100%;background-repeat:no-repeat}

/* --- Paso numerado de guía: cifra en mono Medium, subtítulo y texto al medio, captura a la derecha si hace falta --- */
.paso{display:grid;grid-template-columns:calc(86 * var(--px)) minmax(0,1fr) var(--paso-cap,calc(330 * var(--px)));column-gap:var(--gap);align-items:start}
.paso .n{font-family:var(--f-dato);font-weight:500;font-size:calc(64 * var(--px));line-height:.9;letter-spacing:-.04em;color:var(--fg)}
.paso h3{font-family:var(--f-texto);font-stretch:100%;font-weight:700;font-size:var(--t-sub);line-height:1.15;letter-spacing:-.01em;margin-bottom:calc(8 * var(--px))}
.paso p{font-size:var(--texto);line-height:1.34;max-width:34ch;font-weight:500}
.paso .captura{grid-column:3}

/* --- Tip y nota: etiqueta en Courier + texto corto (la nota de la revisión semanal es lo mismo) --- */
.tip,.nota{display:flex;flex-direction:column;gap:calc(18 * var(--px))}

/* --- Captura de pantalla (placeholder o imagen real) --- */
.captura{position:relative;background:var(--velo-suave);min-height:var(--alto-cap,calc(150 * var(--px)));display:flex;align-items:center;justify-content:center;overflow:hidden}
.captura:not([data-leyenda])::after{content:"Captura de pantalla"}
.captura::after{content:attr(data-leyenda);font-family:var(--f-dato);font-size:var(--t-dato);text-transform:uppercase;letter-spacing:.03em;color:var(--fg)}
.captura img{width:100%;height:auto}
.captura:has(img)::after{content:none}

/* --- Ficha de datos: lista corta clave / valor (hoja de servicio resumida) --- */
.ficha{display:grid;grid-template-columns:max-content 1fr;column-gap:calc(30 * var(--px));row-gap:calc(12 * var(--px));font-size:var(--texto);line-height:1.3}
.ficha dt{font-family:var(--f-dato);font-size:var(--t-dato);text-transform:uppercase;letter-spacing:.03em;line-height:1.5}
.ficha dd{font-weight:500}

/* --- Firma manuscrita de Juan (PROPUESTA, a validar con Juan): cierre de una propuesta y firma de mail. NO va en los
       reportes de datos. Asset en firma/ (SVG y PNG). Su fuente manuscrita completa está pendiente. --- */
.firma-manuscrita{display:block;height:var(--alto-firma,calc(110 * var(--px)));width:auto;aspect-ratio:1808 / 642;background:url("firma/firma-1.svg") 0 50% / contain no-repeat}
.inverso .firma-manuscrita{background-image:url("firma/firma-1-crudo.svg")}
.inverso .firma-manuscrita.dos{background-image:url("firma/firma-2-crudo.svg")}
.firma-manuscrita.dos{background-image:url("firma/firma-2.svg");aspect-ratio:1683 / 767}

/* --- Recuadro de imagen (las imágenes están en pausa por decisión de Juan; el componente queda). Recto, sin sombra,
       sin rotar. Imagen en monocromo azul plano. Parámetros: --w, --h (o --ratio), --zoom, --pos --- */
.recuadro{position:relative;overflow:hidden;background:transparent;width:var(--w,100%);height:var(--h,auto);aspect-ratio:var(--ratio,4 / 3);flex:none}
.recuadro img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);transform:scale(var(--zoom,1));transform-origin:var(--pos,50% 50%)}
.recuadro.vacio{background:var(--azul)}
.recuadro.vacio::after{content:"imagen de concepto";position:absolute;left:var(--gap);bottom:var(--gap);font-family:var(--f-dato);font-size:var(--t-dato);text-transform:uppercase;color:var(--crudo)}

/* --- Lado A / lado B (V1): se mantiene por compatibilidad. Metáfora de reporte, no de interfaz --- */
.lado{display:flex;flex-direction:column;gap:calc(var(--gap) * .8)}

/* --- Palabra suelta (V1): se mantiene por compatibilidad --- */
.palabra{text-align:right;white-space:nowrap}
.base{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--gap)}

/* --- Solapas (V1, compatibilidad). En el tablero V2 el selector de cliente es .ui-clientes --- */
.solapas{display:flex;flex-wrap:wrap;gap:8px;font-family:var(--f-dato);font-size:var(--t-dato);text-transform:uppercase;letter-spacing:.03em}
.solapas a{display:block;padding:.8em 1.3em;text-decoration:none;color:var(--fg);background:var(--velo)}
.solapas a.activa{background:var(--fg);color:var(--bg);font-weight:600}


/* ==========================================================================
   8. TABLERO (interfaz). Reglas del director de UX/UI (00_equipo/roles/conocimiento-director-ux-ui/reglas-interfaz.md):
   dos capas. MARCA en el título de pantalla, el membrete y el "ft."; INTERFAZ neutra y sobria: fondo blanco (y su
   versión oscura), grises, el azul como único color de acción, semáforo solo en el icono con texto, números en
   IBM Plex Mono Medium, letra del sistema para todo lo demás, nada debajo de 13 px, espaciado en múltiplos de 8,
   áreas tocables de 44 px. Sin filetes: se separa con superficies grises y aire.
   Es la base visual de la app (tablero.juansigliano.com).
   ========================================================================== */
.tablero{
  --px:1px;
  --bg:#FFFFFF;--panel:#F5F5F8;--panel-2:#ECECF1;--fg:#16161D;--fg2:#55556A;--fg3:#6A6A7C;
  --marca:var(--azul);--accion:var(--azul);--accion-velo:#ECEEFD;
  --ok:var(--verde);--atencion:var(--ambar);--mal:var(--granate);
  --f-ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --tono:#8E90A6;      /* serie de comparación del gráfico: gris, 3,1:1 contra blanco (el azul es solo la serie principal) */
  --velo:#ECEEFD;
  --margen:32px;--gap:16px;
  --t-xl:46px;--t-l:34px;--t-m:24px;--t-s:20px;--t-xs:17px;--t-num:32px;--t-unidad:15px;--t-sub:17px;
  --texto:15px;--t-dato:13px;--t-meta:13px;--t-etiqueta:13px;--t-etiqueta-s:13px;--t-versalita:13px;--t-marca:20px;--bajada:15px;
  position:relative;width:1440px;min-height:900px;background:var(--bg);color:var(--fg);font-family:var(--f-ui);font-size:15px;line-height:1.45;font-weight:400;
  display:grid;grid-template-columns:240px minmax(0,1fr);
}
.tablero.oscuro{
  --bg:#111116;--panel:#1B1B22;--panel-2:#26262F;--fg:#F2F2F6;--fg2:#B0B0BF;--fg3:#8C8C9B;--marca:#8C97FF;--accion:#8C97FF;--accion-velo:#23264A;
  --ok:#4CC27E;--atencion:#E3A34A;--mal:#E07A8C;--tono:#6A6A7C;--velo:#23264A;color-scheme:dark;
}
.tablero .ui-lado{background:var(--panel);padding:24px 16px;display:flex;flex-direction:column;gap:4px;min-height:100%}
.tablero .ui-firma{font-family:var(--f-titulo);font-weight:800;text-transform:uppercase;letter-spacing:-.035em;line-height:.9;color:var(--marca);font-size:22px;margin:0 8px 24px}
.tablero .ui-firma small{display:block;font-family:var(--f-etiqueta);text-transform:none;letter-spacing:0;font-weight:400;font-size:13px;color:var(--fg2);margin-top:8px;line-height:1.2}
.tablero .ui-grupo{font-size:13px;color:var(--fg3);margin:16px 8px 4px;font-weight:600}
.tablero .ui-nav{display:flex;flex-direction:column;gap:2px}
.tablero .ui-nav a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:8px;font-size:15px;color:var(--fg);text-decoration:none}
.tablero .ui-nav a[aria-current="page"]{background:var(--accion-velo);color:var(--accion);font-weight:600}
.tablero .ui-principal{min-width:0;display:flex;flex-direction:column}
.tablero .ui-barra{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:16px 32px}
.tablero .ui-clientes{display:flex;gap:4px;background:var(--panel);padding:4px;border-radius:12px;overflow-x:auto;scrollbar-width:none}
.tablero .ui-clientes a{display:flex;align-items:center;min-height:40px;padding:0 16px;border-radius:8px;font-size:14px;color:var(--fg2);white-space:nowrap;text-decoration:none}
.tablero .ui-clientes a[aria-current="true"]{background:var(--bg);color:var(--fg);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.tablero .ui-periodo{font-size:14px;color:var(--fg2);white-space:nowrap}
.tablero .ui-periodo b{color:var(--fg);font-weight:600}
.tablero .ui-contenido{padding:16px 32px 56px;display:flex;flex-direction:column;gap:32px;max-width:1120px;width:100%}
.tablero h1{font-family:var(--f-titulo);font-weight:800;text-transform:uppercase;letter-spacing:-.035em;line-height:.95;color:var(--marca);font-size:var(--t-xl);margin:0}
.tablero h1 .ft{font-family:var(--f-etiqueta);text-transform:none;letter-spacing:0;font-weight:400;font-size:.45em;vertical-align:.35em;color:var(--fg2);margin:0 .2em}
.tablero h2{font-family:var(--f-ui);font-size:17px;font-weight:650;margin:0;color:var(--fg);text-transform:none;letter-spacing:0;display:flex;align-items:center;gap:16px}
.tablero .ui-pregunta{color:var(--fg2);font-size:15px;margin-top:8px}
.tablero .ui-resp{font-size:14px;color:var(--fg2);margin-top:8px}
.tablero .ui-resp b{color:var(--fg);font-weight:600}
.tablero .ui-bloque{display:flex;flex-direction:column;gap:16px}
.tablero .ui-franja{background:var(--panel);border-radius:12px;padding:16px 24px;display:flex;flex-direction:column;gap:8px}
.tablero .ui-franja .cab{font-size:13px;font-weight:600;color:var(--fg2)}
.tablero .ui-franja ul{display:flex;flex-direction:column;gap:4px;font-size:14px}
.tablero .ui-objetivo{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;font-size:14px}
.tablero .ui-objetivo dt{font-size:13px;color:var(--fg3);margin-bottom:4px}
.tablero .ui-objetivo dd{margin:0;color:var(--fg);line-height:1.4}
.tablero .ui-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.tablero .ui-kpi{background:var(--panel);border-radius:12px;padding:16px 24px;display:flex;flex-direction:column;gap:8px;min-width:0}
.tablero .ui-kpi .l{font-size:14px;color:var(--fg2)}
.tablero .ui-kpi .v{font-family:var(--f-dato);font-weight:500;font-size:var(--t-num);letter-spacing:-.02em;line-height:1.1}
.tablero .ui-kpi .v small{font-family:var(--f-ui);font-size:var(--t-unidad);font-weight:500;color:var(--fg2);letter-spacing:0;margin-right:6px}
.tablero .ui-kpi .c{font-size:13px;color:var(--fg2);display:flex;gap:6px;align-items:center}
.tablero .ui-kpi.foco .v{font-size:44px}
.tablero .ui-kpi .var{font-family:var(--f-ui);font-size:13px;font-weight:500;color:var(--fg2);gap:6px}
.tablero .ui-kpi .var::before{width:20px;height:20px;margin:-1px}
.tablero .semaforo{font-family:var(--f-ui);font-size:14px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--fg);gap:8px}
.tablero .semaforo::before{width:24px;height:24px;margin:-2px}
.tablero .tabla{font-family:var(--f-ui);font-size:15px;table-layout:auto}
.tablero .tabla th{font-family:var(--f-ui);font-size:13px;font-weight:500;color:var(--fg2);text-transform:none;letter-spacing:0;padding:0 16px 8px}
.tablero .tabla td{height:48px;padding:0 16px;font-weight:500;background:transparent}
.tablero .tabla tbody tr:nth-child(odd) td{background:var(--panel)}
.tablero .tabla td:first-child{border-radius:8px 0 0 8px}.tablero .tabla td:last-child{border-radius:0 8px 8px 0}
.tablero .tabla td.num{font-size:15px}
.tablero .barras{--alto:200px;gap:32px;padding-top:28px;margin-bottom:36px}
.tablero .barras .barra{width:28px;background:var(--accion)}
.tablero .barras .barra.claro{background:var(--tono)}
.tablero .leyenda{margin-top:0}
.tablero .leyenda span,.tablero .barras .grupo u{font-family:var(--f-ui);text-transform:none;letter-spacing:0;font-size:13px;font-weight:500}
.tablero .leyenda span::before{background:var(--accion)}.tablero .leyenda span.claro::before{background:var(--tono)}
.tablero .grafico-titulo{font-family:var(--f-ui);font-weight:650;font-size:17px;text-transform:none;letter-spacing:0;color:var(--fg)}
.tablero details{background:var(--panel);border-radius:12px;padding:0 24px}
.tablero summary{min-height:48px;display:flex;align-items:center;font-weight:600;cursor:pointer}
.tablero details[open]{padding-bottom:16px}
.tablero details .tabla tbody tr:nth-child(odd) td{background:var(--bg)}
.tablero .ui-dos{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:24px;align-items:start}
.tablero .ui-lectura{font-size:17px;line-height:1.45;max-width:72ch;color:var(--fg)}
.tablero .ui-pie{font-size:13px;color:var(--fg3);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.tablero .ui-ejemplo{font-size:13px;color:var(--fg2);background:var(--panel);border-radius:8px;padding:8px 16px}
.tablero a:focus-visible,.tablero summary:focus-visible{outline:2px solid var(--accion);outline-offset:2px}


/* ==========================================================================
   9. IMPRESIÓN (A4). armar_pdf.py imprime los documentos de la marca directamente, sin tocarles
      los estilos: todo lo que hace falta está acá.
   ========================================================================== */
@page documento{size:A4;margin:0}
@media print{
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  html,body{margin:0;background:var(--crudo)}
  .documento{background:var(--crudo);padding:0}
  .documento .hoja{margin:0;break-after:page;page-break-after:always}
  .documento .hoja:last-of-type{break-after:auto;page-break-after:auto}
  .no-imprimir{display:none !important}
  h1,h2,h3,.etiqueta{break-after:avoid}
  .tabla tr,.paso,.kpi,.semaforo,.recuadro,.captura{break-inside:avoid}
}