/* ==========================================================================
   0. FUENTE INTER, SERVIDA DESDE AQUI (0097)
   --------------------------------------------------------------------------
   Antes venia de fonts.googleapis.com con un <link rel="stylesheet"> en el
   <head> del layout. Eso BLOQUEABA EL RENDER de todas las paginas: en una red
   que DESCARTA el trafico a Google en vez de rechazarlo (cortafuegos
   corporativo, DNS agujero negro), la peticion no fallaba, se quedaba colgada,
   y el navegador no terminaba de cargar el documento ni ejecutaba los <script>
   del final del layout. El sintoma era el login "colgado": el formulario se
   veia, se podia escribir, y al pulsar "Iniciar sesion" NO SALIA NINGUN POST y
   NO APARECIA NINGUN ERROR. Reproducido y aislado con caso de control en
   .arq/informes/0097-resultado.md.
   NO SE VUELVE A PONER UNA HOJA DE ESTILO EXTERNA EN EL <head>.

   Inter es una fuente VARIABLE: Google servia el MISMO fichero para los cuatro
   pesos (400/500/600/700) de cada subconjunto (comprobado por md5). Por eso
   aqui hay un solo fichero por subconjunto y el peso se declara como eje
   (400 700), que es lo que ese fichero soporta. Se ve igual que antes.
   ========================================================================== */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../lib/inter/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../lib/inter/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   1. VARIABLES GLOBALES (Paleta Persycom)
   Viven en wwwroot/css/tema.css, que cargan TODOS los layouts (este, el movil de comerciales,
   el del conductor y la pagina publica de entrega): los tres temas (claro, intermedio, oscuro)
   se definen una sola vez alli. Esta hoja solo CONSUME las variables.
   ========================================================================== */

/* ==========================================================================
   2. RESET Y TIPOGRAFÍA BASE
   ========================================================================== */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Inter, Arial, Helvetica, sans-serif;
    background: var(--bg);
    color: var(--text);
}

/* ==========================================================================
   3. LAYOUT PRINCIPAL
   ========================================================================== */
.layout-container {
    max-width: 1480px;
    margin: 0 auto;
    padding: 24px;
    overflow-x: hidden;
}

.layout {
    display: grid;
    grid-template-columns: 1.6fr .9fr;
    gap: 18px;
}

.grid-2 {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, 1fr);
}

/* ==========================================================================
   4. TOPBAR (Menú de navegación)
   ========================================================================== */
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 12px 22px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 20;
    box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 10px 30px -18px rgba(15,23,42,.18);
}
/* Filo de marca que sangra desde el borde superior */
.topbar::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--persycom-red) 30%, var(--persycom-dark) 70%, transparent 100%);
    pointer-events: none;
}

.brand-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .brand-container img {
        height: 38px;
        object-fit: contain;
        margin-bottom: 4px;
    }

.topbar small {
    color: var(--muted);
    display: block;
    font-size: 12px;
    font-weight: 500;
}

.actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* El selector de tema (.tema-selector) se estila en tema.css. Aqui solo su version flotante
   del login, que depende de esta maqueta. */
.tema-selector-flotante {
    position: fixed;
    top: 14px;
    right: 16px;
    z-index: 30;
}

/* Ajustes que solo tienen sentido en oscuro (lo demas lo resuelven las variables) */
[data-theme="dark"] .topbar {
    box-shadow: 0 1px 0 rgba(0,0,0,.35), 0 10px 30px -18px rgba(0,0,0,.7);
}
[data-theme] .dropdown-menu {
    --bs-dropdown-bg: var(--panel);
    --bs-dropdown-border-color: var(--line);
    --bs-dropdown-link-color: var(--text);
    --bs-dropdown-link-hover-color: var(--accent);
    --bs-dropdown-link-hover-bg: var(--soft);
    --bs-dropdown-divider-bg: var(--line);
}
/* primary deshabilitado en oscuro: el rojo de marca no se lee sobre el rosa oscuro */
[data-theme="dark"] .btn.primary:disabled, [data-theme="dark"] .btn.primary[disabled] {
    color: var(--danger-text);
}
/* La foto/logo lleva fondo transparente y el rojo se ve bien en oscuro; los iconos SVG
   dibujados con currentColor siguen al texto. Los mapas (Leaflet) se quedan claros: son
   fotos de calle, no interfaz. */

/* ==========================================================================
   5. PANTALLAS DE AUTENTICACIÓN (Login / Registro)
   ========================================================================== */
.auth-layout {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 85vh;
    background: var(--bg);
    padding: 20px;
}

.auth-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 40px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

    .auth-panel label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 8px;
        color: var(--text-2);
    }

.auth-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    font-family: inherit;
    font-size: 14px;
    color: var(--text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

    .auth-input:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(227, 43, 54, 0.1);
    }

.auth-btn {
    width: 100%;
    border: 1px solid transparent;
    background: linear-gradient(180deg, var(--persycom-red) 0%, var(--persycom-dark) 100%);
    color: white;
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    box-shadow: 0 1px 2px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.18), 0 4px 12px -4px rgba(227,43,54,.40);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

    .auth-btn:hover {
        transform: translateY(-1px);
        filter: brightness(1.04);
        box-shadow: 0 2px 4px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.18), 0 10px 22px -6px rgba(227,43,54,.50);
    }

/* ==========================================================================
   6. BOTONES GLOBALES
   ========================================================================== */
