/*
 * Neola Kiosco · panel
 * Tokens de §15.2 con los mismos nombres de Neola Call Center.
 * Tema oscuro: :root[data-tema="oscuro"] o la preferencia del sistema.
 */

/* ------------------------------------------------------------------
   Tipografía: Rubik variable (latin y latin-ext, normal e itálica)
   ------------------------------------------------------------------ */
@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('../fonts/rubik-latin-ext-wght-normal.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;
}
@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('../fonts/rubik-latin-wght-normal.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: 'Rubik';
    font-style: italic;
    font-weight: 300 900;
    font-display: swap;
    src: url('../fonts/rubik-latin-ext-wght-italic.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;
}
@font-face {
    font-family: 'Rubik';
    font-style: italic;
    font-weight: 300 900;
    font-display: swap;
    src: url('../fonts/rubik-latin-wght-italic.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;
}

/* ------------------------------------------------------------------
   Tokens (claro)
   ------------------------------------------------------------------ */
:root {
    color-scheme: light;

    --azul: #3F6CDF;
    --azul-hondo: #2F55BF;
    --azul-suave: #E8EEFC;
    --naranja: #E78C00;
    --naranja-hondo: #B96F00;
    --naranja-suave: #FFF2DE;
    --tinta: #1B2550;
    --tinta-2: #3B4570;
    --tinta-3: #6B7391;
    --tinta-4: #9AA1B8;
    --lienzo: #F3F5F9;
    --papel: #FFFFFF;
    --papel-2: #F8F9FC;
    --linea: #DDE2EC;
    --linea-2: #EBEEF4;
    --riel: #1B2550;
    --riel-texto: #C9CFE4;
    --exito: #1E9A5B;
    --exito-suave: #E3F5EB;
    --peligro: #D3392C;
    --peligro-suave: #FDECEA;
    --aviso: #E78C00;
    --info: #3F6CDF;

    --e-registrado: #8A93A6;
    --e-enviado: #3F6CDF;
    --e-aceptado: #3F6CDF;
    --e-en_preparacion: #6B4EE6;
    --e-listo: #0E9384;
    --e-entregado: #1E9A5B;
    --e-rechazado: #D3392C;
    --e-cancelado: #8A93A6;
    --e-error: #D3392C;

    --fuente: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --r-control: 10px;
    --r-panel: 14px;

    /* Derivados: texto legible (4,5:1) sobre papel y lienzo */
    --azul-texto: #2F55BF;
    --naranja-texto: #9A5B00;
    --exito-texto: #157A47;
    --peligro-texto: #B7281D;
    --exito-hondo: #157A47;
    --peligro-hondo: #B7281D;
    --gris-hondo: #5E6679;
    --riel-activo: rgba(255, 255, 255, .09);
    --riel-hover: rgba(255, 255, 255, .05);
    --riel-linea: rgba(255, 255, 255, .08);
    --velo: rgba(17, 24, 54, .44);
    --sombra-1: 0 1px 2px rgba(27, 37, 80, .06), 0 1px 1px rgba(27, 37, 80, .03);
    --sombra-2: 0 10px 28px -10px rgba(27, 37, 80, .22), 0 2px 6px rgba(27, 37, 80, .06);
    --sombra-3: 0 28px 70px -16px rgba(15, 21, 48, .38), 0 4px 14px rgba(15, 21, 48, .08);
    --cuadros: #E9ECF2;
    --grafico-2: #E78C00;

    --t-xs: 12px;
    --t-s: 13px;
    --t-m: 14px;
    --t-l: 16px;
    --t-xl: 20px;
    --t-2xl: 26px;
    --t-3xl: 34px;
    --t-hero: 44px;

    --ancho-riel: 236px;
    --ancho-riel-plegado: 68px;
    --alto-barra: 60px;
    --rapido: 120ms;
    --medio: 240ms;
    --curva: cubic-bezier(.2, .7, .2, 1);
}

/* ------------------------------------------------------------------
   Tema oscuro (los mismos nombres)
   ------------------------------------------------------------------ */
:root[data-tema="oscuro"] {
    color-scheme: dark;

    --azul: #3F6CDF;
    --azul-hondo: #5A82EC;
    --azul-suave: #1C2758;
    --naranja: #E78C00;
    --naranja-hondo: #F2A93E;
    --naranja-suave: #392913;
    --tinta: #E8ECF8;
    --tinta-2: #C3C9E0;
    --tinta-3: #9AA2C2;
    --tinta-4: #737CA0;
    --lienzo: #0D1330;
    --papel: #151C3B;
    --papel-2: #1A2246;
    --linea: #2C3663;
    --linea-2: #232C55;
    --riel: #0A0F26;
    --riel-texto: #AEB6D6;
    --exito: #3DBE7E;
    --exito-suave: #12352A;
    --peligro: #F0645A;
    --peligro-suave: #3B1C27;
    --aviso: #F0A030;
    --info: #7C9BF4;

    --e-registrado: #98A0BC;
    --e-enviado: #7C9BF4;
    --e-aceptado: #7C9BF4;
    --e-en_preparacion: #A592F5;
    --e-listo: #2EC4B2;
    --e-entregado: #3DBE7E;
    --e-rechazado: #F0645A;
    --e-cancelado: #98A0BC;
    --e-error: #F0645A;

    --azul-texto: #8FA9F7;
    --naranja-texto: #F2A93E;
    --exito-texto: #4CC98A;
    --peligro-texto: #F37468;
    --exito-hondo: #187A4A;
    --peligro-hondo: #B7281D;
    --gris-hondo: #4A5375;
    --riel-activo: rgba(255, 255, 255, .08);
    --riel-hover: rgba(255, 255, 255, .045);
    --riel-linea: rgba(255, 255, 255, .07);
    --velo: rgba(4, 7, 22, .62);
    --sombra-1: 0 1px 2px rgba(0, 0, 0, .25);
    --sombra-2: 0 12px 30px -10px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .3);
    --sombra-3: 0 28px 70px -16px rgba(0, 0, 0, .7), 0 4px 14px rgba(0, 0, 0, .35);
    --cuadros: #222B52;
    --grafico-2: #D08000;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
        color-scheme: dark;

        --azul: #3F6CDF;
        --azul-hondo: #5A82EC;
        --azul-suave: #1C2758;
        --naranja: #E78C00;
        --naranja-hondo: #F2A93E;
        --naranja-suave: #392913;
        --tinta: #E8ECF8;
        --tinta-2: #C3C9E0;
        --tinta-3: #9AA2C2;
        --tinta-4: #737CA0;
        --lienzo: #0D1330;
        --papel: #151C3B;
        --papel-2: #1A2246;
        --linea: #2C3663;
        --linea-2: #232C55;
        --riel: #0A0F26;
        --riel-texto: #AEB6D6;
        --exito: #3DBE7E;
        --exito-suave: #12352A;
        --peligro: #F0645A;
        --peligro-suave: #3B1C27;
        --aviso: #F0A030;
        --info: #7C9BF4;

        --e-registrado: #98A0BC;
        --e-enviado: #7C9BF4;
        --e-aceptado: #7C9BF4;
        --e-en_preparacion: #A592F5;
        --e-listo: #2EC4B2;
        --e-entregado: #3DBE7E;
        --e-rechazado: #F0645A;
        --e-cancelado: #98A0BC;
        --e-error: #F0645A;

        --azul-texto: #8FA9F7;
        --naranja-texto: #F2A93E;
        --exito-texto: #4CC98A;
        --peligro-texto: #F37468;
        --exito-hondo: #187A4A;
        --peligro-hondo: #B7281D;
        --gris-hondo: #4A5375;
        --riel-activo: rgba(255, 255, 255, .08);
        --riel-hover: rgba(255, 255, 255, .045);
        --riel-linea: rgba(255, 255, 255, .07);
        --velo: rgba(4, 7, 22, .62);
        --sombra-1: 0 1px 2px rgba(0, 0, 0, .25);
        --sombra-2: 0 12px 30px -10px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .3);
        --sombra-3: 0 28px 70px -16px rgba(0, 0, 0, .7), 0 4px 14px rgba(0, 0, 0, .35);
        --cuadros: #222B52;
        --grafico-2: #D08000;
    }
}

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

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

body {
    margin: 0;
    background: var(--lienzo);
    color: var(--tinta);
    font-family: var(--fuente);
    font-size: var(--t-m);
    line-height: 1.5;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; letter-spacing: -.005em; }
a { color: var(--azul-texto); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; }
[hidden] { display: none !important; }
::selection { background: color-mix(in srgb, var(--azul) 28%, transparent); }

:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--azul);
    outline-offset: 2px;
    border-radius: 6px;
}

.ico {
    width: 18px;
    height: 18px;
    flex: none;
}
.ico--s { width: 15px; height: 15px; }
.ico--l { width: 22px; height: 22px; }
.ico--xl { width: 28px; height: 28px; }

