/* =====================================================================
   AMALIA — hoja de estilos global
   · @layer (cascada ordenada)         · CSS Nesting nativo
   · light-dark() + color-scheme        · oklch() / color-mix()
   · Grid con áreas con nombre          · subgrid (líneas de cotización)
   · Container queries                  · :has() (formularios reactivos sin JS)
   · @property (anillos y donas animadas) · @starting-style (dialog / popover)
   · View Transitions                   · Gráficas 100% CSS
   ===================================================================== */

@layer reset, base, layout, componentes, paginas, filtros;

@property --pct { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --rev { syntax: '<number>'; inherits: false; initial-value: 100; }
@property --ang { syntax: '<angle>';  inherits: false; initial-value: 0deg; }

/* =============================================================== reset */
@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
    * { margin: 0; }
    body { min-height: 100dvh; -webkit-font-smoothing: antialiased; }
    button, input, select, textarea { font: inherit; color: inherit; }
    img, svg { display: block; flex-shrink: 0; }
    [hidden] { display: none !important; }
    ul { padding: 0; list-style: none; }
    a { color: inherit; }
    table { border-collapse: collapse; }
}

/* ================================================================ base */
@layer base {
    :root {
        color-scheme: light;   /* siempre claro (blanco); el oscuro solo si se elige con el botón */
        /* Paleta tomada del logo: café (letras), rosa / coral / lavanda (flores), dorado (tallos y corazón) */
        --cafe:     oklch(27% .045 40);
        --rosa:     light-dark(oklch(60% .15 358), oklch(72% .13 358));
        --coral:    oklch(74% .11 38);
        --lavanda:  light-dark(oklch(56% .14 325), oklch(70% .12 325));
        --oro:      oklch(71% .08 75);

        --fondo:        light-dark(oklch(98.2% .008 60),  oklch(17% .018 30));   /* crema */
        --superficie:   light-dark(oklch(100% 0 0),       oklch(22% .02 30));
        --superficie-2: light-dark(oklch(95.6% .014 45),  oklch(27% .022 30));
        --texto:        light-dark(var(--cafe),           oklch(94% .015 60));
        --suave:        light-dark(oklch(50% .035 40),    oklch(74% .02 50));
        --borde:        color-mix(in oklch, var(--texto) 11%, transparent);

        --acento:       var(--rosa);
        --acento-suave: color-mix(in oklch, var(--acento) 13%, transparent);
        --alta:  oklch(60% .17 15);
        --media: oklch(74% .11 70);
        --baja:  oklch(63% .07 145);

        --fuente-titulo: "Cormorant Garamond", Georgia, serif;

        --radio: 16px;
        --ease: cubic-bezier(.2, .8, .2, 1);
        --sombra: 0 1px 2px oklch(0% 0 0 / .05), 0 10px 30px -16px oklch(0% 0 0 / .25);

        font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    }
    :root[data-theme="light"] { color-scheme: light; }
    :root[data-theme="dark"]  { color-scheme: dark; }

    body {
        background:
            radial-gradient(60rem 30rem at 100% -10%, color-mix(in oklch, var(--rosa) 10%, transparent), transparent 70%),
            radial-gradient(45rem 28rem at -10% 110%, color-mix(in oklch, var(--lavanda) 9%, transparent), transparent 70%),
            radial-gradient(30rem 20rem at 60% 50%, color-mix(in oklch, var(--coral) 5%, transparent), transparent 70%),
            var(--fondo);
        background-attachment: fixed;
        color: var(--texto);
        line-height: 1.5;
        font-size: clamp(.9rem, .85rem + .2vw, 1rem);
    }
    h1, h2, h3 { line-height: 1.2; text-wrap: balance; }
    .topbar h1, .card-cab h2, .bolsa-card h2, .punto-card h2, .tarjeta-login h1, .perfil-cab h2, .formulario > h2, .documento h3 {
        font-family: var(--fuente-titulo); font-weight: 700; letter-spacing: 0;
    }
    p { text-wrap: pretty; }
    :focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
    ::selection { background: var(--acento-suave); }
    kbd {
        font: 600 .7rem/1 ui-monospace, monospace; padding: .2rem .4rem; border-radius: 6px;
        border: 1px solid var(--borde); border-bottom-width: 2px; color: var(--suave);
    }
    .suave { color: var(--suave); }
    .chico { font-size: .82rem; }
    .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .85em; }
    .positivo { color: var(--baja); }
    .negativo { color: var(--alta); font-weight: 600; }
    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .ico { width: var(--tam, auto); }
}

/* ============================================================== layout */
@layer layout {
    /* Esqueleto: menú lateral + barra superior + contenido */
    .shell {
        display: grid;
        grid-template-columns: 260px minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "nav top"
            "nav main";
        min-height: 100dvh;

        @media (width < 960px) {
            grid-template-columns: minmax(0, 1fr);
            grid-template-rows: auto auto 1fr;
            grid-template-areas: "nav" "top" "main";
        }
    }
    .shell:not(:has(.nav)) { grid-template-areas: "top" "main"; grid-template-columns: minmax(0, 1fr); }

    .nav {
        grid-area: nav;
        position: sticky; top: 0; height: 100dvh;
        display: flex; flex-direction: column; gap: 1.25rem;
        padding: 1.1rem .85rem;
        background: color-mix(in oklch, var(--superficie) 78%, transparent);
        backdrop-filter: blur(14px);
        border-inline-end: 1px solid var(--borde);
        z-index: 20;

        nav { flex: 1; overflow-y: auto; scrollbar-width: thin; }
        ul { display: grid; gap: .15rem; }

        @media (width < 960px) {
            height: auto; flex-direction: row; align-items: center; gap: .5rem;
            padding: .5rem .75rem; border-inline-end: 0; border-bottom: 1px solid var(--borde);
            flex-wrap: wrap;
            nav { order: 3; flex: 1 0 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
            ul { display: flex; }
        }
    }

    .topbar {
        grid-area: top;
        display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
        padding: 1.5rem clamp(1rem, 3vw, 2.25rem) .5rem;
        h1 { font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.3rem); font-weight: 700; }
        p { color: var(--suave); font-size: .9rem; margin-top: .2rem; }
    }
    .topbar-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

    .contenido {
        grid-area: main;
        display: grid; gap: 1.25rem; align-content: start;
        padding: 1rem clamp(1rem, 3vw, 2.25rem) 2.5rem;
        container: contenido / inline-size;
        min-width: 0;
    }

    /* Bento: 6 columnas; cada bloque dice cuántas ocupa */
    .bento {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-auto-flow: dense;
        gap: 1.1rem;
        .s-2 { grid-column: span 2; }
        .s-3 { grid-column: span 3; }
        .s-4 { grid-column: span 4; }
        .s-6 { grid-column: 1 / -1; }
        .alto-2 { grid-row: span 2; }

        @container contenido (width < 1000px) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            .s-2, .s-3 { grid-column: span 1; }
            .s-4, .s-6 { grid-column: 1 / -1; }
            .alto-2 { grid-row: auto; }
        }
        @container contenido (width < 640px) {
            grid-template-columns: minmax(0, 1fr);
            > * { grid-column: 1 / -1; }
        }
    }

    .grid-cards {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
        gap: 1.1rem;
    }
}