.btn {
    --bg: var(--panel);
    --fg: var(--text);
    --bd: var(--line);
    --sh: 0 1px 2px rgba(15,23,42,.06);
    --sh-h: 0 4px 10px -4px rgba(15,23,42,.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 10px;
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--bd);
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
    box-shadow: var(--sh);
    transition: transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
    text-decoration: none;
    white-space: nowrap;
}

    .btn:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: var(--sh-h);
    }

    .btn:active:not(:disabled) {
        transform: translateY(0);
    }

    /* Deshabilitado: versión tenue, sin sombra fuerte y sin elevación */
    .btn:disabled, .btn[disabled] {
        cursor: not-allowed;
        box-shadow: none;
    }
    /* primary deshabilitado: rosa tenue pero con texto ROJO legible (no gris) */
    .btn.primary:disabled, .btn.primary[disabled] {
        background: linear-gradient(180deg, var(--danger-bg-2) 0%, var(--danger-line) 100%);
        color: var(--accent-2);
        border-color: rgba(227,43,54,.22);
    }
    /* resto deshabilitado: gris muy suave con texto legible */
    .btn:not(.primary):disabled, .btn:not(.primary)[disabled] {
        background: var(--soft-2);
        color: var(--muted);
    }

    /* default y ghost comparten el hover gris suave; primary conserva su degradado */
    .btn:not(.primary):hover:not(:disabled) {
        background: var(--soft);
        color: var(--text);
    }

    .btn.primary {
        --bg: linear-gradient(180deg, var(--persycom-red) 0%, var(--persycom-dark) 100%);
        --fg: #fff;
        --bd: transparent;
        --sh: 0 1px 2px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.18), 0 4px 12px -4px rgba(227,43,54,.40);
        --sh-h: 0 2px 4px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.18), 0 10px 22px -6px rgba(227,43,54,.50);
    }

    .btn.ghost {
        --bg: transparent;
        --bd: transparent;
        --sh: none;
        color: var(--muted);
    }

/* ==========================================================================
   7. PANELES Y TARJETAS (Presupuestador)
   ========================================================================== */
.panel {
    position: relative;
    /* Lavado de marca muy tenue arriba-izquierda (capa de fondo: queda bajo todo
       el contenido y se recorta solo con el radio del panel) */
    background: radial-gradient(120% 100% at 0% 0%, var(--wash) 0%, transparent 60%) left top / 100% 88px no-repeat, var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 16px 32px -20px rgba(15,23,42,.22);
    overflow-x: hidden;
    word-break: break-word;
}

/* El word-break:break-word del .panel (para evitar scroll horizontal en tablas) parte
   el texto de las etiquetas de los checkboxes (cajones/lamas/guías/fabricantes) letra a
   letra cuando la columna es estrecha. Las etiquetas usan ruptura normal por palabras. */
.panel label {
    word-break: normal;
    overflow-wrap: break-word;
}

.panel-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

    .panel-header h2, .panel-header h3 {
        margin: 0;
        font-size: 18px;
        color: var(--text);
    }

.panel-body {
    padding: 20px;
}

.muted {
    color: var(--muted);
}

/* Importador de ficheros (dropzone moderna) */
.choice {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    border: none;
    border-radius: 14px;
    background: radial-gradient(120% 80% at 0% 0%, var(--wash) 0%, transparent 55%), var(--panel);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 14px 28px -20px rgba(15,23,42,.25);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
/* Borde discontinuo dibujado con máscara para respetar el radio */
.choice::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    padding: 1.5px;
    background: repeating-linear-gradient(135deg, var(--line-2) 0, var(--line-2) 8px, transparent 8px, transparent 14px);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    transition: background .2s ease;
}

    .choice:hover {
        transform: translateY(-1px);
        background: radial-gradient(120% 80% at 0% 0%, var(--wash-hover) 0%, transparent 55%), var(--panel);
        box-shadow: 0 1px 2px rgba(227,43,54,.06), 0 18px 32px -20px rgba(227,43,54,.32);
    }

    .choice:hover::before {
        background: repeating-linear-gradient(135deg, var(--accent) 0, var(--accent) 8px, transparent 8px, transparent 14px);
        animation: marching 12s linear infinite;
    }

@keyframes marching {
    to { background-position: 200px 0; }
}

.choice-text h3 {
    margin: 0 0 6px 0;
}

/* Lenguaje Natural (IA) */
.nl-box {
    border: 1px solid var(--line);
    background: var(--soft-2);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    border-left: 4px solid var(--accent);
}

    .nl-box textarea {
        width: 100%;
        min-height: 92px;
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 12px;
        margin-top: 10px;
        resize: vertical;
        font: inherit;
        background: var(--panel);
    }

        .nl-box textarea:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(227, 43, 54, 0.1);
        }

.nl-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

/* Secciones del formulario */
.section {
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-bottom: 18px;
    overflow: hidden;
    background: var(--panel);
}

.section-title {
    padding: 14px 18px;
    background: var(--soft-2);
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

    .section-title h3 {
        margin: 0;
        font-size: 15px;
    }

.section-body {
    padding: 18px;
}

/* ==========================================================================
   8. FORMULARIOS GLOBALES (Inputs, Selects, Checkboxes)
   ========================================================================== */
label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-2);
}

input[type="text"], input[type="date"], input[type="number"], select, input:not([type]) {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    font: inherit;
    color: var(--text);
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

    input:focus, select:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(227, 43, 54, 0.1);
    }