.num { font-variant-numeric: tabular-nums; }
.oculto-visual {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.texto-2 { color: var(--tinta-2); }
.texto-3 { color: var(--tinta-3); }
.texto-s { font-size: var(--t-s); }
.texto-xs { font-size: var(--t-xs); }
.fuerte { font-weight: 600; }
.mono { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: .92em; }
.cortar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ------------------------------------------------------------------
   Marca: logo de Neola + «kiosco» en cursiva, separado
   ------------------------------------------------------------------ */
.marca {
    display: inline-flex;
    align-items: baseline;
    gap: .42em;
    color: var(--azul);
    line-height: 1;
    white-space: nowrap;
}
.marca-logo {
    height: 1.18em;
    width: auto;
    flex: none;
}
.marca-producto {
    font-style: italic;
    font-weight: 400;
    letter-spacing: .005em;
    color: var(--tinta-2);
}

/* ------------------------------------------------------------------
   Armazón del panel
   ------------------------------------------------------------------ */
.panel {
    display: grid;
    grid-template-columns: var(--ancho-riel) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
}
.riel-plegado .panel { grid-template-columns: var(--ancho-riel-plegado) minmax(0, 1fr); }

/* Riel */
.riel {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--ancho-riel);
    display: flex;
    flex-direction: column;
    background: var(--riel);
    color: var(--riel-texto);
    z-index: 30;
    overflow: hidden;
}
.riel__marca {
    display: flex;
    align-items: center;
    height: var(--alto-barra);
    padding: 0 22px;
    font-size: 20px;
    border-bottom: 1px solid var(--riel-linea);
    color: #fff;
}
.riel__marca a { color: inherit; text-decoration: none; display: inline-flex; }
.riel__marca .marca { color: #fff; }
.riel__marca .marca-producto { color: var(--riel-texto); }
.riel__isotipo { display: none; }
.riel__isotipo svg { width: 44px; height: auto; color: #fff; }

.riel__menu {
    flex: 1;
    overflow-y: auto;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .15) transparent;
}
.riel__grupo {
    margin: 14px 12px 6px;
    font-size: var(--t-xs);
    color: color-mix(in srgb, var(--riel-texto) 72%, transparent);
    letter-spacing: .01em;
}
.riel__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 40px;
    padding: 0 12px;
    border-radius: 9px;
    color: var(--riel-texto);
    font-weight: 450;
    text-decoration: none;
    transition: background var(--rapido), color var(--rapido);
}
.riel__item:hover { background: var(--riel-hover); color: #fff; text-decoration: none; }
.riel__item[aria-current="page"] {
    background: var(--riel-activo);
    color: #fff;
    font-weight: 500;
}
.riel__item[aria-current="page"]::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--azul);
}
.riel__item .ico { width: 19px; height: 19px; opacity: .92; }
.riel__texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.riel__insignia {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--naranja);
    color: #1B2550;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.riel__pie {
    padding: 10px 12px 14px;
    border-top: 1px solid var(--riel-linea);
    display: flex;
    align-items: center;
    gap: 8px;
}
.riel__version {
    flex: 1;
    font-size: var(--t-xs);
    color: color-mix(in srgb, var(--riel-texto) 70%, transparent);
    padding-left: 12px;
    white-space: nowrap;
}
.riel__plegar {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--riel-texto);
    display: grid;
    place-items: center;
    cursor: pointer;
}
.riel__plegar:hover { background: var(--riel-hover); color: #fff; }

.riel-plegado .riel__marca { padding: 0; justify-content: center; }
.riel-plegado .riel__marca .marca { display: none; }
.riel-plegado .riel__isotipo { display: block; }
.riel-plegado .riel__texto,
.riel-plegado .riel__grupo,
.riel-plegado .riel__version { display: none; }
.riel-plegado .riel__item { justify-content: center; padding: 0; }
.riel-plegado .riel__insignia {
    position: absolute;
    top: 3px;
    right: 5px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
    line-height: 16px;
}
.riel-plegado .riel__pie { justify-content: center; }
.riel-plegado .riel__plegar .ico { transform: rotate(180deg); }

.isotipo {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--azul);
    display: grid;
    place-items: center;
    overflow: hidden;
}
.isotipo svg { width: 22px; height: auto; color: #fff; }

/* Barra superior */
.principal {
    grid-column: 2;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.riel-plegado .riel { width: var(--ancho-riel-plegado); }
.barra {
    position: sticky;
    top: 0;
    z-index: 20;
    height: var(--alto-barra);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 24px 0 28px;
    background: color-mix(in srgb, var(--papel) 92%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--linea);
}
.barra__marca-movil { display: none; color: var(--azul); }
.barra__marca-movil svg { width: 56px; height: auto; }
:root[data-tema="oscuro"] .barra__marca-movil { color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .barra__marca-movil { color: #fff; } }
.barra__titulo {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
}
.barra__titulo h1 { font-size: inherit; overflow: hidden; text-overflow: ellipsis; }
.migas {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 18px;
}
.migas a { color: var(--tinta-3); font-weight: 500; }
.migas a:hover { color: var(--tinta); text-decoration: none; }
.migas .ico { color: var(--tinta-4); width: 16px; height: 16px; }
.barra__acciones {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.contenido {
    flex: 1;
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    padding: 26px 28px 56px;
}

/* Selector de empresa */
.empresa-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 38px;
    max-width: 280px;
    padding: 0 10px 0 8px;
    border: 1px solid var(--linea);
    border-radius: var(--r-control);
    background: var(--papel);
    color: var(--tinta);
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--rapido), background var(--rapido);
}
.empresa-btn:hover { border-color: color-mix(in srgb, var(--azul) 45%, var(--linea)); }
.empresa-btn--fija { cursor: default; }
.empresa-btn--fija:hover { border-color: var(--linea); }
.empresa-btn .ico { color: var(--tinta-3); width: 16px; height: 16px; }
.muestra-empresa {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    flex: none;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    overflow: hidden;
    background: var(--tinta-3);
}
.muestra-empresa img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.muestra-empresa--todas { background: var(--azul-suave); color: var(--azul-texto); }
.muestra-empresa--todas .ico { color: inherit; width: 14px; height: 14px; }

.conexion {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 10px;
    border-radius: 16px;
    font-size: var(--t-s);
    color: var(--tinta-3);
    white-space: nowrap;
}
.conexion::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--exito);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--exito) 18%, transparent);
}
.conexion--caida { background: var(--peligro-suave); color: var(--peligro-texto); font-weight: 500; }
.conexion--caida::before { background: var(--peligro); box-shadow: none; animation: latido 1.2s ease-in-out infinite; }

.avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--azul-suave);
    color: var(--azul-texto);
    font-size: 13px;
    font-weight: 600;
    flex: none;
}
.usuario-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 42px;
    padding: 0 6px 0 4px;
    border: 0;
    border-radius: 21px;
    background: transparent;
    cursor: pointer;
    text-align: left;
}
.usuario-btn:hover { background: var(--papel-2); }
.usuario-btn__nombre { display: flex; flex-direction: column; line-height: 1.2; max-width: 170px; }
.usuario-btn__nombre strong { font-weight: 500; font-size: var(--t-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario-btn__nombre span { font-size: 11.5px; color: var(--tinta-3); white-space: nowrap; }

/* Navegación inferior (celular) */
.nav-movil { display: none; }

/* ------------------------------------------------------------------
   Menú emergente
   ------------------------------------------------------------------ */
.emergente-ancla { position: relative; }
.emergente {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    min-width: 230px;
    max-width: min(360px, calc(100vw - 24px));
    padding: 6px;
    border: 1px solid var(--linea);
    border-radius: 12px;
    background: var(--papel);
    box-shadow: var(--sombra-2);
    animation: aparecer var(--rapido) var(--curva);
}
.emergente--izq { right: auto; left: 0; }
.emergente__cabeza { padding: 10px 12px 8px; border-bottom: 1px solid var(--linea-2); margin-bottom: 6px; }
.emergente__cabeza strong { display: block; font-weight: 600; }
.emergente__cabeza span { color: var(--tinta-3); font-size: var(--t-s); }
.emergente__buscar { padding: 4px 4px 8px; }
.emergente__lista { max-height: 320px; overflow-y: auto; }
.emergente__item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--tinta);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    font-size: var(--t-m);
}
.emergente__item:hover { background: var(--papel-2); text-decoration: none; }
.emergente__item[aria-checked="true"], .emergente__item--activo { background: var(--azul-suave); }
.emergente__item .ico { color: var(--tinta-3); }
.emergente__item .cheque { margin-left: auto; color: var(--azul-texto); }
.emergente__sep { height: 1px; background: var(--linea-2); margin: 6px 4px; }
.emergente__item--peligro { color: var(--peligro-texto); }
.emergente__item--peligro .ico { color: currentColor; }

/* ------------------------------------------------------------------
   Botones
   ------------------------------------------------------------------ */
.btn {
    --btn-fondo: var(--papel);
    --btn-texto: var(--tinta);
    --btn-borde: var(--linea);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    padding: 0 15px;
    border: 1px solid var(--btn-borde);
    border-radius: var(--r-control);
    background: var(--btn-fondo);
    color: var(--btn-texto);
    font-weight: 500;
    font-size: var(--t-m);
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: background var(--rapido), border-color var(--rapido), color var(--rapido), box-shadow var(--rapido), translate var(--rapido);
}
.btn:hover { text-decoration: none; border-color: color-mix(in srgb, var(--tinta) 22%, var(--btn-borde)); }
/* «translate» se suma a cualquier «transform» de posición (no lo reemplaza). */
.btn:active { translate: 0 1px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; translate: none; }
.btn .ico { width: 17px; height: 17px; }
.btn > span { display: inline-flex; align-items: center; gap: inherit; }

