/* =====================================================================
   INVENTARIO - Tema
   Base estilo iOS (fondo gris, tarjetas blancas redondeadas) +
   letra deportiva (Archivo ancha y gruesa) en títulos y números.
   Colores de marca: blanco, negro y rojo. Modo claro y oscuro.
   ===================================================================== */

:root,
:root[data-theme="light"] {
    --fondo: #F2F2F7;
    --superficie: #FFFFFF;
    --superficie-2: #F2F2F7;
    --texto: #000000;
    --texto-2: #6C6C70;
    --texto-3: #AEAEB2;
    --linea: rgba(60, 60, 67, 0.16);
    --tinta: #000000;          /* elementos "llenos": chips activos, botón secundario activo */
    --sobre-tinta: #FFFFFF;
    --rojo: #E30613;
    --rojo-presionado: #B8050F;
    --rojo-texto: #C8050F;
    --rojo-fondo: #FDE8E9;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.06);
    --velo: rgba(0, 0, 0, 0.4);
    color-scheme: light;
}

:root[data-theme="dark"] {
    --fondo: #000000;
    --superficie: #1C1C1E;
    --superficie-2: #2C2C2E;
    --texto: #FFFFFF;
    --texto-2: #98989F;
    --texto-3: #636366;
    --linea: rgba(84, 84, 88, 0.55);
    --tinta: #FFFFFF;
    --sobre-tinta: #000000;
    --rojo: #FF2D3A;
    --rojo-presionado: #D61F2B;
    --rojo-texto: #FF6970;
    --rojo-fondo: #3A1215;
    --sombra: none;
    --velo: rgba(0, 0, 0, 0.6);
    color-scheme: dark;
}

:root {
    --negro: #000000;
    --blanco: #FFFFFF;
    --display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
    --texto-base: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
    --radio: 12px;
    --radio-chico: 8px;
    --tab-alto: 58px;
    --barra-alto: 52px;
    --lateral: 248px;
}

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