/* Chips (Toggles) */
.toggle-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--line);
    background: var(--panel);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    transition: all 0.15s ease;
}

    .chip:hover {
        border-color: var(--line-2);
        transform: translateY(-1px);
    }

    .chip.active {
        background: linear-gradient(180deg, var(--persycom-red) 0%, var(--persycom-dark) 100%);
        border-color: transparent;
        color: white;
        box-shadow: 0 1px 2px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.18), 0 4px 10px -4px rgba(227,43,54,.40);
    }

        .chip.active:hover {
            filter: brightness(1.05);
            transform: translateY(-1px);
        }

/* Resumen final */
.summary {
    background: var(--danger-bg);
    border: 1px solid rgba(227, 43, 54, 0.2);
    border-radius: 12px;
    padding: 16px;
    line-height: 1.6;
    color: var(--danger-text);
}

    .summary strong {
        display: block;
        margin-bottom: 8px;
        color: var(--accent-2);
    }

/* ==========================================================================
   9. CARRITO Y ASIDE
   ========================================================================== */
.aside-stack {
    display: grid;
    gap: 18px;
    align-content: start;
    position: sticky;
    top: 90px;
    min-width: 0;
    overflow-x: hidden;
}

.stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.stat {
    position: relative;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 14px 12px;
    background: var(--panel);
    text-align: center;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 10px 22px -18px rgba(15,23,42,.20);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

    .stat:hover {
        transform: translateY(-1px);
        border-color: var(--line-2);
        box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 16px 28px -18px rgba(15,23,42,.28);
    }

    /* Brillo de esquina tintado al color de marca */
    .stat::after {
        content: "";
        position: absolute;
        right: -40px; top: -40px;
        width: 90px; height: 90px;
        border-radius: 50%;
        background: radial-gradient(closest-side, var(--glow, var(--accent)) 0%, transparent 70%);
        opacity: .10;
        pointer-events: none;
        z-index: 0;
    }

    .stat .n {
        position: relative;
        z-index: 1;
        font-size: 24px;
        font-weight: 700;
        color: var(--accent);
        line-height: 1;
        letter-spacing: -.02em;
    }

    .stat .l {
        position: relative;
        z-index: 1;
        font-size: 12px;
        color: var(--muted);
        margin-top: 4px;
        font-weight: 500;
    }

/* ---- Cuerpo de tarjeta de línea (carrito y pedido admin) ---- */
.cart-item-body { font-size: 12px; line-height: 1.8; }
.cart-item-body .det { display: block; }
.cart-item-body .det strong { font-weight: 700; }

/* ══ MARCA Y TINTE DE TIPO DE DOCUMENTO ══════════════════════════════════════
   Viven AQUI, en la hoja que cargan todas las pantallas, y no en el <style> de una: las usan
   la tabla de /Admin/Pedidos y la del lote, que son hojas distintas. Estuvieron un rato en la
   de pedidos y en el lote la marca salia como texto suelto, sin pastilla ni color. Es la misma
   informacion en dos sitios: un solo estilo. */
/* MARCA DE TIPO, junto al numero. Deliberadamente NO es una pastilla rellena como las de
   estado: con tres tipos, dos pastillas por fila convierten el listado en un semaforo. Es una
   micro-etiqueta en versalitas con fondo tenue, que se lee cuando la buscas y no grita cuando
   no. Los colores son los de la naturaleza, rebajados. Pedido no lleva ninguna. */
/* `.celda-num` es solo el ENGANCHE del tinte y del tamaño del numero. El ANCHO de esa columna
   NO se decide aqui: la tabla de /Admin/Pedidos lleva `table-layout: fixed`, y ahi manda el ancho
   declarado de la columna (`#pedidos-table td:nth-child(1)`), no el minimo de la celda. Aqui hubo
   un `min-width: 168px` que no hizo nada en ningun momento. */

.tipo-marca {
    display:inline-block; margin-left:7px; padding:1px 5px;
    border-radius:4px; border:1px solid transparent;
    font-size:9.5px; font-weight:700; letter-spacing:.06em;
    text-transform:uppercase; vertical-align:2px; line-height:1.5;
}
.tipo-marca-presupuesto { background:var(--violet-bg); color:var(--violet-text); border-color:var(--violet-line); }
.tipo-marca-acopio      { background:var(--teal-bg); color:var(--teal-text); border-color:var(--teal-line); }

/* Filas con aspecto propio del GENERADOR UNICO (Helpers/LineaPedidoFormatter). Viven aqui, y no
   en la hoja de una pantalla, porque el generador lo comparten SEIS: el carrito, el historial,
   el albaran del cliente, /Admin/Albaranes, el documento imprimible de /Admin/Pedidos y la ficha
   de /Admin/Pedidos. Antes esto iba como `style=` incrustado desde C#, que gana a cualquier
   regla y dejaba a las seis sin poder ajustarlo. */

/* ---- Cotas (0191/0195, Helpers/CotaSvg) ----
   Tres piezas con el mismo lenguaje (flecha de cota en rojo de marca, cifra en negrita con
   digitos de ancho fijo), todo por tokens del tema:
   `.cota-pill`: la pastilla de la cabecera de linea y de las celdas de listado.
   `.det-medidas`: la fila de medidas del cuerpo de la ficha, texto discreto con las mismas
   flechas en vez de los rotulos "Ancho:" / "Alto:" (el plano grande en la ficha se probo en dev
   y el gerente lo quito: "algo mucho mas discreto").
   `.cota-plano`: el dibujo grande, hoy solo en la vista previa del selector de preferencias.
   El documento imprimible de /Admin/Pedidos repite estas reglas con colores de papel. */
.det-medidas, .cart-item-body .det.det-medidas, .ped-linea-cuerpo .det.det-medidas {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.det-medidas .cota-par, .det-panos .cota-par {
    display: inline-flex; align-items: center; gap: 4px;
    font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums;
}
.det-medidas .cota-fl, .det-panos .cota-fl { color: var(--accent); flex: none; }
.det-medidas .cota-u, .det-panos .cota-u { font-size: 10px; font-weight: 600; color: var(--muted); margin-left: -1px; }
/* Paños: rejilla P1 / ancho / alto, con las columnas alineadas; un punto mas discreta que la
   fila de cotas (cifras en --text-2, al peso medio) para que la total siga mandando. Tabulada a
   la derecha (0197, orden del gerente): son SUBcotas de la fila "Cotas:" y tienen que leerse
   como jerarquia. 22 px dejan sitio de sobra en el carrito estrecho (300 px). */
.det-panos, .cart-item-body .det.det-panos, .ped-linea-cuerpo .det.det-panos {
    display: grid; grid-template-columns: max-content max-content max-content; gap: 0 12px;
    width: max-content; margin: -1px 0 3px 22px; line-height: 1.6;
}
.det-panos .pn { font-size: 10px; font-weight: 700; letter-spacing: .05em; color: var(--muted); align-self: center; }
.det-panos .cota-par { font-weight: 600; color: var(--text-2); }
.cota-plano { display: inline-block; vertical-align: top; overflow: visible; font-family: inherit; }
.cota-plano .sil { fill: var(--soft); stroke: var(--line-2); stroke-width: 1.25; }
.cota-plano .hat { stroke: var(--line-2); stroke-width: 1; opacity: .75; }
.cota-plano .caj { fill: var(--muted); opacity: .45; }
.cota-plano .ext { stroke: var(--muted); stroke-width: .75; opacity: .55; }
.cota-plano .lin, .cota-plano .tic { stroke: var(--accent); stroke-width: 1.1; fill: none; stroke-linecap: round; }
.cota-plano text { fill: var(--text); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.cota-plano text.u { fill: var(--muted); font-weight: 500; font-size: 9.5px; }
.cota-plano .mk { fill: var(--accent-solid); }
.cota-plano text.mkt { fill: #fff; font-size: 8.5px; font-weight: 700; }
.cota-pill {
    display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px 0 7px;
    border-radius: 999px; background: var(--soft-2); border: 1px solid var(--line);
    font-size: 12px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums;
    white-space: nowrap; line-height: 1; vertical-align: middle; align-self: center; flex: none;
}
.cota-pill .cota-mini { flex: none; }
.cota-pill .cota-mini .sil { fill: var(--soft); stroke: var(--line-2); stroke-width: 1; }
.cota-pill .cota-mini .caj { fill: var(--line-2); }
.cota-pill .cota-par { display: inline-flex; align-items: center; gap: 3px; }
.cota-pill .cota-fl { color: var(--accent); flex: none; }
.cota-pill .cota-sep { width: 1px; height: 12px; background: var(--line); }
.cota-pill .cota-u { font-size: 9.5px; font-weight: 600; color: var(--muted); }
/* Lado derecho de una cabecera de linea: pastilla + unidades. No encoge: cuando falta sitio cede
   el titulo (puntos suspensivos), nunca la medida. */
.cart-head-der { display: inline-flex; align-items: center; gap: 8px; flex: none; margin-left: 8px; }
.det-aviso { color: var(--danger); font-size: 11px; margin-top: 2px; }
.det-comentario { margin-top: 5px; padding-top: 5px; border-top: 1px dashed var(--line); }
/* Precio orientativo (0229): ultima fila de la ficha, en carrito, historial y PDF del carrito. La
   cifra en negrita y color de texto; "a consultar" atenuado y en cursiva, que es un estado y no
   un numero. Separada de las filas de arriba por el mismo filete que el comentario. */
.det-precio { margin-top: 5px; padding-top: 5px; border-top: 1px dashed var(--line); }
.det-precio .precio-v { font-weight: 700; color: var(--fg); font-size: 12.5px; }
.det-precio-consultar .precio-v { font-weight: 500; color: var(--muted); font-style: italic; font-size: 12px; }

.cart-item {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 14px;
    background: var(--panel);
    transition: border-color 0.2s ease;
}

    .cart-item:hover {
        border-color: var(--line-2);
        box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    }

.cart-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.cart-title {
    font-weight: 700;
    font-size: 14px;
}

.badge {
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    padding: 4px 10px;
    background: var(--line);
    color: var(--text-2);
}

.cart-desc {
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.5;
    margin-bottom: 12px;
}

.mini-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

    .mini-actions button {
        border: 1px solid var(--line);
        background: var(--soft-2);
        border-radius: 6px;
        padding: 6px 12px;
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        color: var(--text);
    }

        .mini-actions button:hover {
            background: var(--line);
        }

/* Bloque Posponer Pedido */
.postpone-box {
    border: 1px solid var(--line);
    background: var(--soft-2);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 14px;
}

    .postpone-box label {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 0;
        cursor: pointer;
    }

    .postpone-box input[type="checkbox"] {
        width: 16px;
        height: 16px;
        accent-color: var(--accent);
        cursor: pointer;
    }

.totals {
    border-top: 1px solid var(--line);
    padding-top: 16px;
    margin-top: 4px;
    display: grid;
    gap: 10px;
    font-size: 14px;
}

    .totals .row {
        display: flex;
        justify-content: space-between;
        gap: 12px;
    }

    /* Total orientativo (0229): es dinero, va destacado respecto a los recuentos de arriba. */
    .totals .row-precio {
        align-items: baseline;
        margin-top: 4px;
        padding-top: 10px;
        border-top: 1px solid var(--line);
        font-weight: 600;
    }
    .totals .row-precio strong {
        font-size: 18px;
        letter-spacing: -.01em;
        color: var(--fg);
    }
    .totals .row-precio strong.precio-consultar {
        font-size: 14px;
        font-weight: 600;
        font-style: italic;
        color: var(--muted);
    }
    .total-precio-nota {
        margin-top: -4px;
        font-size: 11.5px;
        line-height: 1.45;
        color: var(--muted);
    }

/* Total orientativo en el detalle del historial (0229): caja a la altura de las fichas de linea,
   la cifra grande a la derecha y la nota debajo. */
.hist-total-orient {
    margin: 4px 0 16px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel);
}
.hist-total-orient-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.hist-total-orient-l { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hist-total-orient-v { font-size: 20px; font-weight: 700; color: var(--fg); letter-spacing: -.01em; white-space: nowrap; }
.hist-total-orient-v.consultar { font-size: 14px; font-weight: 600; font-style: italic; color: var(--muted); }
.hist-total-orient-nota { margin-top: 6px; font-size: 11.5px; line-height: 1.45; color: var(--muted); }

.helper {
    font-size: 12px;
    color: var(--muted);
    margin-top: 6px;
}

.footer-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 20px;
}

/* ==========================================================================
   10. VISUALIZADOR GRÁFICO (Paños y uniones)
   ========================================================================== */
.graphical-visualizer {
    margin-top: 24px;
    padding: 20px;
    background: var(--soft-2);
    border: 1px solid var(--line);
    border-radius: 12px;
}

.visualizer-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.shutter-box-visual {
    position: relative;
    height: 110px;
    border: 1px solid var(--line-2);
    background: var(--panel);
    border-top: 6px solid var(--line);
    border-radius: 4px;
    display: flex;
    overflow: hidden;
}

.driven-group {
    height: 100%;
    position: relative;
    display: flex;
    flex: 1;
    background: repeating-linear-gradient(var(--soft), var(--soft) 4px, var(--line) 4px, var(--line) 5px);
}

.cota-v {
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    background: var(--overlay);
    padding: 2px 4px;
    border-radius: 4px;
    border-left: 2px solid var(--accent);
    z-index: 10;
}

.pano-visual {
    flex: 1;
    border-right: 1px solid rgba(0,0,0,0.05);
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 8px;
}

    .pano-visual:last-child {
        border-right: none;
    }

.pano-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    background: var(--panel);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--line-2);
}

.op-icon-visual {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 14px;
    padding: 4px;
    background: var(--panel);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border: 1px solid var(--line-2);
    color: var(--accent);
    z-index: 10;
}

.union-visual {
    position: absolute;
    right: -9px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    color: var(--accent);
    background: var(--panel);
    border-radius: 50%;
    padding: 2px;
    font-size: 12px;
    border: 1px solid var(--accent);
}

.detailed-cotas-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.pano-cota-box {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px;
    background: var(--panel);
    position: relative;
    transition: all 0.2s ease;
}

    .pano-cota-box h5 {
        margin: 0 0 8px 0;
        font-size: 13px;
        color: var(--muted);
    }

.union-check-container {
    position: absolute;
    right: -14px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
}

    .union-check-container input[type="checkbox"] {
        width: 18px;
        height: 18px;
        cursor: pointer;
        accent-color: var(--accent);
    }

/* ==========================================================================
   11. RESPONSIVE (Móviles y Tablets)
   ========================================================================== */
@media (max-width: 1100px) {
    .layout {
        grid-template-columns: 1fr;
    }

    .aside-stack {
        position: static;
    }

    .grid-4 {
        grid-template-columns: 1fr 1fr;
    }

    .detailed-cotas-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 760px) {
    .grid-2, .grid-4, .stat-row {
        grid-template-columns: 1fr;
    }

    .topbar {
        padding: 10px 14px;
        flex-direction: column;
        gap: 8px;
        /* En móvil la cabecera apilada mide ~200px; con sticky quedaba SIEMPRE
           visible tapando un tercio de la pantalla. Estática: se va con el
           scroll y devuelve esa pantalla al contenido. */
        position: static;
    }

    .layout-container {
        padding: 16px;
    }

    .detailed-cotas-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   12. ALERTAS / BANNERS (sistema de diseño "moderno")
   Banner reutilizable: raíl de color, icono en relieve, fondo en degradado
   y sombra ambiental tintada. Variantes vía custom props en el wrapper.
   ========================================================================== */
.alert {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 14px 14px 16px;
    margin-bottom: 14px;
    border-radius: 14px;
    border: 1px solid var(--bd);
    background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bot) 100%);
    box-shadow: 0 1px 2px rgba(15,23,42,.03), 0 12px 24px -20px var(--shadow-tint, rgba(15,23,42,.20));
    overflow: hidden;
}
/* Raíl de color que ancla la identidad de la variante */
.alert::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--rail);
}
.alert-icon {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--rail);
    background: var(--icon-bg);
    border: 1px solid var(--icon-bd);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 2px 4px -2px var(--shadow-tint, rgba(15,23,42,.10));
}
.alert-body { flex: 1; min-width: 0; }
.alert-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--title);
    letter-spacing: -.005em;
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 2px;
}
.alert-meta {
    font-size: 11px;
    font-weight: 600;
    color: var(--meta, var(--muted));
    background: var(--overlay);
    border: 1px solid var(--bd);
    border-radius: 999px;
    padding: 1px 8px;
}
.alert-msg {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--msg);
}
.alert-msg ul { margin: 4px 0 0; padding-left: 18px; color: var(--msg); }
.alert-msg li { margin: 2px 0; }
.alert-msg strong { color: var(--title); }
.alert-actions { display: flex; gap: 6px; margin-top: 10px; }
.alert-btn {
    display: inline-flex; align-items: center; gap: 5px;
    height: 28px; padding: 0 11px;
    border-radius: 8px;
    font: 600 12px/1 Inter, Arial, Helvetica, sans-serif;
    color: var(--btn-fg, var(--title));
    background: var(--overlay);
    border: 1px solid var(--bd);
    cursor: pointer;
    transition: background .15s ease, transform .12s ease;
}
.alert-btn:hover { background: var(--panel); transform: translateY(-1px); }
.alert-btn.primary {
    background: var(--rail);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.18);
}
.alert-btn.primary:hover { filter: brightness(1.08); }
.alert-close {
    flex-shrink: 0;
    width: 26px; height: 26px;
    margin: -2px -2px -2px 0;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--meta, var(--muted));
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.alert-close:hover { background: var(--overlay); color: var(--title); }