.btn--primario { --btn-fondo: var(--azul); --btn-texto: #fff; --btn-borde: var(--azul); }
.btn--primario:hover { --btn-fondo: var(--azul-hondo); --btn-borde: var(--azul-hondo); }
:root[data-tema="oscuro"] .btn--primario:hover { --btn-fondo: #355FCF; --btn-borde: #355FCF; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .btn--primario:hover { --btn-fondo: #355FCF; --btn-borde: #355FCF; } }
.btn--atencion { --btn-fondo: var(--naranja); --btn-texto: #1B2550; --btn-borde: var(--naranja); font-weight: 600; }
.btn--atencion:hover { --btn-fondo: #D98200; --btn-borde: #D98200; }
.btn--peligro { --btn-fondo: var(--peligro-hondo); --btn-texto: #fff; --btn-borde: var(--peligro-hondo); }
.btn--peligro:hover { --btn-fondo: #9E2017; --btn-borde: #9E2017; }
.btn--peligro-suave { --btn-texto: var(--peligro-texto); }
.btn--peligro-suave:hover { --btn-fondo: var(--peligro-suave); --btn-borde: color-mix(in srgb, var(--peligro) 40%, var(--linea)); }
.btn--fantasma { --btn-fondo: transparent; --btn-borde: transparent; --btn-texto: var(--tinta-2); }
.btn--fantasma:hover { --btn-fondo: var(--papel-2); --btn-borde: transparent; color: var(--tinta); }
.btn--chico { height: 32px; padding: 0 11px; font-size: var(--t-s); border-radius: 8px; gap: 6px; }
.btn--chico .ico { width: 15px; height: 15px; }
.btn--grande { height: 46px; padding: 0 22px; font-size: var(--t-l); border-radius: 12px; }
.btn--icono { width: 38px; padding: 0; }
.btn--icono.btn--chico { width: 32px; }
.btn--bloque { width: 100%; }
.btn--cargando { position: relative; color: transparent !important; pointer-events: none; }
.btn--cargando > * { visibility: hidden; }
.btn--cargando::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--btn-texto);
    border-right-color: transparent;
    animation: girar .7s linear infinite;
}

.grupo-btn { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.grupo-btn--fin { justify-content: flex-end; }

/* ------------------------------------------------------------------
   Formularios
   ------------------------------------------------------------------ */
.formulario { display: grid; gap: 18px; }
.rejilla-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.rejilla-campos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla-campos .ancho-total { grid-column: 1 / -1; }

.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo__etiqueta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: var(--t-s);
    font-weight: 500;
    color: var(--tinta-2);
}
.campo__etiqueta small { font-weight: 400; color: var(--tinta-3); font-size: var(--t-xs); }
.campo__ayuda { font-size: 12.5px; color: var(--tinta-3); line-height: 1.45; }
.campo__error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 12.5px;
    color: var(--peligro-texto);
    font-weight: 500;
    line-height: 1.4;
}
.campo__error .ico { width: 14px; height: 14px; margin-top: 2px; }

.entrada {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--linea);
    border-radius: var(--r-control);
    background: var(--papel);
    color: var(--tinta);
    font-size: var(--t-m);
    transition: border-color var(--rapido), box-shadow var(--rapido), background var(--rapido);
}
.entrada::placeholder { color: var(--tinta-4); }
.entrada:hover { border-color: color-mix(in srgb, var(--tinta) 20%, var(--linea)); }
.entrada:focus, .entrada:focus-visible {
    outline: none;
    border-color: var(--azul);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--azul) 20%, transparent);
    border-radius: var(--r-control);
}
.entrada:disabled { background: var(--papel-2); color: var(--tinta-3); cursor: not-allowed; }
.entrada[aria-invalid="true"] { border-color: var(--peligro); }
.entrada[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--peligro) 18%, transparent); }
textarea.entrada { height: auto; min-height: 92px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
select.entrada {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7391' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
}
.entrada--chica { height: 34px; font-size: var(--t-s); border-radius: 8px; }
.entrada--numero { font-variant-numeric: tabular-nums; }
.entrada--codigo {
    height: 52px;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: .32em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.entrada-con-icono { position: relative; }
.entrada-con-icono > .ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--tinta-3); pointer-events: none; width: 17px; height: 17px; }
.entrada-con-icono .entrada { padding-left: 36px; }
.entrada-con-boton { display: flex; gap: 8px; }
.entrada-con-boton .entrada { flex: 1; }
.contador-texto { font-size: var(--t-xs); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.contador-texto--lleno { color: var(--naranja-texto); }

/* Interruptor */
.interruptor {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}
.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruptor__pista {
    position: relative;
    flex: none;
    width: 40px;
    height: 24px;
    margin-top: 1px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--tinta-3) 40%, var(--linea));
    transition: background var(--medio) var(--curva);
}
.interruptor__pista::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    transition: transform var(--medio) var(--curva);
}
.interruptor input:checked + .interruptor__pista { background: var(--azul); }
.interruptor input:checked + .interruptor__pista::after { transform: translateX(16px); }
.interruptor input:focus-visible + .interruptor__pista { outline: 2px solid var(--azul); outline-offset: 2px; }
.interruptor input:disabled + .interruptor__pista { opacity: .45; }
.interruptor--deshabilitado { cursor: not-allowed; }
.interruptor__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.interruptor__texto strong { font-weight: 500; color: var(--tinta); }
.interruptor__texto span { font-size: 12.5px; color: var(--tinta-3); line-height: 1.45; }
.interruptor--chico .interruptor__pista { width: 34px; height: 20px; }
.interruptor--chico .interruptor__pista::after { width: 14px; height: 14px; }
.interruptor--chico input:checked + .interruptor__pista::after { transform: translateX(14px); }
.interruptor--peligro input:checked + .interruptor__pista { background: var(--peligro); }

/* Segmentado */
.segmentado {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 3px;
    padding: 3px;
    border-radius: 12px;
    background: var(--lienzo);
    border: 1px solid var(--linea-2);
}
.segmentado button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--tinta-2);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--rapido), color var(--rapido), box-shadow var(--rapido);
}
.segmentado button:hover { color: var(--tinta); }
.segmentado button[aria-pressed="true"], .segmentado button[aria-checked="true"] {
    background: var(--papel);
    color: var(--tinta);
    box-shadow: var(--sombra-1), 0 0 0 1px var(--linea);
}
.segmentado button:disabled { opacity: .45; cursor: not-allowed; }
.segmentado .ico { width: 16px; height: 16px; }
.segmentado--chico button { height: 28px; padding: 0 10px; font-size: var(--t-s); }

/* Opciones en tarjeta (radio grande) */
.opciones-tarjeta { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.opcion-tarjeta {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    border: 1px solid var(--linea);
    border-radius: 12px;
    background: var(--papel);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--rapido), box-shadow var(--rapido), background var(--rapido);
}
.opcion-tarjeta:hover { border-color: color-mix(in srgb, var(--azul) 40%, var(--linea)); }
.opcion-tarjeta[aria-checked="true"] {
    border-color: var(--azul);
    box-shadow: 0 0 0 1px var(--azul);
    background: color-mix(in srgb, var(--azul-suave) 55%, var(--papel));
}
.opcion-tarjeta[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.opcion-tarjeta strong { font-weight: 500; }
.opcion-tarjeta span { font-size: 12.5px; color: var(--tinta-3); line-height: 1.4; }
.opcion-tarjeta .ico { color: var(--azul-texto); }

/* Color */
.campo-color { display: flex; align-items: center; gap: 10px; }
.campo-color input[type="color"] {
    width: 44px;
    height: 40px;
    padding: 3px;
    border: 1px solid var(--linea);
    border-radius: var(--r-control);
    background: var(--papel);
    cursor: pointer;
}
.campo-color input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.campo-color input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 7px; }
.campo-color input[type="color"]::-moz-color-swatch { border: 0; border-radius: 7px; }
.campo-color .entrada { width: 120px; font-variant-numeric: tabular-nums; text-transform: uppercase; }

/* ------------------------------------------------------------------
   Tarjetas y secciones
   ------------------------------------------------------------------ */
.tarjeta {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: var(--r-panel);
    box-shadow: var(--sombra-1);
    min-width: 0;
}
.tarjeta__cabeza {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--linea-2);
    min-height: 58px;
}
.tarjeta__cabeza h2, .tarjeta__cabeza h3 { font-size: 15px; font-weight: 600; flex: 1; min-width: 0; }
.tarjeta__cabeza .sub { display: block; font-size: var(--t-s); color: var(--tinta-3); font-weight: 400; margin-top: 2px; }
.tarjeta__cuerpo { padding: 18px 20px; }
.tarjeta__cuerpo--sin { padding: 0; }
.tarjeta__pie {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-top: 1px solid var(--linea-2);
    background: var(--papel-2);
    border-radius: 0 0 var(--r-panel) var(--r-panel);
}
.tarjeta--interactiva { transition: border-color var(--rapido), box-shadow var(--rapido), transform var(--rapido); cursor: pointer; }
.tarjeta--interactiva:hover { border-color: color-mix(in srgb, var(--azul) 40%, var(--linea)); box-shadow: var(--sombra-2); }

.seccion { display: grid; gap: 16px; }
.seccion + .seccion { margin-top: 28px; }
.seccion__cabeza { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.seccion__cabeza h2 { font-size: 16px; font-weight: 600; flex: 1; min-width: 0; }
.seccion__cabeza p { color: var(--tinta-3); font-size: var(--t-s); margin-top: 3px; }

.cabeza-pagina {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.cabeza-pagina__texto { flex: 1; min-width: 220px; }
.cabeza-pagina__texto h2 { font-size: var(--t-xl); font-weight: 600; }
.cabeza-pagina__texto p { color: var(--tinta-3); margin-top: 3px; }

.bloque-form { display: grid; gap: 16px; }
.bloque-form + .bloque-form { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--linea-2); }
.bloque-form__titulo { display: flex; flex-direction: column; gap: 2px; }
.bloque-form__titulo h3 { font-size: 15px; font-weight: 600; }
.bloque-form__titulo p { font-size: 12.5px; color: var(--tinta-3); }

/* Notas (avisos en línea) */
.nota {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--azul-suave);
    color: var(--tinta);
    font-size: var(--t-s);
    line-height: 1.5;
}
.nota > .ico { color: var(--azul-texto); margin-top: 1px; }
.nota strong { font-weight: 600; }
.nota__texto { flex: 1; min-width: 0; }
.nota--aviso { background: var(--naranja-suave); }
.nota--aviso > .ico { color: var(--naranja-texto); }
.nota--peligro { background: var(--peligro-suave); }
.nota--peligro > .ico { color: var(--peligro-texto); }
.nota--exito { background: var(--exito-suave); }
.nota--exito > .ico { color: var(--exito-texto); }
.nota--neutra { background: var(--papel-2); border: 1px solid var(--linea-2); }
.nota--neutra > .ico { color: var(--tinta-3); }

/* ------------------------------------------------------------------
   Insignias de estado
   ------------------------------------------------------------------ */
.insignia {
    --c: var(--tinta-3);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 24px;
    padding: 0 10px 0 9px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--c) 13%, var(--papel));
    color: var(--tinta);
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    line-height: 1;
}
.insignia::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c);
    flex: none;
}
.insignia--sin-punto::before { display: none; }
.insignia--sin-punto { padding: 0 10px; }
.insignia--chica { height: 21px; font-size: var(--t-xs); padding: 0 8px 0 7px; gap: 6px; }
.insignia--chica::before { width: 6px; height: 6px; }
.insignia--vivo::before { animation: latido 1.6s ease-in-out infinite; }

.insignia--registrado { --c: var(--e-registrado); }
.insignia--enviado { --c: var(--e-enviado); }
.insignia--aceptado { --c: var(--e-aceptado); }
.insignia--en_preparacion { --c: var(--e-en_preparacion); }
.insignia--listo { --c: var(--e-listo); }
.insignia--entregado { --c: var(--e-entregado); }
.insignia--rechazado { --c: var(--e-rechazado); }
.insignia--cancelado { --c: var(--e-cancelado); }
.insignia--error { --c: var(--e-error); }

.insignia--publicado, .insignia--abierta, .insignia--en_linea, .insignia--activo, .insignia--exito { --c: var(--exito); }
.insignia--pausado, .insignia--atencion, .insignia--pendiente { --c: var(--naranja); }
.insignia--borrador, .insignia--cerrada, .insignia--inactivo, .insignia--neutro, .insignia--sin_datos, .insignia--sin_vigilancia { --c: var(--e-registrado); }
.insignia--sin_conexion, .insignia--pos_fuera, .insignia--peligro, .insignia--critica, .insignia--bloqueado { --c: var(--peligro); }
.insignia--aviso { --c: var(--naranja); }
.insignia--info { --c: var(--azul); }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 9px;
    border-radius: 7px;
    background: var(--papel-2);
    border: 1px solid var(--linea-2);
    color: var(--tinta-2);
    font-size: var(--t-xs);
    font-weight: 500;
    white-space: nowrap;
}
.chip .ico { width: 13px; height: 13px; color: var(--tinta-3); }
.chip--azul { background: var(--azul-suave); border-color: transparent; color: var(--azul-texto); }
.chip--azul .ico { color: inherit; }
.chip--etiqueta { background: var(--papel); border-color: var(--linea); color: var(--tinta); }