html, body {
    margin: 0;
    overflow-x: clip;
    min-height: 100%;
    background: var(--fondo);
    color: var(--texto);
    font-family: var(--texto-base);
    font-size: 16px;
    line-height: 1.4;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 {
    margin: 0;
    font-family: var(--display);
    font-stretch: 112%;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
a { color: inherit; }

:focus-visible { outline: 3px solid var(--rojo); outline-offset: 2px; }

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

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* =====================================================================
   ESTRUCTURA
   Celular: barra superior negra (detrás de la barra de notificaciones)
            + barra de pestañas abajo (respeta la barra de gestos).
   Computadora (>= 900px): menú lateral fijo.
   ===================================================================== */

.app { min-height: 100dvh; overflow-x: clip; }

.barra-sup {
    position: sticky; top: 0; z-index: 15;
    height: calc(var(--barra-alto) + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
    display: flex; align-items: center;
    background: var(--negro); color: var(--blanco);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.barra-sup__marca { text-decoration: none; color: inherit; display: flex; align-items: center; min-height: 44px; }

.contenido {
    width: 100%; max-width: 680px; margin: 0 auto;
    padding: 20px max(16px, env(safe-area-inset-right)) calc(var(--tab-alto) + env(safe-area-inset-bottom) + 32px) max(16px, env(safe-area-inset-left));
}
.app:has(.barra-carrito) .contenido { padding-bottom: calc(var(--tab-alto) + env(safe-area-inset-bottom) + 100px); }

/* Marca (nombre o logo de la tienda) */
.marca { display: inline-flex; align-items: center; }
.marca__nombre {
    font-family: var(--display); font-stretch: 125%; font-weight: 900;
    font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1;
}
.marca__logo { height: 30px; width: auto; }
.marca--grande .marca__nombre { font-size: clamp(2.75rem, 14vw, 4.5rem); }
.marca--grande .marca__logo { height: 72px; }

/* ---------- Pestañas (abajo en celular) ---------- */

.tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: color-mix(in srgb, var(--superficie) 88%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-top: 0.5px solid var(--linea);
}
.tabs__marca { display: none; }
.tabs ul {
    display: flex; max-width: 680px; height: var(--tab-alto);
    margin: 0 auto; padding: 0; list-style: none;
}
.tabs li { flex: 1; }

.tab {
    height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: var(--texto-2); text-decoration: none;
    font-size: 0.6875rem; font-weight: 600;
}
.tab svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tab.active { color: var(--texto); }
.tab.active svg { stroke-width: 2.3; }

.tab--vender { color: var(--texto); }
.tab__pastilla {
    position: relative;
    display: grid; place-items: center;
    width: 54px; height: 32px; border-radius: 16px;
    background: var(--rojo); color: var(--blanco);
}
.tab--vender svg { stroke-width: 2.6; width: 22px; height: 22px; }
.tab--vender.active .tab__pastilla { background: var(--rojo-presionado); }
.tab__contador {
    position: absolute; top: -6px; right: -6px;
    min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
    background: var(--tinta); color: var(--sobre-tinta);
    font-size: 0.6875rem; font-weight: 800; line-height: 20px; text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ---------- Computadora: menú lateral ---------- */

@media (min-width: 900px) {
    .barra-sup { display: none; }

    .tabs {
        top: 0; right: auto; width: var(--lateral);
        padding: 24px 16px;
        display: flex; flex-direction: column; gap: 28px;
        background: var(--negro); border-top: 0;
        -webkit-backdrop-filter: none; backdrop-filter: none;
    }
    .tabs__marca { display: flex; color: var(--blanco); text-decoration: none; padding: 0 12px; }
    .tabs ul { flex-direction: column; height: auto; gap: 4px; max-width: none; margin: 0; }
    .tab {
        flex-direction: row; justify-content: flex-start; gap: 12px;
        height: 48px; padding: 0 12px; border-radius: var(--radio-chico);
        color: #A1A1A6; font-size: 0.9375rem;
    }
    .tab:hover { background: rgba(255, 255, 255, 0.08); color: var(--blanco); }
    .tab.active { color: var(--blanco); background: rgba(255, 255, 255, 0.12); }
    .tabs li:has(.tab--vender) { order: -1; margin-bottom: 12px; }
    .tab--vender { justify-content: center; background: var(--rojo); color: var(--blanco); }
    .tab--vender:hover, .tab--vender.active { background: var(--rojo-presionado); }
    .tab { position: relative; }
    .tab__pastilla { position: static; width: auto; height: auto; background: none; }
    .tab--vender.active .tab__pastilla { background: none; }
    .tab__contador { top: 50%; right: 12px; transform: translateY(-50%); background: var(--blanco); color: var(--negro); }

    .contenido {
        max-width: none;
        margin-left: var(--lateral);
        width: calc(100% - var(--lateral));
        padding: 36px 40px 48px;
    }
    .contenido > * { max-width: 1100px; }
    .app:has(.barra-carrito) .contenido { padding-bottom: 120px; }
}

/* =====================================================================
   TIPOGRAFÍA Y CABECERAS
   ===================================================================== */

.cabecera { margin-bottom: 20px; }
.cabecera h1 { font-size: 2rem; }
.cabecera__sub { color: var(--texto-2); font-size: 0.9375rem; margin-bottom: 4px; }
.cabecera--accion { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.cabecera--accion h1 { flex: 1 1 180px; min-width: 0; }
.cabecera--accion .btn { flex-shrink: 0; }
.cabecera h1 { overflow-wrap: anywhere; }

.volver {
    display: inline-flex; align-items: center; gap: 2px;
    min-height: 44px; margin: -8px 0 4px -6px; padding: 0;
    border: 0; background: none; cursor: pointer;
    color: var(--rojo-texto); font-weight: 600; text-decoration: none; font-size: 1rem;
}
.volver svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; }

.bloque { margin-bottom: 32px; }
.bloque h2 { font-size: 1.25rem; margin-bottom: 12px; }
.bloque__titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.bloque__titulo h2 { margin-bottom: 0; }
.bloque--peligro { padding-top: 8px; }
.bloque--final { margin-top: 40px; }

.ayuda { display: block; color: var(--texto-2); font-size: 0.8125rem; margin-bottom: 12px; }
.ayuda--abajo { margin: 8px 0 0; }
.ayuda--fuerte { color: var(--texto); font-weight: 700; font-size: 1rem; }
.cargando { color: var(--texto-2); padding: 24px 0; }

.vacio { padding: 32px 0; color: var(--texto-2); }
.vacio h2 { color: var(--texto); font-size: 1.25rem; margin-bottom: 8px; }
.vacio .btn { margin-top: 16px; }

/* =====================================================================
   BOTONES Y CAMPOS
   ===================================================================== */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 0 20px;
    border: 0; border-radius: var(--radio);
    background: var(--superficie); color: var(--texto);
    font-weight: 700; text-decoration: none; cursor: pointer;
    box-shadow: inset 0 0 0 1px var(--linea);
}
.btn:active { opacity: 0.75; }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn--primario { background: var(--rojo); color: var(--blanco); box-shadow: none; }
.btn--primario:active { background: var(--rojo-presionado); opacity: 1; }
.btn--peligro { background: var(--rojo); color: var(--blanco); box-shadow: none; }
.btn--bloque { width: 100%; }
.btn--grande { min-height: 56px; font-size: 1.0625rem; }
.btn--quieto { background: transparent; box-shadow: none; color: var(--texto-2); }
.btn--salir { color: var(--rojo-texto); }
.btn--secundario { margin-top: 16px; }
.btn--secundario-sin-margen { margin-bottom: 10px; }
.btn__icono { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

.enlace {
    padding: 0; border: 0; background: none;
    color: var(--rojo-texto); font-weight: 700; cursor: pointer; text-decoration: none;
}

.campo { display: grid; gap: 6px; margin-bottom: 16px; }
.campo label, .campo__titulo { font-size: 0.875rem; font-weight: 600; color: var(--texto); }
.campo-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.campo--corto input { max-width: 180px; }
.campo__error { margin-top: 6px; color: var(--rojo-texto); font-size: 0.875rem; font-weight: 600; }
.campo .ayuda { margin: 0; }

.campo input, .campo select,
.buscar input, .grilla__nuevo input, .foto__campo input {
    width: 100%; height: 48px; padding: 0 14px;
    border: 0; border-radius: var(--radio-chico);
    background: var(--superficie); color: var(--texto);
    box-shadow: inset 0 0 0 1px var(--linea);
    font-size: 16px; /* 16px evita el zoom automático de iOS */
}
.campo input:focus, .campo select:focus, .buscar input:focus,
.grilla__nuevo input:focus, .foto__campo input:focus {
    outline: none; box-shadow: inset 0 0 0 2px var(--tinta);
}
::placeholder { color: var(--texto-3); }

.panel {
    padding: 16px; margin-top: 4px;
    border-radius: var(--radio); background: var(--superficie);
    box-shadow: var(--sombra);
}
.panel h3 { font-size: 1.125rem; margin-bottom: 8px; }
.panel .campo input, .panel .grilla td input, .panel .grilla__nuevo input { background: var(--superficie-2); box-shadow: none; }
.panel .campo input:focus, .panel .grilla td input:focus, .panel .grilla__nuevo input:focus { box-shadow: inset 0 0 0 2px var(--tinta); }
.bloque--final .panel { margin-bottom: 16px; }

.acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.acciones .btn { flex: 1 1 140px; }
.acciones--columna { flex-direction: column; }
.acciones--columna .btn { flex: none; }

/* Mensajes */
.aviso {
    display: flex; align-items: flex-start; gap: 10px;
    margin-bottom: 16px; padding: 12px 14px;
    border-radius: var(--radio); background: var(--rojo-fondo); color: var(--rojo-texto);
    font-size: 0.9375rem;
}
.aviso__icono {
    flex-shrink: 0; display: grid; place-items: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--rojo); color: var(--blanco);
    font-size: 0.8125rem; font-weight: 800;
}
.aviso--ok { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); }
.aviso--ok .aviso__icono { background: var(--tinta); color: var(--sobre-tinta); }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; }
.chips--scroll {
    flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 16px; padding: 2px 16px 4px;
    scrollbar-width: none;
}
.chips--scroll::-webkit-scrollbar { display: none; }
.chip {
    flex-shrink: 0; min-height: 38px; padding: 0 16px;
    border: 0; border-radius: 19px;
    background: var(--superficie); color: var(--texto);
    box-shadow: inset 0 0 0 1px var(--linea);
    font-weight: 600; font-size: 0.875rem; cursor: pointer;
}
.chip--activo { background: var(--tinta); color: var(--sobre-tinta); box-shadow: none; }
.chip:disabled { opacity: 0.35; cursor: default; text-decoration: line-through; }
.chips--tallas { display: grid; grid-template-columns: repeat(4, 1fr); }
.chip--talla {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 58px; border-radius: var(--radio-chico);
    font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: 1.0625rem;
}
.chip--talla small { font-family: var(--texto-base); font-stretch: 100%; font-weight: 500; font-size: 0.6875rem; opacity: 0.75; }
.chip--talla:disabled { text-decoration: none; }

/* Segmentos (Efectivo / QR, tema) */
.segmento {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 2px; margin-top: 8px;
    border-radius: var(--radio-chico); background: var(--superficie-2);
    box-shadow: inset 0 0 0 1px var(--linea);
}
.segmento--tres { grid-template-columns: repeat(3, 1fr); }
.segmento__op {
    min-height: 44px; border: 0; border-radius: 7px; background: transparent;
    font-weight: 700; cursor: pointer; color: var(--texto);
}
.segmento__op--activo { background: var(--tinta); color: var(--sobre-tinta); }

/* Interruptor sí/no */
.interruptor { display: flex; gap: 14px; align-items: flex-start; padding: 16px; margin-bottom: 16px; cursor: pointer; border-radius: var(--radio); background: var(--superficie); }
.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruptor__pista {
    position: relative; flex-shrink: 0; width: 51px; height: 31px; border-radius: 16px;
    background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--linea); transition: background 0.15s;
}
.interruptor__pista::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%;
    background: #FFFFFF; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); transition: transform 0.15s;
}
.interruptor input:checked + .interruptor__pista { background: var(--rojo); box-shadow: none; }
.interruptor input:checked + .interruptor__pista::after { transform: translateX(20px); }
.interruptor input:focus-visible + .interruptor__pista { outline: 3px solid var(--rojo); outline-offset: 2px; }
.interruptor strong { display: block; margin-bottom: 2px; }