/* ========================================================== componentes */
@layer componentes {

    /* ---------- marca y menú ---------- */
    .marca { display: grid; place-items: center; text-decoration: none; padding: .25rem .4rem .6rem; border-bottom: 1px solid var(--borde); }
    .marca img { width: 100%; max-width: 210px; height: auto; }
    .marca .flores { display: none; }
    /* Logo claro u oscuro según el tema (respeta el botón y la preferencia del sistema) */
    .logo-oscuro { display: none !important; }
    :root[data-theme="dark"] .logo-claro { display: none !important; }
    :root[data-theme="dark"] .logo-oscuro { display: block !important; }
    .logo-marca {
        display: grid; place-items: center; flex-shrink: 0;
        width: 40px; aspect-ratio: 1; border-radius: 12px;
        background: conic-gradient(from 210deg, var(--rosa), var(--coral), var(--lavanda), var(--rosa));
        color: white; font-weight: 800; font-size: 1.15rem;
        box-shadow: 0 8px 22px -10px var(--acento);
    }
    .nav-link {
        position: relative;
        display: flex; align-items: center; gap: .7rem;
        padding: .6rem .75rem; border-radius: 10px;
        color: var(--suave); text-decoration: none; font-weight: 500; font-size: .92rem; white-space: nowrap;
        transition: background .2s, color .2s;
        &:hover { background: var(--superficie-2); color: var(--texto); }
        &[aria-current="page"] {
            background: var(--acento-suave); color: color-mix(in oklch, var(--acento) 75%, var(--texto)); font-weight: 600;
            @media (width >= 960px) {
                &::before { content: ""; position: absolute; inset-inline-start: -.85rem; inset-block: 22%; width: 3px; border-radius: 0 3px 3px 0; background: var(--acento); }
            }
        }
        .badge { margin-inline-start: auto; }
    }
    .nav-usuario {
        display: flex; align-items: center; gap: .6rem;
        padding: .6rem; border-radius: 12px; background: var(--superficie-2);
        .info { flex: 1; min-width: 0; display: grid; text-decoration: none; line-height: 1.2; }
        .info b { font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .info small { font-size: .74rem; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        @media (width < 960px) { padding: .25rem; background: transparent; }
    }
    .avatar {
        display: grid; place-items: center; flex-shrink: 0;
        width: 34px; aspect-ratio: 1; border-radius: 50%;
        background: oklch(62% .14 var(--h, 280)); color: white;
        font-weight: 700; font-size: .78rem; text-decoration: none;
        &.xl { width: 64px; font-size: 1.3rem; }
    }

    /* ---------- botones ---------- */
    .btn {
        display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
        border: 1px solid transparent; border-radius: 11px;
        padding: .6rem 1rem; font-weight: 600; font-size: .9rem; cursor: pointer; text-decoration: none; white-space: nowrap;
        transition: transform .15s var(--ease), background .2s, box-shadow .2s, border-color .2s;
        &:active { transform: scale(.97); }
        &.chico { padding: .38rem .7rem; font-size: .8rem; border-radius: 9px; }
        &.grande { padding: .8rem 1.3rem; font-size: 1rem; }
        &.ancho { width: 100%; }
    }
    .btn-primario {
        background: linear-gradient(135deg, var(--rosa), color-mix(in oklch, var(--rosa) 55%, var(--lavanda)));
        color: light-dark(white, oklch(20% .04 30));
        box-shadow: 0 8px 20px -10px color-mix(in oklch, var(--acento) 85%, transparent);
        &:hover { filter: brightness(1.07) saturate(1.1); }
    }
    .btn-fantasma { background: var(--superficie); border-color: var(--borde); &:hover { background: var(--superficie-2); } }
    .btn-ok      { background: color-mix(in oklch, var(--baja) 18%, transparent); color: color-mix(in oklch, var(--baja) 70%, var(--texto)); }
    .btn-peligro { background: color-mix(in oklch, var(--alta) 15%, transparent); color: color-mix(in oklch, var(--alta) 75%, var(--texto)); }
    .btn-aviso   { background: color-mix(in oklch, var(--media) 20%, transparent); color: color-mix(in oklch, var(--media) 60%, var(--texto)); }
    .btn-icono {
        display: inline-grid; place-items: center; flex-shrink: 0;
        width: 32px; height: 32px; border: 0; border-radius: 9px;
        background: transparent; color: var(--suave); cursor: pointer; text-decoration: none;
        span { display: none; }
        &:hover:not(:disabled) { background: var(--superficie-2); color: var(--texto); }
        &.peligro:hover { color: var(--alta); }
        &.grande { width: 40px; height: 40px; border: 1px solid var(--borde); background: var(--superficie); }
        &.mini { width: 24px; height: 24px; vertical-align: middle; svg { width: 14px; } }
        &:disabled { opacity: .25; cursor: not-allowed; }
    }
    /* En pantallas pequeñas, los botones del topbar se vuelven solo icono */
    @media (width < 560px) { .topbar-acciones .btn span { display: none; } .topbar-acciones .btn { padding: .6rem; } }

    /* ---------- tarjetas ---------- */
    .card {
        display: grid; gap: 1rem; align-content: start; min-width: 0;
        padding: 1.15rem 1.25rem;
        background: var(--superficie);
        border: 1px solid var(--borde); border-radius: var(--radio);
        box-shadow: var(--sombra);
        container: card / inline-size;
        &.centrado { justify-items: center; text-align: center; align-content: center; }
    }
    .card-cab {
        display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
        h2 { font-size: 1.3rem; font-weight: 700; }
        p { font-size: .8rem; color: var(--suave); margin-top: .1rem; }
    }
    .separador-oro {
        display: flex; align-items: center; gap: .6rem; color: var(--oro); font-size: .8rem;
        &::before, &::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .7; }
    }
    .subtitulo { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); }

    /* ---------- KPIs ---------- */
    .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 1rem; }
    .kpi {
        --c: var(--acento);
        position: relative; overflow: hidden;
        display: grid; gap: .15rem; align-content: start;
        padding: 1.05rem 1.15rem;
        background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra);
        &::after {
            content: ""; position: absolute; inset: auto -40px -60px auto; width: 140px; aspect-ratio: 1; border-radius: 50%;
            background: color-mix(in oklch, var(--c) 16%, transparent); filter: blur(24px); pointer-events: none;
        }
        small { color: var(--suave); font-size: .8rem; font-weight: 500; }
        strong { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
    }
    .kpi-ico {
        display: grid; place-items: center; width: 36px; aspect-ratio: 1; border-radius: 11px; margin-bottom: .5rem;
        background: color-mix(in oklch, var(--c) 15%, transparent); color: var(--c);
    }
    .delta {
        font-size: .75rem; color: var(--suave);
        &.sube { color: var(--baja); font-weight: 600; }
        &.baja { color: var(--alta); font-weight: 600; }
    }

    /* ---------- badges ---------- */
    .badge {
        --c: var(--suave);
        display: inline-flex; align-items: center; gap: .3rem;
        padding: .14rem .55rem; border-radius: 99px;
        font-size: .72rem; font-weight: 600; font-style: normal; white-space: nowrap;
        background: color-mix(in oklch, var(--c) 15%, transparent);
        color: color-mix(in oklch, var(--c) 72%, var(--texto));
    }
    .b-ok { --c: var(--baja); }
    .b-peligro { --c: var(--alta); }
    .b-aviso { --c: var(--media); }
    .b-info { --c: var(--acento); }
    .chips { display: flex; flex-wrap: wrap; gap: .35rem; }
    .punto-nombre {
        display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; font-weight: 500;
        i { width: 9px; aspect-ratio: 1; border-radius: 50%; background: var(--c); }
    }

    /* ---------- tablas ---------- */
    .tabla-wrap { overflow-x: auto; border: 1px solid var(--borde); border-radius: 12px; }
    .tabla-wrap > table { min-width: 680px; }
    .tabla-wrap td.suave { white-space: nowrap; }
    table { width: 100%; font-size: .87rem; }
    th {
        text-align: start; padding: .65rem .85rem; white-space: nowrap;
        font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--suave);
        background: var(--superficie-2);
    }
    td { padding: .65rem .85rem; border-top: 1px solid var(--borde); vertical-align: middle; }
    tbody tr { transition: background .15s; }
    tbody tr:hover { background: color-mix(in oklch, var(--acento) 4%, transparent); }
    tr.inactivo { opacity: .55; }
    .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
    th.num { text-align: end; }
    .acciones-fila { white-space: nowrap; text-align: end; form { display: inline; } }
    .enlace { color: var(--acento); font-weight: 600; text-decoration: none; &:hover { text-decoration: underline; } }
    .usuario-celda { display: flex; align-items: center; gap: .65rem; div { display: grid; line-height: 1.25; } }

    /* ---------- buscador ---------- */
    .buscador {
        display: flex; align-items: center; gap: .5rem;
        padding: .5rem .75rem; border-radius: 11px; min-width: min(100%, 240px);
        border: 1px solid var(--borde); background: var(--fondo); color: var(--suave);
        transition: border-color .2s, box-shadow .2s;
        input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; color: var(--texto); }
        &:focus-within { border-color: var(--acento); box-shadow: 0 0 0 4px var(--acento-suave); }
    }

    /* ---------- tabs ---------- */
    .tabs {
        display: flex; gap: .2rem; padding: .25rem; border-radius: 12px; max-width: 100%; overflow-x: auto;
        background: var(--superficie-2);
        a {
            padding: .42rem .85rem; border-radius: 9px; text-decoration: none; white-space: nowrap;
            color: var(--suave); font-weight: 500; font-size: .86rem;
            em { font-style: normal; font-size: .72rem; opacity: .7; margin-inline-start: .2rem; }
            &[aria-current] { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); font-weight: 600; }
        }
    }

    /* ---------- formularios ---------- */
    .formulario {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1rem; padding: 1.5rem;
        container: form / inline-size;
        > h2 { font-size: 1.55rem; font-weight: 700; }
        .completo { grid-column: 1 / -1; }
        &.sin-padding { padding: 0; }
        @media (width < 560px) { grid-template-columns: minmax(0, 1fr); }
        &:has(:invalid) [type="submit"], &:has(:invalid) .dlg-acciones .btn-primario { opacity: .6; }
        &[data-modo="editar"] .solo-nuevo { display: none; }
        &:not([data-modo="editar"]) .solo-editar { display: none; }
    }
    .campo {
        display: grid; gap: .35rem; align-content: start; min-width: 0;
        > label { font-size: .8rem; font-weight: 600; color: var(--suave); }
        :is(input:not([type="checkbox"], [type="radio"], [type="color"]), select, textarea) {
            width: 100%; padding: .6rem .75rem; border-radius: 11px;
            border: 1px solid var(--borde); background: var(--fondo);
            transition: border-color .2s, box-shadow .2s;
            &:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 4px var(--acento-suave); }
            &:disabled { opacity: .6; }
        }
        input.solo-lectura { background: var(--superficie-2); color: var(--suave); cursor: default; font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .03em; }
        input.solo-lectura:focus { box-shadow: none; border-color: var(--borde); }
        input[type="color"] { width: 100%; height: 42px; padding: .2rem; border-radius: 11px; border: 1px solid var(--borde); background: var(--fondo); cursor: pointer; }
        textarea { min-height: 84px; max-height: 260px; resize: vertical; field-sizing: content; }
        &:has(:user-invalid) {
            :is(input, textarea, select) { border-color: var(--alta); }
            &::after { content: "Revisa este campo"; font-size: .74rem; color: var(--alta); }
        }
    }
    select, input, textarea { accent-color: var(--acento); }
    .filtros-linea, .en-linea {
        display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
        select, input { padding: .42rem .6rem; border-radius: 9px; border: 1px solid var(--borde); background: var(--fondo); font-size: .85rem; }
    }
    .con-boton { position: relative; input { padding-inline-end: 2.6rem !important; } .btn-icono { position: absolute; inset-inline-end: .3rem; inset-block-start: 50%; translate: 0 -50%; } }
    .con-unidad { display: flex; align-items: center; gap: .4rem; input { width: 100%; } small { color: var(--suave); min-width: 3ch; } }
    .dlg-acciones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: .3rem; }

    /* Interruptor tipo iOS hecho con checkbox + :checked */
    .interruptor {
        display: flex; align-items: center; gap: .6rem; cursor: pointer; font-size: .9rem; font-weight: 500; align-self: end;
        input { position: absolute; opacity: 0; }
        span { width: 40px; height: 24px; border-radius: 99px; background: var(--superficie-2); border: 1px solid var(--borde); position: relative; transition: background .2s; flex-shrink: 0; }
        span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; aspect-ratio: 1; border-radius: 50%; background: white; box-shadow: var(--sombra); transition: translate .2s var(--ease); }
        &:has(input:checked) span { background: var(--acento); }
        &:has(input:checked) span::after { translate: 16px 0; }
        &:has(input:focus-visible) span { outline: 2px solid var(--acento); outline-offset: 2px; }
    }

    /* Control segmentado (radios) — el texto del campo cambia con :has() */
    .segmentado {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: .25rem;
        padding: .25rem; border: 0; border-radius: 12px; background: var(--superficie-2);
        input { position: absolute; opacity: 0; }
        span { display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .5rem; border-radius: 9px; cursor: pointer; font-weight: 500; font-size: .88rem; color: var(--suave); }
        label:has(input:checked) span { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); }
        label:has(input:focus-visible) span { outline: 2px solid var(--acento); }
    }
    .formulario:has([name="tipo"][value="entrada"]:checked) .si-tipo:not([data-tipo="entrada"]),
    .formulario:has([name="tipo"][value="salida"]:checked)  .si-tipo:not([data-tipo="salida"]),
    .formulario:has([name="tipo"][value="ajuste"]:checked)  .si-tipo:not([data-tipo="ajuste"]) { display: none; }

    /* ---------- dialog nativo con animación de entrada/salida ---------- */
    dialog {
        margin: auto;   /* el reset (* { margin: 0 }) quitaba el centrado nativo del dialog */
        width: min(560px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto;
        padding: 0; border: 0; border-radius: 20px;
        background: var(--superficie); color: var(--texto);
        box-shadow: 0 40px 90px -20px oklch(0% 0 0 / .5);
        opacity: 0; translate: 0 18px; scale: .97;
        transition: opacity .25s var(--ease), translate .25s var(--ease), scale .25s var(--ease),
                    overlay .25s allow-discrete, display .25s allow-discrete;
        &[open] { opacity: 1; translate: 0 0; scale: 1; }
        &.dialog-ancho { width: min(880px, calc(100vw - 2rem)); }
        &::backdrop {
            background: oklch(15% .03 275 / 0); backdrop-filter: blur(0);
            transition: background .25s, backdrop-filter .25s, overlay .25s allow-discrete, display .25s allow-discrete;
        }
        &[open]::backdrop { background: oklch(15% .03 275 / .45); backdrop-filter: blur(4px); }
    }
    @starting-style {
        dialog[open] { opacity: 0; translate: 0 18px; scale: .97; }
        dialog[open]::backdrop { background: oklch(15% .03 275 / 0); backdrop-filter: blur(0); }
    }
    body:has(dialog[open]) { overflow: hidden; }

    /* ---------- toast con Popover API ---------- */
    #toast {
        inset: auto 1rem 1rem auto; margin: 0; max-width: min(420px, calc(100vw - 2rem));
        padding: .8rem 1.1rem; border: 0; border-radius: 12px;
        background: var(--texto); color: var(--superficie); font-weight: 500; font-size: .9rem;
        box-shadow: 0 20px 40px -12px oklch(0% 0 0 / .4);
        opacity: 0; translate: 0 12px;
        transition: opacity .25s var(--ease), translate .25s var(--ease), overlay .25s allow-discrete, display .25s allow-discrete;
        &:popover-open { opacity: 1; translate: 0 0; }
        &[data-tipo="error"] { background: var(--alta); color: white; }
    }
    @starting-style { #toast:popover-open { opacity: 0; translate: 0 12px; } }

    /* ---------- alertas / advertencias ---------- */
    .alertas { display: grid; gap: .5rem; align-content: start; }
    .desplazable { max-height: 520px; overflow-y: auto; scrollbar-width: thin; padding-inline-end: .2rem; }
    .alerta {
        --c: var(--acento);
        display: grid; grid-template-columns: auto 1fr auto; gap: .65rem; align-items: center;
        padding: .65rem .75rem; border-radius: 12px; font-size: .85rem;
        background: color-mix(in oklch, var(--c) 9%, transparent);
        border: 1px solid color-mix(in oklch, var(--c) 24%, transparent);
        > svg { color: var(--c); }
        &.peligro { --c: var(--alta); }
        &.aviso   { --c: var(--media); }
        &.info    { --c: var(--acento); }
        &:not(:has(a)) { grid-template-columns: auto 1fr; }
    }

    /* ---------- vacío ---------- */
    .vacio {
        display: grid; place-items: center; gap: .5rem; text-align: center;
        padding: 2rem 1rem; color: var(--suave); font-size: .9rem;
        border: 1.5px dashed var(--borde); border-radius: 14px;
        &.grande { padding: 4rem 1rem; h2 { color: var(--texto); } }
    }

    /* ---------- medidor de stock ---------- */
    .medidor { min-width: 110px; }
    .medidor-pista {
        position: relative; display: block; height: 7px; border-radius: 99px; background: var(--superficie-2);
        i { display: block; height: 100%; width: calc(min(var(--p), 1) * 100%); border-radius: inherit; background: var(--c); animation: crecer .9s var(--ease) both; }
        b { position: absolute; inset-block: -3px; left: calc(var(--m) * 100%); width: 2px; border-radius: 2px; background: var(--texto); opacity: .45; }
    }

    /* =========================== GRÁFICAS CSS =========================== */

    /* Columnas verticales: cada barra mide calc(var(--v) * 100%) */
    .g-columnas {
        --etq: 1.4rem;
        display: grid;
        grid-template-columns: repeat(var(--total), minmax(0, 1fr));
        gap: clamp(.15rem, 1.2cqi, .55rem);
        height: 220px;
        padding-top: 1.6rem;
        background: repeating-linear-gradient(to top, var(--borde) 0 1px, transparent 1px 25%) top / 100% calc(100% - var(--etq)) no-repeat content-box;
    }
    .g-col {
        display: grid; grid-template-rows: 1fr var(--etq); height: 100%; min-width: 0;
        i {
            position: relative; align-self: end;
            height: max(3px, calc(var(--v) * 100%));
            border-radius: 7px 7px 3px 3px;
            background: linear-gradient(to top, color-mix(in oklch, var(--coral) 70%, transparent), color-mix(in oklch, var(--rosa) 80%, transparent));
            transform-origin: bottom;
            animation: crecer-y .7s var(--ease) both;
            animation-delay: calc(var(--i) * 35ms);
            transition: filter .2s;
        }
        &.destacar i { background: linear-gradient(to top, var(--rosa), var(--lavanda)); }
        small { text-align: center; font-size: .7rem; color: var(--suave); align-self: end; overflow: hidden; }
        .g-valor {
            position: absolute; inset-inline: 50% auto; bottom: calc(100% + 6px); translate: -50% 4px;
            padding: .2rem .45rem; border-radius: 6px; white-space: nowrap;
            background: var(--texto); color: var(--superficie); font-size: .7rem; font-weight: 600;
            opacity: 0; pointer-events: none; transition: opacity .15s, translate .15s;
        }
        &:hover i { filter: brightness(1.15); }
        &:hover .g-valor { opacity: 1; translate: -50% 0; }
    }
    @container card (width < 460px) { .g-col:nth-child(even) small { visibility: hidden; } }
    @keyframes crecer-y { from { scale: 1 0; } }
    @keyframes crecer { from { width: 0; } }

    /* Barras horizontales con marca de mínimo */
    .g-barras {
        display: grid; gap: .7rem;
        li { display: grid; grid-template-columns: minmax(6rem, 10rem) 1fr auto; align-items: center; gap: .75rem; font-size: .85rem; }
        .g-etq { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .g-pista { position: relative; height: 10px; border-radius: 99px; background: var(--superficie-2); }
        i { display: block; height: 100%; border-radius: inherit; width: calc(var(--p) * 100%); background: var(--c); animation: crecer 1s var(--ease) both; animation-delay: calc(var(--i) * 60ms); }
        .g-marca { position: absolute; inset-block: -4px; left: calc(var(--m) * 100%); width: 2px; border-radius: 2px; background: var(--texto); opacity: .5; }
        .g-txt { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 4ch; text-align: end; small { font-weight: 400; color: var(--suave); } }
        @container card (width < 380px) { li { grid-template-columns: 1fr auto; } .g-pista { grid-column: 1 / -1; grid-row: 2; } }
    }

    /* Dona con conic-gradient y revelado animado (@property --rev) */
    .g-dona-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.25rem; }
    .g-dona {
        position: relative; display: grid; place-items: center;
        width: 150px; aspect-ratio: 1; border-radius: 50%;
        mask: conic-gradient(#000 calc((100 - var(--rev)) * 1%), transparent 0);
        animation: revelar 1.1s var(--ease) both;
        &::before { content: ""; position: absolute; inset: 18%; border-radius: 50%; background: var(--superficie); }
        span { position: relative; display: grid; text-align: center; line-height: 1.1; }
        strong { font-size: 1.7rem; font-weight: 800; }
        small { font-size: .72rem; color: var(--suave); }
    }
    @keyframes revelar { from { --rev: 100; } to { --rev: 0; } }
    .g-leyenda {
        display: grid; gap: .45rem; font-size: .85rem; min-width: 140px;
        li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem; }
        i { width: 10px; aspect-ratio: 1; border-radius: 3px; background: var(--c); }
        b { font-variant-numeric: tabular-nums; }
    }

    /* Barra apilada */
    .g-apilada {
        display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--superficie-2);
        i { width: calc(var(--p) * 100%); background: var(--c); animation: crecer 1s var(--ease) both; }
    }

    /* Anillo de progreso (conic-gradient + @property --pct) */
    .anillo {
        --c: var(--acento);
        display: grid; place-items: center; flex-shrink: 0;
        width: min(130px, 100%); aspect-ratio: 1; border-radius: 50%;
        background: conic-gradient(var(--c) calc(min(var(--pct), 100) * 1%), var(--superficie-2) 0);
        animation: llenar 1.3s var(--ease) both;
        &::before { content: ""; grid-area: 1 / 1; width: 78%; aspect-ratio: 1; border-radius: 50%; background: var(--superficie); }
        span { grid-area: 1 / 1; position: relative; display: grid; text-align: center; line-height: 1.15; }
        strong { font-size: 1.5rem; font-weight: 800; }
        small { font-size: .7rem; color: var(--suave); }
    }
    @keyframes llenar { from { --pct: 0; } }

    /* ---------- campana de notificaciones ---------- */
    .campana {
        position: relative;
        &.con-avisos svg { transform-origin: 50% 2px; animation: campanear 1.4s var(--ease) .6s 1; }
    }
    @keyframes campanear {
        0%, 100% { rotate: 0deg; } 15% { rotate: 16deg; } 30% { rotate: -14deg; } 45% { rotate: 10deg; } 60% { rotate: -6deg; } 75% { rotate: 3deg; }
    }
    .campana .punto-notif {   /* .campana gana a ".btn-icono span { display: none }" */
        position: absolute; top: -5px; right: -5px;
        display: grid; place-items: center; min-width: 19px; height: 19px; padding-inline: 5px;
        border-radius: 99px; border: 2px solid var(--fondo);
        background: linear-gradient(135deg, var(--alta), var(--rosa)); color: white;
        font-size: .64rem; font-weight: 800; line-height: 1;
        &::after {   /* halo que late para llamar la atención */
            content: ""; position: absolute; inset: -2px; border-radius: inherit;
            border: 2px solid var(--rosa); animation: latido 2s ease-out infinite; pointer-events: none;
        }
    }
    @keyframes latido { from { scale: 1; opacity: .7; } to { scale: 1.9; opacity: 0; } }

    /* Panel: popover nativo en la capa superior; con CSS Anchor Positioning se ancla a la campana */
    .panel-notif {
        position: fixed; inset: 4.6rem clamp(.75rem, 3vw, 2.25rem) auto auto; margin: 0;
        width: min(400px, calc(100vw - 1.5rem)); max-height: min(72dvh, 600px);
        padding: 0; overflow: hidden auto; overscroll-behavior: contain;
        border: 1px solid var(--borde); border-radius: 18px;
        background: var(--superficie); color: var(--texto);
        box-shadow: 0 30px 70px -20px oklch(30% .05 20 / .35);
        opacity: 0; translate: 0 -8px; scale: .98; transform-origin: top right;
        transition: opacity .2s var(--ease), translate .2s var(--ease), scale .2s var(--ease), overlay .2s allow-discrete, display .2s allow-discrete;
        &:popover-open { opacity: 1; translate: 0 0; scale: 1; }

        header {
            position: sticky; top: 0; z-index: 1;
            display: flex; align-items: center; justify-content: space-between; gap: .5rem;
            padding: .9rem 1rem; border-bottom: 1px solid var(--borde);
            background: color-mix(in oklch, var(--superficie) 88%, transparent); backdrop-filter: blur(10px);
            h3 { font-family: var(--fuente-titulo); font-size: 1.3rem; }
        }
        /* :has() → si no hay nada sin leer, se oculta "Marcar todas" */
        &:not(:has(.no-leida)) [data-leer-todas] { display: none; }
    }
    @starting-style { .panel-notif:popover-open { opacity: 0; translate: 0 -8px; scale: .98; } }
    @media (width >= 640px) {
        @supports (anchor-name: --campana) {
            #btnNotif { anchor-name: --campana; }
            .panel-notif { position-anchor: --campana; inset: auto; top: anchor(bottom); right: anchor(right); margin-top: .6rem; position-try-fallbacks: flip-inline; }
        }
    }
    /* En celular: hoja inferior a todo lo ancho */
    @media (width < 640px) {
        .panel-notif {
            inset: auto .5rem .5rem .5rem; width: auto; max-height: 78dvh;
            border-radius: 20px; transform-origin: bottom center; translate: 0 24px;
        }
        @starting-style { .panel-notif:popover-open { translate: 0 24px; } }
        .panel-notif::backdrop { background: oklch(20% .03 20 / .35); }
    }

    .notif-lista { display: grid; padding: .35rem .5rem .6rem; }
    .notif-seccion {
        display: flex; align-items: center; gap: .4rem; padding: .7rem .5rem .35rem;
        font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--suave);
        em { font-style: normal; padding: 0 .4rem; border-radius: 99px; background: var(--superficie-2); }
    }
    .notif-item {
        display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: start;
        padding: .65rem .55rem; border-radius: 12px; text-decoration: none; font-size: .85rem;
        transition: background .15s;
        &:hover { background: var(--superficie-2); }
        &.no-leida { background: color-mix(in oklch, var(--c) 7%, transparent); }
        &.no-leida:hover { background: color-mix(in oklch, var(--c) 12%, transparent); }
        &:not(.no-leida) .notif-txt { opacity: .7; }
    }
    .notif-ico {
        display: grid; place-items: center; width: 32px; aspect-ratio: 1; border-radius: 10px;
        background: color-mix(in oklch, var(--c) 15%, transparent); color: var(--c);
    }
    .notif-txt {
        display: grid; gap: .1rem; line-height: 1.35; min-width: 0;
        small { color: var(--suave); font-size: .78rem; }
        time { color: var(--suave); font-size: .72rem; margin-top: .15rem; }
    }
    .notif-punto { width: 8px; aspect-ratio: 1; border-radius: 50%; margin-top: .45rem; background: var(--rosa); opacity: 0; }
    .notif-item.no-leida .notif-punto { opacity: 1; }
    .notif-vacio {
        display: grid; justify-items: center; gap: .3rem; padding: 2.2rem 1rem; text-align: center; color: var(--suave);
        svg { color: var(--baja); } b { color: var(--texto); }
    }

    /* ---------- app instalable (PWA) ---------- */
    .nav-instalar {
        display: none; align-items: center; gap: .6rem;
        padding: .6rem .75rem; border-radius: 12px; cursor: pointer; font-weight: 600; font-size: .88rem;
        border: 1px dashed color-mix(in oklch, var(--rosa) 50%, transparent);
        background: color-mix(in oklch, var(--rosa) 8%, transparent); color: color-mix(in oklch, var(--rosa) 75%, var(--texto));
        &:hover { background: color-mix(in oklch, var(--rosa) 14%, transparent); }
    }
    /* Solo aparece si el navegador permite instalar (o en iPhone), nunca dentro de la app ya instalada */
    :root:is(.puede-instalar, .ios-instalable) .nav-instalar { display: flex; }
    @media (display-mode: standalone) { .nav-instalar, [data-boton-instalar] { display: none !important; } }

    /* Dentro de la app instalada: respeta la muesca / barra de estado del celular */
    @media (display-mode: standalone) and (width < 960px) {
        .nav { padding-top: max(.5rem, env(safe-area-inset-top)); }
        .contenido { padding-bottom: max(2.5rem, env(safe-area-inset-bottom)); }
    }

    .notif-pie {
        position: sticky; bottom: 0; display: flex; align-items: center; gap: .75rem;
        padding: .8rem 1rem; border-top: 1px solid var(--borde);
        background: color-mix(in oklch, var(--superficie) 92%, transparent); backdrop-filter: blur(10px);
        font-size: .8rem; color: var(--suave);
        span { display: flex; gap: .5rem; align-items: flex-start; flex: 1; }
        svg { flex-shrink: 0; margin-top: .1rem; color: var(--rosa); }
    }

    .ajustes-dispositivo { display: grid; gap: .75rem; }
    .ajuste {
        display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center;
        padding: 1rem; border-radius: 14px; border: 1px solid var(--borde); background: color-mix(in oklch, var(--superficie-2) 40%, transparent);
        > div:nth-child(2) { display: grid; gap: .2rem; min-width: 0; }
        small { color: var(--suave); font-size: .82rem; }
        small.positivo { color: var(--baja); font-weight: 600; }
        @container card (width < 560px) { grid-template-columns: auto 1fr; > :last-child { grid-column: 1 / -1; } }
    }
    .ajuste-ico {
        display: grid; place-items: center; width: 42px; aspect-ratio: 1; border-radius: 12px;
        background: color-mix(in oklch, var(--c) 14%, transparent); color: var(--c);
    }
    .lista-dispositivos { display: grid; gap: .15rem; margin-top: .35rem; font-size: .8rem; li::before { content: "📱 "; } li.suave::before { content: ""; } }

    .dlg-instalar .pasos-instalar { display: grid; gap: .8rem; padding: 0; list-style: none; }
    .pasos-instalar li { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; font-size: .92rem; line-height: 1.45; }
    .pasos-instalar svg { display: inline; vertical-align: -3px; color: var(--acento); }
    .paso-num {
        display: grid; place-items: center; width: 28px; aspect-ratio: 1; border-radius: 50%;
        background: linear-gradient(135deg, var(--rosa), var(--lavanda)); color: white; font-weight: 700; font-size: .85rem;
    }

    /* ---------- menú en móvil (va al final de la capa para ganar la cascada) ---------- */
    @media (width < 960px) {
        .marca { border: 0; padding: 0; }
        .marca .logo-claro, .marca .logo-oscuro { display: none !important; }
        .marca .flores { display: block; width: 42px; }
        .nav-usuario .info { display: none; }
        .nav-usuario { margin-inline-start: auto; padding: .25rem; background: transparent; }
        .nav-link { padding: .5rem .7rem; font-size: .85rem; }
        .nav-link .badge { margin-inline-start: .2rem; }
    }
    @container contenido (width < 480px) {
        .kpi { padding: .85rem; }
        .kpi strong { font-size: 1.25rem; }
        .kpi-ico { width: 30px; margin-bottom: .3rem; }
    }

    /* ---------- View Transitions ---------- */
    ::view-transition-group(*) { animation-duration: .35s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
}

