/* =====================================================================
TakeData · sistema de diseño v2 («el informe es la marca»)
Se carga DESPUÉS de styles.css. Las páginas que lo enlazan adoptan la
letra, la paleta y los componentes del informe PDF; las que aún no, siguen
con styles.css sin cambios. Al terminar la migración se fundirá con él.
Paleta y letra salen del PDF (THEME en report_generation.py y assets/fonts).
Guía: .tmp_auditoria_diseno/hallazgos/01-sistema-visual.md (D1-D5).
===================================================================== */
/* ---------- Letra: Inter, la misma del PDF (OFL, fonts/LICENSE-Inter.txt) ---------- */
@font-face { font-family: "Inter"; src: url("/fonts/inter-400.woff") format("woff");
font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-600.woff") format("woff");
font-weight: 500 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-700.woff") format("woff");
font-weight: 700; font-style: normal; font-display: swap; }
/* Respaldo con métricas parecidas: el cambio de letra no mueve la página */
@font-face { font-family: "Inter Fallback"; src: local("Arial");
size-adjust: 107%; ascent-override: 90%; descent-override: 22.4%; line-gap-override: 0%; }
:root {
/* Tinta y papel */
--ink-900: #0E2236; /* titulares y cifras */
--ink-700: #2B3F52; /* cuerpo */
--ink-500: #52667A; /* secundario (5,9:1) */
--ink-400: #8696A6; /* solo bordes de campo, iconos inactivos y placeholder */
--line-200: #DDE4EA;
--surface-0: #FFFFFF;
--surface-1: #F4F7F9;
--surface-2: #EAF0F4;
/* Marca */
--navy-900: #0B2740; /* noche: portada y menú de administración */
--navy-700: #1A4D6D; /* azul del PDF y del logo */
--teal-800: #0E6A79; /* hover de la acción */
--teal-700: #117A8B; /* acción: botones y enlaces (5,0:1 con blanco) */
--teal-500: #17A2B8; /* dato: solo gráfico (filetes, foco, iconos). Nunca texto */
--teal-300: #5FCBD9; /* acción y enlaces sobre fondo marino */
--teal-50: #EAF4F5;
/* Estados */
--ok-ink: #1F6B43; --ok-bg: #EAF6EE; --ok-line: #B7DEC4;
--warn-ink: #8A4B08; --warn-bg: #FFF4DE; --warn-line: #F2CF8B;
--err-ink: #B42318; --err-bg: #FDEDEC; --err-line: #F4C2BE;
--info-ink: #0E5A6B; --info-bg: #E6F3F5; --info-line: #B5DFE5;
/* Datos: la misma escala en web, app, PDF, mapa interactivo, catálogo y redes */
--afl-1: #BFE0E5; --afl-2: #5DB3C1; --afl-3: #E8A33D; --afl-4: #D2582B; --afl-5: #8F1F2B;
--u1: #2470CC; --u2: #EB6834; --u3: #1BAF7A; --u4: #EDA100; --u5: #E87BA4;
--point: #E01B4C; /* el punto analizado */
/* Letra */
--font-text: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--fs-display: clamp(2.25rem, 1.55rem + 2.8vw, 3.25rem);
--fs-h1: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
--fs-h2: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
--fs-h3: 1.25rem;
--fs-lg: 1.125rem;
--fs-md: 1rem;
--fs-sm: 0.875rem;
--fs-xs: 0.75rem;
/* Espacio (base 4), anchos, radios, elevación y movimiento */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
--sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
--w-page: 1200px; --w-app: 1280px; --w-read: 720px; --measure: 66ch;
--gutter: clamp(16px, 4vw, 24px);
--r-1: 4px; --r-2: 8px; --r-3: 12px; --r-4: 16px; --r-pill: 999px;
--e-1: 0 1px 2px rgb(14 34 54 / .06), 0 1px 3px rgb(14 34 54 / .08);
--e-2: 0 8px 24px rgb(14 34 54 / .12);
--e-3: 0 24px 48px rgb(14 34 54 / .20);
--focus: 0 0 0 2px #fff, 0 0 0 4px var(--teal-500);
/* Anillo de foco: #117A8B da 5,0:1 sobre blanco y 4,7:1 sobre --surface-1 (el turquesa de
marca se quedaba en 2,8:1 sobre gris). styles.css lo lee de la misma variable. */
--focus-ring: var(--teal-700);
/* Alto de .site-header: styles.css lo usa en scroll-padding-top (anclas bajo la cabecera) */
--navbar-h: 64px;
--focus-on-dark: 0 0 0 2px var(--navy-900), 0 0 0 4px var(--teal-300);
--dur: 160ms; --ease: cubic-bezier(.2, .7, .2, 1);
/* Alias de styles.css: las reglas antiguas toman los valores nuevos */
--primary: var(--navy-700);
--primary-dark: var(--navy-900);
--accent-strong: var(--teal-700);
--accent-strong-hover: var(--teal-800);
--text: var(--ink-700);
--text-light: var(--ink-500);
--border: var(--line-200);
--neutral: var(--surface-1);
}
/* ---------- Base ---------- */
body {
font-family: var(--font-text);
font-size: var(--fs-md);
line-height: 1.55;
color: var(--ink-700);
background: var(--surface-0);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 { color: var(--ink-900); font-weight: 600; letter-spacing: -.015em; text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: 1.1; letter-spacing: -.025em; }
h2 { font-size: var(--fs-h2); line-height: 1.2; text-align: left; margin-bottom: var(--sp-4); }
h3 { font-size: var(--fs-h3); line-height: 1.3; font-weight: 600; }
p { color: var(--ink-700); line-height: 1.6; }
a { color: var(--teal-700); text-underline-offset: 3px; }
a:hover { color: var(--teal-800); }
strong, b { color: inherit; }
.num, .fig { font-variant-numeric: tabular-nums; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 2px solid var(--focus-ring); outline-offset: 2px;
}
.on-dark { --focus-ring: var(--teal-300); }
html { scroll-padding-top: calc(var(--navbar-h, 64px) + 16px); }
/* Lo oculto con el atributo hidden no lo vuelve a enseñar ningún display */
[hidden] { display: none !important; }
/* En el móvil, el texto de un botón pasa a dos líneas antes que desbordar la página */
main .btn { white-space: normal; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--sp-4); top: -60px; z-index: 3000; background: var(--navy-900);
color: #fff; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-2); }
.skip-link:focus { top: var(--sp-4); }
/* Iconos (images/icons.svg) */
.ic { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 2;
stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.ic--sm { width: 14px; height: 14px; }
.ic--lg { width: 24px; height: 24px; }
/* ---------- Maquetación ---------- */
.wrap { width: 100%; max-width: var(--w-page); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--app { max-width: var(--w-app); }
.wrap--read { max-width: var(--w-read); }
.measure { max-width: var(--measure); }
.section { padding-block: var(--sp-9); }
.section--alt { background: var(--surface-1); }
.section--tight { padding-block: var(--sp-8); }
.section__head { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-7); max-width: var(--measure); }
.section__head h2 { margin: 0; }
.lead { font-size: var(--fs-lg); line-height: 1.55; color: var(--ink-700); max-width: 60ch; }
.muted { color: var(--ink-500); }
.small { font-size: var(--fs-sm); }
@media (max-width: 720px) { .section { padding-block: var(--sp-8); } .section__head { margin-bottom: var(--sp-6); } }
/* Titular de capítulo, como las bandas del PDF («La zona en cifras») */
.chapter-title { border-left: 4px solid var(--teal-500); padding-left: var(--sp-4); display: grid; gap: var(--sp-2); }
.chapter-title h2, .chapter-title h1 { margin: 0; }
.chapter-title p { color: var(--ink-500); margin: 0; max-width: var(--measure); }
/* ---------- Botones: un primario por vista ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
min-height: 44px; padding: 0 var(--sp-5); border: 1px solid transparent; border-radius: var(--r-2);
font: 600 var(--fs-md)/1.2 var(--font-text); text-decoration: none; text-align: center; cursor: pointer;
transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn--primary { background: var(--teal-700); color: #fff; }
.btn--primary:hover { background: var(--teal-800); color: #fff; }
.btn--secondary { background: var(--surface-0); color: var(--ink-900); border-color: var(--ink-400); }
.btn--secondary:hover { border-color: var(--ink-700); background: var(--surface-1); color: var(--ink-900); }
.btn--quiet { background: transparent; color: var(--teal-700); padding-inline: var(--sp-3); }
.btn--quiet:hover { background: var(--teal-50); color: var(--teal-800); }
.btn--danger { background: var(--err-ink); color: #fff; }
.btn--danger:hover { background: #8F1C13; color: #fff; }
.btn--sm { min-height: 36px; padding: 0 var(--sp-4); font-size: var(--fs-sm); }
.btn--lg { min-height: 52px; padding: 0 var(--sp-6); font-size: var(--fs-lg); }
.btn--block { width: 100%; }
.on-dark .btn--primary { background: var(--teal-300); color: var(--navy-900); }
.on-dark .btn--primary:hover { background: #8FDCE6; color: var(--navy-900); }
.on-dark .btn--secondary { background: transparent; color: #fff; border-color: rgb(255 255 255 / .55); }
.on-dark .btn--secondary:hover { background: rgb(255 255 255 / .08); color: #fff; }
.on-dark a:not(.btn) { color: var(--teal-300); }
/* ---------- Campos ---------- */
.field { display: grid; gap: var(--sp-2); }
.field + .field { margin-top: var(--sp-5); }
.field__label { font: 500 var(--fs-sm)/1.3 var(--font-text); color: var(--ink-900); }
.field__label .opt { font-weight: 400; color: var(--ink-500); }
.field__hint { font-size: var(--fs-sm); color: var(--ink-500); margin: 0; }
.field__error { font-size: var(--fs-sm); color: var(--err-ink); margin: 0; display: flex; gap: var(--sp-1); align-items: flex-start; }
.input, .select, .textarea { width: 100%; min-height: 44px; padding: 10px 12px;
font: 400 var(--fs-md)/1.4 var(--font-text); color: var(--ink-900);
background: var(--surface-0); border: 1px solid var(--ink-400); border-radius: var(--r-2); }
.input::placeholder, .textarea::placeholder { color: var(--ink-400); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-500); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
outline: none; border-color: var(--teal-700); box-shadow: 0 0 0 1px var(--teal-700), var(--focus); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--err-ink); }
.input:disabled { background: var(--surface-1); color: var(--ink-500); }
.check { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-sm); color: var(--ink-700); line-height: 1.45; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--teal-700); flex: none; }
/* Buscador de dirección (portada, guías, generador) */
.addr { display: grid; grid-template-columns: minmax(0, 1fr) auto; background: var(--surface-0);
border: 1px solid var(--ink-400); border-radius: var(--r-3); overflow: hidden; min-height: 56px; }
.addr:focus-within { border-color: var(--teal-700); box-shadow: 0 0 0 1px var(--teal-700), var(--focus); }
.addr__field { display: flex; align-items: center; gap: var(--sp-3); padding-inline: var(--sp-4); color: var(--ink-500); min-width: 0; }
.addr__field input { border: 0; outline: 0; background: transparent; font: 400 var(--fs-md)/1.4 var(--font-text);
color: var(--ink-900); width: 100%; min-width: 0; padding-block: 14px; }
.addr__field input::placeholder { color: var(--ink-500); }
.addr .btn { border-radius: 0; min-height: 100%; }
/* El cuadro ya marca el foco entero: el campo no lleva anillo propio y el del botón va por
dentro (por fuera lo recortaría el cuadro) */
.addr .addr__field input:focus-visible { outline: none; }
.addr .btn:focus-visible { outline: 2px solid var(--surface-0); outline-offset: -5px; }
.on-dark .addr .btn:focus-visible { outline-color: var(--navy-900); }
/* Aviso de la caja (lo rellena site.js): vacío no ocupa sitio */
.addr-msg { color: var(--warn-ink); font-size: var(--fs-sm); font-weight: 500; }
.addr-msg:not(:empty) { margin-top: var(--sp-2); }
.on-dark .addr-msg { color: var(--warn-line); }
.on-dark .addr { border-color: transparent; box-shadow: 0 0 0 4px rgb(95 203 217 / .18); }
.on-dark .addr:focus-within { box-shadow: 0 0 0 2px var(--navy-900), 0 0 0 4px var(--teal-300); }
@media (max-width: 520px) {
.addr { grid-template-columns: 1fr; border-radius: var(--r-3); }
.addr .btn { border-radius: 0 0 var(--r-3) var(--r-3); min-height: 48px; }
}
/* ---------- Tarjetas: solo para lo que se toca o se elige ---------- */
.card { background: var(--surface-0); border: 1px solid var(--line-200); border-radius: var(--r-3); padding: var(--sp-5); }
.card__title { font: 600 var(--fs-h3)/1.3 var(--font-text); color: var(--ink-900); margin: 0 0 var(--sp-2); }
.card--link { display: block; color: inherit; text-decoration: none;
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.card--link:hover { border-color: var(--ink-400); box-shadow: var(--e-1); color: inherit; }
.card--selected, .card[aria-checked="true"] { border-color: var(--teal-700); background: var(--teal-50); box-shadow: inset 0 0 0 1px var(--teal-700); }
.card--featured { border-color: var(--teal-500); box-shadow: inset 0 3px 0 var(--teal-500); }
/* ---------- Tablas ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line-200); border-radius: var(--r-3); background: var(--surface-0); }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th { text-align: left; font-weight: 600; color: var(--ink-500); background: var(--surface-0);
padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--ink-400); }
.table td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line-200); color: var(--ink-700); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* ---------- Insignias de estado (siempre con texto) ---------- */
.badge-v2 { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border: 1px solid transparent;
border-radius: var(--r-pill); font: 600 var(--fs-xs)/1.7 var(--font-text); white-space: nowrap; }
.badge-v2 .ic { width: 14px; height: 14px; vertical-align: 0; }
.badge-v2--neutral { background: var(--surface-2); color: var(--ink-700); }
.badge-v2--info { background: var(--info-bg); color: var(--info-ink); border-color: var(--info-line); }
.badge-v2--ok { background: var(--ok-bg); color: var(--ok-ink); border-color: var(--ok-line); }
.badge-v2--warn { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line); }
.badge-v2--err { background: var(--err-bg); color: var(--err-ink); border-color: var(--err-line); }
/* ---------- Barra de índice de afluencia (componente propio) ----------
68
data-clase: 1 (0-20) … 5 (80-100). */
.afl { display: inline-flex; align-items: center; gap: var(--sp-2); font-variant-numeric: tabular-nums; }
.afl__valor { font-weight: 600; color: var(--ink-900); min-width: 2ch; text-align: right; }
.afl__barra { display: inline-grid; grid-template-columns: repeat(5, 10px); gap: 2px; }
.afl__barra i { height: 10px; border-radius: 2px; background: var(--surface-2); display: block; }
.afl__barra i:nth-child(1) { --c: var(--afl-1); } .afl__barra i:nth-child(2) { --c: var(--afl-2); }
.afl__barra i:nth-child(3) { --c: var(--afl-3); } .afl__barra i:nth-child(4) { --c: var(--afl-4); }
.afl__barra i:nth-child(5) { --c: var(--afl-5); }
.afl[data-clase="1"] i:nth-child(-n+1), .afl[data-clase="2"] i:nth-child(-n+2),
.afl[data-clase="3"] i:nth-child(-n+3), .afl[data-clase="4"] i:nth-child(-n+4),
.afl[data-clase="5"] i:nth-child(-n+5) { background: var(--c); }
/* La misma barra como indicador de espera mientras se genera un informe */
.afl--cargando i { animation: td-tramo 1.4s var(--ease) infinite; }
.afl--cargando i:nth-child(2) { animation-delay: .14s; } .afl--cargando i:nth-child(3) { animation-delay: .28s; }
.afl--cargando i:nth-child(4) { animation-delay: .42s; } .afl--cargando i:nth-child(5) { animation-delay: .56s; }
@keyframes td-tramo { 0%, 100% { background: var(--surface-2); } 50% { background: var(--c); } }
/* Con movimiento reducido no se anima, y tampoco se pinta entera (se leería como «afluencia 100»):
se queda quieta en la fase del informe (data-fase="cola" | "generando") o, sin fase, en el
primer tramo */
@media (prefers-reduced-motion: reduce) {
.afl--cargando i { animation: none; background: var(--surface-2); }
.afl--cargando i:nth-child(1), .afl--cargando[data-fase="generando"] i:nth-child(-n+3) { background: var(--c); }
}
/* Leyenda de la escala */
.afl-legend { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--ink-500); }
.afl-legend span { display: inline-flex; gap: 2px; }
.afl-legend i { width: 22px; height: 8px; border-radius: 2px; display: block; }
.afl-legend i:nth-child(1) { background: var(--afl-1); } .afl-legend i:nth-child(2) { background: var(--afl-2); }
.afl-legend i:nth-child(3) { background: var(--afl-3); } .afl-legend i:nth-child(4) { background: var(--afl-4); }
.afl-legend i:nth-child(5) { background: var(--afl-5); }
/* ---------- Cifra con su referencia (la tarjeta de cifra del PDF) ---------- */
.kpi { display: grid; align-content: start; gap: 2px; padding-top: var(--sp-3); border-top: 3px solid var(--teal-500); }
.kpi__valor { font: 700 clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem)/1.05 var(--font-text); letter-spacing: -.025em;
color: var(--ink-900); font-variant-numeric: tabular-nums; }
.kpi__etiqueta { font-size: var(--fs-sm); color: var(--ink-700); line-height: 1.35; }
.kpi__ref { font-size: var(--fs-xs); color: var(--teal-800); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-5); }
.on-dark .kpi__valor { color: #fff; } .on-dark .kpi__etiqueta { color: #D5E2EA; } .on-dark .kpi__ref { color: var(--teal-300); }
/* ---------- Ficha del informe de ejemplo: tres cifras sobre el plano (portada y acceso).
Cada página la coloca a su manera; aquí va solo cómo es. ---------- */
.ficha-ejemplo { display: grid; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); background: var(--surface-0);
border: 1px solid var(--line-200); border-radius: var(--r-3); box-shadow: var(--e-2); }
.ficha-ejemplo__donde { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-1) var(--sp-4); font-size: var(--fs-sm); color: var(--ink-500); }
.ficha-ejemplo__donde strong { color: var(--ink-900); font-weight: 600; }
.ficha-ejemplo .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.ficha-ejemplo .kpi { grid-template-rows: auto 1fr auto; }
.ficha-ejemplo .kpi__valor { order: -1; font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem); }
.ficha-ejemplo .kpi__ref { align-self: end; } /* referencias a la misma altura, como en el PDF */
.ficha-ejemplo__pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-xs); color: var(--ink-500); }
/* Tres cifras en fila no caben en el móvil: una debajo de otra, la cifra a la izquierda */
@media (max-width: 560px) {
.ficha-ejemplo .kpis { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
.ficha-ejemplo .kpi { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: auto auto; column-gap: var(--sp-4); align-items: baseline; }
.ficha-ejemplo .kpi__valor { grid-row: span 2; }
}
/* ---------- Posición 0-100 (la barra de la tabla «La zona en cifras») ---------- */
.pos { display: inline-grid; grid-template-columns: 96px auto; gap: var(--sp-2); align-items: center; font-variant-numeric: tabular-nums; }
.pos__pista { position: relative; height: 6px; border-radius: 3px; background: var(--surface-2); }
.pos__pista::after { content: ""; position: absolute; left: 50%; top: -3px; width: 1px; height: 12px; background: var(--ink-400); }
.pos__punto { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--teal-500); box-shadow: 0 0 0 2px #fff; }
/* ---------- Avisos (también como toast) ---------- */
.aviso { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: start;
padding: var(--sp-4); border: 1px solid; border-radius: var(--r-3); font-size: var(--fs-sm); line-height: 1.45; }
.aviso p { margin: 0; color: inherit; line-height: 1.45; }
.aviso__titulo { font-weight: 600; margin-bottom: 2px; }
.aviso > .ic { width: 20px; height: 20px; margin-top: 1px; }
.aviso--info { background: var(--info-bg); color: var(--info-ink); border-color: var(--info-line); }
.aviso--ok { background: var(--ok-bg); color: var(--ok-ink); border-color: var(--ok-line); }
.aviso--warn { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line); }
.aviso--err { background: var(--err-bg); color: var(--err-ink); border-color: var(--err-line); }
.aviso--toast { position: fixed; top: var(--sp-4); right: var(--sp-4); z-index: 2000; width: min(380px, calc(100vw - 32px)); box-shadow: var(--e-2); }
@media (max-width: 600px) { .aviso { grid-template-columns: 20px minmax(0, 1fr); } .aviso > .btn { grid-column: 2; justify-self: start; } }
/* ---------- Estado vacío: siempre una invitación a actuar ---------- */
.vacio { display: grid; justify-items: start; gap: var(--sp-3); max-width: 600px; padding: var(--sp-6);
border: 1px dashed var(--ink-400); border-radius: var(--r-3); background: var(--surface-0); }
.vacio__dibujo { width: 140px; height: auto; }
.vacio__titulo { font: 600 var(--fs-h3)/1.3 var(--font-text); color: var(--ink-900); margin: 0; }
.vacio__texto { color: var(--ink-500); margin: 0; max-width: 48ch; }
.vacio__acciones { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); }
/* ---------- Modal sobre