/* Selector de cantidad */
.paso { display: inline-flex; align-items: center; border-radius: var(--radio-chico); background: var(--superficie-2); }
.paso button { width: 40px; height: 40px; border: 0; background: none; font-size: 1.25rem; font-weight: 700; cursor: pointer; color: var(--texto); }
.paso button:disabled { opacity: 0.3; cursor: default; }
.paso span { min-width: 30px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.paso--grande button { width: 54px; height: 54px; font-size: 1.5rem; }
.paso--grande span { min-width: 48px; font-size: 1.375rem; }

/* =====================================================================
   LISTAS AGRUPADAS (estilo iOS): tarjeta blanca con separadores
   ===================================================================== */

.historial, .ventas, .lista-panel, .carrito, .catalogo--lista {
    list-style: none; margin: 0; padding: 0 16px;
    border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra);
}
.historial > li + li, .ventas > li + li, .lista-panel > li + li,
.carrito > li + li, .catalogo--lista > li + li { border-top: 0.5px solid var(--linea); }

/* =====================================================================
   INICIO: mosaicos de categoría
   ===================================================================== */

.mosaicos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mosaico {
    position: relative; display: block; overflow: hidden;
    aspect-ratio: 1 / 1.05; border-radius: var(--radio);
    background: #111; color: var(--blanco); text-decoration: none;
    box-shadow: var(--sombra);
}
.mosaico--sin-foto { background: var(--negro); }
:root[data-theme="dark"] .mosaico--sin-foto { background: var(--superficie); }
.mosaico__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mosaico::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.82) 100%);
}
.mosaico--sin-foto::after { background: none; }
.mosaico__cantidad {
    position: absolute; z-index: 1; top: 10px; right: 10px;
    padding: 4px 9px; border-radius: 12px;
    background: rgba(0, 0, 0, 0.55); color: var(--blanco);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    font-size: 0.75rem; font-weight: 700;
}
.mosaico__pie { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 14px; display: grid; gap: 6px; }
.mosaico__nombre {
    font-family: var(--display); font-stretch: 125%; font-weight: 900;
    font-size: clamp(1.25rem, 5.6vw, 1.75rem); line-height: 0.95; letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}
.mosaico__alerta {
    display: inline-flex; align-items: center; gap: 6px; justify-self: start;
    padding: 3px 9px 3px 3px; border-radius: 12px; background: var(--rojo); color: var(--blanco);
    font-size: 0.75rem; font-weight: 700;
}
.mosaico__alerta > span {
    display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
    background: var(--blanco); color: var(--rojo); font-size: 0.6875rem; font-weight: 900;
}
.mosaico:active { transform: scale(0.98); }