/* ============================================================ páginas */
@layer paginas {

    /* ---------- login ---------- */
    .pagina-login { background: var(--fondo); }
    .login {
        display: grid; grid-template-columns: 1.1fr 1fr; min-height: 100dvh;
        @media (width < 860px) { grid-template-columns: 1fr; }
    }
    .login-arte {
        position: relative; overflow: hidden; isolation: isolate;
        display: grid; align-content: space-between; padding: clamp(1.5rem, 4vw, 3.5rem);
        color: var(--cafe);
        background:
            conic-gradient(from var(--ang) at 30% 70%, color-mix(in oklch, var(--rosa) 22%, transparent), color-mix(in oklch, var(--coral) 22%, transparent), color-mix(in oklch, var(--lavanda) 20%, transparent), color-mix(in oklch, var(--rosa) 22%, transparent)),
            oklch(97.5% .012 55);
        animation: girar 24s linear infinite;
        @media (width < 860px) { min-height: 0; gap: 1rem; .login-mensaje { display: none; } }
    }
    @keyframes girar { to { --ang: 360deg; } }
    .login-marca img { width: min(440px, 90%); height: auto; filter: drop-shadow(0 12px 30px oklch(40% .1 20 / .12)); }
    .login-mensaje { max-width: 32ch; h2 { font-family: var(--fuente-titulo); font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem); font-weight: 700; } p { opacity: .8; margin-top: .5rem; } }
    .orbe { position: absolute; border-radius: 50%; filter: blur(50px); opacity: .55; z-index: -1; animation: flotar 12s ease-in-out infinite alternate; }
    .o1 { width: 340px; aspect-ratio: 1; background: oklch(80% .1 358); top: -90px; right: -70px; }
    .o2 { width: 280px; aspect-ratio: 1; background: oklch(78% .1 325); bottom: -70px; left: 8%; animation-delay: -4s; }
    .o3 { width: 200px; aspect-ratio: 1; background: oklch(85% .08 40); top: 45%; right: 18%; animation-delay: -8s; }
    @keyframes flotar { to { translate: 40px -30px; scale: 1.15; } }
    .login-form { display: grid; place-items: center; padding: 2rem 1rem; background: var(--superficie); }
    .tarjeta-login {
        width: min(400px, 100%); display: grid; gap: 1.1rem;
        header h1 { font-size: 1.8rem; font-weight: 800; letter-spacing: -.02em; }
        header p:not(.separador-oro) { color: var(--suave); }
    }

    /* ---------- panel: puntos de venta ---------- */
    .puntos-resumen { display: grid; gap: .75rem; }
    .punto-fila {
        display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 1rem;
        padding: .75rem; border-radius: 14px; text-decoration: none;
        border: 1px solid var(--borde); transition: background .2s, border-color .2s;
        &:hover { background: color-mix(in oklch, var(--c) 6%, transparent); border-color: color-mix(in oklch, var(--c) 40%, transparent); }
        .anillo { width: 92px; strong { font-size: 1.1rem; } }
        h3 { font-size: 1rem; }
    }
    .punto-info { display: grid; gap: .4rem; min-width: 0; p { font-size: .85rem; } }

    /* ---------- bolsas ---------- */
    .bolsa-card {
        border-top: 4px solid var(--c);
        header { display: flex; align-items: flex-start; gap: .75rem; > div { flex: 1; min-width: 0; } h2 { font-size: 1.05rem; } p { font-size: .82rem; } }
    }
    .bolsa-ico {
        display: grid; place-items: center; flex-shrink: 0; width: 40px; aspect-ratio: 1; border-radius: 12px;
        background: color-mix(in oklch, var(--c) 16%, transparent); color: var(--c);
    }
    .bolsa-numeros {
        display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
        > div { display: grid; padding: .6rem; border-radius: 12px; background: var(--superficie-2); text-align: center; }
        strong { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
        small { font-size: .72rem; color: var(--suave); }
        > div:first-child strong { color: var(--c); }
    }
    .receta {
        font-size: .85rem;
        summary { cursor: pointer; color: var(--suave); font-weight: 500; }
        ul { display: grid; gap: .3rem; margin-top: .5rem; }
        li { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .3rem; border-bottom: 1px dashed var(--borde); }
        &::details-content { transition: height .3s var(--ease), content-visibility .3s allow-discrete; height: 0; overflow: clip; }
        &[open]::details-content { height: auto; }
    }
    :root { interpolate-size: allow-keywords; } /* permite animar a height:auto */
    .bolsa-acciones { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
    .receta-editor {
        border: 1px solid var(--borde); border-radius: 14px; padding: 1rem;
        legend { font-weight: 600; font-size: .9rem; padding-inline: .4rem; }
    }
    .receta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: .6rem; margin-top: .6rem; }
    .receta-item {
        display: grid; gap: .3rem; padding: .6rem; border-radius: 10px; background: var(--superficie-2); font-size: .85rem;
        input { padding: .4rem .55rem; border-radius: 8px; border: 1px solid var(--borde); background: var(--superficie); }
        &.con-cantidad { outline: 1.5px solid color-mix(in oklch, var(--acento) 50%, transparent); background: var(--acento-suave); }
    }

    /* ---------- inventario: pestañas y filtros con radios + :has() ---------- */
    .panel-pestanas { gap: 0; padding: 0; overflow: hidden; }

    .pestanas {
        display: flex; gap: .25rem; padding: .5rem .75rem 0; overflow-x: auto;
        border-bottom: 1px solid var(--borde); background: color-mix(in oklch, var(--superficie-2) 55%, transparent);
        label {
            --activo: 0;
            position: relative; display: inline-flex; align-items: center; gap: .5rem;
            padding: .75rem 1.1rem; cursor: pointer; user-select: none; white-space: nowrap;
            font-weight: 600; font-size: .92rem; border-radius: 12px 12px 0 0;
            color: color-mix(in oklch, var(--texto) calc(60% + var(--activo) * 40%), transparent);
            background: color-mix(in oklch, var(--superficie) calc(var(--activo) * 100%), transparent);
            border: 1px solid color-mix(in oklch, var(--borde) calc(var(--activo) * 100%), transparent);
            border-bottom: 0; margin-bottom: -1px;
            transition: background .2s, color .2s;
            em { font-style: normal; font-size: .72rem; padding: .05rem .45rem; border-radius: 99px; background: var(--superficie-2); }
            &:hover { color: var(--texto); }
            &::after {   /* subrayado rosa de la pestaña activa */
                content: ""; position: absolute; inset: auto 1rem -1px; height: 3px; border-radius: 3px 3px 0 0;
                background: linear-gradient(90deg, var(--rosa), var(--lavanda));
                scale: var(--activo) 1; transition: scale .25s var(--ease);
            }
        }
    }
    .pestana-panel { display: none; gap: 1rem; padding: 1.1rem 1.25rem 1.25rem; min-width: 0; }

    /* Pestañas GENÉRICAS: el radio n.º N (de clase .radio-pestana) activa la etiqueta N y el panel N.
       :nth-child(N of selector) cuenta solo los elementos que cumplen el selector. */
    .vista-pestanas:has(.radio-pestana:nth-child(1 of .radio-pestana):checked) .pestana-panel:nth-child(1 of .pestana-panel),
    .vista-pestanas:has(.radio-pestana:nth-child(2 of .radio-pestana):checked) .pestana-panel:nth-child(2 of .pestana-panel),
    .vista-pestanas:has(.radio-pestana:nth-child(3 of .radio-pestana):checked) .pestana-panel:nth-child(3 of .pestana-panel),
    .vista-pestanas:has(.radio-pestana:nth-child(4 of .radio-pestana):checked) .pestana-panel:nth-child(4 of .pestana-panel) {
        display: grid; animation: aparecer .25s var(--ease);
    }
    .vista-pestanas:has(.radio-pestana:nth-child(1 of .radio-pestana):checked) .pestanas label:nth-child(1 of label),
    .vista-pestanas:has(.radio-pestana:nth-child(2 of .radio-pestana):checked) .pestanas label:nth-child(2 of label),
    .vista-pestanas:has(.radio-pestana:nth-child(3 of .radio-pestana):checked) .pestanas label:nth-child(3 of label),
    .vista-pestanas:has(.radio-pestana:nth-child(4 of .radio-pestana):checked) .pestanas label:nth-child(4 of label) { --activo: 1; }
    .vista-pestanas:has(.radio-pestana:nth-child(1 of .radio-pestana):focus-visible) .pestanas label:nth-child(1 of label),
    .vista-pestanas:has(.radio-pestana:nth-child(2 of .radio-pestana):focus-visible) .pestanas label:nth-child(2 of label),
    .vista-pestanas:has(.radio-pestana:nth-child(3 of .radio-pestana):focus-visible) .pestanas label:nth-child(3 of label),
    .vista-pestanas:has(.radio-pestana:nth-child(4 of .radio-pestana):focus-visible) .pestanas label:nth-child(4 of label) { outline: 2px solid var(--acento); outline-offset: -2px; }
    .vista-pestanas { display: grid; gap: 1.25rem; }
    @keyframes aparecer { from { opacity: 0; translate: 0 6px; } }

    /* Filtro por estado de stock (una sola tabla) */
    .vista-inventario:has(#fe-agotado:checked) #tablaExistencias tbody tr:not([data-estado="agotado"]),
    .vista-inventario:has(#fe-bajo:checked)    #tablaExistencias tbody tr:not([data-estado="bajo"]),
    .vista-inventario:has(#fe-ok:checked)      #tablaExistencias tbody tr:not([data-estado="ok"]) { display: none; }

    /* Filtro por tipo de movimiento */
    .vista-inventario:has(#fm-entrada:checked)     #tablaMovimientos tbody tr:not([data-tipo="entrada"]),
    .vista-inventario:has(#fm-salida:checked)      #tablaMovimientos tbody tr:not([data-tipo="salida"]),
    .vista-inventario:has(#fm-ajuste:checked)      #tablaMovimientos tbody tr:not([data-tipo="ajuste"]),
    .vista-inventario:has(#fm-preparacion:checked) #tablaMovimientos tbody tr:not([data-tipo="preparacion"]) { display: none; }

    /* Bolsas: filtro de tarjetas y del historial */
    .vista-bolsas:has(#fb-bajo:checked) #tarjetasBolsas .bolsa-card:not([data-estado="bajo"]),
    .vista-bolsas:has(#fb-ok:checked)   #tarjetasBolsas .bolsa-card:not([data-estado="ok"]) { display: none; }
    .vista-bolsas:has(#fh-preparacion:checked) #tablaHistorialBolsas tbody tr:not([data-tipo="preparacion"]),
    .vista-bolsas:has(#fh-salida:checked)      #tablaHistorialBolsas tbody tr:not([data-tipo="salida"]),
    .vista-bolsas:has(#fh-devolucion:checked)  #tablaHistorialBolsas tbody tr:not([data-tipo="devolucion"]) { display: none; }
    .sin-tarjetas { display: none; }
    .vista-bolsas:has(#fb-bajo:checked) #tarjetasBolsas:not(:has(.bolsa-card[data-estado="bajo"])) + .sin-tarjetas,
    .vista-bolsas:has(#fb-ok:checked)   #tarjetasBolsas:not(:has(.bolsa-card[data-estado="ok"])) + .sin-tarjetas { display: grid; }
    .vista-bolsas .grid-cards .bolsa-card { box-shadow: none; }

    /* Chip activo */
    .vista-inventario:has(#fe-todos:checked) [data-filtro="fe-todos"],
    .vista-inventario:has(#fe-agotado:checked) [data-filtro="fe-agotado"],
    .vista-inventario:has(#fe-bajo:checked) [data-filtro="fe-bajo"],
    .vista-inventario:has(#fe-ok:checked) [data-filtro="fe-ok"],
    .vista-inventario:has(#fm-todos:checked) [data-filtro="fm-todos"],
    .vista-inventario:has(#fm-entrada:checked) [data-filtro="fm-entrada"],
    .vista-inventario:has(#fm-salida:checked) [data-filtro="fm-salida"],
    .vista-inventario:has(#fm-ajuste:checked) [data-filtro="fm-ajuste"],
    .vista-inventario:has(#fm-preparacion:checked) [data-filtro="fm-preparacion"],
    .vista-bolsas:has(#fb-todos:checked) [data-filtro="fb-todos"],
    .vista-bolsas:has(#fb-bajo:checked) [data-filtro="fb-bajo"],
    .vista-bolsas:has(#fb-ok:checked) [data-filtro="fb-ok"],
    .vista-bolsas:has(#fh-todos:checked) [data-filtro="fh-todos"],
    .vista-bolsas:has(#fh-preparacion:checked) [data-filtro="fh-preparacion"],
    .vista-bolsas:has(#fh-salida:checked) [data-filtro="fh-salida"],
    .vista-bolsas:has(#fh-devolucion:checked) [data-filtro="fh-devolucion"] { --activo: 1; }

    .barra-filtros {
        display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
        .buscador { flex: 0 1 320px; }
    }
    .chips-filtro {
        display: flex; flex-wrap: wrap; gap: .4rem;
        label {
            --activo: 0; --c: var(--suave);
            display: inline-flex; align-items: center; gap: .45rem;
            padding: .42rem .85rem; border-radius: 99px; cursor: pointer; user-select: none;
            font-size: .86rem; font-weight: 500;
            border: 1px solid var(--borde);
            background: color-mix(in oklch, var(--texto) calc(var(--activo) * 100%), var(--superficie));
            color: color-mix(in oklch, var(--superficie) calc(var(--activo) * 100%), var(--texto));
            transition: background .2s, color .2s;
        }
        label.chip-peligro { --c: var(--alta); }
        label.chip-aviso   { --c: var(--media); }
        label.chip-ok      { --c: var(--baja); }
        label.chip-info    { --c: var(--acento); }
        i { width: 8px; aspect-ratio: 1; border-radius: 50%; background: var(--c); }
        em { font-style: normal; font-size: .75rem; opacity: .7; }
    }

    /* Mensaje cuando el filtro o la búsqueda no dejan filas (lo activa app.js) */
    .sin-resultados { display: none; margin: .75rem; }
    .tabla-wrap.vacia .sin-resultados { display: grid; }
    .tabla-wrap.vacia table { display: none; }

    /* ---------- puntos ---------- */
    .punto-card {
        border-top: 4px solid var(--c);
        header { display: flex; justify-content: space-between; gap: .5rem; h2 { font-size: 1.1rem; } }
        footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; small { display: inline-flex; gap: .3rem; align-items: center; } }
    }
    .punto-cuerpo {
        display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center;
        .anillo { width: 110px; }
        @container card (width < 300px) { grid-template-columns: 1fr; justify-items: center; }
    }
    .datos {
        display: grid; grid-template-columns: 1fr 1fr; gap: .6rem;
        dt { font-size: .72rem; color: var(--suave); }
        dd { font-weight: 700; font-variant-numeric: tabular-nums; }
    }
    .tarjeta-agregar {
        place-content: center; justify-items: center; text-align: center; min-height: 260px; cursor: pointer;
        border: 2px dashed var(--borde); background: transparent; box-shadow: none; color: var(--suave);
        b { color: var(--texto); }
        &:hover { border-color: var(--acento); color: var(--acento); background: var(--acento-suave); }
    }
    .stock-punto { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: .75rem; }
    .stock-item {
        display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; align-items: center;
        padding: .8rem; border-radius: 14px; border: 1px solid var(--borde);
        div { display: grid; line-height: 1.25; } small { color: var(--suave); font-size: .78rem; }
        strong { font-size: 1.6rem; font-weight: 800; color: var(--c); font-variant-numeric: tabular-nums; }
        &.bajo { border-color: color-mix(in oklch, var(--alta) 40%, transparent); background: color-mix(in oklch, var(--alta) 5%, transparent); strong { color: var(--alta); } }
    }
    .linea-tiempo {
        display: grid; gap: .1rem;
        li { position: relative; padding: .45rem 0 .45rem 1.4rem; font-size: .88rem; display: grid; }
        li::before { content: ""; position: absolute; left: .3rem; top: .8rem; width: 9px; aspect-ratio: 1; border-radius: 50%; background: var(--baja); }
        li:not(:last-child)::after { content: ""; position: absolute; left: calc(.3rem + 4px); top: 1.5rem; bottom: -.3rem; width: 1px; background: var(--borde); }
        li.devolucion::before { background: var(--media); }
        small { color: var(--suave); font-size: .76rem; }
    }
    .lista-simple {
        display: grid;
        li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .6rem 0; border-top: 1px solid var(--borde); }
        li:first-child { border-top: 0; }
        div { display: grid; min-width: 0; } small { color: var(--suave); font-size: .76rem; }
    }

    /* ---------- ventas ---------- */
    .productos-venta { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: .75rem; }
    .producto-venta {
        display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem;
        padding: .75rem; border-radius: 14px; border: 1.5px solid var(--borde); transition: border-color .2s, background .2s;
        .pv-info { display: grid; line-height: 1.3; small { color: var(--suave); font-size: .78rem; } }
        &.agotado { opacity: .5; }
        &.con-cantidad { border-color: var(--c); background: color-mix(in oklch, var(--c) 7%, transparent); }
        /* :has() → resalta la tarjeta mientras se edita su cantidad */
        &:has(input:focus-visible) { border-color: var(--acento); }
    }
    .contador-cantidad {
        display: flex; align-items: center; gap: .15rem; padding: .2rem; border-radius: 11px; background: var(--superficie-2);
        input { width: 3.2rem; text-align: center; border: 0; background: transparent; font-weight: 700; font-size: 1rem; -moz-appearance: textfield; }
        input::-webkit-inner-spin-button { appearance: none; }
        .btn-icono { font-size: 1.1rem; font-weight: 700; background: var(--superficie); }
    }
    .venta-pie {
        display: flex; flex-wrap: wrap; align-items: end; gap: 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--borde);
        .campo { flex: 1 1 220px; }
    }
    .total-venta {
        display: grid; text-align: end; margin-inline-start: auto;
        small { color: var(--suave); font-size: .75rem; }
        output { font-size: 1.8rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
    }
    .resumen-linea {
        display: flex; flex-wrap: wrap; gap: 1.5rem;
        span { display: grid; } small { color: var(--suave); font-size: .75rem; } b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
    }

    /* ---------- cotizaciones: líneas alineadas con subgrid ---------- */
    .lineas {
        display: grid;
        grid-template-columns: minmax(120px, 1.2fr) minmax(130px, 1.6fr) 80px 105px 95px 32px;
        gap: .5rem; padding: 1rem; border-radius: 14px; border: 1px solid var(--borde);
        :is(input, select) { width: 100%; padding: .5rem .6rem; border-radius: 9px; border: 1px solid var(--borde); background: var(--fondo); min-width: 0; }
        output { font-weight: 600; font-variant-numeric: tabular-nums; }
    }
    .lineas-cab, .lineas-cuerpo, .linea, .lineas-pie { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; }
    .lineas-cab span { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); }
    .lineas-cuerpo { gap: .5rem; }
    .lineas-pie { display: flex; justify-content: space-between; align-items: center; margin-top: .25rem; }
    @container form (width < 680px) {
        .lineas { grid-template-columns: 1fr 1fr; }
        .lineas-cab { display: none; }
        .linea { padding: .6rem; border-radius: 10px; background: var(--superficie-2); grid-template-columns: 1fr 1fr auto; }
        .linea > :nth-child(1), .linea > :nth-child(2) { grid-column: 1 / -1; }
    }

    .barra-estado {
        display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
        padding: .75rem 1rem; border-radius: 14px; background: var(--superficie); border: 1px solid var(--borde);
    }
    .documento {
        width: min(860px, 100%); display: grid; gap: 1.5rem;
        padding: clamp(1.25rem, 4vw, 3rem);
        background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra);
    }
    .doc-cab {
        display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: 1.25rem;
        border-bottom: 2px solid var(--oro);
        .logo { display: grid; gap: .3rem; img { width: 200px; height: auto; } small { color: var(--suave); } }
    }
    .doc-folio { display: grid; justify-items: start; small { color: var(--suave); text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; } strong { font-size: 1.5rem; font-family: ui-monospace, monospace; } }
    .doc-datos {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem;
        dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); }
        dd { font-weight: 600; }
    }
    .documento { min-width: 0; overflow-wrap: anywhere; }
    .doc-tabla {
        th { background: transparent; border-bottom: 1px solid var(--texto); }
        @container contenido (width < 520px) {
            th, td { padding: .5rem .3rem; }
            th { white-space: normal; font-size: .62rem; }
        }
        tfoot td { border-top: 2px solid var(--texto); font-size: 1.05rem; }
        tfoot strong { font-size: 1.3rem; }
    }
    .doc-notas h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); margin-bottom: .3rem; }
    .doc-pie { font-size: .75rem; color: var(--suave); text-align: center; padding-top: 1rem; border-top: 1px dashed var(--borde); }

    /* ---------- usuarios ---------- */
    .permisos-editor { display: grid; gap: .75rem; padding: 1rem; border: 1px solid var(--borde); border-radius: 14px; }
    .permisos-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; h3 { font-size: 1rem; } }
    .permisos {
        display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: .75rem;
        fieldset { border: 0; padding: .75rem; border-radius: 12px; background: var(--superficie-2); display: grid; gap: .45rem; align-content: start; }
        legend { float: left; width: 100%; font-weight: 700; font-size: .82rem; margin-bottom: .3rem; }
    }
    .check {
        display: flex; gap: .55rem; align-items: flex-start; font-size: .84rem; cursor: pointer;
        input { margin-top: .2rem; width: 16px; height: 16px; flex-shrink: 0; }
        span { display: grid; line-height: 1.3; }
        small { font-size: .68rem; color: var(--suave); }
    }
    .aviso-admin { display: none; }
    /* :has() → si el rol es admin, se atenúan las casillas y aparece el aviso */
    .form-usuario:has(select[name="rol"] option[value="admin"]:checked) {
        .permisos { opacity: .35; pointer-events: none; filter: grayscale(1); }
        .aviso-admin { display: grid; }
        [data-plantilla] { display: none; }
    }

    /* ---------- perfil ---------- */
    .perfil-cab { display: flex; align-items: center; gap: 1rem; h2 { font-size: 1.3rem; } }
    .permisos-lectura {
        display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .75rem;
        h4 { font-size: .8rem; margin-bottom: .3rem; }
        li { display: flex; gap: .4rem; align-items: center; font-size: .85rem; color: var(--suave); svg { color: var(--baja); } }
    }
}

/* ============================================================ impresión */
@media print {
    :root { color-scheme: light; }
    body { background: white; }
    .nav, .topbar, .no-imprimir, #toast { display: none !important; }
    .logo-claro { display: block !important; } .logo-oscuro { display: none !important; }
    .shell { display: block; }
    .contenido { padding: 0; }
    .documento { box-shadow: none; border: 0; width: 100%; padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after, ::view-transition-group(*) {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}