/**
 * POS CompraMAS - Layout y responsive
 * Fase 2: Mobile First - Breakpoints 360/768/1024/1280
 */

@layer layout-shell {

/* App shell (estructura global) */
#app {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

/* Shell con sidebar constante en todas las vistas */
.app-shell {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 0;
    min-width: 0;
    width: 100%;
    --app-user-bar-height: 56px;
}

.app-shell #view-container {
    flex: 1 1 0%;
    min-width: 0;
    overflow: auto;
    --app-user-bar-height: 56px;
}

/* Hamburger para abrir sidebar en mobile/tablet (<1024px) */
.app-sidebar-hamburger {
    display: none;
    position: fixed;
    /* iOS: respetar safe area para no colisionar con barra de estado (hora, batería) */
    top: max(var(--space-2), env(safe-area-inset-top));
    left: max(var(--space-2), env(safe-area-inset-left));
    /* z-index 201: siempre encima del backdrop (199) y del sidebar (200) */
    z-index: 201;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--color-text);
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    box-shadow: var(--shadow-md);
    transition: background var(--transition-fast);
}

.app-sidebar-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: transform var(--transition-base), opacity var(--transition-base);
}

.app-sidebar-hamburger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.app-sidebar-hamburger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
.app-sidebar-hamburger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.app-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--color-overlay-scrim);
    z-index: 199;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base);
    overscroll-behavior: contain;
    touch-action: none;
}

/*
 * Tablet + mobile: ajustes de header compartidos
 *
 * Estas reglas viven en @layer layout-shell (ver cascade-layers.css), por encima
 * de feature-modules; ganan a POS y demás módulos por orden de capa y, cuando
 * aplica, por mayor especificidad (p. ej. `.app-sidebar-open` vs `.app-shell` solo).
 */
@media (max-width: 1023px) {
    /* El app-shell tiene su propio hamburger; ocultar el de cada módulo */
    .app-shell .app-header-hamburger {
        display: none;
    }

    /* Nav de links — el sidebar los contiene todos */
    .app-shell .pos-header-nav-links,
    .app-shell .app-header-sep {
        display: none;
    }

    /* Estado y utilidades en línea junto al título */
    .app-shell .app-header-actions {
        display: flex;
        position: static;
        background: transparent;
        box-shadow: none;
        padding: 0;
        border: none;
        flex-direction: row;
        width: auto;
        gap: var(--space-2);
    }

    /* Logout y tema siguen en el sidebar; nombre y rol se muestran en el header */
    .app-shell .app-header-actions .btn-logout-header,
    .app-shell .app-header-actions #btn-logout {
        display: none;
    }
}

/* Tablet: sidebar icon-only permanente (768-1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    /* El sidebar es visible como flex-child — padding para el espacio que ocupa */
    .app-shell #view-container {
        padding-left: 0;
    }
}