/* Variantes */
.alert.success {
    --rail:var(--ok-solid); --bd:var(--ok-line); --bg-top:var(--ok-bg); --bg-bot:var(--ok-bg-2);
    --icon-bg:linear-gradient(180deg,var(--ok-bg),var(--ok-line)); --icon-bd:var(--ok-line);
    --title:var(--ok-text); --msg:var(--ok-text); --meta:var(--ok-text); --shadow-tint:rgba(5,150,105,.22);
}
.alert.danger {
    --rail:var(--danger-solid); --bd:var(--danger-line); --bg-top:var(--danger-bg); --bg-bot:var(--danger-bg-2);
    --icon-bg:linear-gradient(180deg,var(--danger-bg),var(--danger-line)); --icon-bd:var(--danger-line);
    --title:var(--danger-text); --msg:var(--danger-text); --meta:var(--danger-text); --shadow-tint:rgba(220,38,38,.22);
}
.alert.warn {
    --rail:var(--warn-solid); --bd:var(--warn-line); --bg-top:var(--warn-bg); --bg-bot:var(--warn-bg-2);
    --icon-bg:linear-gradient(180deg,var(--warn-bg),var(--warn-bg-2)); --icon-bd:var(--warn-line);
    --title:var(--warn-text); --msg:var(--warn-text); --meta:var(--warn-text); --shadow-tint:rgba(217,119,6,.22);
}
.alert.info {
    --rail:var(--info-solid); --bd:var(--info-line); --bg-top:var(--info-bg); --bg-bot:var(--info-bg-2);
    --icon-bg:linear-gradient(180deg,var(--info-bg),var(--info-line)); --icon-bd:var(--info-line);
    --title:var(--info-text); --msg:var(--info-text); --meta:var(--info-text); --shadow-tint:rgba(37,99,235,.22);
}
.alert.brand {
    --rail:var(--accent); --bd:rgba(227,43,54,.22); --bg-top:var(--danger-bg); --bg-bot:var(--danger-bg-2);
    --icon-bg:linear-gradient(180deg,var(--danger-bg),var(--danger-line)); --icon-bd:rgba(227,43,54,.32);
    --title:var(--danger-text); --msg:var(--danger-text); --meta:var(--danger-text); --shadow-tint:rgba(227,43,54,.26);
}

