:root {
    --acento: #ff5a1f;
    --acento-oscuro: #e04a12;
    --acento-suave: #fff0e9;
    --tinta: #1d2330;
    --tinta-suave: #5d6678;
    --fondo: #f5f6fa;
    --superficie: #ffffff;
    --borde: #e5e8f0;
    --exito: #12a150;
    --exito-suave: #e3f6ec;
    --alerta: #c27803;
    --alerta-suave: #fff4d6;
    --info: #1d6fd6;
    --info-suave: #e3eefc;
    --peligro: #d92d3a;
    --peligro-suave: #fdebec;
    --gris-suave: #eceef4;
    --radio: 14px;
    --sombra: 0 1px 2px rgba(20, 28, 48, 0.05), 0 8px 24px rgba(20, 28, 48, 0.06);
    --sombra-alta: 0 2px 4px rgba(20, 28, 48, 0.06), 0 16px 36px rgba(20, 28, 48, 0.12);
    --fuente: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --curva: cubic-bezier(0.22, 1, 0.36, 1);
    color-scheme: light;
}
:root[data-tema="oscuro"] { color-scheme: dark; }

/* Claro por defecto, sin importar el dispositivo; el oscuro sólo rige si se elige con el botón de la cabecera. */
:root[data-tema="oscuro"] {
        --acento-suave: #3a2118;
        --tinta: #eef0f6;
        --tinta-suave: #9ba4b8;
        --fondo: #0f121a;
        --superficie: #181c27;
        --borde: #272d3d;
        --exito: #38c878;
        --exito-suave: #12301f;
        --alerta: #f0b440;
        --alerta-suave: #3a2d0e;
        --info: #6aa8ff;
        --info-suave: #14283f;
        --peligro: #ff6a75;
        --peligro-suave: #3a1519;
        --gris-suave: #232838;
        --sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
        --sombra-alta: 0 2px 4px rgba(0, 0, 0, 0.5), 0 16px 36px rgba(0, 0, 0, 0.45);
}

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

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

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    font-family: var(--fuente);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    color: var(--tinta);
    background: var(--fondo);
}

h1, h2, p, ol, dl, dd, figure { margin: 0; }
ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

/* ---------- Estructura del panel web ---------- */
.app {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    background:
        radial-gradient(900px 320px at 100% -6%, var(--acento-suave), transparent 70%),
        var(--fondo);
}
.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pagina { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 1360px; margin-inline: auto; padding: 4px 16px 32px; }
.app-con-lateral { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }

.cabecera {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    padding: 8px 16px;
    background: color-mix(in srgb, var(--fondo) 80%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
}
.app:not(.app-con-lateral) .cabecera { justify-content: center; }
.cabecera-marca { font-size: 17px; }

.marca { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: -0.02em; }
.marca-icono {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    transition: transform 0.4s var(--curva);
}
.marca-texto { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.1; }
.marca-sub { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--acento); }
.marca-icono img { width: 34px; height: 34px; object-fit: contain; }
:root[data-tema="oscuro"] .marca-icono img { filter: invert(1); }
.marca:hover .marca-icono { transform: rotate(-12deg) scale(1.08); }
.cabecera-accion {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--acento);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 6px 14px rgba(255, 90, 31, 0.3);
    transition: transform 0.25s var(--curva), background-color 0.2s, box-shadow 0.2s;
}
.cabecera-accion:hover { background: var(--acento-oscuro); transform: translateY(-1px); }
/* En móvil el alta de pedidos es el botón central de la barra inferior. */
.app-con-lateral .cabecera-accion { display: none; }

/* Botón de tema claro/oscuro: muestra la luna en claro y el sol en oscuro. */
.boton-tema {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background: var(--superficie);
    color: var(--tinta);
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.25s var(--curva), border-color 0.2s, color 0.2s;
}
.boton-tema:hover { border-color: var(--acento); color: var(--acento); transform: translateY(-1px); }
.boton-tema:focus-visible { outline: 3px solid color-mix(in srgb, var(--acento) 45%, transparent); outline-offset: 2px; }
.boton-tema .tema-sol { display: none; }
:root[data-tema="oscuro"] .boton-tema .tema-sol { display: inline; }
:root[data-tema="oscuro"] .boton-tema .tema-luna { display: none; }
:root[data-tema="claro"] .boton-tema .tema-sol { display: none; }
:root[data-tema="claro"] .boton-tema .tema-luna { display: inline; }

/* ---------- Barra lateral ---------- */
.lateral {
    position: sticky;
    top: 0;
    align-self: flex-start;
    flex: none;
    display: none;
    flex-direction: column;
    gap: 28px;
    width: 250px;
    height: 100vh;
    height: 100dvh;
    padding: 22px 14px;
    background: var(--superficie);
    border-right: 1px solid var(--borde);
    overflow-y: auto;
    z-index: 40;
}
.lateral > .marca { padding: 0 10px; }
.menu { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.menu-enlace {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--tinta-suave);
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s, background-color 0.2s;
}
.menu-icono {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    font-size: 15px;
    background: var(--gris-suave);
    transition: color 0.2s, background-color 0.2s, transform 0.3s var(--curva);
}
.menu-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-enlace:hover { color: var(--tinta); background: var(--gris-suave); }
.menu-enlace:hover .menu-icono { transform: scale(1.08); }
.menu-enlace.activo { color: var(--acento); font-weight: 800; background: var(--acento-suave); }
.menu-enlace.activo .menu-icono { background: var(--acento); color: #fff; }
.menu-enlace:focus-visible { outline: 3px solid color-mix(in srgb, var(--acento) 45%, transparent); outline-offset: 2px; }
.menu-salir { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--borde); }

/* Con JS el fondo de la sección activa es una píldora que se desliza verticalmente por el menú. */
.menu.nav-deslizante { position: relative; }
.menu.nav-deslizante > .menu-enlace { position: relative; z-index: 1; }
.menu.nav-deslizante .menu-enlace.activo { background: transparent; }
.menu .nav-indicador {
    top: var(--nav-a, 0px);
    left: 0;
    width: 100%;
    height: var(--nav-b, 0px);
    border-radius: 12px;
    background: var(--acento-suave);
    z-index: 0;
}
.menu .nav-indicador.anima { transition: top 0.45s var(--curva), height 0.45s var(--curva), opacity 0.2s; }