/* Mobile: hamburger + sidebar como overlay (<768px) */
@media (max-width: 767px) {
    .app-sidebar-hamburger {
        display: flex;
    }

    /* Sin padding en todo el contenedor: el contenido usa todo el ancho; solo la barra y el header evitan el hamburger */
    .app-shell #view-container {
        padding-left: 0;
    }

    /* Reservar espacio solo para la barra de usuario (hamburger fijo arriba a la izquierda) */
    .app-shell .app-user-bar {
        padding-left: max(52px, env(safe-area-inset-left));
    }

    /* Reservar espacio solo para el header del módulo (ej. POS) debajo del hamburger */
    .app-shell #view-content > .app-header {
        padding-left: max(52px, env(safe-area-inset-left));
    }

    /* Ocultar título y subtítulo en todas las vistas para aprovechar espacio en móvil */
    .app-shell #view-content > .app-header .app-header-brand {
        display: none;
    }
    .app-shell #view-content > .app-header h1,
    .app-shell #view-content > .app-header .app-header-info {
        display: none;
    }

    /* Ocultar todo el header del módulo en móvil; en POS también se oculta (la barra fija ya tiene usuario/tema/logout) */
    .app-shell #view-content > .app-header {
        display: none;
    }

    /* Forzar sidebar oculto en mobile — mayor especificidad que pos.css */
    .app-shell #app-sidebar {
        display: none;
        visibility: hidden;
        pointer-events: none;
    }

    .app-shell.app-sidebar-open .app-sidebar-backdrop {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }

    /* Estilos comunes al sidebar en overlay (abierto Y cerrándose) */
    .app-shell.app-sidebar-open #app-sidebar,
    .app-shell.app-sidebar-closing #app-sidebar {
        display: flex;
        visibility: visible;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(280px, 80vw);
        min-height: 100dvh;
        z-index: 200;
        box-shadow: var(--elevation-4);
        background: var(--color-surface-muted);
        border-right: 1px solid var(--color-border);
        overflow-y: auto;
        overflow-x: visible;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        /* Debajo de la barra fija de usuario (nombre, conexión, tema) */
        padding-top: max(
            calc(var(--app-user-bar-height) + var(--space-3)),
            calc(env(safe-area-inset-top) + var(--app-user-bar-height) + var(--space-2))
        );
        padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
    }

    /* Abierto: interactivo + slide-in */
    .app-shell.app-sidebar-open #app-sidebar {
        pointer-events: auto;
        animation: sidebar-slide-in 0.22s var(--ease-out) both;
    }

    /* Cerrándose: no interactivo + slide-out */
    .app-shell.app-sidebar-closing #app-sidebar {
        pointer-events: none;
        animation: sidebar-slide-out 0.22s var(--ease-in) both;
    }

    /* Backdrop: fade-out al cerrar */
    .app-shell.app-sidebar-closing .app-sidebar-backdrop {
        display: block;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--transition-base);
    }

    .app-shell.app-sidebar-open #app-sidebar.collapsed,
    .app-shell.app-sidebar-closing #app-sidebar.collapsed {
        width: min(280px, 80vw);
    }

    /* Ocultar franja colapsar — solo útil en desktop */
    .app-shell.app-sidebar-open #app-sidebar .pos-nav-sidebar-rail {
        display: none;
    }

    /* Evitar que el primer ítem (ej. POS) se recorte: el bloque de items puede crecer y hacer scroll */
    .app-shell.app-sidebar-open #app-sidebar .pos-nav-sidebar-items,
    .app-shell.app-sidebar-closing #app-sidebar .pos-nav-sidebar-items {
        flex: 1 1 auto;
        min-height: min-content;
        overflow-y: auto;
        overflow-x: visible;
        -webkit-overflow-scrolling: touch;
    }

    .app-shell.app-sidebar-open #app-sidebar .pos-nav-label,
    .app-shell.app-sidebar-closing #app-sidebar .pos-nav-label {
        overflow: visible;
        text-overflow: clip;
    }

    /* Mostrar etiquetas en overlay mobile */
    .app-shell.app-sidebar-open #app-sidebar.collapsed .pos-nav-label {
        opacity: 1;
        width: auto;
        overflow: visible;
    }
}

@keyframes sidebar-slide-in {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}

@keyframes sidebar-slide-out {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

#view-container {
    flex: 1 1 0%;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

/* Que el contenido use todo el espacio al colapsar el sidebar (flex basis 0 + width 0 en app-shell) */
.app-shell #view-container {
    transition: none;
}

/* Barra de usuario fija: nombre · rol + tema + cerrar sesión (junto al área de contenido) */
.view-content {
    flex: 1 1 0%;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

/* Barra fija arriba: no se desplaza con el contenido (mobile-first y todos) */
.app-user-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    padding-left: max(var(--space-4), env(safe-area-inset-left));
    padding-right: max(var(--space-4), env(safe-area-inset-right));
    padding-top: max(var(--space-2), env(safe-area-inset-top));
    min-height: var(--app-user-bar-height);
    box-sizing: border-box;
    background: var(--color-header-bg);
    border-bottom: 1px solid var(--color-border);
}

/* Espacio reservado para que el contenido no quede bajo la barra fija */
.app-shell #view-content {
    padding-top: max(var(--app-user-bar-height), calc(var(--app-user-bar-height) + env(safe-area-inset-top, 0px)));
}

/* Sidebar tablet/desktop: menú debajo de la barra fija (misma lógica que el overlay móvil) */
@media (min-width: 768px) {
    .app-shell #app-sidebar {
        box-sizing: border-box;
        min-height: 100dvh;
        padding-top: max(
            var(--app-user-bar-height),
            calc(var(--app-user-bar-height) + env(safe-area-inset-top, 0px))
        );
    }
}

/* Móvil: evitar que el contenido quede bajo la barra del navegador */
@media (max-width: 1023px) {
    .view-content {
        padding-bottom: max(calc(56px + env(safe-area-inset-bottom)), var(--space-6));
    }
}