/* Ajustes para el Dropdown de Administración */
.dropdown-item {
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

    .dropdown-item:hover {
        background-color: var(--soft);
        color: var(--accent);
    }

.dropdown-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.5px;
}
/* Eyebrow: línea que se desvanece a la derecha del encabezado */
.dropdown-header::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--line) 0%, transparent 100%);
}

/* ==========================================================================
   13. PRIMITIVOS DE CONTROL (sistema de diseño "moderno")
   Disponibles para usar en filtros, toggles y etiquetas de estado.
   ========================================================================== */
/* Control segmentado (p. ej. modo accionamiento) */
.segmented {
    display: inline-flex;
    padding: 4px;
    background: var(--soft-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: inset 0 1px 2px rgba(15,23,42,.04);
}
.segmented .seg {
    display: inline-flex; align-items: center; gap: 6px;
    height: 30px; padding: 0 14px;
    border-radius: 8px;
    font: 600 12.5px/1 Inter, Arial, Helvetica, sans-serif;
    color: var(--muted);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s, border-color .15s;
    white-space: nowrap;
}
.segmented .seg:hover { color: var(--text); }
.segmented .seg.active {
    background: var(--panel);
    color: var(--accent);
    border-color: rgba(227,43,54,.18);
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 10px -4px rgba(227,43,54,.20);
}

/* Pastilla de conmutación simple */
.pill {
    display: inline-flex; align-items: center; gap: 5px;
    height: 28px; padding: 0 12px;
    border-radius: 999px;
    background: var(--panel);
    border: 1.5px solid var(--line);
    color: var(--muted);
    font: 600 12px/1 Inter, Arial, Helvetica, sans-serif;
    cursor: pointer;
    transition: all .15s;
    user-select: none;
}
.pill:hover { border-color: var(--line-2); color: var(--text); }
.pill.active {
    background: linear-gradient(180deg, var(--persycom-red) 0%, var(--persycom-dark) 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.18), 0 4px 10px -4px rgba(227,43,54,.40);
}

/* Chip de filtro con contador y cierre */
.filter-chip {
    display: inline-flex; align-items: stretch;
    height: 30px;
    border-radius: 999px;
    background: var(--soft-2);
    border: 1px solid var(--line);
    font: 600 12px/1 Inter, Arial, Helvetica, sans-serif;
    color: var(--text);
    overflow: hidden;
}
.filter-chip .fc-label { display: inline-flex; align-items: center; gap: 6px; padding: 0 4px 0 12px; }
.filter-chip .fc-label .muted { color: var(--muted); font-weight: 500; }
.filter-chip .fc-count {
    background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
    padding: 2px 7px; font-size: 10.5px; color: var(--text); align-self: center;
}
.filter-chip .fc-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px;
    border-left: 1px solid var(--line);
    color: var(--muted);
    cursor: pointer;
    transition: background .15s, color .15s;
}
.filter-chip .fc-close:hover { background: var(--danger-bg-2); color: var(--accent); }