.titulo-pagina > i, .tarjeta-titulo > i, .metrica-etiqueta > i { margin-right: 8px; color: var(--acento); }
.titulo-pagina > i { font-size: 0.8em; }
.pestana > i, .segmentado label > i, .insignia-boton > i { margin-right: 7px; }
.insignia-boton > i { margin-right: 5px; font-size: 11px; }
.encabezado { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.titulo-pagina { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }

.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 16px;
    box-shadow: var(--sombra);
    transition: transform 0.35s var(--curva), box-shadow 0.35s var(--curva);
}
.tarjeta-titulo { font-size: 15px; font-weight: 700; margin-bottom: 14px; }
.tarjeta-titulo small { font-weight: 500; color: var(--tinta-suave); }
.tarjeta-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.tarjeta-cabecera .tarjeta-titulo { margin: 0; }
.btn-plegar { background: none; border: 0; color: var(--tinta-suave); cursor: pointer; padding: 6px 8px; border-radius: 8px; }
.btn-plegar:hover { background: var(--borde); color: var(--acento); }
.btn-plegar i { transition: transform 0.25s var(--curva); }
.tarjeta.plegada .btn-plegar i { transform: rotate(180deg); }
.tarjeta.plegada .tarjeta-cuerpo { display: none; }
.tarjeta.plegada .tarjeta-cabecera { margin-bottom: 0; }
.metrica:hover, .grilla > .tarjeta:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }

.metrica { position: relative; overflow: hidden; }
.metrica::after {
    content: "";
    position: absolute;
    inset: auto -30px -50px auto;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--acento-suave), transparent 70%);
    pointer-events: none;
}
.metrica-etiqueta { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-suave); }
.metrica-valor { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; margin-block: 4px 8px; font-variant-numeric: tabular-nums; }
.metrica-valor.negativo { color: var(--peligro); }
.metrica-detalle { font-size: 13px; color: var(--tinta-suave); }

