/* ============================================================================
   PLANNING · InStyle Group — Componentes
   Requiere app.css (tokens). Todas las clases son de uso obligatorio para las
   vistas: ninguna pantalla define estilos propios sueltos.
   ============================================================================ */

/* ── 1 · Rejilla ────────────────────────────────────────────────────────── */
.rejilla { display: grid; gap: var(--sp-4); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-6  { grid-column: span 6; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-12 { grid-column: span 12; }

@media (max-width: 1200px) { .col-3 { grid-column: span 6; } }
@media (max-width: 900px)  { .col-4, .col-6, .col-8, .col-9 { grid-column: span 12; } }
@media (max-width: 640px)  { .col-3 { grid-column: span 12; } }

.pila { display: flex; flex-direction: column; gap: var(--sp-4); }
.fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.fila-sep { justify-content: space-between; }

/* ── 2 · Tarjetas ───────────────────────────────────────────────────────── */
.tarjeta {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}
.tarjeta-cabecera {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--line);
}
.tarjeta-cabecera .t-tarjeta { flex: 1 1 auto; min-width: 0; }
.tarjeta-cuerpo { padding: var(--sp-4); }
.tarjeta-cuerpo.sin-relleno { padding: 0; }
.tarjeta-pie {
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--line);
    background: var(--surface-alt);
    font-size: var(--fs-sm);
}

/* Tarjeta de KPI con sparkline */
.kpi {
    display: flex; flex-direction: column; gap: var(--sp-2);
    padding: var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-1);
}
.kpi-titulo {
    font-size: var(--fs-xs); font-weight: 600; letter-spacing: .07em;
    text-transform: uppercase; color: var(--muted);
}
.kpi-valor { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi-meta { font-size: var(--fs-sm); color: var(--muted); }
.kpi-delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.kpi-delta.sube { color: var(--sem-green); }
.kpi-delta.baja { color: var(--sem-red); }
.kpi-delta.plano { color: var(--muted); }
.kpi-sparkline { display: block; width: 100%; height: 34px; margin-top: auto; }
.kpi-sparkline path { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.kpi-sparkline .area { fill: var(--accent-wash); stroke: none; }
.kpi.es-navy .kpi-sparkline path { stroke: var(--navy); }

/* ── 3 · Tablas de alta densidad ────────────────────────────────────────── */
.tabla-envoltura {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.tabla-envoltura.alta { max-height: 62vh; overflow-y: auto; }

table.tabla {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--fs-base);
    white-space: nowrap;
}
table.tabla th,
table.tabla td {
    padding: 7px var(--sp-3);
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
}
table.tabla thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface-alt);
    border-bottom: 1px solid var(--line-strong);
    color: var(--muted);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}
table.tabla tbody tr:hover td { background: var(--surface-alt); }
table.tabla tbody tr:last-child td { border-bottom: 0; }
table.tabla td.num,
table.tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.tabla td.envuelve { white-space: normal; min-width: 220px; }
table.tabla .col-acciones { width: 1%; text-align: right; }
table.tabla td.principal { font-weight: 600; }

/* Fila de estado inactivo (baja lógica) */
table.tabla tr.inactiva td { color: var(--muted); }
table.tabla tr.inactiva td.principal { font-weight: 500; text-decoration: line-through; }

/* Columna congelada a la izquierda para tablas anchas */
table.tabla.fija-1 th:first-child,
table.tabla.fija-1 td:first-child {
    position: sticky; left: 0; z-index: 1;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--line);
}
table.tabla.fija-1 thead th:first-child { z-index: 3; background: var(--surface-alt); }
table.tabla.fija-1 tbody tr:hover td:first-child { background: var(--surface-alt); }

/* Barra de herramientas sobre una tabla */
.tabla-barra {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}
.tabla-barra .crece { flex: 1 1 auto; }
.tabla-resumen { color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }

/* ── 4 · Chips de estatus ───────────────────────────────────────────────── */
.chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px;
    border-radius: var(--r-pill);
    background: var(--sem-neutral-wash);
    color: var(--sem-neutral);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.7;
    white-space: nowrap;
}
.chip::before {
    content: "";
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
    flex: 0 0 6px;
}
.chip.sin-punto::before { display: none; }
.chip-verde    { background: var(--sem-green-wash);  color: var(--sem-green); }
.chip-amarillo { background: var(--sem-yellow-wash); color: var(--sem-yellow); }
.chip-naranja  { background: var(--sem-orange-wash); color: var(--sem-orange); }
.chip-rojo     { background: var(--sem-red-wash);    color: var(--sem-red); }
.chip-neutro   { background: var(--sem-neutral-wash);color: var(--sem-neutral); }
.chip-dorado   { background: var(--accent-wash);     color: var(--accent-ink); }
.chip-navy     { background: #EAEEF3;                color: var(--navy); }

/* Chip de unidad de negocio (inicial + nombre) */
.chip-unidad {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 9px 2px 3px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    background: var(--surface);
    font-size: var(--fs-xs); font-weight: 600;
    white-space: nowrap;
}
.chip-unidad .inicial {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: var(--r-sm);
    background: var(--navy); color: #fff; font-size: 10px;
}
.chip-unidad.hoven    .inicial { background: var(--navy); }
.chip-unidad.fitters  .inicial { background: var(--accent); }
.chip-unidad.cabo     .inicial { background: var(--sem-green); }

/* Semáforo compacto (punto suelto) */
.semaforo { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sem-neutral); }
.semaforo.verde { background: var(--sem-green); }
.semaforo.amarillo { background: var(--sem-yellow); }
.semaforo.naranja { background: var(--sem-orange); }
.semaforo.rojo { background: var(--sem-red); }

/* ── 5 · Botones ────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 32px;
    padding: 0 var(--sp-4);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink);
    font-size: var(--fs-base);
    font-weight: 600;
    white-space: nowrap;
}
.btn:hover { background: var(--surface-alt); text-decoration: none; }
.btn svg { width: 15px; height: 15px; }
.btn[disabled], .btn.deshabilitado { opacity: .5; pointer-events: none; }

.btn-primario { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-primario:hover { background: var(--navy-hover); border-color: var(--navy-hover); }

.btn-acento { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-acento:hover { background: var(--accent-strong); border-color: var(--accent-strong); }

.btn-peligro { background: var(--surface); border-color: var(--sem-red); color: var(--sem-red); }
.btn-peligro:hover { background: var(--sem-red-wash); }

.btn-plano { border-color: transparent; background: none; color: var(--ink-2); font-weight: 500; }
.btn-plano:hover { background: var(--surface-sunken); }

.btn-sm { height: 26px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }
.btn-lg { height: 38px; padding: 0 var(--sp-5); font-size: var(--fs-md); }
.btn-bloque { width: 100%; }

.grupo-botones { display: inline-flex; }
.grupo-botones .btn { border-radius: 0; margin-left: -1px; }
.grupo-botones .btn:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); margin-left: 0; }
.grupo-botones .btn:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.grupo-botones .btn.activo { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ── 6 · Formularios ────────────────────────────────────────────────────── */
.formulario { display: flex; flex-direction: column; gap: var(--sp-4); }

.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo > label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.campo .obligatorio { color: var(--sem-red); }
.campo .ayuda { font-size: var(--fs-xs); color: var(--muted); }
.campo .error { font-size: var(--fs-xs); color: var(--sem-red); font-weight: 600; }

.control {
    width: 100%;
    height: 34px;
    padding: 0 var(--sp-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    font-size: var(--fs-base);
}
textarea.control { height: auto; min-height: 82px; padding: var(--sp-2) var(--sp-3); line-height: var(--lh-base); resize: vertical; }
select.control { appearance: none; padding-right: var(--sp-6);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23949598' stroke-width='1.6'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 9px center; background-size: 14px; }
.control:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(180, 146, 83, .18); }
.control[readonly], .control[disabled] { background: var(--surface-sunken); color: var(--muted); }
.control.con-error { border-color: var(--sem-red); }
.control.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Campo de filtro rápido sobre una tabla. Va como clase y no como atributo
   style= porque la CSP declara style-src 'self' sin 'unsafe-inline': un estilo
   en línea lo bloquea el navegador y el campo se pinta al 100 % de ancho. */
.control-filtro { max-width: 220px; }

.campo-fila { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.opcion { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-base); cursor: pointer; }
.opcion input { margin: 3px 0 0; width: 15px; height: 15px; accent-color: var(--accent); flex: 0 0 15px; }
.opcion .opcion-texto { min-width: 0; }
.opcion .opcion-nota { display: block; font-size: var(--fs-xs); color: var(--muted); }

.lista-opciones { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

.acciones-formulario {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--line);
}
.acciones-formulario .derecha { margin-left: auto; }

/* Filas dinámicas (códigos ERP, contactos, mapeos) */
.filas-dinamicas { display: flex; flex-direction: column; gap: var(--sp-2); }
.fila-dinamica {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-2);
    background: var(--surface-alt);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}