/* Etiqueta de estado con punto */
.tag {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px 3px 7px;
    border-radius: 999px;
    font: 700 11px/1.3 Inter, Arial, Helvetica, sans-serif;
    border: 1px solid;
    letter-spacing: .01em;
}
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.tag.brand   { color:var(--accent-2); background:var(--danger-bg-2); border-color:var(--danger-line); }
.tag.success { color:var(--ok-text); background:var(--ok-bg-2); border-color:var(--ok-line); }
.tag.warn    { color:var(--warn-text); background:var(--warn-bg-2); border-color:var(--warn-line); }
.tag.info    { color:var(--info-text); background:var(--info-bg-2); border-color:var(--info-line); }
.tag.neutral { color:var(--text-2); background:var(--soft); border-color:var(--line); }

/* ── Tablas admin compactas ── */
.table th, .table td {
    padding: 5px 10px;
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
    vertical-align: middle;
}
.table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
    font-weight: 600;
    border-bottom: 2px solid var(--line);
}
.table td {
    border-bottom: 1px solid var(--line);
}
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
/* Columnas de acciones nunca truncan */
.table td:last-child, .table th:last-child {
    white-space: nowrap;
    overflow: visible;
    max-width: none;
    font-size: 0.78rem;
}

/* ==========================================================================
   ELECCION DE NATURALEZA — Pages/Shared/_EleccionNaturaleza.cshtml (ADR-0029)

   Para que nos envia el cliente el documento: que lo fabriquemos, que le digamos el precio o
   que preparemos material. Vive aqui, y no en la hoja de una pantalla, porque el bloque lo
   comparten las DOS puertas por las que se envia un documento (confirmar el carrito y confirmar
   un borrador) y tiene que verse igual en las dos.

   Tres bloques seleccionables a un clic. El radio real sigue ahi, oculto pero no eliminado: se
   conserva el foco, el recorrido con teclado y las flechas del grupo, y no hace falta JS.
   ========================================================================== */
