/* ============================================================================
   Panel Abarca IA — cuadro de mando de cartera
   ----------------------------------------------------------------------------
   Dirección: CUERO MODERNO. La paleta es la de siempre —marrón cálido, ámbar
   como único acento fuerte— porque es la identidad: el color de una cartera de
   piel, reforzado por el grano del fondo. Lo que cambia es la quincallería:
   tarjetas flotantes de esquinas generosas, profundidad por sombra en vez de
   por línea de un píxel, y una grotesca moderna en lugar de la serifa.

   Detalle que sostiene todo lo demás: las sombras van TEÑIDAS DE MARRÓN. Sobre
   un fondo cálido, una sombra de negro neutro se ve como suciedad gris.

   Sin JavaScript: la CSP del panel lo bloquea por completo.
   ========================================================================= */

:root {
    /* ── Paleta (sin cambios) ─────────────────────────────────────────────── */
    --ground:      #100e0b;
    --surface:     #1a1713;
    --surface-2:   #221d17;
    --surface-3:   #2a241c;
    --line:        #2e2820;
    --line-viva:   #453c2f;

    --ink:         #f4efe4;
    --ink-2:       #a89e8c;
    --ink-3:       #6f6759;

    --ambar:       #f0a53a;
    --ambar-hondo: #c07d1e;
    --ambar-velo:  rgba(240, 165, 58, .10);
    --teal:        #62c2a3;
    --teal-velo:   rgba(98, 194, 163, .12);
    --arcilla:     #dd6a4f;
    --arcilla-velo:rgba(221, 106, 79, .12);
    --violeta:     #9a8fd6;
    --violeta-velo:rgba(154, 143, 214, .12);

    /* ── Bordes translúcidos ──────────────────────────────────────────────── */
    /* Se apoyan en el fondo en vez de imponer un color propio: a cualquier
       altura de superficie siguen leyéndose como un borde y no como una raya. */
    --borde:       rgba(255, 240, 220, .07);
    --borde-viva:  rgba(255, 240, 220, .13);
    --brillo:      rgba(255, 240, 220, .04);

    /* ── Elevación ────────────────────────────────────────────────────────── */
    --sombra-1: 0 1px 2px rgba(20, 12, 4, .40);
    --sombra-2: 0 2px 4px rgba(20, 12, 4, .35), 0 8px 20px -6px rgba(20, 12, 4, .45);
    --sombra-3: 0 4px 8px rgba(20, 12, 4, .35), 0 18px 40px -12px rgba(20, 12, 4, .55);

    /* ── Radios ───────────────────────────────────────────────────────────── */
    --r-sm:   8px;
    --r-md:   12px;
    --r-lg:   16px;
    --r-xl:   22px;
    --r-full: 999px;

    /* ── Espaciado ────────────────────────────────────────────────────────── */
    --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
    --e5: 22px; --e6: 28px; --e7: 40px; --e8: 56px;

    /* ── Tipografía ───────────────────────────────────────────────────────── */
    --display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
    --texto:   'Instrument Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --mono:    ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, monospace;

    --lateral: 236px;

    /* Alias heredado: queda por compatibilidad, ya no se usa en reglas nuevas. */
    --radio: var(--r-md);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font: 400 15px/1.6 var(--texto);
    font-feature-settings: 'kern' 1;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

/* Grano sutil sobre todo el fondo. Con la paleta de cuero ya no solo quita el
   plano digital: lee como el poro de la piel. */
.grano {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; }
.enlace { color: var(--ambar); text-decoration: underline; text-underline-offset: 3px; }

code {
    font-family: var(--mono);
    font-size: .88em;
    background: var(--surface-2);
    padding: .12em .45em;
    border-radius: var(--r-sm);
    color: var(--ambar);
}

/* Superficie de tarjeta: degradado de luz cenital + borde translúcido + sombra
   cálida. Es el patrón que se repite en bloques, cifras, tabla y formularios. */
.cifra,
.bloque,
.filtros,
.tabla-envoltorio,
.login-form,
.alta-form,
.chat {
    background:
        linear-gradient(180deg, var(--brillo), transparent 45%),
        var(--surface);
    border: 1px solid var(--borde);
    box-shadow: var(--sombra-2);
}

/* ── Marca ───────────────────────────────────────────────────────────────── */

.marca {
    display: flex;
    align-items: center;
    /* Más corto que con el rayo (11px): el PNG del logo trae su propio margen
       transparente (~20 % por lado) y el hueco visual ya lo pone él. */
    gap: 6px;
    text-decoration: none;
    padding: var(--e6) var(--e5) var(--e7);
}

/* El logo de Abarca (PNG con transparencia, el original es 512×512).
   Sustituye al rayo de clip-path que hubo hasta el 02-09-2026. */
.marca-logo {
    width: 34px;
    height: 34px;
    flex: none;
    object-fit: contain;
}
.marca-logo--grande { width: 62px; height: 62px; }

/* Nombre y subtítulo apilados a la derecha del logo. */
.marca-bloque { display: grid; gap: 1px; }

.marca-sub {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--ink-3);
    white-space: nowrap;
}

.marca-texto {
    font-family: var(--display);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--ink);
}
.marca-texto em {
    font-style: normal;
    color: var(--ambar);
}
.marca-texto--grande { font-size: 34px; }

/* ── Lateral ─────────────────────────────────────────────────────────────── */

.lateral {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 2;
    width: var(--lateral);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-right: 1px solid var(--borde);
}

.nav { display: flex; flex-direction: column; padding: 0 var(--e3); gap: var(--e1); }

.nav-item {
    padding: 10px var(--e3);
    border-radius: var(--r-md);
    color: var(--ink-2);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background .18s ease, color .18s ease;
}
.nav-item:hover { background: var(--surface-2); color: var(--ink); }

/* Activo: pastilla llena. Se sustituye el testigo lateral del diseño anterior,
   que era el detalle que más lo acercaba a un instrumento y no a un producto. */
.nav-item.es-activo {
    background: var(--ambar-velo);
    color: var(--ambar);
    box-shadow: inset 0 0 0 1px rgba(240, 165, 58, .18);
}

.lateral-pie {
    margin-top: auto;
    padding: var(--e4) var(--e5) var(--e5);
    border-top: 1px solid var(--borde);
}

.sesion { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--e3); }
.sesion-nombre { font-size: 14px; font-weight: 600; }
.sesion-ambito {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ink-3);
}

.salir {
    font-size: 12px;
    color: var(--ink-3);
    text-decoration: none;
    transition: color .18s ease;
}
.salir:hover { color: var(--arcilla); }

/* ── Contenedor principal ────────────────────────────────────────────────── */

.principal {
    position: relative;
    z-index: 1;
    margin-left: var(--lateral);
    padding: var(--e8) var(--e8) 80px;
    max-width: 1320px;
    animation: entrar .4s ease both;
}

@keyframes entrar {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.pagina-cab { margin-bottom: var(--e7); }

.pagina-titulo {
    font-family: var(--display);
    font-size: 40px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.03em;
    margin: 0;
}

.pagina-sub {
    margin: var(--e2) 0 0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--ink-3);
}