.fila-dinamica .control { flex: 1 1 160px; background: var(--surface); }
.fila-dinamica .btn-quitar {
    flex: 0 0 28px;
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    background: var(--surface); color: var(--sem-red);
}
.fila-dinamica .btn-quitar:hover { background: var(--sem-red-wash); }

/* ── 7 · Matriz rol × permiso ───────────────────────────────────────────── */
.matriz-grupo { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.matriz-grupo + .matriz-grupo { margin-top: var(--sp-3); }
.matriz-cabecera {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    background: var(--surface-alt);
    border-bottom: 1px solid var(--line);
}
.matriz-cabecera .modulo { flex: 1 1 auto; font-weight: 600; font-size: var(--fs-sm); }
.matriz-cuerpo { padding: var(--sp-3); display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* ── 8 · Pestañas ───────────────────────────────────────────────────────── */
.pestanas {
    display: flex; gap: var(--sp-1);
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
}
.pestana {
    padding: 9px var(--sp-4);
    border: 0; border-bottom: 2px solid transparent;
    background: none;
    color: var(--muted);
    font-size: var(--fs-base); font-weight: 600;
    white-space: nowrap;
}
.pestana:hover { color: var(--ink); text-decoration: none; }
.pestana.activa { color: var(--ink); border-bottom-color: var(--accent); }
.panel-pestana { display: none; padding-top: var(--sp-4); }
.panel-pestana.activo { display: block; }

/* ── 9 · Flash ──────────────────────────────────────────────────────────── */
/* En flujo, nunca flotante: no puede tapar las acciones del encabezado. */
.flash-zona {
    display: flex; flex-direction: column; gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}
.flash {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--line-strong);
    border-left: 3px solid var(--sem-neutral);
    border-radius: var(--r);
    background: var(--surface);
    box-shadow: var(--shadow-2);
    font-size: var(--fs-base);
}
.flash .flash-icono { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 2px; }
.flash .flash-texto { flex: 1 1 auto; min-width: 0; }
.flash .flash-cerrar { border: 0; background: none; color: var(--muted); padding: 0 2px; line-height: 1; }
.flash-ok    { border-left-color: var(--sem-green); }
.flash-ok    .flash-icono { color: var(--sem-green); }
.flash-warn  { border-left-color: var(--sem-yellow); }
.flash-warn  .flash-icono { color: var(--sem-yellow); }
.flash-error { border-left-color: var(--sem-red); }
.flash-error .flash-icono { color: var(--sem-red); }
.flash.saliendo { opacity: 0; transform: translateX(12px); transition: opacity .25s ease, transform .25s ease; }

/* Aviso en línea (no flotante) */
.aviso {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--line-strong);
    border-left: 3px solid var(--sem-neutral);
    border-radius: var(--r);
    background: var(--surface-alt);
    font-size: var(--fs-base);
}
.aviso-ok    { border-left-color: var(--sem-green);  background: var(--sem-green-wash); }
.aviso-warn  { border-left-color: var(--sem-yellow); background: var(--sem-yellow-wash); }
.aviso-error { border-left-color: var(--sem-red);    background: var(--sem-red-wash); }
.aviso-info  { border-left-color: var(--navy); }

/* ── 10 · Drawer lateral ────────────────────────────────────────────────── */
.drawer-velo {
    position: fixed; inset: 0; z-index: var(--z-drawer);
    background: rgba(15, 27, 45, .45);
    display: none;
}
.drawer-velo.abierto { display: block; }
.drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(520px, 100vw);
    z-index: calc(var(--z-drawer) + 1);
    background: var(--surface);
    box-shadow: var(--shadow-3);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform .2s ease;
}
.drawer.abierto { transform: translateX(0); }
.drawer-cabecera {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-4);
    border-bottom: 1px solid var(--line);
}
.drawer-cabecera .t-seccion { flex: 1 1 auto; min-width: 0; }
.drawer-cuerpo { flex: 1 1 auto; overflow-y: auto; padding: var(--sp-4); }
.drawer-pie { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line); background: var(--surface-alt); }

/* ── 11 · Badge del menú ────────────────────────────────────────────────── */
.badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 18px; padding: 0 6px;
    border-radius: var(--r-pill);
    background: var(--sem-red); color: #fff;
    font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.badge-neutro { background: rgba(255, 255, 255, .16); color: var(--sidebar-ink-on); }