.app-user-bar-user {
    font-size: var(--text-sm);
    color: var(--color-header-text);
    margin-right: auto;
}

.app-user-bar-almacen,
.app-header-user .app-user-bar-almacen {
    display: inline-block;
    margin-left: 0.15rem;
    padding: 0.1rem 0.45rem;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-primary) 18%, transparent);
    color: var(--color-header-title);
    font-weight: var(--font-weight-medium, 500);
}

.app-user-bar-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--color-header-title);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.app-user-bar-btn:hover {
    background: var(--color-header-hover);
    border-color: var(--color-header-title);
}

.app-user-bar-btn-icon {
    font-size: 1.1rem;
    line-height: 1;
}

/* Botones solo icono (sin texto) — todos los modos de pantalla */
.app-user-bar-btn-icon-only {
    min-width: 44px;
    min-height: 44px;
    padding: var(--space-2);
    justify-content: center;
}

.app-user-bar-btn-label {
    color: inherit;
}

/* Ocultar usuario en headers de módulos cuando la barra de usuario está visible */
.app-shell .app-header-actions .app-header-user {
    display: none;
}

.container {
    width: 100%;
    max-width: min(1600px, 100%);
    margin: 0 auto;
    padding: var(--space-4);
    padding-left: max(var(--space-4), env(safe-area-inset-left));
    padding-right: max(var(--space-4), env(safe-area-inset-right));
}

/* Con sidebar: mismo ancho útil que vistas sin .container (ej. Bitácora) — sin segundo capado a 1600px en escritorio */
@media (min-width: 1024px) {
    .app-shell .view-content .container {
        max-width: none;
    }
}

/* Barra de acciones debajo del header (opción 1) */
.page-actions {
    width: 100%;
    background: var(--color-surface-muted);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-3) var(--space-4);
    padding-left: max(var(--space-4), env(safe-area-inset-left));
    padding-right: max(var(--space-4), env(safe-area-inset-right));
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    box-sizing: border-box;
}
.page-actions .btn { flex-shrink: 0; }

@media (max-width: 767px) {
    .page-actions {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2);
    }
}

/* ===== LOGIN / AUTH MEJORADO ===== */
.auth-layout {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
    background: var(--color-background);
    position: relative;
    overflow: hidden;
}

/* Círculos decorativos de fondo */
.auth-layout::before,
.auth-layout::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: var(--color-primary);
    opacity: 0.06;
    pointer-events: none;
}
.auth-layout::before {
    width: 480px;
    height: 480px;
    top: -160px;
    right: -160px;
}
.auth-layout::after {
    width: 320px;
    height: 320px;
    bottom: -100px;
    left: -100px;
}

.auth-card {
    width: 100%;
    max-width: 400px;
    position: relative;
    z-index: 1;
    animation: auth-card-enter 0.35s var(--ease-out) both;
}

@keyframes auth-card-enter {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Área de marca (logo + nombre + tagline) */
.auth-brand {
    text-align: center;
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

.auth-brand-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-xl);
    display: block;
    margin: 0 auto var(--space-4);
    object-fit: cover;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--color-primary) 32%, transparent);
}

.auth-brand-name {
    font-size: clamp(var(--text-xl), 3vw, var(--text-2xl));
    font-weight: var(--font-bold);
    color: var(--marca-color-nombre, var(--color-text));
    margin: 0 0 var(--space-1);
    letter-spacing: -0.01em;
}

.auth-brand-distribuidoras {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 var(--space-1);
}

.auth-brand-tagline {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0;
}

/* En login: indicador de conexión (+ panel Fase 5) y tema juntos */
body:has(.auth-layout) #connection-status-wrap {
    position: fixed;
    top: max(var(--space-3), env(safe-area-inset-top));
    right: calc(max(var(--space-3), env(safe-area-inset-right)) + 44px + var(--space-2));
    z-index: 100;
}
body:has(.auth-layout) #connection-status-wrap #connection-status {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
}

body:has(.auth-layout) #connection-status-wrap #connection-status.connection-online {
    border-color: var(--color-success);
}

body:has(.auth-layout) #connection-status-wrap #connection-status.connection-offline {
    border-color: var(--color-danger);
}