.volver {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--e5);
    padding: 6px 12px 6px 10px;
    border-radius: var(--r-full);
    background: var(--surface);
    border: 1px solid var(--borde);
    font-size: 13px;
    color: var(--ink-2);
    text-decoration: none;
    transition: color .18s ease, border-color .18s ease, transform .18s ease;
}
.volver:hover { color: var(--ambar); border-color: var(--borde-viva); transform: translateX(-2px); }

/* ── Cifras del resumen ──────────────────────────────────────────────────── */

/* Antes era una rejilla con separadores falsos de 1px. Ahora son tarjetas
   independientes: es el cambio que más se nota de todo el rediseño. */
.cifras {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--e4);
    margin-bottom: var(--e5);
}

.cifra {
    border-radius: var(--r-lg);
    padding: var(--e5) var(--e5) var(--e6);
    display: flex;
    flex-direction: column;
    gap: var(--e2);
    animation: entrar .5s ease both;
}
.cifra:nth-child(2) { animation-delay: .05s; }
.cifra:nth-child(3) { animation-delay: .10s; }
.cifra:nth-child(4) { animation-delay: .15s; }

/* La principal se distingue por un halo ámbar propio, no por otro fondo. */
.cifra--principal {
    background:
        radial-gradient(120% 100% at 0% 0%, rgba(240, 165, 58, .10), transparent 60%),
        linear-gradient(180deg, var(--brillo), transparent 45%),
        var(--surface);
}

.cifra-etiqueta {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--ink-3);
}

.cifra-valor {
    font-family: var(--display);
    font-size: 46px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.04em;
    /* Cifras de ancho fijo: es lo que hace que un número se lea como dato. */
    font-variant-numeric: tabular-nums;
}
.cifra--principal .cifra-valor { font-size: 62px; }
.cifra-valor--acento { color: var(--ambar); }
.cifra-valor--bien   { color: var(--teal); }

.cifra-pie { font-size: 12.5px; color: var(--ink-2); }

/* ── Rejilla de bloques ──────────────────────────────────────────────────── */

.rejilla {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e4);
}
.rejilla--ficha { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
.bloque--ancho { grid-column: 1 / -1; }

.bloque {
    border-radius: var(--r-lg);
    padding: var(--e6);
}

.bloque-titulo {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--ink-2);
}
.bloque-titulo--sep {
    margin-top: var(--e6);
    padding-top: var(--e5);
    border-top: 1px solid var(--borde);
}

.bloque-nota { margin: var(--e1) 0 var(--e5); font-size: 12.5px; color: var(--ink-3); }

.vacio { color: var(--ink-3); font-size: 14px; font-style: italic; }
.vacio--grande {
    display: block;
    padding: var(--e8) var(--e5);
    text-align: center;
    font-size: 15px;
    background: var(--surface);
    border: 1px solid var(--borde);
    border-radius: var(--r-lg);
}

.aviso-hueco {
    margin: var(--e5) 0 0;
    padding: var(--e3) var(--e4);
    background: var(--ambar-velo);
    border: 1px solid rgba(240, 165, 58, .16);
    border-radius: var(--r-md);
    font-size: 12.5px;
    color: var(--ink-2);
}

/* ── Renovaciones ────────────────────────────────────────────────────────── */

.renovaciones { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e4); }

.renov {
    display: grid;
    grid-template-columns: 132px 1fr 52px;
    align-items: center;
    gap: var(--e4);
}

.renov-etiqueta { font-size: 13px; color: var(--ink-2); }

.renov-pista {
    height: 8px;
    background: var(--surface-3);
    border-radius: var(--r-full);
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(20, 12, 4, .4);
}