.badge-dorado { background: var(--accent); color: #fff; }
.badge-fase {
    background: rgba(255, 255, 255, .10);
    color: var(--sidebar-ink-dim);
    font-weight: 600;
    letter-spacing: .02em;
}
/* Las tres variantes de arriba viven en el sidebar oscuro. Sobre una
   superficie clara (avisos, tarjetas, tablas) hay que usar ésta: las otras
   quedan invisibles porque su fondo es blanco translúcido. */
.badge-claro {
    background: var(--surface-sunken);
    color: var(--ink-soft, var(--muted));
    border: 1px solid var(--line-strong);
    font-weight: 600;
    letter-spacing: .02em;
}

/* ── 12 · Estado vacío ──────────────────────────────────────────────────── */
.vacio {
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
    padding: var(--sp-8) var(--sp-5);
    text-align: center;
    color: var(--muted);
}
.vacio svg { width: 28px; height: 28px; color: var(--line-strong); }
.vacio .vacio-titulo { color: var(--ink-2); font-size: var(--fs-md); font-weight: 600; }
.vacio .vacio-texto { max-width: 420px; font-size: var(--fs-base); }
.vacio .btn { margin-top: var(--sp-2); }

/* ── 13 · Paginación ────────────────────────────────────────────────────── */
.paginacion {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--line);
    background: var(--surface);
}
.paginacion .resumen { color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.paginacion .paginas { display: flex; align-items: center; gap: 3px; margin-left: auto; }
.paginacion .pagina {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 28px; height: 28px; padding: 0 6px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink-2);
    font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
}
.paginacion .pagina:hover { background: var(--surface-alt); text-decoration: none; }
.paginacion .pagina.activa { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
.paginacion .pagina.inerte { color: var(--muted); border-color: var(--line); pointer-events: none; opacity: .6; }
.paginacion .puntos { padding: 0 4px; color: var(--muted); }

/* ── 14 · Piezas menores ────────────────────────────────────────────────── */
.lista-datos { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.lista-datos dt { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.lista-datos dd { margin: 2px 0 0; font-size: var(--fs-md); }

.barra-progreso { height: 6px; border-radius: var(--r-pill); background: var(--surface-sunken); overflow: hidden; }
.barra-progreso > span { display: block; height: 100%; background: var(--accent); border-radius: var(--r-pill); }
.barra-progreso.verde > span { background: var(--sem-green); }
.barra-progreso.rojo  > span { background: var(--sem-red); }

.separador-h { height: 1px; margin: var(--sp-4) 0; background: var(--line); border: 0; }

.filtros {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    margin-bottom: var(--sp-4);
}
.filtros .campo { flex: 0 1 190px; }
.filtros .acciones-filtro { display: flex; gap: var(--sp-2); margin-left: auto; }

.codigo { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink-2); }

.placeholder-modulo {
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
    padding: var(--sp-8) var(--sp-5);
    text-align: center;
}
.placeholder-modulo .icono {
    display: flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: var(--r-lg);
    background: var(--accent-wash); color: var(--accent-ink);
}
.placeholder-modulo .texto { max-width: 480px; color: var(--muted); }

.pagina-error { max-width: 520px; margin: 12vh auto; text-align: center; }
.pagina-error .codigo-error { font-size: 52px; font-weight: 700; color: var(--line-strong); letter-spacing: -.03em; line-height: 1; }
.pagina-error h1 { margin: var(--sp-3) 0 var(--sp-2); font-size: var(--fs-xl); font-weight: 600; }
.pagina-error p { color: var(--muted); margin-bottom: var(--sp-5); }

/* ── 15 · Progreso de tarea larga ───────────────────────────────────────── */
/* Elemento <progress> y no un div con ancho en línea: la CSP declara
   style-src 'self' sin 'unsafe-inline' y un atributo style= lo bloquea el
   navegador. El avance se mueve desde JavaScript con `barra.value = n`.
   Lo usa el paso 7 del asistente de importación IRI. */
progress.progreso {
    display: block;
    width: 100%;
    height: 8px;
    appearance: none;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--surface-sunken);
    overflow: hidden;
}
progress.progreso::-webkit-progress-bar { background: var(--surface-sunken); border-radius: var(--r-pill); }
progress.progreso::-webkit-progress-value { background: var(--accent); border-radius: var(--r-pill); }
progress.progreso::-moz-progress-bar { background: var(--accent); border-radius: var(--r-pill); }

/* Numerador grande de una tarea en curso (porcentaje / filas confirmadas) */
.progreso-cifra {
    font-size: var(--fs-2xl); font-weight: 600; line-height: 1.1;
    letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}

/* Celda de vista previa: valor crudo arriba, valor normalizado abajo */
.celda-doble { display: flex; flex-direction: column; gap: 1px; }
.celda-doble .crudo { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); }
.celda-doble .normalizado { font-size: var(--fs-sm); }
.celda-doble .normalizado.nulo { color: var(--muted); font-style: italic; }