.nat-eleccion {
    margin: 0 0 10px;
    padding: 0;
    border: 0;
}

.nat-eleccion-titulo {
    float: none;               /* Bootstrap pone width:100% a legend: se anula para que no empuje */
    width: auto;
    padding: 0;
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ── PLEGADO: <details> + <summary>, sin una linea de JavaScript ──────────────
   El resumen enseña la opcion elegida con su descripcion; las tres opciones viven dentro y
   solo se ven al desplegar. Los radios siguen siendo radios: aunque el <details> este cerrado
   se envian igual, porque estar oculto no descalifica a un control de formulario. */
.nat-desplegable {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel);
}

.nat-resumen {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    cursor: pointer;
    list-style: none;          /* Chrome/Safari: quita el triangulo por defecto */
    border-radius: 9px;
}
.nat-resumen::-webkit-details-marker { display: none; }
.nat-resumen:hover { background: var(--soft-2); }
.nat-desplegable[open] .nat-resumen {
    border-bottom: 1px solid var(--line);
    border-radius: 9px 9px 0 0;
}
/* El foco se pinta sobre el resumen entero: es lo que se pulsa con el teclado. */
.nat-resumen:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }

/* Las tres opciones estan escritas en el resumen y solo se ve la que corresponde: <summary> es
   estatico y sin esto mentiria en cuanto se eligiera otra cosa. */