.renov-relleno {
    display: block;
    height: 100%;
    border-radius: var(--r-full);
    background: var(--ink-3);
    transform-origin: left;
    animation: crecer .6s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes crecer {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

.renov.es-critico .renov-relleno { background: linear-gradient(90deg, #b8452c, var(--arcilla)); }
.renov.es-alerta  .renov-relleno { background: linear-gradient(90deg, var(--ambar-hondo), var(--ambar)); }
.renov.es-medio   .renov-relleno { background: var(--ambar-hondo); }
.renov.es-suave   .renov-relleno { background: var(--ink-3); }

.renov-valor {
    font-family: var(--display);
    font-size: 24px;
    font-weight: 600;
    text-align: right;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}
.renov.es-critico .renov-valor { color: var(--arcilla); }
.renov.es-alerta  .renov-valor { color: var(--ambar); }

/* ── Embudo ──────────────────────────────────────────────────────────────── */

.embudo { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e5); }

.embudo-cab {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--e2);
}
.embudo-etiqueta { font-size: 13px; color: var(--ink-2); }
.embudo-valor {
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.embudo-valor em {
    font-style: normal;
    font-weight: 400;
    font-size: 11.5px;
    color: var(--ink-3);
    margin-left: 7px;
}

.embudo-pista {
    display: block;
    height: 10px;
    background: var(--surface-3);
    border-radius: var(--r-full);
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(20, 12, 4, .4);
}

.embudo-relleno {
    display: block;
    height: 100%;
    border-radius: var(--r-full);
    background: linear-gradient(90deg, var(--ambar-hondo), var(--ambar));
    transform-origin: left;
    animation: crecer .7s cubic-bezier(.2, .8, .2, 1) both;
}
.embudo-paso:nth-child(2) .embudo-relleno { animation-delay: .06s; }
.embudo-paso:nth-child(3) .embudo-relleno { animation-delay: .12s; }
.embudo-paso:nth-child(4) .embudo-relleno {
    animation-delay: .18s;
    background: linear-gradient(90deg, var(--teal), #8fd9c0);
}

/* ── Actividad ───────────────────────────────────────────────────────────── */

.actividad { list-style: none; margin: 0; padding: 0; }

.actividad-fila {
    display: flex;
    align-items: center;
    gap: var(--e3);
    padding: var(--e3) 0;
    border-bottom: 1px solid var(--borde);
    font-size: 13.5px;
}
.actividad-fila:last-child { border-bottom: 0; padding-bottom: 0; }

.actividad-cliente {
    font-weight: 500;
    text-decoration: none;
    transition: color .18s ease;
}
.actividad-cliente:hover { color: var(--ambar); }

.actividad-cita {
    color: var(--ink-3);
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.actividad-fecha {
    margin-left: auto;
    flex: none;
    font-size: 12px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

/* ── Pastillas de estado ─────────────────────────────────────────────────── */

.pastilla {
    display: inline-block;
    flex: none;
    padding: 4px 11px;
    border-radius: var(--r-full);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
    border: 1px solid transparent;
}
.e-neutro  { background: var(--surface-3);    color: var(--ink-2);   border-color: var(--borde-viva); }
.e-info    { background: var(--violeta-velo); color: var(--violeta); border-color: rgba(154,143,214,.28); }
.e-bien    { background: var(--teal-velo);    color: var(--teal);    border-color: rgba(98,194,163,.28); }
.e-mal     { background: var(--arcilla-velo); color: var(--arcilla); border-color: rgba(221,106,79,.28); }
.e-apagado { background: transparent;         color: var(--ink-3);   border-color: var(--borde-viva); }

/* ── Filtros ─────────────────────────────────────────────────────────────── */

.filtros {
    display: flex;
    align-items: flex-end;
    gap: var(--e3);
    flex-wrap: wrap;
    padding: var(--e4) var(--e5);
    border-radius: var(--r-lg);
    margin-bottom: var(--e4);
}

.filtro { display: flex; flex-direction: column; gap: 6px; }

.filtro-etiqueta {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--ink-3);
}

.filtro-input, .campo-input {
    font: 400 14px var(--texto);
    color: var(--ink);
    background: var(--ground);
    border: 1px solid var(--borde-viva);
    border-radius: var(--r-md);
    padding: 10px 12px;
    min-width: 200px;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.filtro-input:focus, .campo-input:focus {
    outline: none;
    border-color: rgba(240, 165, 58, .55);
    box-shadow: 0 0 0 4px var(--ambar-velo);
}
.filtro-input::placeholder, .campo-input::placeholder { color: var(--ink-3); }

.boton {
    font: 600 14px var(--texto);
    color: #241703;
    background: linear-gradient(180deg, #f7b455 0%, var(--ambar) 45%, var(--ambar-hondo) 130%);
    border: 1px solid rgba(255, 220, 160, .25);
    border-radius: var(--r-md);
    padding: 10px 22px;
    cursor: pointer;
    box-shadow: var(--sombra-1);
    transition: filter .18s ease, transform .1s ease, box-shadow .18s ease;
}
.boton:hover { filter: brightness(1.08); box-shadow: var(--sombra-2); }
.boton:active { transform: translateY(1px); }

.boton--sec {
    background: var(--surface-2);
    color: var(--ambar);
    border-color: var(--borde-viva);
    box-shadow: none;
}
.boton--sec:hover { background: var(--surface-3); filter: none; }

.limpiar { font-size: 13px; color: var(--ink-3); align-self: center; text-decoration: none; }
.limpiar:hover { color: var(--arcilla); }

/* ── Tabla ───────────────────────────────────────────────────────────────── */

.tabla-envoltorio {
    border-radius: var(--r-lg);
    overflow: hidden;
    overflow-x: auto;
}

.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }

.tabla th {
    text-align: left;
    padding: var(--e3) var(--e5);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--ink-3);
    background: rgba(255, 240, 220, .02);
    border-bottom: 1px solid var(--borde);
    white-space: nowrap;
}

.tabla td {
    padding: var(--e4) var(--e5);
    border-bottom: 1px solid var(--borde);
    vertical-align: middle;
}
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr { transition: background .16s ease; }
.tabla tbody tr:hover { background: var(--surface-2); }

.td-mono { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }

/* Subtexto DENTRO de una celda (la fecha bajo la pastilla de estado). */
.td-sub  { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: var(--e1); }

/* Columna de comercial: mismo tono apagado, pero sin el margen superior de
   .td-sub — aplicado a un <td> suelto desalinearía el texto de su fila. */
.td-comercial { font-size: 12.5px; color: var(--ink-3); }

/* El contenedor flex va aquí, en un div interior, y NO en el <td>: un
   display:flex sobre la celda la saca del algoritmo de tabla y las líneas
   de separación dejan de coincidir entre columnas. */
.celda-cliente { display: flex; align-items: center; gap: var(--e3); }

.enlace-cliente {
    display: flex;
    align-items: center;
    gap: var(--e3);
    text-decoration: none;
    font-weight: 500;
    transition: color .18s ease;
}
.enlace-cliente:hover { color: var(--ambar); }

/* Mismo bloque, sin enlace: la ficha de un cliente de otro comercial. Se enseña
   el nombre para que el bloqueo se entienda, pero abrirla daría un 404. */
.enlace-cliente--inerte { color: var(--ink-2); cursor: default; }

.avatar {
    width: 34px; height: 34px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: var(--r-full);
    background: linear-gradient(160deg, var(--surface-3), var(--surface-2));
    border: 1px solid var(--borde-viva);
    box-shadow: var(--sombra-1);
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-2);
    letter-spacing: .02em;
}
.avatar--grande {
    width: 62px; height: 62px;
    font-size: 20px;
    font-family: var(--display);
    font-weight: 600;
    color: var(--ambar);
    background:
        radial-gradient(100% 100% at 30% 20%, rgba(240, 165, 58, .16), transparent 70%),
        linear-gradient(160deg, var(--surface-3), var(--surface-2));
}

/* Vencimiento: la urgencia se lee por color antes que por texto. */
.td-venc { white-space: nowrap; }
.venc-fecha { font-variant-numeric: tabular-nums; font-weight: 500; }
.venc-rel { display: block; font-size: 11.5px; margin-top: 2px; color: var(--ink-3); }

.v-critico .venc-fecha, .v-critico { color: var(--arcilla); }
.v-critico .venc-rel  { color: var(--arcilla); opacity: .8; }
.v-proximo .venc-fecha, .v-proximo { color: var(--ambar); }
.v-proximo .venc-rel  { color: var(--ambar); opacity: .75; }
.v-pasado  .venc-fecha { color: var(--ink-3); text-decoration: line-through; }
.v-nulo    .venc-fecha { color: var(--ink-3); }

.marca-baja, .marca-sin-consent, .marca-ok {
    flex: none;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 3px 9px;
    border-radius: var(--r-full);
}
.marca-baja        { background: var(--arcilla-velo); color: var(--arcilla); }
.marca-baja--grande{ font-size: 11px; padding: 6px 14px; }
.marca-sin-consent { background: var(--surface-3); color: var(--ink-3); }
.marca-ok          { background: var(--teal-velo); color: var(--teal); }

/* ── Ficha de cliente ────────────────────────────────────────────────────── */

.ficha-cab {
    display: flex;
    align-items: center;
    gap: var(--e4);
    margin-bottom: var(--e6);
    padding-bottom: var(--e5);
    border-bottom: 1px solid var(--borde);
}
.ficha-id { min-width: 0; }
.ficha-cab .pagina-titulo { font-size: 32px; }

.ficha-meta {
    margin: var(--e1) 0 0;
    font-size: 13px;
    color: var(--ink-2);
    display: flex;
    align-items: center;
    gap: var(--e2);
    flex-wrap: wrap;
}
.sep { color: var(--ink-3); }
.ficha-marcas { margin-left: auto; }

.datos { margin: var(--e5) 0 0; display: grid; gap: 0; }

.dato {
    display: grid;
    grid-template-columns: 128px 1fr;
    gap: var(--e3);
    padding: var(--e3) 0;
    border-bottom: 1px solid var(--borde);
    font-size: 13.5px;
}
.dato:last-child { border-bottom: 0; }
.dato dt { color: var(--ink-3); }
.dato dd { margin: 0; }
.dato-rel { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.dato-cups { font-size: 11px; word-break: break-all; }

.avisos { list-style: none; margin: var(--e5) 0 0; padding: 0; display: grid; gap: var(--e3); }

.aviso {
    display: flex;
    align-items: center;
    gap: var(--e3);
    flex-wrap: wrap;
    padding: var(--e3) var(--e4);
    background: var(--surface-2);
    border: 1px solid var(--borde);
    border-radius: var(--r-md);
}
.aviso-fecha {
    font-size: 12px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}
.aviso-respuesta {
    flex-basis: 100%;
    margin: var(--e1) 0 0;
    font-size: 12.5px;
    font-style: italic;
    color: var(--ink-2);
}

/* ── Comparativas de WF-4 (propuestas) ───────────────────────────────────── */

.propuestas { list-style: none; margin: var(--e3) 0 0; padding: 0; display: grid; gap: var(--e3); }

.propuesta {
    padding: var(--e4);
    background: var(--surface-2);
    border: 1px solid var(--borde);
    border-radius: var(--r-md);
    display: grid;
    gap: var(--e2);
}
/* La que trae oferta es la que pide una decisión: un filo teal la separa de las
   que solo informan de por qué no hay nada que enviar. */
.propuesta--oferta { border-left: 3px solid var(--teal); }

.propuesta-cab { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }

.propuesta-oferta { margin: 0; font-weight: 600; }
.propuesta-oferta--sin { font-weight: 500; color: var(--ink-2); }

.propuesta-cifras {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--e3);
}
.propuesta-cifras dt { font-size: 11.5px; color: var(--ink-3); }
.propuesta-cifras dd { margin: 2px 0 0; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }

.propuesta-pdf { margin: 0; font-size: 13px; }

.propuesta-avisos-titulo {
    margin: var(--e1) 0 0;
    font-size: 11.5px;
    color: var(--ink-3);
}
/* Pegada a su título: el gap del grid de .propuesta las separaría. */
.propuesta-avisos-titulo + .propuesta-avisos { margin-top: calc(-1 * var(--e1)); }

.propuesta-avisos {
    margin: 0;
    padding-left: 1.1em;
    font-size: 12.5px;
    color: var(--ink-2);
}

.propuesta-acciones { display: flex; gap: var(--e3); flex-wrap: wrap; margin-top: var(--e1); }

/* ── Plegados de la ficha: historial de comparativas y facturas antiguas ──
   <details> nativo, sin JavaScript (la CSP no lo permite). */

.plegado { margin-top: var(--e3); }

.plegado-cab {
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
    cursor: pointer;
    list-style: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
    padding: var(--e1) 0;
}
.plegado-cab::-webkit-details-marker,
.hist-linea::-webkit-details-marker { display: none; }
.plegado-cab:hover { color: var(--ink); }

/* El triángulo, girado cuando está abierto. */
.plegado-cab::before,
.hist-linea::before {
    content: '';
    flex: none;
    width: 0; height: 0;
    border-left: 5px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform .15s;
}
.plegado[open] > .plegado-cab::before,
.hist[open] > .hist-linea::before { transform: rotate(90deg); }

.plegado-cab:focus-visible,
.hist-linea:focus-visible { outline: 2px solid var(--ambar); outline-offset: 2px; border-radius: var(--r-sm); }

.propuestas-hist { list-style: none; margin: var(--e2) 0 0; padding: 0; display: grid; gap: var(--e2); }

.hist-linea {
    display: flex;
    align-items: center;
    gap: var(--e3);
    flex-wrap: wrap;
    cursor: pointer;
    list-style: none;
    padding: var(--e2) var(--e3);
    background: var(--surface-2);
    border: 1px solid var(--borde);
    border-radius: var(--r-md);
    font-size: 13px;
    color: var(--ink-3);
}
.hist-linea:hover { border-color: var(--borde-viva); }
.hist[open] > .hist-linea { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.hist > .propuesta { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }

.linea-texto { flex: 1; min-width: 0; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linea-cifra { font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.hist-linea .aviso-fecha { margin-left: auto; }

/* ── Facturas recibidas por WhatsApp ─────────────────────────────────────── */

.facturas { list-style: none; margin: var(--e3) 0 0; padding: 0; display: grid; gap: var(--e3); }

.factura {
    display: flex;
    align-items: center;
    gap: var(--e3);
    padding: var(--e3) var(--e4);
    background: var(--surface-2);
    border: 1px solid var(--borde);
    border-radius: var(--r-md);
}
.factura--caducada { opacity: .6; }

/* La etiqueta PDF / FOTO: pequeña, mono, para leer el tipo sin icono. */
.factura-tipo {
    flex: none;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    padding: 3px 7px;
    border-radius: var(--r-sm);
    background: var(--ambar-velo);
    color: var(--ambar);
    border: 1px solid rgba(240, 165, 58, .24);
}

.factura-datos { flex: 1; min-width: 0; display: grid; gap: 2px; }
.factura-fecha { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.factura-nombre {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.factura-accion { flex: none; font-size: 12.5px; white-space: nowrap; }
.factura-accion--inerte { color: var(--ink-3); font-style: italic; }

/* La burbuja del chat que trajo la factura: etiqueta + descarga en línea. */
.burbuja-adjunto { display: flex; align-items: center; gap: var(--e2); }

/* ── Chat ────────────────────────────────────────────────────────────────── */

.bloque--chat { display: flex; flex-direction: column; }

.chat {
    display: flex;
    flex-direction: column;
    gap: var(--e3);
    margin-top: var(--e5);
    padding: var(--e5);
    background: var(--ground);
    border: 1px solid var(--borde);
    border-radius: var(--r-lg);
    box-shadow: inset 0 2px 8px rgba(20, 12, 4, .35);
    max-height: 660px;
    overflow-y: auto;
}

.chat-dia {
    align-self: center;
    margin: var(--e2) 0;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--ink-3);
}
.chat-dia span {
    background: var(--surface-2);
    border: 1px solid var(--borde);
    padding: 4px 14px;
    border-radius: var(--r-full);
}

.burbuja {
    position: relative;
    max-width: 74%;
    padding: var(--e3) var(--e4) 10px;
    border-radius: var(--r-xl);
    font-size: 14px;
    line-height: 1.55;
    box-shadow: var(--sombra-1);
    animation: burbujear .3s ease both;
}

@keyframes burbujear {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: none; }
}

/* La esquina del lado que "habla" se cierra: es lo que da la sensación de cola
   sin dibujar un triángulo. */
.burbuja--izq { align-self: flex-start;  border-bottom-left-radius: var(--r-sm); }
.burbuja--der { align-self: flex-end;    border-bottom-right-radius: var(--r-sm); }

/* El cliente en superficie neutra; nosotros en ámbar tenue. Se distingue de un
   vistazo quién habla sin tener que leer. */
.burbuja--cliente {
    background: var(--surface-2);
    border: 1px solid var(--borde-viva);
}
.burbuja--bot {
    background: linear-gradient(180deg, rgba(240,165,58,.14), rgba(240,165,58,.07));
    border: 1px solid rgba(240, 165, 58, .24);
}
.burbuja--comercial {
    background: linear-gradient(180deg, rgba(154,143,214,.16), rgba(154,143,214,.08));
    border: 1px solid rgba(154, 143, 214, .30);
}

.burbuja-autor {
    display: block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: var(--e1);
}
.burbuja--bot .burbuja-autor       { color: var(--ambar); }
.burbuja--comercial .burbuja-autor { color: var(--violeta); }

.burbuja-texto { margin: 0; overflow-wrap: anywhere; }

.burbuja-hora {
    display: block;
    margin-top: var(--e1);
    text-align: right;
    font-size: 10px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

/* ── Login ───────────────────────────────────────────────────────────────── */

.cuerpo-login {
    display: grid;
    place-items: center;
    min-height: 100vh;
    /* Halo ámbar por detrás: da profundidad a una pantalla que si no sería
       una caja centrada sobre negro. */
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(240,165,58,.10), transparent 70%),
        var(--ground);
}

.login {
    position: relative;
    z-index: 1;
    width: min(420px, calc(100vw - 40px));
    text-align: center;
    animation: entrar .5s ease both;
}

.login-marca {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px; /* el margen transparente del PNG ya separa; ver .marca */
    margin-bottom: var(--e3);
}

.login-lema {
    margin: 0 0 var(--e7);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--ink-3);
}

.login-form {
    display: grid;
    gap: var(--e4);
    text-align: left;
    border-radius: var(--r-xl);
    padding: var(--e6);
    box-shadow: var(--sombra-3);
}

/* `align-content: start` no es opcional: un contenedor grid hereda `stretch`, y
   como cada .campo es a su vez celda de una rejilla de formulario, se estira a
   la altura de la fila. Ese alto sobrante se repartiría entre sus filas
   internas, separando la etiqueta del input y ESTIRANDO el propio input — de
   modo que dos campos de la misma fila acabarían con inputs de distinta altura
   según llevaran nota debajo o no. Con `start`, cada fila conserva su tamaño y
   el hueco queda abajo. (.filtro nunca tuvo este problema porque usa flex.) */
.campo { display: grid; gap: 6px; align-content: start; }
.campo-etiqueta {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--ink-3);
}
.campo-input { width: 100%; min-width: 0; }

.login-error {
    margin: 0;
    padding: var(--e3) var(--e4);
    background: var(--arcilla-velo);
    border: 1px solid rgba(221, 106, 79, .3);
    border-radius: var(--r-md);
    color: var(--arcilla);
    font-size: 13px;
}

/* Sesión caducada: el usuario no ha hecho nada mal, así que en ámbar
   (informativo) y no en arcilla (error). */
.login-info {
    margin: 0;
    padding: var(--e3) var(--e4);
    background: var(--ambar-velo);
    border: 1px solid rgba(240, 165, 58, .22);
    border-radius: var(--r-md);
    color: var(--ink-2);
    font-size: 13px;
    line-height: 1.5;
}

.login-form .boton { margin-top: var(--e1); }

.login-aviso {
    margin: var(--e5) 0 0;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--ink-3);
}

/* ── Alta de cliente ─────────────────────────────────────────────────────── */

.alta-form {
    padding: var(--e5);
    border-radius: var(--r-lg);
}

/* Tres columnas para seis campos: dos filas exactas, sin una última fila coja.
   El agrupamiento que sale es además el natural — arriba de quién cuelga y
   quién es (comercial, nombre, teléfono), abajo su suministro (CUPS,
   comercializadora, fecha).

   `minmax(0, 1fr)` y no `1fr`: sin el mínimo a cero, un valor largo dentro de
   un input ensancha su columna y descuadra las otras dos. */
.alta-rejilla {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--e5) var(--e4);
}

/* Un <select> y un input[type=date] llevan controles nativos dentro, así que su
   altura intrínseca no coincide con la de un input de texto aunque compartan
   tipografía y relleno. 42px es justo la altura natural del de texto
   (14px × 1.4 + 20 de relleno + 2 de borde), de modo que esto solo levanta a
   los que se quedan cortos y no estira a nadie. */
.alta-rejilla .campo-input { min-height: 42px; }

/* El comercial cuando el panel ya sabe quién es: ocupa el hueco de un campo
   para que la rejilla siga cuadrando, pero se lee como dato y no como control
   desactivado — no hay nada que rellenar ahí, y su valor ni siquiera viaja en
   el formulario. */
.campo-fijo {
    display: flex;
    align-items: center;
    margin: 0;
    color: var(--ink-2);
    background: var(--surface-2);
    cursor: default;
}

/* Con subgrid, las tres filas de cada campo (etiqueta / input / nota) son las
   filas de la rejilla, así que también coinciden los bordes INFERIORES aunque
   una nota ocupe dos líneas. Va en @supports porque es una mejora, no una
   dependencia: el `align-content: start` de .campo ya deja el formulario
   alineado por arriba en cualquier navegador. */
@supports (grid-template-rows: subgrid) {
    .alta-rejilla .campo {
        grid-row: span 3;
        grid-template-rows: subgrid;
    }
}

.campo-opt {
    text-transform: none;
    letter-spacing: 0;
    font-size: 10px;
    color: var(--ink-3);
    opacity: .75;
}

/* Nota bajo el campo. Ocupa sitio siempre que hay una, de modo que sustituirla
   por un error no descoloca la rejilla entera. */
.campo-nota { font-size: 11.5px; line-height: 1.45; color: var(--ink-3); }

.campo-error {
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--arcilla);
}
/* El texto del error va DESPUÉS del input en el HTML (para que un lector de
   pantalla lo anuncie tras el campo), así que teñir el borde necesita mirar
   hacia atrás: eso es :has(), no un selector de hermano. */
.campo:has(.campo-error) .campo-input {
    border-color: rgba(221, 106, 79, .45);
}

.campo-check {
    margin-top: var(--e5);
    padding: var(--e4);
    background: var(--surface-2);
    border: 1px solid var(--borde-viva);
    border-radius: var(--r-md);
}
.campo-check .campo-nota { margin: 6px 0 0; }

.check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; cursor: pointer; }
.check input { margin: 2px 0 0; accent-color: var(--ambar); width: 15px; height: 15px; }

.acciones {
    display: flex;
    align-items: center;
    gap: var(--e4);
    margin-top: var(--e5);
    flex-wrap: wrap;
}

/* Barra de guardar que acompaña mientras se edita. SOLO en configuracion.php:
   ese formulario mide ~370 líneas y su lista de excepciones no tiene tope de
   filas, así que el botón quedaba a un scroll largo de donde se trabaja. Las
   otras cinco pantallas con formulario son cortas y se quedan como estaban; si
   esto funciona, se promueve.

   `sticky` y NO `fixed`, que era la otra opción:
     · fixed obligaría a repetir el ancho del lateral (`left: var(--lateral)`) y
       a deshacerlo en el breakpoint de 760px, donde el lateral deja de ser fijo
       y pasa a barra superior. Dos reglas más y una segunda fuente de verdad
       para un dato que ya vive en --lateral.
     · fixed taparía contenido también arriba del todo, donde el formulario ni
       siquiera es el foco. Sticky solo se pega mientras el formulario está en
       pantalla, y aterriza sola al final cuando se llega a él.
     · Al quedarse en el flujo, ocupa su sitio: no hace falta compensar con
       padding para que no tape la última fila.
   Vive dentro de .principal (z-index 1), así que queda por debajo del lateral
   (z-index 2) sin pelea de capas. Funciona porque ningún ancestro tiene
   `overflow` distinto de visible — .alta-form y .principal no lo declaran. */
.acciones--fija {
    position: sticky;
    bottom: 0;
    z-index: 1;
    /* Los márgenes negativos son var(--e5) porque ese es el padding de
       .alta-form: así la barra llega a los bordes de la tarjeta en vez de
       quedarse flotando dentro. Mismo truco que .bloque .tabla-envoltorio. */
    margin: var(--e6) calc(-1 * var(--e5)) calc(-1 * var(--e5));
    padding: var(--e4) var(--e5);
    /* Opaca a propósito: el formulario pasa por debajo. El mismo --surface de la
       tarjeta, para que se lea como su borde inferior y no como una capa ajena. */
    background: var(--surface);
    border-top: 1px solid var(--borde);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* El navegador no sabe que la barra tapa ~66px, así que tabular hasta el campo
   justo encima lo dejaría oculto detrás. 84px = el alto de la barra más un
   respiro. El :has() ya se usa en esta hoja (.campo:has(.campo-error)), y limita
   la regla a los formularios que llevan barra: hoy solo el de configuración. */
.alta-form:has(> .acciones--fija) :is(.campo-input, .tarjeta, .segmentado-opcion) {
    scroll-margin-bottom: 84px;
}

/* En pantallas bajas —móvil apaisado, zoom al 200%— 66px de barra permanente se
   comen demasiado alto. Ahí vuelve a ser un pie normal. */
@media (max-height: 520px) {
    .acciones--fija { position: static; }
}

/* Bloque de duplicado: arcilla, como el resto de lo que va mal, pero sin la
   maqueta de las pantallas de error — aquí no ha fallado nada, la comprobación
   ha funcionado. */
.bloque--alerta { border-color: rgba(221, 106, 79, .3); }
.bloque--alerta .bloque-titulo { color: var(--arcilla); }

.duplicados { list-style: none; margin: 0 0 var(--e4); padding: 0; display: grid; gap: var(--e3); }

.duplicado {
    padding: var(--e3) var(--e4);
    background: var(--surface-2);
    border: 1px solid var(--borde-viva);
    border-radius: var(--r-md);
}

.duplicado-meta,
.duplicado-motivo {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--ink-3);
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

/* Confirmación del alta en la ficha. En teal y no en ámbar: el ámbar es el
   acento de la marca y aquí hace falta que se lea como "ha ido bien". */
.banda-ok {
    margin: 0 0 var(--e5);
    padding: var(--e3) var(--e4);
    background: var(--teal-velo);
    border: 1px solid rgba(98, 194, 163, .28);
    border-radius: var(--r-md);
    color: var(--ink-2);
    font-size: 13px;
    line-height: 1.5;
}
.banda-ok .enlace { margin-left: 6px; }

/* ── Importación por CSV ─────────────────────────────────────────────────── */

/* El ofrecimiento de la importación al pie del alta unitaria. */
.alta-importar { margin-top: var(--e5); }
.alta-importar .bloque-nota { margin-bottom: 0; }

/* Dos campos (comercial y fichero), no seis: dos columnas y fila única. */
.alta-rejilla--importar { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* El botón nativo de "Elegir fichero" trae su propia caja; alinearlo con el
   texto del input evita que baile respecto a los campos de al lado. */
.campo-fichero { padding-top: 8px; }
.campo-fichero::file-selector-button {
    margin-right: 10px;
    padding: 4px 12px;
    border: 1px solid var(--borde-viva);
    border-radius: var(--r-sm);
    background: var(--surface-3);
    color: var(--ink-2);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
}

/* La franja del dry run: las cifras del análisis antes de confirmar. */
.import-resumen {
    list-style: none;
    margin: 0 0 var(--e4);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--e2) var(--e4);
}
.import-cifra {
    padding: var(--e2) var(--e3);
    background: var(--surface-2);
    border: 1px solid var(--borde-viva);
    border-radius: var(--r-md);
    font-size: 12.5px;
    color: var(--ink-3);
}
.import-cifra strong { color: var(--ink); font-size: 14px; margin-right: 4px; }

/* Veredicto por fila. Mismos velos que las pastillas de estado: teal para lo
   que se escribirá, neutro para lo que se salta sin drama, arcilla para lo que
   trae errores. */
.veredicto {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .08em;
    white-space: nowrap;
}
.veredicto--nueva   { background: var(--teal-velo);    color: var(--teal); }
.veredicto--saltada { background: var(--surface-3);    color: var(--ink-3); }
.veredicto--error   { background: var(--arcilla-velo); color: var(--arcilla); }

.veredicto-detalle {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--ink-3);
    max-width: 42ch;
}

/* Una fila que no se va a importar se lee atenuada, pero sigue legible: el
   dry run existe justamente para poder revisarla. */
.fila-saltada td { opacity: .62; }
.fila-saltada:hover td { opacity: 1; }

/* ── Configuración por comercial ─────────────────────────────────────────── */

.config-quien { margin: 0 0 var(--e4); font-size: 13px; color: var(--ink-2); }

.config-seccion {
    margin: var(--e6) 0 var(--e2);
    font-size: 15px;
    font-weight: 600;
}
.alta-form .config-seccion:first-of-type { margin-top: 0; }

/* Atada al mismo ancho que los controles de la pantalla (560px). Sin tope corría
   los ~1050px del formulario: unos 170 caracteres por línea, ilegibles, y era lo
   que hacía parecer "cortado" todo lo que sí tiene una medida. */
.config-nota { margin: 0 0 var(--e3); max-width: 560px; font-size: 12.5px; color: var(--ink-3); }

/* Dos columnas: la rejilla de fees (min/max × energía/potencia) y el campo
   suelto de días quedan alineados sin la tercera columna del alta. */
.alta-rejilla--config {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: var(--e3) 0 var(--e2);
    max-width: 560px;
}

/* Excepciones de antelación por comercializadora: una LISTA, no un bloque de
   formulario por regla. Las dos etiquetas y la nota son iguales en todas las
   filas, así que se dicen una vez en la cabecera y en la intro; con quince
   comercializadoras, repetirlas empujaba los fees y la prioridad fuera de la
   pantalla. El nombre accesible de cada input lo pone su aria-label.

   Aspecto tomado de .tabla (la de cartera, cobertura, importar y estado): franja
   tenue en la cabecera, filete de 1px entre filas y hover en surface-2. La
   primera versión no tenía nada de eso y se leía como campos sueltos flotando.

   Sigue siendo `display: grid` y no un <table> de verdad por dos motivos:
   ninguna tabla del panel lleva inputs —son todas de solo lectura— y la rejilla
   resuelve el apilado en móvil con una regla, que a una tabla le costaría
   `display: block` sobre tr y td.

   El ancho se queda en 560px, que es el que ya usan .alta-rejilla--config y
   .segmentado, y el que da nombre al breakpoint de abajo. La sensación de
   "cortada" no venía de que la lista fuese estrecha, sino de que la prosa de
   alrededor corría los ~1050px del formulario —unos 170 caracteres por línea—;
   se arregla atando .config-nota a la misma medida, no ensanchando la lista. */
.antelacion {
    margin: var(--e3) 0 var(--e2);
    max-width: 560px;
    border: 1px solid var(--borde);
    border-radius: var(--r-md);
    overflow: hidden;
}

/* Las dos columnas se definen aquí y las heredan cabecera y filas, así que no
   pueden descuadrarse entre sí. La de días son 150px y no los ~90 que piden
   tres dígitos: es lo que mide su rótulo en versales con letter-spacing, y
   partirlo en dos líneas descuadraba la cabecera respecto a la primera fila. */
.antelacion-cabecera,
.antelacion-fila {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    gap: var(--e3);
    align-items: center;
}

/* Misma receta que `.tabla th`, con el padding de la banda. */
.antelacion-cabecera {
    padding: var(--e3) var(--e4);
    background: rgba(255, 240, 220, .02);
    border-bottom: 1px solid var(--borde);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .12em;
    white-space: nowrap;
    color: var(--ink-3);
}

/* La BANDA de cada regla: su fila, su error y su aviso. El filete va aquí y no
   en la fila, así que el aviso ámbar cae dentro de la banda de la regla que lo
   provoca en vez de flotar entre dos. El padding también, y por eso error y
   aviso quedan alineados con la fila sin reglas propias. */
.antelacion-grupo {
    padding: var(--e2) var(--e4);
    border-bottom: 1px solid var(--borde);
    transition: background .16s ease;
}
.antelacion-grupo:last-child { border-bottom: 0; }

/* Hover como en .tabla tbody tr; :focus-within es su equivalente para una lista
   que se EDITA: dice cuál es la fila que tienes entre manos aunque hayas
   llegado con el tabulador. */
.antelacion-grupo:hover,
.antelacion-grupo:focus-within { background: var(--surface-2); }

/* La fila de añadir cierra la lista por abajo con la misma franja que la
   cabecera la cierra por arriba: se lee como el hueco libre, no como una regla
   más. Sin hover, porque no hay nada que resaltar en una fila vacía. */
.antelacion-grupo--nueva { background: rgba(255, 240, 220, .02); }
.antelacion-grupo--nueva:hover { background: rgba(255, 240, 220, .02); }

/* El input de días comparte estilo con el resto del panel pero no su ancho
   mínimo de 200px, que aquí desbordaría la columna. Cifras tabulares, como
   .venc-fecha y las demás cifras del panel. */
.antelacion-fila .campo-input { min-width: 0; }
.antelacion-fila input[inputmode="numeric"] { font-variant-numeric: tabular-nums; }

/* El nombre de una regla existente se lee como dato, no como campo
   desactivado: no hay nada que rellenar ahí. Mismo trato que .campo-fijo. */
.antelacion-nombre {
    padding: 10px 0;
    color: var(--ink-2);
    font-size: 14px;
    overflow-wrap: anywhere;
}

/* Los errores van a lo ancho y fuera de la rejilla: dentro descuadrarían las
   columnas de todas las filas. */
.antelacion-error { margin: var(--e2) 0 0; }

/* Dentro de la lista el aviso pierde el margen superior de var(--e5), que está
   pensado para cuando va suelto entre bloques: aquí ya lo separa el padding de
   su banda. */
.antelacion .aviso-hueco { margin: var(--e2) 0 var(--e1); }

/* En móvil las dos columnas no caben; los días pasan debajo con su ancho. La
   cabecera sobra ahí, porque cada campo ya se explica por su placeholder y su
   aria-label. */
@media (max-width: 560px) {
    .antelacion-cabecera { display: none; }
    .antelacion-fila { grid-template-columns: minmax(0, 1fr); gap: var(--e2); }
    .antelacion-grupo { padding: var(--e3) var(--e4); }
    .antelacion-nombre { padding: 0; font-weight: 600; }
}

/* Radios-tarjeta: la opción y su texto de ejemplo en la misma caja. Sustituyen
   al <select> con preview de PANEL.md §4.1 porque sin JavaScript un select no
   puede cambiar el preview — aquí el preview está siempre a la vista. */
.tarjetas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e3);
    margin: 0 0 var(--e3);
}
.tarjetas--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.tarjeta { display: block; cursor: pointer; }

