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

/* 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-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: rgba(0, 0, 0, 0.5);
    z-index: 199;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base);
}

/*
 * Tablet + mobile: ajustes de header compartidos
 *
 * NOTA ARQUITECTÓNICA — uso intencionado de !important:
 * Cada módulo (ventas, compras, etc.) puede redefinir `.app-header-actions`,
 * `.pos-header-nav-links`, etc. con su propia especificidad. Los !important
 * aquí son guardianes de layout: garantizan que el app-shell siempre muestre
 * el estado correcto sin importar qué módulo esté activo.
 * Solución estructural futura: usar @layer para aislar estilos de módulo.
 */
@media (max-width: 1023px) {
    /* El app-shell tiene su propio hamburger; ocultar el de cada módulo */
    .app-shell .app-header-hamburger {
        display: none !important;
    }

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

    /* Estado y utilidades en línea junto al título */
    .app-shell .app-header-actions {
        display: flex !important;
        position: static !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        border: none !important;
        flex-direction: row !important;
        width: auto !important;
        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 !important;
    }
}

/* 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 !important;
    }
    .app-shell #view-content > .app-header h1,
    .app-shell #view-content > .app-header .app-header-info {
        display: none !important;
    }

    /* 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 !important;
    }

    /* Forzar sidebar oculto en mobile — mayor especificidad que pos.css */
    .app-shell #app-sidebar {
        display: none !important;
        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 !important;
        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;
        padding-top: max(var(--space-3), env(safe-area-inset-top));
        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 botón colapsar — solo útil en desktop */
    .app-shell.app-sidebar-open #app-sidebar .pos-nav-sidebar-toggle {
        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)));
}

/* 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-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 !important;
}

.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));
}

/* 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 rgba(249, 115, 22, 0.3);
}

.auth-brand-name {
    font-size: clamp(var(--text-xl), 3vw, var(--text-2xl));
    font-weight: var(--font-bold);
    color: 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);
}

/* ===== 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 rgba(249, 115, 22, 0.3);
    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-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(--color-primary);
    background: var(--color-primary-muted);
    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 con código del almacén */
.almacen-item-badge {
    width: 44px;
    height: 44px;
    min-width: 44px;
    background: var(--color-surface-muted);
    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(--color-primary);
    transition: background var(--transition-base), color var(--transition-base);
    overflow: hidden;
    word-break: break-all;
    text-align: center;
    line-height: 1.2;
    padding: 2px;
}

.almacen-selector-item:hover .almacen-item-badge {
    background: var(--color-primary);
    color: var(--color-primary-contrast);
}

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

/* Colores distintos por almacén para diferenciarlos con facilidad */
.almacen-selector-item:nth-child(1) .almacen-item-name { color: var(--color-primary); }
.almacen-selector-item:nth-child(2) .almacen-item-name { color: var(--color-info); }
.almacen-selector-item:nth-child(3) .almacen-item-name { color: var(--color-success); }
.almacen-selector-item:nth-child(4) .almacen-item-name { color: var(--color-warning); }
.almacen-selector-item:nth-child(5) .almacen-item-name { color: var(--color-secondary); }
.almacen-selector-item:nth-child(n+6) .almacen-item-name { color: var(--color-text); }

.almacen-item-name {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.almacen-item-meta {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* 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(--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;
}

/* 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-subtitle {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-bottom: var(--space-xs);
}

.caja-apertura-user {
    font-weight: var(--font-weight-medium, 500);
    margin-bottom: var(--space-xs);
}

.caja-apertura-almacen {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-bottom: var(--space-lg);
}

/* 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;
    }
}