.nat-resumen-op { display: none; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
/* Sin :has() se ve la que marco el servidor: degrada al comportamiento de siempre, no rompe. */
.nat-resumen-op-inicial { display: flex; }
.nat-desplegable:has(.nat-opcion-radio:checked) .nat-resumen-op-inicial { display: none; }
.nat-desplegable:has(.nat-opcion-radio[value="0"]:checked) .nat-resumen-op-0,
.nat-desplegable:has(.nat-opcion-radio[value="1"]:checked) .nat-resumen-op-1,
.nat-desplegable:has(.nat-opcion-radio[value="2"]:checked) .nat-resumen-op-2 { display: flex; }

/* "Cambiar": dice que esto se abre. Un triangulo solo no lo dice en un bloque que parece texto. */
.nat-resumen-accion {
    flex: none; font-size: 11px; font-weight: 600; color: var(--muted);
    letter-spacing: .03em; text-transform: uppercase;
}
.nat-desplegable[open] .nat-resumen-accion::after { content: " ▴"; }
.nat-desplegable:not([open]) .nat-resumen-accion::after { content: " ▾"; }

.nat-eleccion-opciones {
    display: grid;
    /* SIN numero de columnas escrito a mano (antes: repeat(3, 1fr), que era la foto de cuando
       se ofrecian tres). El bucle de la vista es dinamico y la rejilla tambien:

         - auto-fit, no auto-fill: las pistas que sobran se COLAPSAN, asi que dos opciones se
           reparten TODO el ancho en vez de dejar el hueco de una tercera. Es justo lo que se
           pedia: si sobra ancho, se usa.
         - una tercera opcion entraria sola, sin tocar este fichero.
         - el minimo hace de punto de apilado: cuando cada caja no llega a el, se van una
           debajo de otra sin necesidad de media query.

       160px es el ancho por debajo del cual la descripcion (dos lineas de ~40 caracteres) se
       deshilacha. Medido contra las dos puertas reales: el bloque dispone de ~467px en la
       columna lateral a 1480px de ventana y de ~190px por caja a 1280px, asi que a dos
       columnas se queda en los dos casos y solo se apila en movil. El min(...,100%) evita el
       desbordamiento si algun dia el contenedor fuera mas estrecho que el propio minimo. */
    grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
    gap: 10px;
    padding: 10px;              /* ahora vive dentro del <details>, no suelta */
}

/* El label se estira como celda de la rejilla y el cuerpo ocupa su alto entero: las cajas
   quedan del MISMO ALTO aunque una descripcion ocupe una linea mas que la otra. */
.nat-opcion {
    display: flex;
    margin: 0;
    cursor: pointer;
    position: relative;
}

/* El radio no se quita con display:none, que lo sacaria del recorrido de teclado: se hace
   invisible pero sigue existiendo, y el foco se dibuja sobre el cuerpo (ver :focus-visible). */
.nat-opcion-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
    pointer-events: none;
}

/* Rejilla de dos columnas dentro de la caja: la marca redonda a la izquierda, ocupando las dos
   filas, y a su derecha el nombre sobre la descripcion. Asi la descripcion arranca alineada con
   el nombre y no por debajo de la marca. */
.nat-opcion-cuerpo {
    flex: 1;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "marca nombre"
        "marca texto";
    column-gap: 10px;
    row-gap: 3px;
    align-content: start;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel);
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

/* La marca de eleccion se DIBUJA aqui porque el radio de verdad es invisible. Sin ella, dos
   cajas grandes se leen como dos botones independientes y no como una eleccion entre
   excluyentes: el usuario no sabe que al marcar una desmarca la otra. Va en el CSS y no en el
   HTML por lo mismo que el resto del aspecto. */
.nat-opcion-cuerpo::before {
    content: "";
    grid-area: marca;
    width: 15px;
    height: 15px;
    margin-top: 1px;
    box-sizing: border-box;
    border: 1.5px solid var(--line-2);
    border-radius: 50%;
    background: var(--panel);
    /* Anillo blanco interior: no se ve mientras el fondo es blanco, y al marcar deja el hueco
       que separa el borde del punto central. */
    box-shadow: inset 0 0 0 3px var(--panel);
    transition: border-color .15s ease, background .15s ease;
}

.nat-opcion:hover .nat-opcion-cuerpo {
    border-color: var(--line-2);
    background: var(--soft-2);
}

    .nat-opcion:hover .nat-opcion-cuerpo::before {
        border-color: var(--line-2);
    }

.nat-opcion-nombre {
    grid-area: nombre;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-2);
    line-height: 1.25;
}

/* Ya cabe entera: ni se trunca ni se parte por la mitad. */
.nat-opcion-para {
    grid-area: texto;
    font-size: 12px;
    line-height: 1.4;
    color: var(--muted);
}

/* Seleccionada: se distingue por MAS DE UN rasgo (marca rellena, borde de marca, fondo, sombra
   y color del titulo), no solo por el borde, que en una pantalla clara se pierde. */
.nat-opcion-radio:checked + .nat-opcion-cuerpo {
    border-color: var(--accent);
    background: var(--danger-bg);
    box-shadow: 0 0 0 1px rgba(227,43,54,.35), 0 6px 16px -12px rgba(227,43,54,.6);
}

    .nat-opcion-radio:checked + .nat-opcion-cuerpo::before {
        border-color: var(--accent);
        background: var(--persycom-red);
    }

    .nat-opcion-radio:checked + .nat-opcion-cuerpo .nat-opcion-nombre {
        color: var(--accent-2);
    }

/* El foco se pinta sobre el cuerpo porque el radio es invisible: sin esto, navegar con teclado
   seria a ciegas. */
.nat-opcion-radio:focus-visible + .nat-opcion-cuerpo {
    outline: 2px solid var(--info);
    outline-offset: 2px;
}