/* El radio se oculta visualmente pero sigue enfocable: el borde de la tarjeta
   hace de indicador de selección y :focus-visible mantiene el teclado. */
.tarjeta-radio {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.tarjeta-cuerpo {
    display: grid;
    gap: 6px;
    height: 100%;
    padding: var(--e3) var(--e4);
    background: var(--surface-2);
    border: 1px solid var(--borde-viva);
    border-radius: var(--r-md);
    transition: border-color .16s ease, background .16s ease;
}
.tarjeta:hover .tarjeta-cuerpo { background: var(--surface-3); }
.tarjeta-radio:checked + .tarjeta-cuerpo {
    border-color: var(--ambar);
    background: var(--ambar-velo);
}
.tarjeta-radio:focus-visible + .tarjeta-cuerpo {
    outline: 2px solid var(--ambar);
    outline-offset: 2px;
}

.tarjeta-titulo {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--ink-3);
}
.tarjeta-radio:checked + .tarjeta-cuerpo .tarjeta-titulo { color: var(--ambar); }
.tarjeta-texto { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }

/* El control segmentado de tres posiciones (la "prioridad"). Radios ocultos +
   labels contiguos: el CSS pinta el estado, sin una línea de JavaScript. */
.segmentado {
    display: flex;
    margin: 0 0 var(--e2);
    padding: 3px;
    border: 1px solid var(--borde-viva);
    border-radius: var(--r-md);
    background: var(--surface-2);
    max-width: 560px;
}