.grilla { display: grid; gap: 14px; }
/* Métricas del dashboard: carrusel horizontal con imán, como las tarjetas de una app. */
.carrusel {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    margin-inline: -16px;
    padding: 4px 16px 10px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.carrusel::-webkit-scrollbar { display: none; }
.carrusel > * { flex: 0 0 82%; scroll-snap-align: center; }
.grilla-3 { grid-template-columns: minmax(0, 1fr); }
.grilla-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grilla-pedido { grid-template-columns: minmax(0, 1fr); }
.compacta { gap: 12px; }
.columna { display: flex; flex-direction: column; gap: 18px; }

.ranking { display: flex; flex-direction: column; gap: 14px; }
.ranking-datos { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.ranking-nombre { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-valor { color: var(--tinta-suave); white-space: nowrap; font-size: 13px; }
.barra { height: 6px; margin-top: 6px; border-radius: 6px; background: var(--gris-suave); overflow: hidden; }
.barra-relleno {
    display: block;
    height: 100%;
    width: var(--ancho, 0%);
    border-radius: 6px;
    background: linear-gradient(90deg, var(--acento), #ffa24d);
    transition: width 0.9s var(--curva);
}
.ranking-gastos .barra-relleno { background: linear-gradient(90deg, var(--peligro), #ff7a84); }

.tabla-scroll { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla td { vertical-align: middle; overflow-wrap: break-word; }
.tabla th {
    padding: 10px 12px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tinta-suave);
    border-bottom: 1px solid var(--borde);
    white-space: nowrap;
}
.tabla .derecha, .derecha { text-align: right; font-variant-numeric: tabular-nums; }
.tabla tr.inactivo td { color: var(--tinta-suave); }
/* Tablas (mobile first): cada fila es una mini tarjeta con etiqueta a la izquierda y valor a la derecha. */
.tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.tabla, .tabla tbody, .tabla tr, .tabla td { display: block; }
.tabla tbody { display: flex; flex-direction: column; gap: 10px; }
.tabla tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 4px 14px; border: 1px solid var(--borde); border-radius: calc(var(--radio) - 4px); background: var(--superficie); }
.tabla td, .tabla tbody tr:last-child td {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    text-align: right;
    border-bottom: 1px solid var(--borde);
}
.tabla td:last-child, .tabla tbody tr:last-child td:last-child { border-bottom: 0; }
.tabla td[data-etiqueta=""] { justify-content: flex-end; }
/* Cabecera de la tarjeta (columnas con clase mv-izq / mv-der): título a la izquierda y dato destacado a la derecha, sin etiqueta. */
.tabla td.mv-izq, .tabla td.mv-der { grid-row: 1; padding-block: 10px; font-weight: 800; justify-content: flex-start; }
.tabla td.mv-izq { grid-column: 1; font-size: 16px; }
.tabla td.mv-der { grid-column: 2; justify-content: flex-end; }
.tabla td.mv-izq::before, .tabla td.mv-der::before { content: none; }
.tabla td.mv-izq, .tabla td.mv-der { border-bottom: 0; }
.tabla td.mv-izq + td { border-top: 1px solid var(--borde); }
/* Filas minimalistas (mv-plana): solo el valor, sin etiqueta ni separador; mv-tenue lo atenúa. */
.tabla td.mv-plana { justify-content: flex-start; text-align: left; border-bottom: 0; padding-block: 2px; }
.tabla td.mv-plana::before { content: none; }
.tabla td.mv-tenue { font-size: 13px; color: var(--tinta-suave); }
.tabla td::before {
    content: attr(data-etiqueta);
    flex: none;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tinta-suave);
}
.tabla td.vacio { display: block; text-align: center; border: 0; }
.tabla td.vacio::before { content: none; }
.vacio { padding: 18px 12px; text-align: center; color: var(--tinta-suave); }

.insignia {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 999px;
    border: 0;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    text-transform: capitalize;
}
.insignia-exito { background: var(--exito-suave); color: var(--exito); }
.insignia-alerta { background: var(--alerta-suave); color: var(--alerta); }
.insignia-peligro { background: var(--peligro-suave); color: var(--peligro); }
.insignia-info { background: var(--info-suave); color: var(--info); }
.insignia-gris { background: var(--gris-suave); color: var(--tinta-suave); }
.insignia-selector {
    min-height: 36px;
    min-width: 116px;
    padding: 6px 30px 6px 14px;
    cursor: pointer;
    border: 0;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    appearance: none;
    -webkit-appearance: none;
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.2 6 8l4-3.8' fill='none' stroke='%23808080' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    transition: filter 0.2s, box-shadow 0.2s;
}
.insignia-selector:hover { filter: brightness(0.96); }
.insignia-selector:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.insignia-selector option { background: var(--superficie); color: var(--tinta); font-weight: 600; text-transform: capitalize; }
.insignia-boton { min-height: 32px; padding: 6px 12px; cursor: pointer; transition: transform 0.2s var(--curva), filter 0.2s; }
.insignia-boton:hover { transform: scale(1.08); filter: brightness(0.95); }

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 11px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: transform 0.2s var(--curva), box-shadow 0.25s, background-color 0.2s, border-color 0.2s;
}
.boton:hover { transform: translateY(-2px); }
.boton:active { transform: translateY(0) scale(0.97); }
.boton:focus-visible, .campo:focus-visible, .pestana:focus-visible { outline: 3px solid color-mix(in srgb, var(--acento) 45%, transparent); outline-offset: 2px; }
.boton-primario { background: var(--acento); color: #fff; box-shadow: 0 6px 16px rgba(255, 90, 31, 0.32); }
.boton-primario:hover { background: var(--acento-oscuro); box-shadow: 0 10px 22px rgba(255, 90, 31, 0.4); }
/* Guardar: brillo que cruza el botón al pasar el cursor y estado "guardando" con spinner. */
.boton-primario { position: relative; overflow: hidden; isolation: isolate; }
.boton-primario::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 50%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: translateX(-130%) skewX(-18deg);
    pointer-events: none;
    z-index: -1;
}
.boton-primario:hover::after { transform: translateX(300%) skewX(-18deg); transition: transform 0.7s var(--curva); }
.boton-primario.guardando { color: transparent; pointer-events: none; animation: latido-guardar 1.2s ease-in-out infinite; }
.boton-primario.guardando::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: girar 0.7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes latido-guardar { 50% { box-shadow: 0 6px 26px rgba(255, 90, 31, 0.55); } }
.boton-exito { background: var(--exito); color: #fff; }
.boton-suave { background: var(--superficie); color: var(--tinta); border-color: var(--borde); }
.boton-suave:hover { border-color: var(--acento); color: var(--acento); }
.boton-peligro { background: var(--peligro-suave); color: var(--peligro); }
.boton-peligro:hover { background: var(--peligro); color: #fff; }
.boton-chico { min-height: 40px; padding: 6px 12px; font-size: 13px; border-radius: 9px; }
.boton-grande { min-height: 52px; padding: 15px 22px; font-size: 16px; }
.boton-bloque { width: 100%; }

/* Ventas: selección para imprimir y filtro del historial. */
.acciones-ventas { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 899px) { .acciones-ventas .boton-primario { display: none; } }
.sel-venta { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.sel-venta input { width: 20px; height: 20px; accent-color: var(--acento); }
.filtro-fechas { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.filtro-fechas > div { flex: 1 1 150px; min-width: 0; }

.campo {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 10px 13px;
    border: 1px solid var(--borde);
    border-radius: 11px;
    background: var(--superficie);
    color: var(--tinta);
    font: inherit;
    font-size: 16px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.campo:hover { border-color: color-mix(in srgb, var(--acento) 45%, var(--borde)); }
.campo:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 18%, transparent); }
textarea.campo { resize: vertical; }
/* Selector con búsqueda (js/app.js): lista propia en lugar del datalist nativo. */
.combo { position: relative; width: 100%; min-width: 0; }
.combo-lista {
    position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0;
    max-height: min(280px, 45vh); overflow-y: auto; overscroll-behavior: contain;
    margin: 0; padding: 6px; list-style: none;
    border: 1px solid var(--borde); border-radius: var(--radio);
    background: var(--superficie); box-shadow: var(--sombra);
    animation: combo-entra 0.15s ease-out;
}
.combo-lista[hidden] { display: none; }
.combo-lista li { padding: 11px 12px; border-radius: 9px; color: var(--tinta); font-size: 15px; font-weight: 600; cursor: pointer; overflow-wrap: anywhere; }
.combo-lista li.activo { background: var(--acento-suave); color: var(--acento); }
.combo-lista li.elegida::after { content: "✓"; float: right; margin-left: 10px; }
.combo-lista li.combo-vacio { color: var(--tinta-suave); font-weight: 500; cursor: default; }
@keyframes combo-entra { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .combo-lista { animation: none; } }
.campo-moneda { display: flex; align-items: stretch; width: 100%; min-width: 0; }
.moneda-simbolo {
    display: flex; align-items: center; padding: 0 12px;
    border: 1px solid var(--borde); border-right: 0; border-radius: 11px 0 0 11px;
    background: color-mix(in srgb, var(--acento) 8%, var(--superficie)); color: var(--tinta); font-weight: 600;
}
.campo-moneda .campo { border-radius: 0 11px 11px 0; }
.campo-chico { width: 110px; min-height: 38px; padding: 6px 10px; }
.etiqueta { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--tinta-suave); }
.grupo-campo { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; }
.tabla .grupo-campo { margin: 0; flex-wrap: nowrap; justify-content: flex-end; min-width: 0; }
.tabla .grupo-campo .campo-moneda { flex: 0 1 140px; min-width: 112px; width: auto; }
.tabla .grupo-campo .boton { flex: none; padding-inline: 10px; }
.tabla .grupo-campo .campo-chico { width: 100%; }

.formulario-linea { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.formulario-linea .campo, .formulario-linea .campo-moneda { flex: 1 1 100%; }
.formulario-linea .campo-ancho { flex: 1 1 100%; }
.formulario-linea > .boton { flex: 1 1 100%; }

.segmentado { display: flex; padding: 4px; margin-bottom: 14px; border-radius: 13px; background: var(--gris-suave); }
.segmentado input { position: absolute; opacity: 0; pointer-events: none; }
.segmentado label {
    flex: 1;
    text-align: center;
    padding: 10px 12px;
    border-radius: 10px;
    font-weight: 700;
    color: var(--tinta-suave);
    cursor: pointer;
    transition: background-color 0.25s, color 0.25s, box-shadow 0.25s;
}
.segmentado input:checked + label { background: var(--superficie); color: var(--acento); box-shadow: var(--sombra); }
.segmentado input:focus-visible + label { outline: 3px solid color-mix(in srgb, var(--acento) 45%, transparent); }

.plegable { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.4s var(--curva), opacity 0.3s; }
.plegable.abierto { grid-template-rows: 1fr; opacity: 1; }
.plegable-interior { overflow: hidden; min-height: 0; }
.plegable.abierto .plegable-interior { padding: 4px; margin: -4px; }
/* Ventana modal: fondo desenfocado en todos los dispositivos; en móvil sube como hoja desde abajo. */
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; visibility: hidden; pointer-events: none; transition: visibility 0s 0.3s; }
.modal.abierto { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.modal-fondo { position: absolute; inset: 0; background: rgba(10, 14, 24, 0.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.3s; }
.modal.abierto .modal-fondo { opacity: 1; }
.modal-panel {
    position: relative; width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain;
    padding: 20px; border: 1px solid var(--borde); border-radius: calc(var(--radio) + 4px);
    background: var(--superficie); box-shadow: var(--sombra), 0 24px 60px rgba(10, 14, 24, 0.35);
    opacity: 0; transform: translateY(16px) scale(0.98); transition: opacity 0.25s, transform 0.3s var(--curva);
}
.modal.abierto .modal-panel { opacity: 1; transform: none; }
.modal-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.modal-cabecera .tarjeta-titulo { margin: 0; }
.modal-cerrar { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--gris-suave); color: var(--tinta); font-size: 16px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.modal-cerrar:hover { background: var(--acento-suave); color: var(--acento); }
.modal-cerrar:focus-visible { outline: 3px solid color-mix(in srgb, var(--acento) 45%, transparent); outline-offset: 2px; }
.modal .formulario-linea { flex-direction: column; align-items: stretch; }
.modal .formulario-linea .campo, .modal .formulario-linea .campo-ancho { flex: none; }
body.modal-abierto { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .modal-fondo, .modal-panel { transition: none; } }

/* Modal de aviso: franja de color, ícono con ondas y contenido que entra escalonado. */
.modal-aviso .modal-panel { width: min(400px, 100%); padding: 0; overflow: hidden; text-align: center; transform: translateY(32px) scale(0.9); transition: opacity 0.3s, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
.modal-aviso .modal-panel::before { content: ""; display: block; height: 6px; background: linear-gradient(90deg, var(--acento), #ffb347, var(--acento)); background-size: 200% 100%; animation: aviso-franja 3s linear infinite; }
.modal-aviso .modal-cabecera { position: absolute; top: 14px; right: 12px; margin: 0; z-index: 1; }
.modal-aviso .modal-cabecera .tarjeta-titulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.aviso-prueba { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 34px 26px 26px; background: radial-gradient(circle at 50% 0%, var(--acento-suave), transparent 65%); }
.aviso-icono { position: relative; display: grid; place-items: center; width: 84px; height: 84px; margin-bottom: 4px; border-radius: 50%; background: linear-gradient(145deg, var(--acento), #ff8a3d); color: #fff; font-size: 34px; box-shadow: 0 10px 24px color-mix(in srgb, var(--acento) 40%, transparent); }
.aviso-icono > i { position: relative; display: block; line-height: 1; width: 1em; text-align: center; animation: aviso-bambolea 2.4s ease-in-out infinite; }
.aviso-onda { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--acento); opacity: 0; animation: aviso-onda 2.4s ease-out infinite; }
.aviso-onda + .aviso-onda { animation-delay: 1.2s; }
.aviso-texto { margin: 0; color: var(--tinta-suave); font-size: 15px; line-height: 1.6; }
.aviso-boton { margin-top: 6px; }
.aviso-prueba > * { opacity: 0; transform: translateY(14px); }
.modal-aviso.abierto .aviso-prueba > * { animation: aviso-sube 0.55s var(--curva) both; }
.modal-aviso.abierto .aviso-prueba > :nth-child(1) { animation-delay: 0.15s; }
.modal-aviso.abierto .aviso-prueba > :nth-child(2) { animation-delay: 0.25s; }
.modal-aviso.abierto .aviso-prueba > :nth-child(3) { animation-delay: 0.35s; }
.modal-aviso.abierto .aviso-prueba > :nth-child(4) { animation-delay: 0.45s; }
@keyframes aviso-sube { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes aviso-onda { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes aviso-bambolea { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes aviso-franja { to { background-position: 200% 0; } }
@media (prefers-reduced-motion: reduce) {
    .modal-aviso .modal-panel::before, .aviso-icono > i, .aviso-onda { animation: none; }
    .aviso-prueba > *, .modal-aviso.abierto .aviso-prueba > * { opacity: 1; transform: none; animation: none; }
}

.pestanas { display: flex; gap: 4px; padding: 4px; border-radius: 13px; background: var(--gris-suave); }
.pestana {
    flex: 1;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--tinta-suave);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.25s, color 0.25s, box-shadow 0.25s;
}
.pestana.activo { background: var(--superficie); color: var(--acento); box-shadow: var(--sombra); }
/* Píldora deslizante (la crea js/app.js): viaja entre pestañas en vez de cambiar el fondo de golpe. */
.pestanas { position: relative; }
.pestana { position: relative; z-index: 1; }
.pestanas-indicador {
    position: absolute; top: 4px; bottom: 4px; left: 0;
    border-radius: 10px; background: var(--superficie); box-shadow: var(--sombra); pointer-events: none;
}
.pestanas-indicador.anima { transition: transform 0.4s var(--curva), width 0.4s var(--curva); }
.pestanas-deslizante .pestana.activo { background: transparent; box-shadow: none; }
.panel { display: none; flex-direction: column; gap: 18px; }
.panel.activo { display: flex; animation: aparecer 0.45s var(--curva) both; }

.items { display: flex; flex-direction: column; gap: 10px; }
.item-fila {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
    gap: 8px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--borde);
    border-radius: 12px;
    animation: entrar-item 0.4s var(--curva) both;
}
.item-fila.saliendo { animation: salir-item 0.28s ease-in both; }
.item-fila .tipo-item { grid-column: 1 / 3; grid-row: 1; margin-bottom: 0; }
.tipo-item label { padding: 8px 10px; }
.item-fila .item { grid-column: 1 / -1; grid-row: 2; }
.item-fila .quitar { grid-column: 3; grid-row: 1; min-width: 44px; min-height: 44px; }
.item-fila .cant { grid-column: 1; grid-row: 3; }
.item-fila .item-subtotal { grid-column: 2 / 4; grid-row: 3; }
.item-subtotal { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
#items:empty + .vacio { display: block; }
#items:not(:empty) + .vacio { display: none; }

.resumen { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--borde); display: flex; flex-direction: column; gap: 8px; }
.resumen > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.resumen dt { color: var(--tinta-suave); font-weight: 600; }
.resumen dd { font-weight: 700; font-variant-numeric: tabular-nums; }
.resumen dd.resumen-favor { color: var(--exito); }
.resumen-total { padding-block: 6px; font-size: 20px; }
.resumen-total dt { color: var(--tinta); }
.resumen-total dd { color: var(--acento); }
.resumen dd.pulso { animation: pulso 0.35s var(--curva); }

/* Avisos: esquina superior derecha; en móvil ocupan el ancho con margen. */
.avisos {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    left: max(12px, env(safe-area-inset-left));
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    pointer-events: none;
}
.aviso {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: min(100%, 380px);
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid var(--borde);
    border-left-width: 5px;
    background: var(--superficie);
    box-shadow: var(--sombra-alta);
    font-weight: 600;
    font-size: 0.95rem;
    text-align: left;
    animation: entrar-aviso 0.4s var(--curva) both;
    touch-action: pan-y;
}
.aviso > span { flex: 1; overflow-wrap: anywhere; }
.aviso-success { border-left-color: var(--exito); }
.aviso-danger { border-left-color: var(--peligro); }
.aviso.saliendo { animation: salir-aviso 0.3s ease-in both; }
.aviso-cerrar { border: 0; background: transparent; color: var(--tinta-suave); font-size: 22px; line-height: 1; cursor: pointer; }
.aviso-cerrar:hover { color: var(--tinta); }

.error-pagina { margin: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; padding-block: 48px; }
.error-codigo {
    font-size: clamp(80px, 18vw, 150px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.05em;
    background: linear-gradient(135deg, var(--acento), #ffa24d);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.traza { max-width: 100%; overflow: auto; padding: 14px; border-radius: 12px; background: var(--gris-suave); text-align: left; font-size: 12px; }

.animar { animation: aparecer 0.6s var(--curva) both; }
.grilla > .animar:nth-child(2), .columna > .animar:nth-child(2) { animation-delay: 0.08s; }
.grilla > .animar:nth-child(3), .columna > .animar:nth-child(3) { animation-delay: 0.16s; }
.pagina > .animar:nth-child(2) { animation-delay: 0.05s; }
.pagina > .animar:nth-child(3) { animation-delay: 0.1s; }
.pagina > .animar:nth-child(4) { animation-delay: 0.15s; }

@keyframes aparecer { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes entrar-item { from { opacity: 0; transform: translateX(-14px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes salir-item { to { opacity: 0; transform: translateX(20px) scale(0.96); } }
@keyframes entrar-aviso { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes salir-aviso { to { opacity: 0; transform: translateX(40px); } }
@keyframes pulso { 50% { transform: scale(1.12); } }

/* ---------- Navegación móvil: barra inferior, botón central y hoja "Más" ---------- */
.barra-inferior {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 40;
    display: flex;
    align-items: stretch;
    height: calc(64px + env(safe-area-inset-bottom));
    padding: 0 6px env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--superficie) 92%, transparent);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-top: 1px solid var(--borde);
    box-shadow: 0 -8px 24px rgba(20, 28, 48, 0.07);
}
.barra-enlace {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 2px;
    border: 0;
    background: transparent;
    color: var(--tinta-suave);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s;
}
.barra-enlace > i { font-size: 19px; transition: transform 0.3s var(--curva); }
.barra-enlace > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-enlace:active > i { transform: scale(0.88); }
.barra-enlace.activo { color: var(--acento); font-weight: 800; }
.barra-enlace.activo::before {
    content: "";
    position: absolute;
    top: 0;
    width: 26px;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: var(--acento);
}
/* Con JS la marca activa es un indicador único que se desliza entre secciones. */
.barra-inferior.nav-deslizante .barra-enlace.activo::before { content: none; }
.nav-indicador {
    position: absolute;
    top: 0;
    left: calc(var(--nav-a, 0px) + (var(--nav-b, 0px) - 26px) / 2);
    width: 26px;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: var(--acento);
    pointer-events: none;
}
.nav-indicador.anima { transition: left 0.45s var(--curva); }
.nav-indicador.oculto { opacity: 0; }
.barra-enlace.activo > i { animation: rebote-icono 0.5s var(--curva); }
@keyframes rebote-icono { 40% { transform: translateY(-4px) scale(1.15); } }
.barra-enlace:focus-visible, .barra-fab:focus-visible, .hoja-opcion:focus-visible, .hoja-fila:focus-visible { outline: 3px solid color-mix(in srgb, var(--acento) 45%, transparent); outline-offset: -3px; }

/* Botón circular central: sobresale de la barra, con un anillo del color del fondo que simula la muesca. */
.barra-fab {
    position: relative;
    flex: none;
    align-self: flex-start;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin: -22px 8px 0;
    border-radius: 50%;
    background: linear-gradient(145deg, #ff7a3d, var(--acento) 55%, var(--acento-oscuro));
    color: #fff;
    font-size: 24px;
    box-shadow: 0 0 0 6px var(--fondo), 0 10px 22px rgba(255, 90, 31, 0.45);
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.3s var(--curva), box-shadow 0.3s var(--curva);
}
.barra-fab:active { transform: scale(0.92); }
.barra-fab.activo { box-shadow: 0 0 0 6px var(--fondo), 0 0 0 9px color-mix(in srgb, var(--acento) 30%, transparent), 0 10px 22px rgba(255, 90, 31, 0.45); }

.sin-scroll, .sin-scroll body { overflow: hidden; }
.hoja { position: fixed; inset: 0; z-index: 50; visibility: hidden; pointer-events: none; transition: visibility 0s 0.35s; }
.hoja.abierta { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.hoja-fondo { position: absolute; inset: 0; background: rgba(10, 14, 24, 0.5); opacity: 0; transition: opacity 0.3s; }
.hoja.abierta .hoja-fondo { opacity: 1; }
.hoja-panel {
    position: absolute;
    inset: auto 0 0 0;
    max-height: 85dvh;
    overflow-y: auto;
    padding: 10px 16px calc(20px + env(safe-area-inset-bottom));
    border-radius: 24px 24px 0 0;
    background: var(--superficie);
    box-shadow: var(--sombra-alta);
    transform: translateY(100%);
    transition: transform 0.35s var(--curva);
}
.hoja.abierta .hoja-panel { transform: none; }
.hoja-asa { display: block; width: 40px; height: 4px; margin: 0 auto 16px; border-radius: 4px; background: var(--borde); }
.hoja-grilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.hoja-opcion {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 6px;
    border-radius: 16px;
    background: var(--gris-suave);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}
.hoja-opcion > span:last-child { max-width: 100%; overflow-wrap: anywhere; }
.hoja-opcion.activo { background: var(--acento-suave); color: var(--acento); }
.hoja-icono { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--superficie); color: var(--acento); font-size: 17px; }
.hoja-opcion.activo .hoja-icono { background: var(--acento); color: #fff; }
.hoja-acciones { display: flex; flex-direction: column; border-top: 1px solid var(--borde); padding-top: 8px; }
.hoja-acciones form { margin: 0; }
.hoja-fila { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 52px; padding: 6px 4px; border: 0; background: transparent; color: var(--tinta); font: inherit; font-weight: 600; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hoja-fila .hoja-icono { background: var(--gris-suave); color: var(--tinta); }
.hoja-fila-salir, .hoja-fila-salir .hoja-icono { color: var(--peligro); }
.hoja-fila .tema-sol { display: none; }
:root[data-tema="oscuro"] .hoja-fila .tema-sol { display: inline; }
:root[data-tema="oscuro"] .hoja-fila .tema-luna { display: none; }
:root[data-tema="claro"] .hoja-fila .tema-sol { display: none; }
:root[data-tema="claro"] .hoja-fila .tema-luna { display: inline; }

/* Celulares muy angostos y apaisados bajos */
@media (max-width: 359px) {
    .pagina { padding-inline: 12px; }
    .grilla-2 { grid-template-columns: minmax(0, 1fr); }
    .barra-enlace { font-size: 10px; }
    .barra-fab { margin-inline: 4px; }
    .hoja-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-height: 460px) {
    .barra-inferior { height: calc(52px + env(safe-area-inset-bottom)); }
    .barra-enlace > span { display: none; }
    .barra-fab { width: 48px; height: 48px; margin-top: -12px; font-size: 20px; }
}

/* ---------- Tablet: formularios en línea y tablas de verdad ---------- */
@media (min-width: 640px) {
    .pagina { padding-inline: 24px; }
    .cabecera { padding-inline: 24px; }
    .formulario-linea .campo, .formulario-linea .campo-moneda { flex: 1 1 160px; }
    .formulario-linea .campo-ancho { flex: 2 1 240px; }
    .formulario-linea > .boton { flex: none; }
    .tabla tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .barra-inferior { left: 50%; right: auto; width: min(560px, 100%); transform: translateX(-50%); border-radius: 22px 22px 0 0; border-inline: 1px solid var(--borde); }
    .hoja-panel { inset: auto auto 0 50%; width: min(440px, 100%); margin-left: -220px; }
    .hoja-grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
    .tabla-scroll { margin: -8px -8px 0; padding: 0 8px; }
    .tabla:not(.tabla-apilada) { display: table; }
    .tabla:not(.tabla-apilada) thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; display: table-header-group; }
    .tabla:not(.tabla-apilada) tbody { display: table-row-group; }
    .tabla:not(.tabla-apilada) tr { display: table-row; }
    .tabla:not(.tabla-apilada) tbody tr { padding: 0; border: 0; border-radius: 0; background: transparent; transition: background-color 0.2s; }
    .tabla:not(.tabla-apilada) tbody tr:hover { background: var(--gris-suave); }
    .tabla:not(.tabla-apilada) td, .tabla:not(.tabla-apilada) tbody tr:last-child td {
        display: table-cell;
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid var(--borde);
    }
    .tabla:not(.tabla-apilada) td.derecha, .tabla:not(.tabla-apilada) tbody tr:last-child td.derecha { text-align: right; }
    .tabla:not(.tabla-apilada) td.mv-izq, .tabla:not(.tabla-apilada) td.mv-der { font-size: inherit; font-weight: inherit; border-top: 0; }
    .tabla:not(.tabla-apilada) td.mv-izq + td { border-top: 0; }
    .tabla:not(.tabla-apilada) tbody tr:last-child td { border-bottom: 0; }
    .tabla:not(.tabla-apilada) td::before { content: none; }
    .tabla:not(.tabla-apilada) td.vacio { text-align: center; }
    .tabla:not(.tabla-apilada) .acciones-fila { justify-content: flex-start; }
}

/* ---------- Escritorio: barra lateral, métricas en fila y paneles en columnas ---------- */
@media (min-width: 900px) {
    .app-con-lateral { padding-bottom: 0; }
    .lateral { display: flex; }
    .barra-inferior, .hoja { display: none; }
    .cabecera { min-height: 64px; padding: 12px 32px; justify-content: flex-end; gap: 10px; }
    .app-con-lateral .cabecera-marca { display: none; }
    .app-con-lateral .cabecera-accion { display: inline-flex; }
    .app:not(.app-con-lateral) .cabecera { justify-content: center; }
    .pagina { gap: 20px; padding: 8px 32px 48px; }
    .titulo-pagina { font-size: 24px; }
    .metrica-valor { font-size: 32px; }
    .grafico { grid-template-columns: 54px 1fr; grid-template-rows: 260px auto; column-gap: 10px; }
    .grafico-cols, .grafico-meses { gap: 10px; }
    .grafico-meses span { font-size: 0.75rem; }
    .grafico-eje span { font-size: 0.68rem; }
    .grafico-col:not(.mejor) .grafico-valor { display: block; }
    .carrusel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding: 0; gap: 16px; }
    .carrusel > * { flex: none; }
    .carrusel > .tarjeta:last-child { grid-column: 1 / -1; }
    .grilla { gap: 16px; }
    .grilla-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
    .grilla-pedido { grid-template-columns: minmax(0, 1.6fr) minmax(340px, 1fr); align-items: start; gap: 20px; }
    .grilla-pedido > aside { position: sticky; top: 84px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Login y botón de salir */
.app:has(.login) .cabecera { display: none; }
.app:has(.login) .pagina { padding-top: 0; }
.login { position: relative; width: 100%; max-width: 400px; margin: 6vh auto 0; display: flex; flex-direction: column; align-items: center; gap: 26px; isolation: isolate; }
.login-form { display: flex; flex-direction: column; gap: 14px; }

/* Íconos de comida que flotan suavemente de fondo */
.login-fondo { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
    background: radial-gradient(circle at 20% 15%, var(--acento-suave), transparent 55%), radial-gradient(circle at 85% 90%, var(--acento-suave), transparent 50%); }
.login-fondo i { position: absolute; color: var(--acento); opacity: 0.12; font-size: 44px; animation: login-flota 9s ease-in-out infinite; }
.login-fondo i:nth-child(1) { top: 10%; left: 8%; font-size: 54px; }
.login-fondo i:nth-child(2) { top: 18%; right: 10%; animation-delay: -2s; transform: rotate(-12deg); }
.login-fondo i:nth-child(3) { top: 55%; left: 5%; animation-delay: -4s; font-size: 38px; }
.login-fondo i:nth-child(4) { bottom: 12%; right: 8%; animation-delay: -6s; font-size: 50px; }
.login-fondo i:nth-child(5) { bottom: 8%; left: 22%; animation-delay: -3s; font-size: 36px; }
.login-fondo i:nth-child(6) { top: 42%; right: 4%; animation-delay: -5s; font-size: 40px; }
@keyframes login-flota { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -18px; rotate: 8deg; } }

/* Marca: plato con vapor */
.login-marca { position: relative; display: grid; place-items: center; margin-top: 18px; animation: login-entra 0.7s var(--curva) both; }
.login-plato { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--acento); color: #fff; font-size: 32px;
    box-shadow: 0 12px 30px color-mix(in srgb, var(--acento) 40%, transparent), inset 0 -6px 0 rgba(0, 0, 0, 0.08); animation: login-late 4s ease-in-out 1s infinite; }
.login-vapor { position: absolute; top: -26px; display: flex; gap: 10px; }
.login-vapor b { width: 5px; height: 22px; border-radius: 4px; background: var(--acento); opacity: 0; animation: login-vapor 2.8s ease-in-out infinite; }
.login-vapor b:nth-child(2) { height: 28px; animation-delay: 0.5s; }
.login-vapor b:nth-child(3) { animation-delay: 1s; }
@keyframes login-vapor { 0% { opacity: 0; transform: translateY(10px) scaleY(0.6); } 40% { opacity: 0.4; } 100% { opacity: 0; transform: translateY(-14px) scaleY(1.2) translateX(4px); } }
@keyframes login-late { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* Tarjeta y entrada escalonada */
.login-tarjeta { width: 100%; padding: 28px 24px; display: flex; flex-direction: column; gap: 22px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 22px; box-shadow: var(--sombra-alta); animation: login-entra 0.7s var(--curva) 0.12s both; }
.login-encabezado { text-align: center; }
.login-encabezado h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--tinta); }
.login-encabezado p { margin: 6px 0 0; font-size: 14px; color: var(--tinta-suave); }
.login-form > * { animation: login-entra 0.6s var(--curva) both; }
.login-form > :nth-child(1) { animation-delay: 0.3s; }
.login-form > :nth-child(2) { animation-delay: 0.4s; }
.login-form > :nth-child(3) { animation-delay: 0.5s; }
.login-form button[type="submit"] { transition: transform 0.2s var(--curva), box-shadow 0.2s var(--curva); }
.login-form button[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 10px 22px color-mix(in srgb, var(--acento) 35%, transparent); }
@keyframes login-entra { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) {
    .login-fondo i, .login-plato, .login-vapor b { animation: none; }
}
.menu-enlace-salir { border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-align: left; }

/* Ticket de pago (pedido nuevo) */
.ticket-pago {
    --ticket-naranja: #ff5722;
    position: relative;
    background: #fff;
    padding: 22px 14px 26px;
    margin: 14px 0;
    border-radius: 5px;
    box-shadow: 0 5px 18px rgba(30, 41, 59, .08);
    color: #252d3b;
    clip-path: polygon(
        0% 8px, 2% 0, 4% 8px, 6% 0, 8% 8px, 10% 0, 12% 8px, 14% 0, 16% 8px, 18% 0, 20% 8px, 22% 0, 24% 8px, 26% 0, 28% 8px, 30% 0, 32% 8px, 34% 0, 36% 8px, 38% 0, 40% 8px, 42% 0, 44% 8px, 46% 0, 48% 8px, 50% 0, 52% 8px, 54% 0, 56% 8px, 58% 0, 60% 8px, 62% 0, 64% 8px, 66% 0, 68% 8px, 70% 0, 72% 8px, 74% 0, 76% 8px, 78% 0, 80% 8px, 82% 0, 84% 8px, 86% 0, 88% 8px, 90% 0, 92% 8px, 94% 0, 96% 8px, 98% 0, 100% 8px,
        100% calc(100% - 8px), 98% 100%, 96% calc(100% - 8px), 94% 100%, 92% calc(100% - 8px), 90% 100%, 88% calc(100% - 8px), 86% 100%, 84% calc(100% - 8px), 82% 100%, 80% calc(100% - 8px), 78% 100%, 76% calc(100% - 8px), 74% 100%, 72% calc(100% - 8px), 70% 100%, 68% calc(100% - 8px), 66% 100%, 64% calc(100% - 8px), 62% 100%, 60% calc(100% - 8px), 58% 100%, 56% calc(100% - 8px), 54% 100%, 52% calc(100% - 8px), 50% 100%, 48% calc(100% - 8px), 46% 100%, 44% calc(100% - 8px), 42% 100%, 40% calc(100% - 8px), 38% 100%, 36% calc(100% - 8px), 34% 100%, 32% calc(100% - 8px), 30% 100%, 28% calc(100% - 8px), 26% 100%, 24% calc(100% - 8px), 22% 100%, 20% calc(100% - 8px), 18% 100%, 16% calc(100% - 8px), 14% 100%, 12% calc(100% - 8px), 10% 100%, 8% calc(100% - 8px), 6% 100%, 4% calc(100% - 8px), 2% 100%, 0% calc(100% - 8px)
    );
}
.ticket-header { display: flex; align-items: center; gap: 9px; margin-bottom: 20px; }
.ticket-header h3 { margin: 0; font-size: 16px; font-weight: 700; }
.ticket-icon { color: var(--ticket-naranja); font-size: 20px; }
.ticket-metodos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ticket-metodos label { display: flex; flex-direction: column; gap: 8px; color: #667085; font-size: 13px; font-weight: 600; }
.input-pago { display: flex; align-items: center; overflow: hidden; height: 44px; border: 1px solid #dfe5ef; border-radius: 11px; background: #fff; }
.input-pago span { display: grid; place-items: center; align-self: stretch; width: 36px; flex-shrink: 0; background: #fff1ec; border-right: 1px solid #dfe5ef; color: #252d3b; font-weight: 600; }
.input-pago input { width: 100%; min-width: 0; height: 100%; padding: 0 12px; border: 0; outline: none; background: transparent; color: #252d3b; font: inherit; }
.ticket-separador { border-top: 1px dashed #d9dfeb; margin: 18px 0; }
.ticket-fila { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 13px 0; font-size: 14px; }
.ticket-fila > span { color: #667085; }
.ticket-fila strong { text-align: right; font-variant-numeric: tabular-nums; }
.ticket-total { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 19px 0; font-size: 19px; font-weight: 700; }
.ticket-total strong { color: var(--ticket-naranja); font-size: 20px; white-space: nowrap; }
@media (min-width: 401px) {
    .ticket-pago { padding-inline: 20px; }
    .ticket-metodos { gap: 14px; }
    .ticket-total { font-size: 21px; }
    .ticket-total strong { font-size: 23px; }
}

/* Gráfico de ingresos mensuales (barras CSS con eje, grilla, promedio y valores visibles) */
.grafico-resumen {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    margin-bottom: 14px;
}
.grafico-resumen > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.grafico-resumen span { display: block; font-size: 0.72rem; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: 0.04em; }
.grafico-resumen strong { display: block; font-size: 1.15rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 701px) {
    .grafico-resumen { display: flex; flex-wrap: wrap; gap: 8px 32px; }
}
.grafico-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-bottom: 4px;
    font-size: 0.72rem;
    color: var(--tinta-suave);
}
.grafico-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.grafico-leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.grafico-leyenda .l-barra { background: color-mix(in srgb, var(--acento) 50%, var(--superficie)); }
.grafico-leyenda .l-actual { background: var(--acento); }
.grafico-leyenda .l-prom { width: 16px; height: 0; border-top: 2px dashed var(--info); border-radius: 0; }
.grafico-scroll { padding-top: 28px; }
.grafico {
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-rows: 200px auto;
    column-gap: 6px;
}
.grafico-eje { position: relative; }
.grafico-eje span {
    position: absolute;
    right: 0;
    transform: translateY(50%);
    font-size: 0.6rem;
    color: var(--tinta-suave);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.grafico-eje span, .grafico-linea, .grafico-promedio { bottom: var(--pos, 0); }
.grafico-area { position: relative; }
.grafico-linea {
    position: absolute;
    left: 0; right: 0;
    height: 0;
    border-top: 1px dashed var(--borde);
}
.grafico-linea:first-of-type { border-top: 1px solid var(--tinta-suave); opacity: 0.45; }
.grafico-promedio {
    position: absolute;
    left: 0; right: 0;
    height: 0;
    border-top: 1.5px dashed var(--info);
    z-index: 2;
    pointer-events: none;
}
.grafico-promedio b {
    position: absolute;
    right: 0; bottom: 4px;
    padding: 1px 7px;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--info);
    background: var(--info-suave);
    border-radius: 999px;
}
.grafico-cols {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 3px;
    z-index: 1;
}
.grafico-col {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
    outline: none;
    cursor: default;
    border-radius: 8px;
    transition: background 0.2s var(--curva);
}
.grafico-col:hover,
.grafico-col:focus-visible { background: color-mix(in srgb, var(--acento) 7%, transparent); z-index: 4; }
.grafico-col:focus-visible { box-shadow: 0 0 0 2px var(--acento); }
.grafico-barra {
    width: 100%;
    max-width: 44px;
    height: var(--h);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--acento) 62%, var(--superficie)) 0%,
        color-mix(in srgb, var(--acento) 42%, var(--superficie)) 100%);
    border-radius: 8px 8px 3px 3px;
    min-height: 4px;
    transform-origin: bottom;
    animation: grafico-crece 0.8s var(--curva) both;
    animation-delay: calc(var(--i) * 45ms);
    transition: filter 0.2s var(--curva);
}
.grafico-col.actual .grafico-barra,
.grafico-col.mejor .grafico-barra {
    background: linear-gradient(180deg, var(--acento) 0%, var(--acento-oscuro) 100%);
    box-shadow: 0 6px 16px -6px var(--acento);
}
.grafico-col.vacio .grafico-barra {
    background: var(--gris-suave);
    box-shadow: none;
    height: 4px;
    max-width: 28px;
    border-radius: 3px;
}
.grafico-col.futuro .grafico-barra {
    background: repeating-linear-gradient(90deg, var(--borde) 0 4px, transparent 4px 8px);
}
.grafico-col:not(.vacio):hover .grafico-barra,
.grafico-col:focus-visible .grafico-barra { filter: saturate(1.2) brightness(1.04); }
.grafico-valor {
    position: absolute;
    left: 50%;
    bottom: calc(var(--h) + 6px);
    transform: translateX(-50%);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--tinta);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: none;
    animation: grafico-aparece 0.5s var(--curva) both;
    animation-delay: calc(var(--i) * 45ms + 350ms);
}
.grafico-col.mejor .grafico-valor { color: var(--acento-oscuro); }
.grafico-col.mejor .grafico-valor::before { content: "★ "; }
.grafico-tip {
    position: absolute;
    left: 50%; bottom: calc(var(--h) + 30px);
    transform: translate(-50%, 4px);
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--tinta);
    color: var(--superficie);
    font-size: 0.7rem;
    line-height: 1.35;
    white-space: nowrap;
    text-align: center;
    box-shadow: var(--sombra-alta);
    opacity: 0;
    pointer-events: none;
    z-index: 3;
    transition: opacity 0.15s var(--curva), transform 0.15s var(--curva);
}
.grafico-col.vacio .grafico-tip { bottom: 14px; }
.grafico-tip strong { display: block; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.grafico-tip em { display: block; font-style: normal; font-size: 0.66rem; }
.grafico-tip em.sube { color: #5be08f; }
.grafico-tip em.baja { color: #ff8d95; }
.grafico-col:hover .grafico-tip,
.grafico-col:focus-visible .grafico-tip { opacity: 1; transform: translate(-50%, 0); }
.grafico-meses {
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 3px;
    padding-top: 8px;
    text-align: center;
}
.grafico-meses span { font-size: 0.6rem; color: var(--tinta-suave); }
.grafico-meses span.actual { color: var(--acento); font-weight: 700; }
/* En celular los montos sólo se ven en el mejor mes; el resto, al tocar la barra (aparece el globo). */
.grafico-col:not(.mejor) .grafico-valor { display: none; }
.grafico-tip { font-size: 0.66rem; }
.grafico-col:nth-child(-n+3) .grafico-tip { left: 0; transform: translate(0, 4px); }
.grafico-col:nth-child(-n+3):hover .grafico-tip, .grafico-col:nth-child(-n+3):focus-visible .grafico-tip { transform: none; }
.grafico-col:nth-last-child(-n+3) .grafico-tip { left: auto; right: 0; transform: translate(0, 4px); }
.grafico-col:nth-last-child(-n+3):hover .grafico-tip, .grafico-col:nth-last-child(-n+3):focus-visible .grafico-tip { transform: none; }
@keyframes grafico-crece { from { transform: scaleY(0); } }
@keyframes grafico-aparece { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .grafico-barra, .grafico-valor { animation: none; }
}

/* Alta de usuarios: selección de vistas permitidas */
.vistas-permitidas { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px 18px; border: 0; padding: 0; margin: 4px 0; }
.vistas-permitidas .etiqueta { width: 100%; padding: 0; }
.vista-opcion { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.vista-opcion input { width: 18px; height: 18px; accent-color: var(--acento); }

.acciones-fila { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.acciones-fila form { margin: 0; }