.punto {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tinta-4);
    flex: none;
}
.punto--verde { background: var(--exito); box-shadow: 0 0 0 3px color-mix(in srgb, var(--exito) 18%, transparent); }
.punto--rojo { background: var(--peligro); }
.punto--naranja { background: var(--naranja); }
.punto--gris { background: var(--tinta-4); }

/* Filtros como fichas */
.fichas { display: flex; flex-wrap: wrap; gap: 6px; }
.ficha {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--linea);
    border-radius: 16px;
    background: var(--papel);
    color: var(--tinta-2);
    font-size: var(--t-s);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
.ficha:hover { border-color: color-mix(in srgb, var(--azul) 40%, var(--linea)); color: var(--tinta); }
.ficha[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.ficha .cuenta { font-variant-numeric: tabular-nums; opacity: .7; }
.ficha--atencion[aria-pressed="false"] .cuenta { color: var(--naranja-texto); opacity: 1; font-weight: 600; }

/* ------------------------------------------------------------------
   Tablas
   ------------------------------------------------------------------ */
.tabla-envoltura { overflow-x: auto; }
.tabla {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--t-m);
}
.tabla th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 10px 14px;
    background: var(--papel-2);
    border-bottom: 1px solid var(--linea);
    color: var(--tinta-3);
    font-size: var(--t-xs);
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
}
.tabla td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--linea-2);
    vertical-align: middle;
}
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr { transition: background var(--rapido); }
.tabla--clic tbody tr { cursor: pointer; }
.tabla--clic tbody tr:hover { background: color-mix(in srgb, var(--azul-suave) 45%, var(--papel)); }
.tabla tr[aria-selected="true"] { background: var(--azul-suave); }
.tabla .der { text-align: right; }
.tabla .cen { text-align: center; }
.tabla td.num, .tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla .min { width: 1%; white-space: nowrap; }
.tabla__sub { display: block; font-size: var(--t-xs); color: var(--tinta-3); margin-top: 2px; }
.tabla--compacta td { padding: 8px 12px; }
.tabla--compacta th { padding: 8px 12px; }

.solo-movil { display: none; }

.numero-pedido {
    font-weight: 600;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
}

.paginacion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--linea-2);
    font-size: var(--t-s);
    color: var(--tinta-3);
}

/* ------------------------------------------------------------------
   Pestañas
   ------------------------------------------------------------------ */
.pestanas {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--linea);
    overflow-x: auto;
    scrollbar-width: none;
}
.pestanas::-webkit-scrollbar { display: none; }
.pestana {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 44px;
    padding: 0 14px;
    border: 0;
    background: transparent;
    color: var(--tinta-3);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
.pestana:hover { color: var(--tinta); }
.pestana[aria-selected="true"] { color: var(--tinta); }
.pestana[aria-selected="true"]::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: var(--azul);
}
.pestana .ico { width: 16px; height: 16px; }
.pestana__marca {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--naranja);
    color: #1B2550;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}
.pestana__error { width: 7px; height: 7px; border-radius: 50%; background: var(--peligro); }

/* ------------------------------------------------------------------
   Diálogos (<dialog> nativo) y panel lateral
   ------------------------------------------------------------------ */
dialog.dialogo {
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100dvh - 48px);
    padding: 0;
    border: 1px solid var(--linea);
    border-radius: 18px;
    background: var(--papel);
    color: var(--tinta);
    box-shadow: var(--sombra-3);
    overflow: hidden;
}
dialog.dialogo[open] { display: flex; flex-direction: column; animation: subir var(--medio) var(--curva); }
dialog.dialogo::backdrop { background: var(--velo); backdrop-filter: blur(2px); animation: aparecer var(--medio) ease; }
dialog.dialogo--ancho { width: min(820px, calc(100vw - 32px)); }
dialog.dialogo--angosto { width: min(440px, calc(100vw - 32px)); }
.dialogo__cabeza {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 22px 14px;
}
.dialogo__cabeza h2 { flex: 1; font-size: 18px; font-weight: 600; }
.dialogo__cabeza p { color: var(--tinta-3); font-size: var(--t-s); margin-top: 4px; font-weight: 400; }
.dialogo__cuerpo { padding: 4px 22px 20px; overflow-y: auto; }
.dialogo__pie {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid var(--linea-2);
    background: var(--papel-2);
}
.dialogo__icono {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--azul-suave);
    color: var(--azul-texto);
    flex: none;
}
.dialogo__icono--peligro { background: var(--peligro-suave); color: var(--peligro-texto); }
.dialogo__icono--aviso { background: var(--naranja-suave); color: var(--naranja-texto); }