/* Con dos posiciones, el ancho completo dejaría dos lonchas enormes. */
.segmentado--dos { max-width: 380px; }

.segmentado-opcion {
    flex: 1 1 0;
    display: grid;
    gap: 2px;
    padding: var(--e2) var(--e3);
    border-radius: var(--r-sm);
    text-align: center;
    cursor: pointer;
    transition: background .16s ease;
}
.segmentado-opcion:hover { background: var(--surface-3); }

.segmentado-radio {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.segmentado-etiqueta { font-size: 13px; color: var(--ink-2); }
.segmentado-detalle  { font-size: 10.5px; color: var(--ink-3); }

.segmentado-opcion:has(.segmentado-radio:checked) {
    background: var(--ambar-velo);
    box-shadow: inset 0 0 0 1px var(--ambar);
}
.segmentado-opcion:has(.segmentado-radio:checked) .segmentado-etiqueta { color: var(--ambar); }
.segmentado-opcion:has(.segmentado-radio:focus-visible) {
    outline: 2px solid var(--ambar);
    outline-offset: 2px;
}

/* ── Pantallas de error ──────────────────────────────────────────────────── */

/* Mismo halo que el login, pero en arcilla: se lee como avería antes que como
   página normal. */
.cuerpo-error {
    display: grid;
    place-items: center;
    min-height: 100vh;
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(221, 106, 79, .11), transparent 70%),
        var(--ground);
}