/* Botón cambio de tema en login (esquina superior derecha) */
.auth-theme-toggle {
    position: fixed;
    top: max(var(--space-3), env(safe-area-inset-top));
    right: max(var(--space-3), env(safe-area-inset-right));
    z-index: 100;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
}
.auth-theme-toggle:hover {
    background: var(--color-surface-muted);
    color: var(--color-text);
    border-color: var(--color-border-strong);
}

/* Input contraseña con botón mostrar/ocultar */
.auth-password-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.auth-password-wrap .input {
    padding-right: 3rem;
}

.auth-toggle-password {
    position: absolute;
    right: var(--space-3);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: var(--space-1);
    line-height: 1;
    font-size: 1.1rem;
    transition: color var(--transition-fast);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
}

.auth-toggle-password:hover {
    color: var(--color-text);
    background: var(--color-surface-muted);
}

/* Spinner dentro del botón login */
.auth-btn-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: auth-spin 0.6s linear infinite;
    vertical-align: -0.15em;
    margin-right: 0.4em;
}
@keyframes auth-spin {
    to { transform: rotate(360deg); }
}

/* Pie de la tarjeta */
.auth-footer {
    text-align: center;
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.auth-app-version {
    text-align: center;
    margin-top: var(--space-2);
    font-size: 0.7rem;
    letter-spacing: 0.02em;
    color: var(--color-text-muted);
    opacity: 0.85;
}

/* ===== SELECTOR DE ALMACÉN MEJORADO ===== */
.almacen-selector-card {
    max-width: 440px;
}

/* Cabecera con avatar + saludo */
.almacen-selector-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

.almacen-selector-avatar {
    width: 52px;
    height: 52px;
    min-width: 52px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    color: var(--color-primary-contrast);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 32%, transparent);
    flex-shrink: 0;
}

.almacen-selector-header-text h1 {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--color-primary);
    margin: 0 0 var(--space-1);
}

.almacen-selector-subtitle {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin: 0;
}

.almacen-selector-filter-wrap {
    width: 100%;
    margin-bottom: var(--space-4);
}

.almacen-selector-filter-label {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.almacen-selector-empty-hint {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    text-align: center;
    padding: var(--space-4);
    margin: 0;
}

.almacen-selector-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}

/* Ítem de almacén rediseñado */
.almacen-selector-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    min-height: 64px;
    text-align: left;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    cursor: pointer;
    transition: border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base), transform var(--duration-fast) ease;
    width: 100%;
}

.almacen-selector-item:hover {
    border-color: var(--almacen-accent, var(--color-primary));
    background: color-mix(in srgb, var(--almacen-accent, var(--color-primary)) 12%, var(--color-surface));
    box-shadow: var(--elevation-2);
}

.almacen-selector-item:active {
    transform: scale(0.99);
}

.almacen-selector-item:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

/* Badge: iniciales o logo del almacén */
.almacen-item-badge {
    width: 44px;
    height: 44px;
    min-width: 44px;
    background: color-mix(in srgb, var(--almacen-accent, var(--color-primary)) 18%, var(--color-surface-muted));
    border: 1px solid color-mix(in srgb, var(--almacen-accent, var(--color-primary)) 35%, transparent);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: var(--almacen-accent, var(--color-primary));
    transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
    overflow: hidden;
    flex-shrink: 0;
}

.almacen-item-badge-initials {
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    letter-spacing: 0.02em;
    line-height: 1;
}

.almacen-item-badge-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.almacen-selector-item:hover .almacen-item-badge {
    background: var(--almacen-accent, var(--color-primary));
    border-color: var(--almacen-accent, var(--color-primary));
    color: #fff;
}

.almacen-selector-item:hover .almacen-item-badge-initials {
    color: #fff;
}

/* Info del almacén */
.almacen-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.almacen-item-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    min-width: 0;
}

.almacen-item-name {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--almacen-accent, var(--color-primary));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.almacen-item-recent {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--almacen-accent, var(--color-primary)) 22%, transparent);
    color: var(--almacen-accent, var(--color-primary));
    border: 1px solid color-mix(in srgb, var(--almacen-accent, var(--color-primary)) 40%, transparent);
}

.almacen-item-pin {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-warning) 18%, transparent);
    color: var(--color-warning);
    border: 1px solid color-mix(in srgb, var(--color-warning) 45%, transparent);
}