dialog.lateral {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(560px, 100vw);
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--linea);
    background: var(--papel);
    color: var(--tinta);
    box-shadow: var(--sombra-3);
    overflow: hidden;
}
dialog.lateral[open] { display: flex; flex-direction: column; animation: entrar-derecha var(--medio) var(--curva); }
dialog.lateral::backdrop { background: var(--velo); animation: aparecer var(--medio) ease; }
.lateral__cabeza {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--linea-2);
}
.lateral__cuerpo { flex: 1; overflow-y: auto; padding: 18px 20px 28px; }
.lateral__pie {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 20px;
    border-top: 1px solid var(--linea-2);
    background: var(--papel-2);
}
fieldset.sin-borde { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.sin-borde:disabled .interruptor, fieldset.sin-borde:disabled .opcion-tarjeta { cursor: default; }

/* ------------------------------------------------------------------
   Avisos (toasts) en la capa superior
   ------------------------------------------------------------------ */
.avisos {
    position: fixed;
    inset: auto 0 0 auto;
    margin: 0;
    padding: 0 20px 20px 0;
    border: 0;
    background: transparent;
    width: min(420px, 100vw);
    max-height: none;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    pointer-events: none;
    z-index: 1000;
}
.avisos:popover-open { display: flex; }
.aviso {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    width: 100%;
    padding: 13px 14px;
    border-radius: 12px;
    background: var(--tinta);
    color: var(--papel);
    box-shadow: var(--sombra-2);
    font-size: var(--t-m);
    line-height: 1.45;
    animation: aviso-entra var(--medio) var(--curva);
}
:root[data-tema="oscuro"] .aviso { background: #E8ECF8; color: #151C3B; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .aviso { background: #E8ECF8; color: #151C3B; } }
.aviso__icono { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; }
.aviso__icono .ico { width: 14px; height: 14px; stroke-width: 2.6; }
.aviso--exito .aviso__icono { background: #1E9A5B; color: #fff; }
.aviso--error .aviso__icono { background: #D3392C; color: #fff; }
.aviso--info .aviso__icono { background: #3F6CDF; color: #fff; }
.aviso--atencion .aviso__icono { background: #E78C00; color: #1B2550; }
.aviso__texto { flex: 1; min-width: 0; padding-top: 1px; }
.aviso__cerrar {
    flex: none;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: inherit;
    opacity: .6;
    cursor: pointer;
    display: grid;
    place-items: center;
}
.aviso__cerrar:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }
.aviso--sale { animation: aviso-sale 200ms ease forwards; }

/* ------------------------------------------------------------------
   Estados: cargando, vacío, error
   ------------------------------------------------------------------ */
.cargando {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 160px;
    color: var(--tinta-3);
    font-size: var(--t-s);
}
.cargando--pagina { min-height: 50vh; }
.rueda {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--azul) 25%, transparent);
    border-top-color: var(--azul);
    animation: girar .8s linear infinite;
    flex: none;
}
.refrescando { opacity: .6; transition: opacity var(--medio); }

.vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 44px 24px;
    color: var(--tinta-3);
}
.vacio__icono {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: var(--papel-2);
    border: 1px solid var(--linea-2);
    color: var(--tinta-3);
    margin-bottom: 4px;
}
.vacio__icono .ico { width: 24px; height: 24px; }
.vacio h3 { color: var(--tinta); font-size: 15px; font-weight: 600; }
.vacio p { max-width: 420px; font-size: var(--t-s); line-height: 1.55; }
.vacio .grupo-btn { margin-top: 6px; justify-content: center; }
.vacio--chico { padding: 24px 16px; }

/* ------------------------------------------------------------------
   Indicadores (KPI)
   ------------------------------------------------------------------ */
.indicadores {
    display: grid;
    grid-template-columns: minmax(240px, 1.4fr) repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--linea);
    border: 1px solid var(--linea);
    border-radius: var(--r-panel);
    overflow: hidden;
    box-shadow: var(--sombra-1);
}
.indicador {
    background: var(--papel);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.indicador__etiqueta { font-size: var(--t-s); color: var(--tinta-3); display: flex; align-items: center; gap: 7px; }
.indicador__etiqueta .ico { width: 15px; height: 15px; }
.indicador__valor { font-size: var(--t-2xl); font-weight: 600; letter-spacing: -.015em; line-height: 1.1; }
.indicador__valor small { font-size: var(--t-m); font-weight: 400; color: var(--tinta-3); letter-spacing: 0; }
.indicador--heroe .indicador__valor { font-size: var(--t-hero); letter-spacing: -.025em; }
.indicador__pie { font-size: var(--t-xs); color: var(--tinta-3); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; font-variant-numeric: tabular-nums; }
.delta--sube { color: var(--exito-texto); }
.delta--baja { color: var(--peligro-texto); }
.delta--igual { color: var(--tinta-3); }
.delta .ico { width: 13px; height: 13px; stroke-width: 2.6; }

/* ------------------------------------------------------------------
   Gráficos
   ------------------------------------------------------------------ */
.grafico { position: relative; width: 100%; }
.grafico canvas { display: block; }
.leyenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: var(--t-s); color: var(--tinta-2); }
.leyenda__item { display: inline-flex; align-items: center; gap: 7px; }
.leyenda__muestra { width: 11px; height: 11px; border-radius: 3px; background: var(--azul); }
.leyenda__muestra--linea { width: 16px; height: 2px; border-radius: 2px; }

.barras-h { display: grid; gap: 12px; }
.barra-h { display: grid; grid-template-columns: minmax(90px, 160px) minmax(0, 1fr) auto; align-items: center; gap: 12px; font-size: var(--t-s); }
.barra-h__nombre { color: var(--tinta-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-h__pista { height: 10px; border-radius: 0 4px 4px 0; background: transparent; position: relative; }
.barra-h__relleno { position: absolute; inset: 0 auto 0 0; border-radius: 0 4px 4px 0; background: var(--azul); min-width: 2px; transition: width var(--medio) var(--curva); }
.barra-h__valor { font-variant-numeric: tabular-nums; color: var(--tinta); font-weight: 500; text-align: right; white-space: nowrap; }
.barra-h__valor small { color: var(--tinta-3); font-weight: 400; margin-left: 6px; }

/* ------------------------------------------------------------------
   Ruta del pedido: registrado → enviado → en preparación → listo → entregado
   ------------------------------------------------------------------ */
.ruta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.ruta__paso {
    width: 14px;
    height: 4px;
    border-radius: 2px;
    background: var(--linea);
    transition: background var(--medio);
}
.ruta__paso--hecho { background: var(--c, var(--azul)); }
.ruta--fallo .ruta__paso--hecho { background: var(--peligro); }
.ruta--gris .ruta__paso--hecho { background: var(--tinta-4); }

/* Línea de tiempo del pedido */
.recorrido {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 4px 0 18px;
    position: relative;
}
.recorrido__nodo {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    text-align: center;
    font-size: var(--t-xs);
    color: var(--tinta-3);
}
.recorrido__nodo::before {
    content: '';
    position: absolute;
    top: 19px;
    left: calc(-50% + 22px);
    width: calc(100% - 44px);
    height: 2px;
    background: var(--linea);
}
.recorrido__nodo:first-child::before { display: none; }
.recorrido__nodo--hecho::before { background: var(--azul); }
.recorrido__nodo--fallo::before { background: var(--peligro); }
.recorrido__circulo {
    position: relative;
    z-index: 1;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--papel-2);
    border: 1px solid var(--linea);
    color: var(--tinta-3);
}
.recorrido__nodo--hecho .recorrido__circulo { background: var(--azul); border-color: var(--azul); color: #fff; }
.recorrido__nodo--actual .recorrido__circulo { box-shadow: 0 0 0 5px color-mix(in srgb, var(--azul) 18%, transparent); }
.recorrido__nodo--fallo .recorrido__circulo { background: var(--peligro-hondo); border-color: var(--peligro-hondo); color: #fff; }
.recorrido__nodo strong { color: var(--tinta); font-weight: 500; font-size: var(--t-s); }

.linea-tiempo { list-style: none; margin: 0; padding: 0; display: grid; }
.linea-tiempo li {
    position: relative;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 12px;
    padding-bottom: 16px;
}
.linea-tiempo li::before {
    content: '';
    position: absolute;
    left: 15.5px;
    top: 32px;
    bottom: 0;
    width: 1px;
    background: var(--linea);
}
.linea-tiempo li:last-child { padding-bottom: 0; }
.linea-tiempo li:last-child::before { display: none; }
.linea-tiempo__icono {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--papel-2);
    border: 1px solid var(--linea);
    color: var(--tinta-2);
    z-index: 1;
}
.linea-tiempo__icono .ico { width: 16px; height: 16px; }
.linea-tiempo__icono--destino { background: var(--azul-suave); border-color: transparent; color: var(--azul-texto); }
.linea-tiempo__icono--pago { background: var(--exito-suave); border-color: transparent; color: var(--exito-texto); }
.linea-tiempo__icono--panel { background: var(--papel); border-color: var(--linea); color: var(--tinta); }
.linea-tiempo__icono--fallo { background: var(--peligro-suave); border-color: transparent; color: var(--peligro-texto); }
.linea-tiempo__texto { min-width: 0; padding-top: 5px; }
.linea-tiempo__texto strong { font-weight: 500; }
.linea-tiempo__texto p { color: var(--tinta-3); font-size: var(--t-s); margin-top: 2px; overflow-wrap: anywhere; }
.linea-tiempo__hora { padding-top: 6px; font-size: var(--t-xs); color: var(--tinta-3); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.linea-tiempo__hora span { display: block; color: var(--tinta-4); }

/* ------------------------------------------------------------------
   Imágenes, subidas, QR
   ------------------------------------------------------------------ */
.marcador-imagen {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--azul) 10%, transparent), transparent 60%),
        var(--papel-2);
    color: var(--tinta-4);
}
.marcador-imagen .ico { width: 40%; max-width: 30px; height: auto; }

.subida {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}
.subida__vista {
    position: relative;
    width: 112px;
    height: 112px;
    border-radius: 14px;
    border: 1px solid var(--linea);
    overflow: hidden;
    background: var(--papel-2);
}
.subida__vista--cuadros {
    background-color: var(--papel);
    background-image:
        linear-gradient(45deg, var(--cuadros) 25%, transparent 25%),
        linear-gradient(-45deg, var(--cuadros) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--cuadros) 75%),
        linear-gradient(-45deg, transparent 75%, var(--cuadros) 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.subida__vista img { width: 100%; height: 100%; object-fit: contain; }
.subida__vista--cubrir img { object-fit: cover; }
.subida__vista--ancha { width: 168px; height: 105px; }
.subida__zona {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.subida__zona--arrastre { outline: 2px dashed var(--azul); outline-offset: 6px; border-radius: 12px; }
.subida__estado { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--papel) 70%, transparent); }

.qr {
    background: #fff;
    border-radius: 12px;
    padding: 8px;
    border: 1px solid var(--linea);
    flex: none;
}
.qr svg { width: 100%; height: auto; }

.url-copiar {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    height: 40px;
    padding: 0 4px 0 12px;
    border: 1px solid var(--linea);
    border-radius: var(--r-control);
    background: var(--papel-2);
}
.url-copiar code {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 12.5px;
    color: var(--tinta-2);
}

/* Selector de íconos */
.selector-iconos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
    gap: 6px;
    max-height: 260px;
    overflow-y: auto;
    padding: 2px;
}
.selector-iconos button {
    aspect-ratio: 1;
    border: 1px solid var(--linea-2);
    border-radius: 10px;
    background: var(--papel);
    color: var(--tinta-2);
    display: grid;
    place-items: center;
    cursor: pointer;
}
.selector-iconos button:hover { border-color: var(--azul); color: var(--tinta); }
.selector-iconos button[aria-checked="true"] { background: var(--azul); border-color: var(--azul); color: #fff; }
.selector-iconos .ico { width: 21px; height: 21px; }

/* Lista de ítems con filas */
.lista { display: flex; flex-direction: column; }
.lista__fila {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--linea-2);
    min-width: 0;
}
.lista__fila:last-child { border-bottom: 0; }
.lista__fila--clic { cursor: pointer; transition: background var(--rapido); }
.lista__fila--clic:hover { background: var(--papel-2); }
.lista__principal { flex: 1; min-width: 0; }
.lista__principal strong { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista__principal span { display: block; font-size: var(--t-s); color: var(--tinta-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pares { display: grid; grid-template-columns: minmax(110px, auto) minmax(0, 1fr); gap: 8px 16px; font-size: var(--t-s); }
.pares dt { color: var(--tinta-3); }
.pares dd { margin: 0; color: var(--tinta); min-width: 0; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------
   Monitor
   ------------------------------------------------------------------ */
.monitor { display: grid; gap: 22px; }
.locales-vivo { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.local-vivo { display: flex; flex-direction: column; overflow: hidden; }
.local-vivo__estado {
    --c: var(--gris-hondo);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--c);
    color: #fff;
}
.local-vivo__estado--abierta { --c: var(--exito-hondo); }
.local-vivo__estado--sin_conexion, .local-vivo__estado--pos_fuera { --c: var(--peligro-hondo); }
.local-vivo__estado--sin_datos, .local-vivo__estado--inactivo, .local-vivo__estado--sin_vigilancia { --c: var(--gris-hondo); }
.local-vivo__estado .ico { width: 22px; height: 22px; }
.local-vivo__estado strong { display: block; font-size: 17px; font-weight: 600; line-height: 1.2; }
.local-vivo__estado span { display: block; font-size: 12.5px; opacity: .88; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.local-vivo__estado-texto { flex: 1; min-width: 0; }
.local-vivo__contacto { text-align: right; font-size: var(--t-xs); opacity: .85; white-space: nowrap; }
.local-vivo__cuerpo { padding: 14px 18px 16px; display: grid; gap: 14px; flex: 1; }
.local-vivo__nombre { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.local-vivo__nombre h3 { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.local-vivo__nombre span { font-size: var(--t-s); color: var(--tinta-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.local-vivo__cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cifra { display: flex; flex-direction: column; gap: 2px; }
.cifra span { font-size: var(--t-xs); color: var(--tinta-3); }
.cifra strong { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; }
.local-vivo__kioscos { display: grid; gap: 6px; }
.kiosco-mini {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--papel-2);
    font-size: var(--t-s);
    color: var(--tinta);
    text-decoration: none;
}
.kiosco-mini:hover { text-decoration: none; background: var(--azul-suave); }
.kiosco-mini__nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.kiosco-mini__pantallas { display: inline-flex; align-items: center; gap: 6px; color: var(--tinta-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

.monitor-dos { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); gap: 16px; align-items: start; }
.alerta-fila {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    padding: 14px 18px;
    border-bottom: 1px solid var(--linea-2);
}
.alerta-fila:last-child { border-bottom: 0; }
.alerta-fila__icono { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--naranja-suave); color: var(--naranja-texto); }
.alerta-fila__icono--critica { background: var(--peligro-suave); color: var(--peligro-texto); }
.alerta-fila__icono--info { background: var(--azul-suave); color: var(--azul-texto); }
.alerta-fila strong { font-weight: 500; display: block; }
.alerta-fila p { font-size: var(--t-s); color: var(--tinta-3); margin-top: 2px; }
.alerta-fila small { display: block; font-size: var(--t-xs); color: var(--tinta-4); margin-top: 4px; }

.flujo { display: flex; flex-direction: column; }
.flujo__fila {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto auto;
    gap: 14px;
    align-items: center;
    padding: 11px 20px;
    border-bottom: 1px solid var(--linea-2);
    text-decoration: none;
    color: var(--tinta);
}
.flujo__fila:hover { text-decoration: none; background: var(--papel-2); }
.flujo__fila:last-child { border-bottom: 0; }
.flujo__fila--nueva { animation: fila-nueva 1.6s var(--curva); }
.flujo__numero { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.flujo__info { min-width: 0; }
.flujo__info strong { display: block; font-weight: 500; font-size: var(--t-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flujo__info span { display: flex; align-items: center; gap: 8px; font-size: var(--t-xs); color: var(--tinta-3); }
.flujo__total { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.flujo__estado { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 132px; }

/* ------------------------------------------------------------------
   Kioscos
   ------------------------------------------------------------------ */
.rejilla-kioscos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.kiosco-tarjeta { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 16px; color: var(--tinta); text-decoration: none; }
.kiosco-tarjeta:hover { text-decoration: none; }
.kiosco-tarjeta__info { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.kiosco-tarjeta__info h3 { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kiosco-tarjeta__info .sub { font-size: var(--t-s); color: var(--tinta-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kiosco-tarjeta__datos { margin-top: auto; display: grid; gap: 5px; font-size: var(--t-s); color: var(--tinta-2); }
.kiosco-tarjeta__datos div { display: flex; align-items: center; gap: 8px; }
.kiosco-tarjeta__datos .ico { width: 15px; height: 15px; color: var(--tinta-3); }

/* Miniatura del tema: un tótem pequeño con los colores del kiosco */
.miniatura {
    --m-primario: #3F6CDF;
    --m-acento: #E78B00;
    --m-fondo: #F6F7FA;
    --m-tinta: #1B2550;
    --m-sobre: #fff;
    --m-radio: 8px;
    position: relative;
    width: 96px;
    aspect-ratio: 9 / 16;
    border-radius: 12px;
    padding: 4px;
    background: #10162E;
    box-shadow: 0 6px 16px -8px rgba(15, 21, 48, .5);
    flex: none;
}
.miniatura__pantalla {
    position: relative;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: var(--m-fondo);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12% 9% 9%;
    gap: 7%;
}
.miniatura--oscuro { --m-fondo: #12172B; --m-tinta: #F3F5FA; }
.miniatura__logo {
    width: 46%;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--m-primario);
    color: var(--m-sobre);
    font-size: 11px;
    font-weight: 600;
    overflow: hidden;
}
.miniatura__logo img { width: 100%; height: 100%; object-fit: contain; background: transparent; }
.miniatura__logo--neola { width: 72%; aspect-ratio: auto; height: auto; border-radius: 0; background: transparent; color: var(--m-primario); padding: 6% 0; }
.miniatura__logo--neola svg { width: 100%; height: auto; }
.miniatura--oscuro .miniatura__logo--neola { color: #fff; }
.miniatura__logo--imagen { background: transparent; border-radius: 0; }
.miniatura__titulo { width: 100%; text-align: center; color: var(--m-tinta); font-size: 7.5px; font-weight: 600; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.miniatura__platos { display: flex; gap: 6%; width: 100%; justify-content: center; margin-top: auto; }
.miniatura__platos span { width: 28%; aspect-ratio: 1; border-radius: var(--m-radio); background: color-mix(in srgb, var(--m-acento) 75%, var(--m-fondo)); }
.miniatura__platos span:nth-child(2) { background: color-mix(in srgb, var(--m-primario) 55%, var(--m-fondo)); }
.miniatura__boton { width: 82%; padding: 4% 0; border-radius: var(--m-radio); background: var(--m-primario); color: var(--m-sobre); font-size: 6.5px; font-weight: 600; text-align: center; }
.miniatura__marca-neola { position: absolute; bottom: 3%; font-size: 5px; color: color-mix(in srgb, var(--m-tinta) 55%, transparent); }

/* Editor de kiosco */
.editor { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.editor--horizontal { grid-template-columns: minmax(0, 1fr) 460px; }
.editor__form { min-width: 0; }
.editor__cabeza { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.editor__cabeza h2 { font-size: var(--t-xl); font-weight: 600; }
.editor__cabeza-texto { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 4px; }
.editor__cabeza-texto .fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.editor__panel { padding: 22px 22px 26px; }
.editor__guardar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 12px 14px 12px 18px;
    border-radius: var(--r-panel);
    background: var(--tinta);
    color: var(--papel);
    box-shadow: var(--sombra-2);
    animation: subir var(--medio) var(--curva);
}
.editor__guardar span { flex: 1; font-weight: 500; }
.editor__guardar .btn--fantasma { --btn-texto: color-mix(in srgb, var(--papel) 80%, transparent); }
.editor__guardar .btn--fantasma:hover { --btn-fondo: color-mix(in srgb, var(--papel) 12%, transparent); color: var(--papel); }

.previa {
    position: sticky;
    top: calc(var(--alto-barra) + 20px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.previa__barra { display: flex; align-items: center; gap: 8px; }
.previa__barra h3 { flex: 1; font-size: 15px; font-weight: 600; }
.previa__marco {
    position: relative;
    margin: 0 auto;
    border-radius: 26px;
    padding: 12px 12px 28px;
    background: linear-gradient(180deg, #1D2546, #10162E);
    box-shadow: var(--sombra-2), inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.previa__marco::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 10px;
    width: 34px;
    height: 6px;
    border-radius: 3px;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, .14);
}
.previa__marco--horizontal { border-radius: 18px; padding: 12px; }
.previa__marco--horizontal::after { display: none; }
.previa__pie-totem {
    width: 46%;
    height: 22px;
    margin: -2px auto 0;
    background: linear-gradient(180deg, #10162E, #1D2546);
    clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%);
    border-radius: 0 0 6px 6px;
    opacity: .9;
}
.previa__pantalla {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background: #0B1026;
}
.previa__marco--horizontal .previa__pantalla { border-radius: 8px; }
.previa__pantalla iframe {
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
    transform-origin: 0 0;
    background: #fff;
}
.previa__recargando {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(11, 16, 38, .5);
    color: #fff;
    font-size: var(--t-s);
    z-index: 2;
}

.pantalla-pendiente {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--naranja) 45%, var(--linea));
    background: color-mix(in srgb, var(--naranja-suave) 70%, var(--papel));
}
.pantalla-pendiente__icono {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--naranja) 35%, var(--linea));
    background: var(--papel);
    color: var(--naranja-texto);
}
.pantalla-pendiente__icono .ico { width: 22px; height: 22px; }
/* Se aprueba escribiendo el código que muestra la pantalla (el panel no lo muestra). */
.pantalla-pendiente__aprobar { display: flex; gap: 8px; align-items: center; }
.pantalla-pendiente__aprobar .entrada--codigo { width: 168px; height: 44px; font-size: 20px; letter-spacing: .24em; }
.pantalla-pendiente__error { grid-column: 1 / -1; }
.pantalla-pendiente__info { min-width: 0; font-size: var(--t-s); color: var(--tinta-2); }
.pantalla-pendiente__info strong { display: block; font-size: var(--t-m); color: var(--tinta); font-weight: 500; }

.dispositivo {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--linea-2);
}
.dispositivo:last-child { border-bottom: 0; }
.dispositivo__icono { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--papel-2); border: 1px solid var(--linea-2); color: var(--tinta-2); position: relative; }
.dispositivo__icono .punto { position: absolute; right: -2px; bottom: -2px; border: 2px solid var(--papel); width: 12px; height: 12px; box-shadow: none; }
.dispositivo__datos { min-width: 0; }
.dispositivo__datos strong { font-weight: 500; display: block; }
.dispositivo__datos span { display: block; font-size: var(--t-xs); color: var(--tinta-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.diapositivas { display: grid; gap: 12px; }
.diapositiva {
    display: grid;
    grid-template-columns: 136px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
    padding: 12px;
    border: 1px solid var(--linea);
    border-radius: 12px;
    background: var(--papel);
}
.diapositiva__imagen { width: 136px; aspect-ratio: 16 / 10; border-radius: 9px; overflow: hidden; background: var(--papel-2); }
.diapositiva__imagen img { width: 100%; height: 100%; object-fit: cover; }
.diapositiva__campos { display: grid; gap: 8px; min-width: 0; }
.diapositiva__acciones { display: flex; flex-direction: column; gap: 4px; }

.estado-grande {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    padding: 18px;
    border-radius: 14px;
    background: var(--papel-2);
    border: 1px solid var(--linea-2);
}
.estado-grande__icono { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: var(--gris-hondo); }
.estado-grande__icono--publicado { background: var(--exito-hondo); }
.estado-grande__icono--pausado { background: var(--naranja); color: #1B2550; }
.estado-grande h3 { font-size: 17px; font-weight: 600; }
.estado-grande p { font-size: var(--t-s); color: var(--tinta-3); margin-top: 3px; }

/* ------------------------------------------------------------------
   Locales
   ------------------------------------------------------------------ */
.local-fila__estado { min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.prueba {
    display: grid;
    gap: 10px;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--linea);
    background: var(--papel-2);
    animation: aparecer var(--medio) ease;
}
.prueba--ok { border-color: color-mix(in srgb, var(--exito) 40%, var(--linea)); background: color-mix(in srgb, var(--exito-suave) 60%, var(--papel)); }
.prueba--fallo { border-color: color-mix(in srgb, var(--peligro) 40%, var(--linea)); background: color-mix(in srgb, var(--peligro-suave) 70%, var(--papel)); }
.prueba__titulo { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.prueba__ms { margin-left: auto; font-size: var(--t-l); font-variant-numeric: tabular-nums; }
.ficha-tienda { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tienda-interruptor {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.tienda-interruptor button {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--linea);
    border-radius: 14px;
    background: var(--papel);
    cursor: pointer;
    text-align: left;
    font-weight: 500;
    color: var(--tinta-2);
}
.tienda-interruptor button .ico { width: 22px; height: 22px; }
.tienda-interruptor button[aria-pressed="true"].abierta { background: var(--exito-hondo); border-color: var(--exito-hondo); color: #fff; }
.tienda-interruptor button[aria-pressed="true"].cerrada { background: var(--gris-hondo); border-color: var(--gris-hondo); color: #fff; }
.tienda-interruptor button span { display: block; font-size: var(--t-xs); font-weight: 400; opacity: .8; }

.rango-ritmo { display: flex; align-items: center; gap: 14px; }
.rango-ritmo input[type="range"] { flex: 1; accent-color: var(--azul); }
.rango-ritmo output { min-width: 48px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; font-size: var(--t-l); }

/* ------------------------------------------------------------------
   Carta
   ------------------------------------------------------------------ */
.carta { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 20px; align-items: start; }
.carta__categorias { position: sticky; top: calc(var(--alto-barra) + 16px); }
.categoria-btn {
    width: 100%;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: var(--tinta);
}
.categoria-btn:hover { background: var(--papel-2); }
.categoria-btn[aria-pressed="true"] { background: var(--azul-suave); }
.categoria-btn__icono { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--papel-2); border: 1px solid var(--linea-2); color: var(--tinta-2); }
.categoria-btn[aria-pressed="true"] .categoria-btn__icono { background: var(--azul); border-color: var(--azul); color: #fff; }
.categoria-btn__nombre { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.categoria-btn__nombre small { display: block; color: var(--tinta-3); font-weight: 400; font-size: var(--t-xs); }
.categoria-btn--oculta .categoria-btn__nombre { color: var(--tinta-3); text-decoration: line-through; text-decoration-color: var(--tinta-4); }
.categorias-lista { display: grid; gap: 2px; }
.categoria-fila { position: relative; }
.categoria-fila .categoria-btn { padding-right: 40px; }
.categoria-fila__editar { position: absolute; right: 6px; top: 50%; z-index: 1; transform: translateY(-50%); opacity: 0; transition: opacity var(--rapido); }
.categoria-fila:hover .categoria-fila__editar, .categoria-fila:focus-within .categoria-fila__editar { opacity: 1; }
@media (hover: none) { .categoria-fila__editar { opacity: 1; } }

.productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 14px; }
.producto {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--linea);
    border-radius: var(--r-panel);
    background: var(--papel);
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    padding: 0;
    color: var(--tinta);
    transition: border-color var(--rapido), box-shadow var(--rapido);
}
.producto:hover { border-color: color-mix(in srgb, var(--azul) 40%, var(--linea)); box-shadow: var(--sombra-2); }
.producto__foto { position: relative; aspect-ratio: 4 / 3; background: var(--papel-2); overflow: hidden; }
.producto__foto img { width: 100%; height: 100%; object-fit: cover; }
.producto__marcas { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.producto__marcas .chip { background: rgba(255, 255, 255, .94); border-color: transparent; color: #1B2550; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.producto__marcas .chip .ico { color: #1B2550; }
.producto__marcas .chip--etiqueta { background: #1B2550; color: #fff; }
.producto__marcas .chip--etiqueta .ico { color: #fff; }
.producto__cinta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 6px 10px;
    background: rgba(183, 40, 29, .92);
    color: #fff;
    font-size: var(--t-xs);
    font-weight: 600;
    text-align: center;
}
.producto__cuerpo { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.producto__nombre { font-weight: 500; line-height: 1.3; }
.producto__sku { font-size: var(--t-xs); color: var(--tinta-3); font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; }
.producto__precio { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; font-variant-numeric: tabular-nums; }
.producto__precio small { font-weight: 400; color: var(--tinta-3); font-size: var(--t-xs); }
.producto--oculto .producto__foto, .producto--oculto .producto__nombre { opacity: .55; }
.producto--agotado { border-color: color-mix(in srgb, var(--peligro) 35%, var(--linea)); }

.variante-fila {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--linea-2);
}
.variante-fila:last-child { border-bottom: 0; }
.variante-fila strong { font-weight: 500; }
.variante-fila span { display: block; font-size: var(--t-xs); color: var(--tinta-3); }

.multiselector { display: grid; gap: 8px; }
.multiselector__elegidos { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; }
.multiselector__elegidos .chip { padding-right: 3px; }
.multiselector__elegidos .chip button { width: 18px; height: 18px; border: 0; border-radius: 5px; background: transparent; color: inherit; display: grid; place-items: center; cursor: pointer; }
.multiselector__elegidos .chip button:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
.multiselector__opciones { max-height: 220px; overflow-y: auto; border: 1px solid var(--linea); border-radius: var(--r-control); }
.multiselector__opcion {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 0;
    border-bottom: 1px solid var(--linea-2);
    background: var(--papel);
    text-align: left;
    cursor: pointer;
    font-size: var(--t-s);
    color: var(--tinta);
}
.multiselector__opcion:last-child { border-bottom: 0; }
.multiselector__opcion:hover { background: var(--papel-2); }
.multiselector__opcion[aria-checked="true"] { background: var(--azul-suave); }
.multiselector__opcion .caja { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--tinta-4); display: grid; place-items: center; flex: none; }
.multiselector__opcion[aria-checked="true"] .caja { background: var(--azul); border-color: var(--azul); color: #fff; }
.multiselector__opcion .caja .ico { width: 12px; height: 12px; stroke-width: 3; }
.multiselector__opcion .sku { margin-left: auto; color: var(--tinta-3); font-size: var(--t-xs); font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; }

.errores-lista { margin: 8px 0 0; padding-left: 18px; font-size: var(--t-s); display: grid; gap: 3px; max-height: 220px; overflow-y: auto; }

/* ------------------------------------------------------------------
   Pedidos y reportes
   ------------------------------------------------------------------ */
.filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 12px;
    margin-bottom: 16px;
}
.filtros .campo { min-width: 136px; }
.filtros .campo--ancho { min-width: 220px; }
.resumen-linea { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: var(--t-s); color: var(--tinta-3); margin-bottom: 12px; }
.resumen-linea strong { color: var(--tinta); font-weight: 600; font-variant-numeric: tabular-nums; }

.pedido-cabeza { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.pedido-cabeza__numero { font-size: 34px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.01em; }
.pedido-cabeza__datos { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pedido-cabeza__datos span { font-size: var(--t-s); color: var(--tinta-3); }

.lineas-pedido { display: grid; }
.linea-pedido { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--linea-2); }
.linea-pedido:last-child { border-bottom: 0; }
.linea-pedido__cant { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tinta-2); }
.linea-pedido ul { margin: 4px 0 0; padding: 0; list-style: none; font-size: var(--t-s); color: var(--tinta-3); }
.linea-pedido ul li::before { content: '+ '; }
.linea-pedido__nota { margin-top: 4px; font-size: var(--t-s); color: var(--naranja-texto); }
.linea-pedido__total { font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }
.totales-pedido { display: grid; gap: 4px; padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--linea); font-size: var(--t-s); }
.totales-pedido div { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; color: var(--tinta-2); }
.totales-pedido div:last-child { font-size: var(--t-l); font-weight: 600; color: var(--tinta); padding-top: 4px; }

.subseccion { display: grid; gap: 10px; }
.subseccion + .subseccion { margin-top: 22px; }
.subseccion > h3 { font-size: var(--t-s); font-weight: 600; color: var(--tinta-2); }

.reportes { display: grid; gap: 18px; }
.reportes-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.reportes-rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.reportes-columna { display: grid; gap: 16px; align-content: start; min-width: 0; }
.tasa { display: flex; flex-direction: column; gap: 6px; }
.tasa__valor { font-size: var(--t-2xl); font-weight: 600; }
.tasa__barra { height: 8px; border-radius: 4px; background: var(--linea-2); overflow: hidden; }
.tasa__barra span { display: block; height: 100%; background: var(--azul); border-radius: 4px; }
.reparto { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; background: var(--papel); }
.reparto span { display: block; height: 100%; }
.mini-cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.barra-participacion { width: 100%; max-width: 140px; height: 6px; border-radius: 3px; background: var(--linea-2); overflow: hidden; }
.barra-participacion span { display: block; height: 100%; background: var(--azul); border-radius: 0 3px 3px 0; }

/* ------------------------------------------------------------------
   Usuarios, empresas, integraciones, auditoría, cuenta
   ------------------------------------------------------------------ */
.persona { display: flex; align-items: center; gap: 12px; min-width: 0; }
.persona .avatar { width: 36px; height: 36px; }
.persona__texto { min-width: 0; }
.persona__texto strong { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.persona__texto span { display: block; font-size: var(--t-xs); color: var(--tinta-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.persona__texto strong .persona__extra { display: inline; font-weight: 400; color: var(--tinta-3); font-size: var(--t-s); }

.clave-temporal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 20px;
    border-radius: 14px;
    background: var(--papel-2);
    border: 1px dashed var(--linea);
}
.clave-temporal code { font-size: 26px; font-weight: 600; letter-spacing: .08em; font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; color: var(--tinta); }

.empresas { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.empresa-tarjeta__cabeza { display: flex; align-items: center; gap: 14px; padding: 18px 18px 14px; }
.empresa-logo {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #fff;
    font-weight: 600;
    font-size: 17px;
    flex: none;
    border: 1px solid var(--linea-2);
}
.empresa-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 4px; }
.colores-empresa { display: flex; gap: 6px; }
.colores-empresa span { width: 18px; height: 18px; border-radius: 6px; border: 1px solid color-mix(in srgb, #000 12%, transparent); }

.vista-marca {
    --vm-primario: #3F6CDF;
    --vm-acento: #E78B00;
    --vm-sobre: #fff;
    --vm-sobre-acento: #1B2550;
    display: grid;
    gap: 12px;
    padding: 18px;
    border-radius: 14px;
    background: #F6F7FA;
    border: 1px solid var(--linea);
    color: #1B2550;
    text-align: center;
}
.vista-marca__logo { height: 64px; display: grid; place-items: center; }
.vista-marca__logo img { max-height: 64px; max-width: 70%; object-fit: contain; }
.vista-marca__inicial { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--vm-primario); color: var(--vm-sobre); font-weight: 600; font-size: 20px; margin: 0 auto; }
.vista-marca__boton { padding: 12px; border-radius: 14px; background: var(--vm-primario); color: var(--vm-sobre); font-weight: 600; }
.vista-marca__acento { display: inline-flex; margin: 0 auto; padding: 4px 12px; border-radius: 10px; background: var(--vm-acento); color: var(--vm-sobre-acento); font-size: 12.5px; font-weight: 600; }

.integracion {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
    gap: 24px;
    align-items: start;
}
.integracion__logo {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--azul-suave);
    color: var(--azul-texto);
    flex: none;
}
.pasos { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; counter-reset: paso; }
.pasos li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; font-size: var(--t-s); color: var(--tinta-2); line-height: 1.5; counter-increment: paso; }
.pasos li::before {
    content: counter(paso);
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: var(--azul-suave);
    color: var(--azul-texto);
    font-weight: 600;
    font-size: var(--t-xs);
}

.detalle-json { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.detalle-json span { display: inline-flex; gap: 4px; padding: 2px 7px; border-radius: 6px; background: var(--papel-2); border: 1px solid var(--linea-2); font-size: var(--t-xs); color: var(--tinta-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detalle-json b { font-weight: 500; color: var(--tinta-3); }

.reglas-clave { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--t-s); }
.reglas-clave li { display: flex; align-items: center; gap: 8px; color: var(--tinta-3); }
.reglas-clave li .ico { width: 15px; height: 15px; }
.reglas-clave li.cumple { color: var(--exito-texto); }

.mi-cuenta { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 20px; align-items: start; }
.tema-panel .segmentado { display: flex; width: 100%; flex-wrap: nowrap; }
.tema-panel .segmentado button { flex: 1; justify-content: center; padding: 0 8px; min-width: 0; }
.perfil { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 28px 20px; }
.perfil .avatar { width: 72px; height: 72px; font-size: 24px; }
.perfil h2 { font-size: 18px; }

/* Página sin permiso */
.sin-permiso { max-width: 520px; margin: 8vh auto 0; }

/* ------------------------------------------------------------------
   Animaciones
   ------------------------------------------------------------------ */
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes subir { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes entrar-derecha { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes aviso-entra { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes aviso-sale { to { opacity: 0; transform: translateX(16px); } }
@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes fila-nueva {
    0% { opacity: 0; transform: translateY(-8px); background: color-mix(in srgb, var(--azul-suave) 100%, transparent); }
    25% { opacity: 1; transform: none; }
    100% { background: transparent; }
}

/* ------------------------------------------------------------------
   Pantallas medianas
   ------------------------------------------------------------------ */
@media (max-width: 1280px) {
    .indicadores { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .indicadores .indicador--heroe { grid-column: 1 / -1; }
    .editor { grid-template-columns: minmax(0, 1fr) 320px; }
    .editor--horizontal { grid-template-columns: minmax(0, 1fr); }
    .monitor-dos { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1080px) {
    .panel { grid-template-columns: var(--ancho-riel-plegado) minmax(0, 1fr); }
    .riel { width: var(--ancho-riel-plegado); }
    .riel__marca { padding: 0; justify-content: center; }
    .riel__marca .marca { display: none; }
    .riel__isotipo { display: block; }
    .riel__texto, .riel__grupo, .riel__version, .riel__plegar { display: none; }
    .riel__item { justify-content: center; padding: 0; }
    .riel__insignia { position: absolute; top: 3px; right: 5px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; }
    .editor { grid-template-columns: minmax(0, 1fr); }
    .previa { position: static; }
    .carta { grid-template-columns: minmax(0, 1fr); }
    .carta__categorias { position: static; }
    .reportes-rejilla--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .integracion { grid-template-columns: minmax(0, 1fr); }
    .mi-cuenta { grid-template-columns: minmax(0, 1fr); }
    .usuario-btn__nombre { display: none; }
}

/* ------------------------------------------------------------------
   Celular
   ------------------------------------------------------------------ */
@media (max-width: 720px) {
    :root { --alto-barra: 56px; }
    .panel { display: block; }
    .riel { display: none; }
    .barra { padding: 0 10px 0 14px; gap: 8px; }
    .barra__marca-movil { display: flex; align-items: center; padding-right: 2px; }
    .barra__titulo { font-size: 17px; }
    .migas { font-size: 16px; }
    .migas .migas__padre { display: none; }
    .migas .migas__sep { display: none; }
    .conexion { padding: 0 6px; }
    .conexion span { display: none; }
    .conexion--caida span { display: inline; }
    .empresa-btn { max-width: 150px; padding: 0 8px 0 6px; }
    .empresa-btn .empresa-btn__nombre { display: none; }
    .barra__tema { display: none; }
    .contenido { padding: 16px 16px calc(92px + env(safe-area-inset-bottom)); }

    .nav-movil {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
        background: color-mix(in srgb, var(--papel) 94%, transparent);
        backdrop-filter: saturate(1.4) blur(12px);
        -webkit-backdrop-filter: saturate(1.4) blur(12px);
        border-top: 1px solid var(--linea);
    }
    .nav-movil a, .nav-movil button {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        padding: 6px 2px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--tinta-3);
        font-size: 11px;
        font-weight: 500;
        text-decoration: none;
        cursor: pointer;
        min-width: 0;
    }
    .nav-movil a span, .nav-movil button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .nav-movil .ico { width: 22px; height: 22px; }
    .nav-movil [aria-current="page"] { color: var(--azul-texto); }
    .nav-movil [aria-current="page"] .ico { stroke-width: 2.3; }
    .nav-movil .riel__insignia {
        position: absolute;
        top: 2px;
        left: calc(50% + 6px);
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        font-size: 10px;
        line-height: 16px;
    }

    .hoja-movil {
        position: fixed;
        inset: 0;
        z-index: 70;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        background: var(--velo);
        animation: aparecer var(--medio) ease;
    }
    .hoja-movil__panel {
        max-height: 86dvh;
        overflow-y: auto;
        padding: 10px 12px calc(16px + env(safe-area-inset-bottom));
        border-radius: 20px 20px 0 0;
        background: var(--papel);
        animation: subir var(--medio) var(--curva);
    }
    .hoja-movil__asa { width: 40px; height: 5px; border-radius: 3px; background: var(--linea); margin: 2px auto 10px; }

    .cabeza-pagina { margin-bottom: 14px; }
    .cabeza-pagina__texto h2 { font-size: 18px; }
    .rejilla-campos, .rejilla-campos--3 { grid-template-columns: minmax(0, 1fr); }
    .indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .indicador { padding: 14px 16px; }
    .indicador__valor { font-size: 22px; }
    .indicador--heroe .indicador__valor { font-size: 34px; }
    .locales-vivo, .rejilla-kioscos, .empresas { grid-template-columns: minmax(0, 1fr); }
    .reportes-rejilla, .reportes-rejilla--3 { grid-template-columns: minmax(0, 1fr); }
    /* En una columna, las tarjetas de las dos columnas se intercalan en orden de lectura (style="order:N"). */
    .reportes-columna { display: contents; }
    .tarjeta__cabeza { padding: 14px 16px; }
    .tarjeta__cuerpo { padding: 16px; }
    .editor__panel { padding: 16px; }
    .editor__guardar { bottom: calc(70px + env(safe-area-inset-bottom)); margin-left: -4px; margin-right: -4px; padding: 10px 10px 10px 14px; }
    .editor__guardar span { font-size: var(--t-s); }
    .flujo__fila { grid-template-columns: 52px minmax(0, 1fr) auto; padding: 11px 16px; gap: 10px; }
    .flujo__estado { display: none; }
    .flujo__numero { font-size: 18px; }
    .flujo__total { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
    .lista__fila, .alerta-fila, .dispositivo { padding-left: 16px; padding-right: 16px; }
    .pantalla-pendiente { grid-template-columns: minmax(0, 1fr); }
    .pantalla-pendiente__icono { display: none; }
    .pantalla-pendiente__aprobar .entrada--codigo { flex: 1; width: auto; min-width: 0; }
    .diapositiva { grid-template-columns: minmax(0, 1fr); }
    .diapositiva__imagen { width: 100%; }
    .diapositiva__acciones { flex-direction: row; }
    .productos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .carta__categorias .tarjeta__cabeza { display: none; }
    .categorias-lista { display: flex; gap: 6px; overflow-x: auto; padding: 8px !important; scrollbar-width: none; }
    .categorias-lista::-webkit-scrollbar { display: none; }
    .categorias-lista .categoria-btn { flex: none; width: auto; grid-template-columns: 30px auto; padding: 6px 10px 6px 6px; white-space: nowrap; border: 1px solid var(--linea-2); }
    .categorias-lista .categoria-btn__icono { width: 30px; height: 30px; }
    .categorias-lista .categoria-btn__nombre small { display: none; }
    .categoria-fila { display: flex; align-items: center; flex: none; }
    .categoria-fila .categoria-btn { padding-right: 10px; }
    .categoria-fila__editar { position: static; transform: none; opacity: 1; }
    .producto__cuerpo { padding: 10px 11px 12px; }
    .filtros .campo, .filtros .campo--ancho { min-width: calc(50% - 6px); flex: 1; }
    .segmentado { width: 100%; flex-wrap: nowrap; }
    .segmentado button { flex: 1; justify-content: center; padding: 0 8px; min-width: 0; }
    .tarjeta__cabeza { flex-wrap: wrap; }
    .tarjeta__cabeza > h2 { flex: 1 1 60%; }
    .tarjeta__cabeza .segmentado, .previa__barra .segmentado { width: auto; }
    .filtros .campo--periodo { flex: 1 1 100%; }
    .tienda-interruptor { grid-template-columns: minmax(0, 1fr); }
    .barra-h { grid-template-columns: minmax(80px, 110px) minmax(0, 1fr) auto; }
    .pares { grid-template-columns: minmax(96px, auto) minmax(0, 1fr); }
    .mini-cifras { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

    dialog.lateral { width: 100vw; border-left: 0; }
    .lateral__cabeza { padding: 14px 16px 12px; }
    .lateral__cuerpo { padding: 16px 16px 24px; }
    .lateral__pie { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
    dialog.dialogo, dialog.dialogo--ancho, dialog.dialogo--angosto {
        width: 100vw;
        max-width: 100vw;
        max-height: 92dvh;
        margin: auto 0 0;
        border-radius: 20px 20px 0 0;
        border-bottom: 0;
    }
    .dialogo__cabeza { padding: 18px 18px 12px; }
    .dialogo__cuerpo { padding: 4px 18px 18px; }
    .dialogo__pie { padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); }
    .avisos { width: 100vw; padding: 0 12px calc(84px + env(safe-area-inset-bottom)); align-items: stretch; }

    /* Tablas apiladas: cada fila es una tarjeta */
    .tabla--apilable thead { display: none; }
    .tabla--apilable, .tabla--apilable tbody, .tabla--apilable tr, .tabla--apilable td { display: block; width: 100%; }
    .tabla--apilable tr { padding: 12px 16px; border-bottom: 1px solid var(--linea-2); }
    .tabla--apilable tbody tr:last-child { border-bottom: 0; }
    .tabla--apilable td { border: 0; padding: 3px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: right; }
    .tabla--apilable td::before { content: attr(data-etiqueta); color: var(--tinta-3); font-size: var(--t-xs); text-align: left; flex: none; }
    .tabla--apilable td[data-etiqueta=""]::before { display: none; }
    .tabla--apilable td.apilable-titulo { justify-content: flex-start; text-align: left; padding-bottom: 6px; }
    .tabla--apilable td.apilable-titulo::before { display: none; }
    .tabla--apilable td.num { text-align: right; }
    .tabla--apilable td.min { width: 100%; }
    .tabla--apilable td.oculto-movil { display: none; }
    .solo-movil { display: inline-flex; }
}

@media (max-width: 400px) {
    .productos { grid-template-columns: minmax(0, 1fr); }
    .empresa-btn { max-width: 120px; }
}

/* ------------------------------------------------------------------
   Movimiento reducido
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .riel, .barra, .nav-movil, .avisos { display: none !important; }
    .panel { display: block; }
    body { background: #fff; }
}