@media (min-width: 600px) { .mosaicos { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .mosaicos { grid-template-columns: repeat(4, 1fr); } }

/* =====================================================================
   CATÁLOGO DE PRODUCTOS: cuadrícula con foto o lista
   ===================================================================== */

.herramientas { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.buscar { flex: 1; min-width: 0; }
.buscar input { padding-left: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 12px center; background-size: 20px; }

.vista { display: flex; padding: 2px; gap: 2px; border-radius: var(--radio-chico); background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linea); }
.vista__op { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 7px; background: none; color: var(--texto-2); cursor: pointer; }
.vista__op svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.vista__op--activa { background: var(--tinta); color: var(--sobre-tinta); }

.catalogo { list-style: none; margin: 0; padding: 0; }
.item {
    width: 100%; border: 0; padding: 0; background: none;
    color: inherit; text-align: left; text-decoration: none; font: inherit; cursor: pointer;
}
.item:disabled { cursor: default; }
.item__foto { position: relative; display: block; overflow: hidden; background: var(--superficie-2); }
.item__foto img { width: 100%; height: 100%; object-fit: cover; }
.item__iniciales {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-family: var(--display); font-stretch: 125%; font-weight: 900; color: var(--texto-3);
}
.item__info { display: grid; gap: 1px; min-width: 0; }
.item__nombre { font-weight: 600; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.item__detalle { color: var(--texto-2); font-size: 0.75rem; text-transform: none; }
.item__precio { font-weight: 800; font-variant-numeric: tabular-nums; }
.item__stock { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-variant-numeric: tabular-nums; }
.item__stock small { font-weight: 500; color: var(--texto-2); }
.item__alerta {
    display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
    background: var(--rojo); color: var(--blanco); font-size: 0.625rem; font-weight: 900;
}
.item--bajo .item__stock, .item--bajo .item__stock small { color: var(--rojo-texto); }
.item--agotado { opacity: 0.5; }
.item--agotado .item__stock { color: var(--texto-2); }

/* Cuadrícula */
.catalogo--grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.catalogo--grilla .item {
    display: flex; flex-direction: column; height: 100%;
    border-radius: var(--radio); overflow: hidden;
    background: var(--superficie); box-shadow: var(--sombra);
}
.catalogo--grilla .item__foto { aspect-ratio: 1 / 1; }
.catalogo--grilla .item__iniciales { font-size: 2rem; }
.catalogo--grilla .item__info { padding: 10px 12px 2px; flex: 1; align-content: start; }
.catalogo--grilla .item__nombre { font-size: 0.9375rem; }
.catalogo--grilla .item__precio { margin-top: 4px; font-size: 1rem; }
.catalogo--grilla .item__stock { padding: 0 12px 12px; font-size: 0.8125rem; }
.catalogo--grilla .item:active { transform: scale(0.98); }
@media (min-width: 600px) { .catalogo--grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .catalogo--grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .catalogo--grilla { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Lista */
.catalogo--lista .item {
    display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center;
    padding: 10px 0; min-height: 72px;
}
.catalogo--lista .item__foto { width: 52px; height: 52px; border-radius: var(--radio-chico); }
.catalogo--lista .item__iniciales { font-size: 0.9375rem; }
.catalogo--lista .item__stock { flex-direction: column; align-items: flex-end; gap: 0; font-size: 1.25rem; font-family: var(--display); font-stretch: 112%; font-weight: 800; }
.catalogo--lista .item__stock small { font-family: var(--texto-base); font-size: 0.6875rem; }
.catalogo--lista .item__alerta { display: none; }

/* =====================================================================
   FICHA DE PRODUCTO
   ===================================================================== */

.ficha { display: flex; gap: 16px; align-items: flex-start; margin: 0 0 24px; }
.ficha__foto { width: 104px; height: 104px; flex-shrink: 0; border-radius: var(--radio); object-fit: cover; background: var(--superficie-2); }
.ficha h1 { font-size: 1.75rem; }
.ficha__precio { margin-top: 8px; font-family: var(--display); font-stretch: 112%; font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ficha__costo { margin-top: 4px; color: var(--texto-2); font-size: 0.875rem; }
.ficha__costo--falta { color: var(--rojo-texto); font-weight: 600; }

.stock-total { color: var(--texto-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.stock-grande {
    padding: 20px; border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra);
    font-family: var(--display); font-stretch: 125%; font-weight: 900; font-size: 3.5rem; line-height: 1;
    font-variant-numeric: tabular-nums;
}
.stock-grande small { display: block; margin-top: 8px; font-family: var(--texto-base); font-stretch: 100%; font-size: 0.875rem; font-weight: 600; }
.stock-grande--bajo { color: var(--rojo-texto); }

/* Grilla talla × color */
.grilla { margin-bottom: 8px; }
.grilla table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.grilla th, .grilla td { padding: 4px 3px; text-align: center; }
.grilla thead th { font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: 0.875rem; padding-bottom: 8px; color: var(--texto-2); }
.grilla thead th:first-child, .grilla tbody th { text-align: left; width: 28%; }
.grilla tbody th { font-weight: 600; font-size: 0.875rem; overflow-wrap: anywhere; }
.grilla thead th:last-child:not(:nth-child(5)) { width: 32px; }
.grilla td input {
    width: 100%; height: 44px; padding: 0 2px; border: 0; border-radius: var(--radio-chico);
    background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linea);
    text-align: center; font-size: 16px; font-variant-numeric: tabular-nums;
}
.grilla td input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--tinta); }
.grilla__quitar { width: 32px; height: 32px; padding: 0; border: 0; background: none; color: var(--texto-2); font-size: 1rem; cursor: pointer; }
.grilla__nuevo { display: flex; gap: 8px; margin-top: 12px; }
.grilla__nuevo input { flex: 1; min-width: 0; }

.grilla--lectura { padding: 8px 12px; border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra); }
.grilla--lectura td { height: 44px; border-top: 0.5px solid var(--linea); font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.grilla--lectura tbody th { border-top: 0.5px solid var(--linea); }
.celda--baja { color: var(--rojo-texto); }
.celda--vacia { color: var(--texto-3); font-weight: 400; }

/* Foto por enlace */
.foto { display: flex; align-items: flex-start; gap: 14px; margin-top: 6px; }
.foto__vista {
    position: relative; overflow: hidden; flex-shrink: 0;
    width: 88px; height: 88px; border-radius: var(--radio-chico);
    background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--linea);
}
.foto__vista img { width: 100%; height: 100%; object-fit: cover; }
.foto__vista--vacia { display: grid; place-items: center; color: var(--texto-2); }
.foto__estado { display: grid; place-items: center; height: 100%; color: var(--texto-2); font-size: 0.75rem; text-align: center; }
.foto__estado svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.foto__campo { flex: 1; min-width: 0; display: grid; gap: 6px; }
.foto__campo label { font-size: 0.875rem; font-weight: 600; }
.foto__campo .ayuda, .foto__campo .campo__error { margin: 0; }
.foto__campo .enlace { justify-self: start; font-size: 0.875rem; }

/* Historial de movimientos */
.historial li { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px 0; font-size: 0.9375rem; }
.historial__meta { color: var(--texto-2); font-size: 0.8125rem; margin-top: 2px; }
.historial__nota { font-size: 0.8125rem; margin-top: 4px; }
.historial__cant { flex-shrink: 0; font-weight: 800; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.historial__cant--menos { color: var(--texto-2); }

/* =====================================================================
   VENDER
   ===================================================================== */

.barra-carrito {
    position: fixed; z-index: 9;
    left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right));
    bottom: calc(var(--tab-alto) + env(safe-area-inset-bottom) + 10px);
    max-width: 656px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    min-height: 56px; padding: 0 18px;
    border: 0; border-radius: var(--radio);
    background: var(--tinta); color: var(--sobre-tinta);
    font-weight: 700; font-size: 1rem; cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.barra-carrito strong { font-variant-numeric: tabular-nums; }
.barra-carrito__n {
    display: inline-block; min-width: 24px; height: 24px; margin-left: 6px; padding: 0 6px; border-radius: 12px;
    background: var(--rojo); color: var(--blanco); line-height: 24px; text-align: center; font-size: 0.8125rem;
}
@media (min-width: 900px) {
    .barra-carrito { left: calc(var(--lateral) + 40px); right: 40px; bottom: 24px; max-width: 520px; margin: 0 0 0 auto; }
}

/* Hoja inferior (en computadora, ventana centrada) */
.hoja__fondo, .modal__fondo { position: fixed; inset: 0; z-index: 20; background: var(--velo); }
.hoja {
    position: fixed; z-index: 21; left: 0; right: 0; bottom: 0;
    max-width: 680px; max-height: 88dvh; margin: 0 auto; overflow-y: auto;
    padding: 12px max(16px, env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 20px) max(16px, env(safe-area-inset-left));
    border-radius: 16px 16px 0 0; background: var(--superficie);
    animation: subir 0.22s ease-out;
}
.hoja::before { content: ""; display: block; width: 36px; height: 5px; margin: 0 auto 12px; border-radius: 3px; background: var(--texto-3); }
@keyframes subir { from { transform: translateY(32px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 900px) {
    .hoja {
        left: calc(var(--lateral) + 50% - var(--lateral) / 2); right: auto; top: 50%; bottom: auto;
        width: 480px; transform: translate(-50%, -50%);
        border-radius: 16px; padding: 24px; animation: none;
    }
    .hoja::before { display: none; }
}
.hoja__cabeza { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.hoja__cabeza h2 { font-size: 1.375rem; }
.hoja__precio { margin-top: 4px; font-weight: 800; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.hoja__cerrar { flex-shrink: 0; width: 36px; height: 36px; border: 0; border-radius: 18px; background: var(--superficie-2); color: var(--texto-2); font-size: 0.9375rem; cursor: pointer; }
.hoja__etiqueta { display: block; font-size: 0.875rem; font-weight: 600; }
.hoja .chip { background: var(--superficie-2); box-shadow: none; }
.hoja .chip--activo { background: var(--tinta); color: var(--sobre-tinta); }
.cantidad { display: grid; gap: 8px; margin: 8px 0 20px; justify-items: start; }

/* Carrito */
.carrito { margin-bottom: 24px; }
.linea { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; }
.linea__info { min-width: 0; }
.linea__nombre { font-weight: 700; }
.linea__var { font-size: 0.875rem; }
.linea__precio { color: var(--texto-2); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.linea__der { display: grid; justify-items: end; gap: 8px; flex-shrink: 0; }
.linea__controles { display: flex; align-items: center; gap: 2px; }
.linea__importe { font-variant-numeric: tabular-nums; }
.linea__quitar { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; background: none; color: var(--rojo-texto); cursor: pointer; }
.linea__quitar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.carrito--lectura .linea { align-items: center; }
.chips--descuento { margin-bottom: 8px; }

.resumen {
    margin: 0 0 20px; padding: 14px 16px;
    border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra);
}
.resumen div { display: flex; justify-content: space-between; padding: 3px 0; }
.resumen dt { color: var(--texto-2); }
.resumen dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.resumen__total { margin-top: 6px; padding-top: 10px !important; border-top: 0.5px solid var(--linea); }
.resumen__total dt { color: var(--texto); font-weight: 800; font-size: 1.125rem; align-self: center; }
.resumen__total dd { font-family: var(--display); font-stretch: 125%; font-weight: 900; font-size: 1.75rem; }

.pie-carrito { margin-top: 16px; text-align: center; }

/* Venta registrada */
.listo { padding-top: 24px; text-align: center; }
.listo__check {
    display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 50%;
    background: var(--tinta); color: var(--sobre-tinta); margin-bottom: 20px;
}
.listo__check svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.listo h1 { font-size: 1.5rem; }
.listo__total { margin-top: 12px; font-family: var(--display); font-stretch: 125%; font-weight: 900; font-size: 2.75rem; font-variant-numeric: tabular-nums; }
.listo__meta { color: var(--texto-2); }
.listo__acciones { display: grid; gap: 12px; margin: 32px auto 0; max-width: 420px; justify-items: center; }

/* =====================================================================
   VENTAS
   ===================================================================== */

.dia { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.dia__nombre { font-family: var(--display); font-stretch: 112%; font-weight: 800; font-size: 1.125rem; }
.dia__flecha {
    display: grid; place-items: center; width: 44px; height: 44px;
    border: 0; border-radius: 22px; background: var(--superficie); box-shadow: var(--sombra); color: var(--texto); cursor: pointer;
}
.dia__flecha svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.dia__flecha:disabled { opacity: 0.3; cursor: default; }

.totales-dia {
    display: grid; grid-template-columns: 1fr 1fr;
    margin-bottom: 20px; border-radius: var(--radio); overflow: hidden;
    background: var(--negro); color: var(--blanco);
}
:root[data-theme="dark"] .totales-dia { background: var(--superficie); }
.totales-dia > div { padding: 14px 16px; }
.totales-dia > div + div { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.totales-dia > div:last-child { border-left: 1px solid rgba(255, 255, 255, 0.12); }
.totales-dia span { display: block; color: #A1A1A6; font-size: 0.8125rem; }
.totales-dia strong { font-variant-numeric: tabular-nums; font-size: 1.0625rem; }
.totales-dia__principal { grid-column: 1 / -1; }
.totales-dia__principal strong { font-family: var(--display); font-stretch: 125%; font-weight: 900; font-size: 2rem; }
.totales-dia small { display: block; color: #A1A1A6; }
.totales-dia__par { font-size: 0.9375rem; line-height: 1.35; }

.venta { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 14px 0; text-decoration: none; }
.venta__info { min-width: 0; display: grid; gap: 2px; }
.venta__titulo { font-weight: 800; }
.venta__hora { font-weight: 500; color: var(--texto-2); margin-left: 4px; }
.venta__items { font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.venta__meta { color: var(--texto-2); font-size: 0.8125rem; }
.venta__total { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.venta--anulada .venta__total { text-decoration: line-through; color: var(--texto-2); }

.etiqueta { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 10px; background: var(--rojo); color: var(--blanco); font-size: 0.6875rem; font-weight: 700; vertical-align: 2px; }
.etiqueta--suave { background: var(--superficie-2); color: var(--texto); }

/* =====================================================================
   PANEL
   ===================================================================== */

.lista-panel__fila { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; text-decoration: none; }
.lista-panel__texto { min-width: 0; display: grid; }
.lista-panel__texto small { color: var(--texto-2); }
.lista-panel__alerta { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; color: var(--rojo-texto); font-weight: 700; font-size: 0.875rem; }
.lista-panel__alerta > span { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--rojo); color: var(--blanco); font-size: 0.6875rem; font-weight: 800; }
.lista-panel__alerta--cero { color: var(--texto); }
.lista-panel__alerta--cero > span { background: var(--tinta); color: var(--sobre-tinta); }

.barras { list-style: none; margin: 0; padding: 16px; display: grid; gap: 14px; border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra); }
.barras__texto { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.barras__texto > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barras__texto small { color: var(--texto-2); font-size: 0.8125rem; margin-left: 4px; }
.barras__valor { flex-shrink: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.barras__pista { height: 8px; border-radius: 4px; background: var(--superficie-2); }
.barras__barra { height: 100%; border-radius: 4px; background: var(--tinta); }

.proyeccion__total { margin-bottom: 12px; }
.proyeccion__total strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.grafico { padding: 4px 16px 8px; border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra); margin-bottom: 8px; }
.grafico__lectura { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; margin-bottom: 4px; border-bottom: 0.5px solid var(--linea); font-size: 0.875rem; }
.grafico__lectura span { color: var(--texto-2); }
.grafico__lectura strong { font-variant-numeric: tabular-nums; }
.grafico__svg { width: 100%; height: auto; display: block; overflow: visible; }
.grafico__guia { stroke: var(--linea); stroke-width: 1; }
.grafico__base { stroke: var(--tinta); stroke-width: 1; }
.grafico__cero { stroke: var(--texto-2); stroke-width: 1.5; }
.grafico__eje { fill: var(--texto-2); font-size: 9px; font-family: var(--texto-base); }
.grafico__barra { cursor: pointer; }
.grafico__barra--activa path { stroke: var(--rojo); stroke-width: 2; }
.grafico__leyenda { display: flex; gap: 16px; margin: 8px 0 4px; font-size: 0.8125rem; color: var(--texto-2); }
.grafico__leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.muestra { display: inline-block; width: 12px; height: 12px; border-radius: 2px; border: 1.5px solid var(--tinta); }
.muestra--real { background: var(--tinta); }
.muestra--proy { background: repeating-linear-gradient(45deg, var(--tinta) 0 1.5px, var(--superficie) 1.5px 4px); }

/* En computadora el panel usa dos columnas */
@media (min-width: 1100px) {
    .panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; align-items: start; }
}

/* =====================================================================
   VENTANA DE CONFIRMACIÓN
   ===================================================================== */

.modal__fondo { z-index: 40; }
.modal {
    position: fixed; z-index: 41;
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(400px, calc(100vw - 32px));
    max-height: calc(100dvh - 48px); overflow-y: auto;
    padding: 22px 20px 18px;
    border-radius: 16px; background: var(--superficie);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
    animation: aparecer 0.15s ease-out;
}
@keyframes aparecer { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; transform: translate(-50%, -50%); } }
.modal h2 { font-size: 1.25rem; margin-bottom: 8px; overflow-wrap: anywhere; }
@media (min-width: 900px) { .modal { left: calc(var(--lateral) + (100vw - var(--lateral)) / 2); } }
.modal__texto { color: var(--texto-2); font-size: 0.9375rem; }
.modal__acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.modal__acciones .btn--quieto { background: var(--superficie-2); color: var(--texto); }

/* =====================================================================
   LOGIN
   ===================================================================== */

.login {
    min-height: 100dvh; display: flex; flex-direction: column;
    background: var(--negro); color: var(--blanco);
}
.login__marca {
    flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
    padding: calc(env(safe-area-inset-top) + 40px) 24px 36px;
    max-width: 480px; width: 100%; margin: 0 auto;
}
.login__raya { width: 64px; height: 6px; background: var(--rojo); margin-bottom: 20px; border-radius: 3px; }
.login__marca h1 { font-size: inherit; }
.login__marca p { margin-top: 12px; color: #A1A1A6; }
.login__form {
    width: 100%; max-width: 480px; margin: 0 auto;
    padding: 28px 24px calc(env(safe-area-inset-bottom) + 28px);
    border-radius: 20px 20px 0 0; background: var(--fondo); color: var(--texto);
}
.login__form h2 { font-size: 1.5rem; margin-bottom: 20px; }
@media (min-width: 600px) {
    .login { justify-content: center; align-items: center; }
    .login__marca { flex: none; padding-bottom: 24px; }
    .login__form { border-radius: 20px; margin-bottom: 48px; }
}

/* =====================================================================
   CARGA INICIAL Y ERRORES
   ===================================================================== */

.arranque {
    min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
    background: var(--negro);
}
.arranque__marca { color: var(--blanco); font-family: var(--display); font-stretch: 125%; font-weight: 900; font-size: 2.25rem; letter-spacing: -0.02em; }
.arranque__barra { width: 160px; height: 4px; border-radius: 2px; background: #2A2A2A; overflow: hidden; }
.arranque__barra span { display: block; height: 100%; width: var(--blazor-load-percentage, 0%); background: var(--rojo); transition: width 0.2s; }

#blazor-error-ui {
    display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
    padding: 14px 16px calc(env(safe-area-inset-bottom) + 14px);
    background: var(--rojo); color: var(--blanco); font-weight: 600;
}
#blazor-error-ui .reload { color: var(--blanco); margin-left: 8px; }
#blazor-error-ui .dismiss { position: absolute; right: 16px; top: 12px; cursor: pointer; }

@media (max-width: 360px) {
    .campo-fila { grid-template-columns: 1fr; }
    .mosaicos, .catalogo--grilla { gap: 8px; }
}

/* ---------- Panel: gráficos por mes y por producto ---------- */

.bloque__titulo--wrap { flex-wrap: wrap; align-items: center; }
.titulo__nota { display: block; margin-top: 2px; font-family: var(--texto-base); font-stretch: 100%; font-size: 0.8125rem; font-weight: 500; color: var(--texto-2); letter-spacing: 0; }
.segmento--chico { margin-top: 0; width: 200px; }
.segmento--chico .segmento__op { min-height: 34px; font-size: 0.8125rem; }

.grafico__relleno { fill: var(--tinta); }
.grafico__relleno--neg { fill: var(--rojo); }
.grafico__negativo { color: var(--rojo-texto); }
.ayuda--grafico { margin: 6px 0 4px; }

.barras__enlace { display: block; color: inherit; text-decoration: none; }
.barras__barra--neg { background: var(--rojo); }

/* =====================================================================
   TECLADO EN CELULAR
   Mientras se escribe, se ocultan las barras fijas de abajo para que
   no tapen el campo, y los campos dejan margen al desplazarse.
   ===================================================================== */

input, select, textarea { scroll-margin-top: 90px; scroll-margin-bottom: 120px; }

@media (max-width: 899px) {
    .app:has(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus, textarea:focus, select:focus) .tabs,
    .app:has(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus, textarea:focus, select:focus) .barra-carrito {
        display: none;
    }
}
.login { padding-bottom: env(keyboard-inset-height, 0px); }

/* =====================================================================
   USUARIOS
   ===================================================================== */

.fila-enlace {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 32px; padding: 14px 16px;
    border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra);
    color: inherit; text-decoration: none;
}
.fila-enlace:active { opacity: 0.75; }
.fila-enlace__icono { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--rojo); color: var(--blanco); flex-shrink: 0; }
.fila-enlace__icono svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.fila-enlace__texto { flex: 1; display: grid; min-width: 0; }
.fila-enlace__texto small { color: var(--texto-2); }
.fila-enlace__flecha { width: 18px; height: 18px; fill: none; stroke: var(--texto-3); stroke-width: 2.2; flex-shrink: 0; }

.usuarios { list-style: none; margin: 0; padding: 0 16px; border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra); }
.usuario { padding: 14px 0; }
.usuario + .usuario { border-top: 0.5px solid var(--linea); }
.usuario--inactivo .usuario__cabeza { opacity: 0.55; }
.usuario__cabeza { display: flex; align-items: center; gap: 12px; }
.usuario__avatar {
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    background: var(--superficie-2); font-family: var(--display); font-stretch: 112%; font-weight: 800; font-size: 0.875rem;
}
.usuario__datos { flex: 1; min-width: 0; display: grid; }
.usuario__datos small { color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario .etiqueta { margin-left: 0; flex-shrink: 0; }
.usuario__acciones { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 10px 0 0 52px; font-size: 0.875rem; }
.usuario__acciones .enlace { min-height: 32px; }
.enlace--peligro { color: var(--rojo-texto); }
.enlace:disabled { opacity: 0.4; cursor: default; }
.usuario .campo { margin-bottom: 8px; }
.usuario .campo input { background: var(--superficie-2); box-shadow: none; }
.acciones--compactas { margin-top: 0; }

.pasos { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 0.9375rem; }

/* =====================================================================
   ANIMACIONES
   Cortas (0,2 a 0,6 s) y con propósito. Todas se apagan si el celular
   tiene "Reducir movimiento" (regla prefers-reduced-motion al inicio).
   ===================================================================== */

/* 6. Entrada de cada pantalla */
/* Se anima "top" (no transform) para no afectar a los elementos fijos de la pantalla */
.pagina { position: relative; animation: entrar-pagina 0.22s ease-out; }
@keyframes entrar-pagina { from { opacity: 0; top: 8px; } to { opacity: 1; top: 0; } }

/* 1. Agregar al carrito: los contadores saltan y la barra sube */
.tab__contador, .barra-carrito__n { animation: saltar 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes saltar { 0% { transform: scale(0.4); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
@media (min-width: 900px) {
    .tab__contador { animation: saltar-lateral 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); }
    @keyframes saltar-lateral { 0% { transform: translateY(-50%) scale(0.4); } 60% { transform: translateY(-50%) scale(1.25); } 100% { transform: translateY(-50%) scale(1); } }
}
.barra-carrito { animation: subir-barra 0.28s ease-out; }
@keyframes subir-barra { from { transform: translateY(120%); opacity: 0; } to { transform: none; opacity: 1; } }

/* 2. Venta registrada: el check se dibuja */
.listo__check { animation: check-entra 0.4s cubic-bezier(0.2, 1.4, 0.4, 1); }
.listo__check path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: check-dibuja 0.35s 0.2s ease-out forwards; }
@keyframes check-entra { from { transform: scale(0.5); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes check-dibuja { to { stroke-dashoffset: 0; } }

/* 3. Siluetas de carga */
.esqueleto { display: grid; gap: 12px; }
.esq {
    display: block; border-radius: var(--radio);
    background: linear-gradient(90deg, var(--superficie) 0%, var(--superficie-2) 40%, var(--superficie) 80%);
    background-size: 300% 100%;
    animation: brillo 1.3s ease-in-out infinite;
}
@keyframes brillo { from { background-position: 100% 0; } to { background-position: 0 0; } }
.esqueleto--mosaicos { grid-template-columns: 1fr 1fr; }
.esq--mosaico { aspect-ratio: 1 / 1.05; }
.esq--barra { height: 48px; border-radius: var(--radio-chico); }
.esqueleto__grilla { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.esq--tarjeta { aspect-ratio: 1 / 1.35; }
.esqueleto__lista { display: grid; gap: 1px; padding: 4px 16px; border-radius: var(--radio); background: var(--superficie); }
.esqueleto__fila { display: grid; gap: 8px; padding: 14px 0; }
.esq--linea { height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--superficie-2) 0%, var(--linea) 40%, var(--superficie-2) 80%); background-size: 300% 100%; }
.esq--corta { width: 55%; }
.esqueleto__ficha { display: flex; gap: 16px; align-items: center; }
.esq--foto { width: 104px; height: 104px; flex-shrink: 0; }
.esqueleto__lineas { flex: 1; display: grid; gap: 10px; }
.esq--titulo { height: 26px; border-radius: 8px; background: linear-gradient(90deg, var(--superficie-2) 0%, var(--linea) 40%, var(--superficie-2) 80%); background-size: 300% 100%; }
.esq--bloque { height: 120px; }
.esq--bajo { height: 72px; }
.esq--alto { height: 150px; }
@media (min-width: 600px) {
    .esqueleto--mosaicos, .esqueleto__grilla { grid-template-columns: repeat(3, 1fr); }
}

/* 4. Mensajes flotantes */
.avisos {
    position: fixed; z-index: 50; left: 0; right: 0;
    top: calc(env(safe-area-inset-top) + var(--barra-alto) + 8px);
    display: grid; justify-items: center; gap: 8px;
    padding: 0 16px; pointer-events: none;
}
@media (min-width: 900px) { .avisos { top: 20px; left: var(--lateral); } }
.aviso-flotante {
    pointer-events: auto;
    display: flex; align-items: center; gap: 10px;
    max-width: 420px; padding: 12px 16px 12px 12px;
    border: 0; border-radius: 14px;
    background: var(--tinta); color: var(--sobre-tinta);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    font-weight: 600; font-size: 0.9375rem; text-align: left; cursor: pointer;
    animation: aviso-entra 0.3s cubic-bezier(0.2, 1.2, 0.4, 1);
}
.aviso-flotante--error { background: var(--rojo); color: var(--blanco); }
.aviso-flotante--sale { animation: aviso-sale 0.26s ease-in forwards; }
.aviso-flotante__icono {
    flex-shrink: 0; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
    background: var(--rojo); color: var(--blanco); font-size: 0.75rem; font-weight: 900;
}
.aviso-flotante--error .aviso-flotante__icono { background: var(--blanco); color: var(--rojo); }
@keyframes aviso-entra { from { opacity: 0; transform: translateY(-16px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes aviso-sale { to { opacity: 0; transform: translateY(-12px) scale(0.96); } }

/* 5. Quitar del carrito: la línea se va y las demás suben */
.linea--sale { overflow: hidden; animation: linea-sale 0.24s ease-in forwards; }
@keyframes linea-sale {
    0% { opacity: 1; transform: none; max-height: 140px; }
    55% { opacity: 0; transform: translateX(24px); max-height: 140px; }
    100% { opacity: 0; transform: translateX(24px); max-height: 0; padding-top: 0; padding-bottom: 0; }
}

/* 7. Panel: las barras crecen desde cero */
.grafico__barra path { transform-box: fill-box; transform-origin: bottom; animation: crecer-y 0.55s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
.grafico__barra .grafico__relleno--neg { transform-origin: top; }
@keyframes crecer-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.barras__barra { transform-origin: left; animation: crecer-x 0.6s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
@keyframes crecer-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 8. Stock que cambió: destello */
.celda--cambio { animation: destello 1.6s ease-out; }
.stock-grande--cambio { animation: destello 1.6s ease-out; }
@keyframes destello {
    0%, 30% { background-color: var(--rojo-fondo); color: var(--rojo-texto); }
    100% { background-color: transparent; }
}
.stock-grande--cambio { animation-name: destello-bloque; }
@keyframes destello-bloque { 0%, 30% { box-shadow: inset 0 0 0 2px var(--rojo); } 100% { box-shadow: var(--sombra); } }