.almacen-item-pin-icon {
    width: 10px;
    height: 10px;
    display: inline-block;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.almacen-selector-item--recent {
    border-color: color-mix(in srgb, var(--almacen-accent, var(--color-primary)) 55%, var(--color-border));
}

.almacen-item-meta {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-family: var(--font-mono, ui-monospace, monospace);
    letter-spacing: 0.02em;
}

/* Flecha derecha */
.almacen-item-arrow {
    color: var(--color-text-muted);
    font-size: var(--text-lg);
    transition: transform var(--transition-base), color var(--transition-base);
    flex-shrink: 0;
}

.almacen-selector-item:hover .almacen-item-arrow {
    transform: translateX(4px);
    color: var(--almacen-accent, var(--color-primary));
}

/* Skeleton de carga */
.almacen-skeleton-item {
    height: 64px;
    border-radius: var(--radius-md);
    background: linear-gradient(
        90deg,
        var(--color-surface-muted) 25%,
        var(--color-border) 50%,
        var(--color-surface-muted) 75%
    );
    background-size: 200% 100%;
    animation: almacen-shimmer 1.2s ease-in-out infinite;
    border: 2px solid transparent;
}

@keyframes almacen-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

.almacen-loading {
    color: var(--color-text-muted);
    padding: var(--space-lg);
    text-align: center;
}

/* Modal PIN de ingreso al almacén */
.almacen-pin-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(var(--space-md), env(safe-area-inset-top)) max(var(--space-md), env(safe-area-inset-right)) max(var(--space-md), env(safe-area-inset-bottom)) max(var(--space-md), env(safe-area-inset-left));
    background: color-mix(in srgb, var(--color-bg, #0f172a) 55%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.almacen-pin-modal {
    width: min(100%, 22rem);
    padding: var(--space-lg) var(--space-xl);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--elevation-3);
}

.almacen-pin-head {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.almacen-pin-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-primary) 18%, transparent);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.almacen-pin-title {
    margin: 0;
    font-size: var(--text-lg, 1.125rem);
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.25;
}

.almacen-pin-almacen {
    margin: 0 0 var(--space-sm);
    padding: 0.45rem 0.75rem;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface-muted));
    border: 1px solid color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
    font-weight: var(--font-weight-semibold, 600);
    font-size: var(--text-base, 1rem);
    line-height: 1.35;
    color: var(--color-text);
}

.almacen-pin-hint {
    margin: 0 0 var(--space-lg);
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text-muted);
}

.almacen-pin-hint strong {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold, 600);
}

.almacen-pin-field {
    display: block;
    margin-bottom: var(--space-md);
}

.almacen-pin-label {
    display: block;
    margin-bottom: var(--space-xs);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text-muted);
}

.almacen-pin-input {
    width: 100%;
    box-sizing: border-box;
    min-height: 2.75rem;
    padding: 0.65rem 0.85rem;
    font-size: 1.25rem;
    font-weight: var(--font-weight-semibold, 600);
    letter-spacing: 0.2em;
    text-align: center;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg-card, var(--color-surface));
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.almacen-pin-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 28%, transparent);
}

.almacen-pin-input--error {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 22%, transparent);
}

.almacen-pin-error {
    margin: 0 0 var(--space-md);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
}

.almacen-pin-error[hidden] {
    display: none !important;
}

.almacen-pin-actions {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--space-sm);
    margin-top: var(--space-xs);
}

.almacen-pin-actions .btn {
    min-height: 2.75rem;
    justify-content: center;
}

.almacen-pin-actions .btn-primary {
    font-weight: var(--font-weight-semibold, 600);
}

@media (min-width: 480px) {
    .almacen-pin-actions {
        flex-direction: row;
        justify-content: stretch;
    }

    .almacen-pin-actions .btn-primary {
        flex: 1 1 auto;
    }

    .almacen-pin-actions .btn-ghost {
        flex: 0 0 auto;
        min-width: 6.5rem;
    }
}

/* Grid responsive */
.grid {
    display: grid;
    gap: var(--space-md);
}