.error {
    position: relative;
    z-index: 1;
    width: min(540px, calc(100vw - 40px));
    text-align: center;
    padding: var(--e8) var(--e6);
    background:
        linear-gradient(180deg, var(--brillo), transparent 45%),
        var(--surface);
    border: 1px solid var(--borde);
    border-radius: var(--r-xl);
    box-shadow: var(--sombra-3);
    animation: entrar .45s ease both;
}

/* Glifos dibujados con CSS: nada que descargar y nítidos a cualquier
   densidad. Tres formas para tres tipos de avería. */
.error-glifo {
    display: block;
    width: 34px;
    height: 34px;
    margin: 0 auto var(--e5);
    background: var(--arcilla);
}
.error-glifo--aviso {
    clip-path: polygon(50% 4%, 100% 96%, 0 96%);
}
/* El rayo de la marca, en arcilla: la BD no responde. */
.error-glifo--desconexion {
    width: 26px;
    height: 36px;
    background: linear-gradient(160deg, var(--arcilla), #a34733);
    clip-path: polygon(58% 0, 0 56%, 40% 56%, 30% 100%, 100% 40%, 54% 40%);
    opacity: .85;
}
/* Rombo hueco: no hay nada aquí. */
.error-glifo--perdido {
    background: transparent;
    border: 2px solid var(--ink-3);
    border-radius: 4px;
    transform: rotate(45deg);
    width: 26px;
    height: 26px;
    margin-bottom: var(--e6);
}

.error-codigo {
    display: block;
    font-family: var(--display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .28em;
    color: var(--ink-3);
    margin-bottom: var(--e2);
}

.error-titulo {
    margin: 0 0 var(--e3);
    font-family: var(--display);
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.03em;
}

.error-mensaje {
    margin: 0 auto var(--e6);
    max-width: 42ch;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--ink-2);
}

.error-detalle {
    margin: 0 0 var(--e3);
    padding: var(--e4);
    text-align: left;
    background: var(--ground);
    border: 1px solid var(--borde);
    border-left: 2px solid var(--arcilla);
    border-radius: var(--r-md);
    overflow-x: auto;
    font: 12.5px/1.55 var(--mono);
    color: var(--ink-2);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.error-nota {
    margin: 0 0 var(--e5);
    font-size: 11.5px;
    color: var(--ink-3);
}

.error-acciones {
    display: flex;
    justify-content: center;
    gap: var(--e3);
    flex-wrap: wrap;
}
.error-acciones .boton { text-decoration: none; }

.error-marca {
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
    margin-top: var(--e7);
    padding-top: var(--e5);
    border-top: 1px solid var(--borde);
    text-decoration: none;
    opacity: .5;
    transition: opacity .18s ease;
}
.error-marca:hover { opacity: 1; }
.error-marca .marca-texto { font-size: 15px; }
.error-marca .marca-logo  { width: 26px; height: 26px; }

/* ── Adaptación a pantallas pequeñas ─────────────────────────────────────── */

@media (max-width: 1180px) {
    .cifras  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rejilla, .rejilla--ficha { grid-template-columns: minmax(0, 1fr); }
    /* Seis campos en dos columnas siguen siendo filas completas: tres. */
    .alta-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tarjetas--tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .lateral {
        position: static;
        width: auto;
        flex-direction: row;
        align-items: center;
        border-right: 0;
        border-bottom: 1px solid var(--borde);
    }
    .marca { padding: var(--e3) var(--e4); }
    .nav { flex-direction: row; padding: 0; }
    .lateral-pie {
        margin-left: auto;
        padding: 0 var(--e4);
        border-top: 0;
    }
    .sesion { display: none; }

    .principal { margin-left: 0; padding: var(--e5) var(--e4) var(--e8); }
    .cifras { grid-template-columns: minmax(0, 1fr); }
    .pagina-titulo { font-size: 30px; }
    .cifra--principal .cifra-valor { font-size: 48px; }
    .burbuja { max-width: 88%; }
    .filtro-input { min-width: 0; width: 100%; }
    .filtro { flex: 1 1 100%; }
    .alta-rejilla { grid-template-columns: minmax(0, 1fr); }
    .tarjetas, .tarjetas--tres { grid-template-columns: minmax(0, 1fr); }
    .segmentado { flex-direction: column; }
    .tabla th, .tabla td { padding: var(--e3) var(--e4); }
}

/* ── Cobertura ───────────────────────────────────────────────────────────── */

/* Aquí la tabla vive DENTRO de un .bloque, que ya es tarjeta. A la envoltura se
   le quita la superficie —si no, dos bordes y dos sombras apilados— y se la
   saca a los bordes del bloque con margen negativo, para que las filas ocupen
   el ancho completo y el redondeo de abajo siga siendo el de la tarjeta. Sigue
   haciendo falta por su overflow-x: la tabla tiene hasta seis columnas.
   Va después de la lista de superficie de la línea ~112; gana por especificidad
   (0-2-0 frente a 0-1-0), pero se deja aquí igualmente por orden de lectura. */
.bloque .tabla-envoltorio {
    background: none;
    border: 0;
    box-shadow: none;
    margin: var(--e4) calc(-1 * var(--e6)) calc(-1 * var(--e6));
    border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* La última fila no lleva raya: la cierra el borde del propio bloque. */
.bloque .tabla-envoltorio .tabla tr:last-child td { border-bottom: 0; }

/* Respeta a quien tiene desactivadas las animaciones en el sistema. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ── Perfil de WhatsApp ───────────────────────────────────────────────────── */
/* La foto y su campo van en fila porque se leen juntos: «esto es lo que hay»
   al lado de «esto es lo que lo sustituye». En móvil se apilan solos. */
.wa-foto-fila {
    display: flex;
    align-items: start;
    gap: var(--e4);
    flex-wrap: wrap;
    margin-bottom: var(--e5);
}

/* Redonda porque WhatsApp la recorta en círculo: verla cuadrada aquí y redonda
   en el chat es justo lo que hace que un logo apaisado pase la revisión. */
.wa-foto {
    width: 96px;
    height: 96px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--borde-viva);
    background: var(--brillo);
}

.wa-foto--vacia {
    display: block;
    box-shadow: inset 0 0 0 1px var(--borde);
    border: 1px dashed var(--borde-viva);
    background: none;
}

/* El campo de fichero crece con lo que le sobre, sin empujar a la foto. */
.wa-foto-fila .campo { flex: 1 1 260px; min-width: 0; }