@media (min-width: 640px) {
    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

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

/* Apertura de caja */
.caja-apertura-layout {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
}

.caja-apertura-card {
    width: 100%;
    max-width: 400px;
}

.caja-apertura-card .card-title {
    margin-bottom: var(--space-md);
}

/* Saludo y almacén: misma escala (--text-lg), bloque principal bajo el título */
.caja-apertura-greeting {
    margin-bottom: var(--space-md);
    font-size: var(--text-lg);
    line-height: 1.4;
}

.caja-apertura-greeting-hola {
    color: var(--color-text-secondary);
    font-weight: 500;
    margin-right: 0.3rem;
}

.caja-apertura-greeting-nombre {
    color: var(--color-info);
    font-weight: var(--font-weight-semibold, 600);
}

.caja-apertura-almacen {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.45rem;
    margin-bottom: var(--space-md);
    font-size: var(--text-lg);
    line-height: 1.4;
}

.caja-apertura-almacen-label {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.2;
}

.caja-apertura-almacen-label::after {
    content: '·';
    margin-left: 0.3rem;
    opacity: 0.55;
    font-weight: 600;
}

.caja-apertura-almacen-nombre {
    color: var(--color-header-title);
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.35;
    flex: 1 1 auto;
    min-width: 0;
}

/* Fecha: meta al pie del contexto, más pequeña que saludo/almacén */
.caja-apertura-subtitle {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    margin-top: 0;
    margin-bottom: var(--space-lg);
    line-height: 1.35;
}

/* Header con caja activa - Fase 2+5: sticky, elevation-1 */
.app-header {
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: 48px;
    padding: var(--space-3) var(--space-4);
    background: var(--color-header-bg);
    color: var(--color-header-text);
    border-bottom: 1px solid var(--color-header-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-left: max(var(--space-4), env(safe-area-inset-left));
    padding-right: max(var(--space-4), env(safe-area-inset-right));
    box-shadow: var(--elevation-1);
}

@media (min-width: 768px) {
    .app-header {
        min-height: 56px;
        padding: var(--space-4) var(--space-6);
    }
}

/* Desktop Large (1280px+): header 64px según Fase 2 */
@media (min-width: 1280px) {
    .app-header {
        min-height: 64px;
    }
}

.app-header h1 {
    font-size: clamp(var(--text-base), 2vw, var(--text-lg));
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-header-title);
}

.app-header-info {
    font-size: var(--text-sm);
    opacity: 0.9;
}

.app-header-user {
    font-size: var(--text-sm);
    opacity: 0.9;
}

.app-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}

.app-header-nav .app-header-group {
    display: flex;
    gap: var(--space-xs);
    align-items: center;
}

.app-header-sep {
    width: 1px;
    height: 1.25rem;
    background: var(--color-header-sep);
    flex-shrink: 0;
}

/* Toggle de tema (Fase 4) - texto/icono azul en header */
.theme-toggle-btn {
    color: var(--color-header-title);
    min-width: 44px;
    padding: var(--space-2);
}

.theme-toggle-btn:hover {
    background: var(--color-header-hover);
    color: var(--color-header-title);
}

.theme-toggle-icon {
    font-size: 1.25rem;
    line-height: 1;
}

@media (max-width: 900px) {
    .app-header-sep { display: none; }
}

/* Menú hamburguesa (Fase 5) - mobile */
.app-header-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.app-header-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-header-title);
    touch-action: manipulation;
}

.app-header-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: transform var(--transition-base), opacity var(--transition-base);
}

.app-header-hamburger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.app-header-hamburger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
.app-header-hamburger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 767px) {
    .app-header-hamburger {
        display: flex;
    }

    .app-header-actions {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-header-bg);
        flex-direction: column;
        padding: var(--space-4);
        gap: var(--space-2);
        max-height: calc(100dvh - var(--app-header-height, 56px));
        overflow-y: auto;
        box-shadow: var(--elevation-2);
    }

    .app-header-actions.app-header-nav-open {
        display: flex;
    }

    .app-header-nav .app-header-group {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .app-header-nav .app-header-group a,
    .app-header-nav .app-header-group button {
        justify-content: flex-start;
        width: 100%;
    }
}

.pos-placeholder {
    padding-top: var(--space-xl);
}

/* Móvil/tablet horizontal: evitar distorsión de texto e iconos */
@media (orientation: landscape) and (max-height: 500px),
       (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
    /* Iconos de la barra de usuario: mantener proporción */
    .app-user-bar-btn-icon,
    .app-user-bar-btn-icon-only {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        line-height: 1;
    }
}

/* Diálogos globales por encima de modales en @layer feature-modules (p. ej. Nuevo préstamo). */
.confirm-dialog-overlay,
.codigo-auth-overlay {
    z-index: 11000;
}

/* Toasts y transformador POS: capa layout-shell para quedar por encima de modales feature-modules */
#toast-container {
    z-index: 10950;
}

.tc-modal-overlay {
    z-index: 10900;
}

}