/**
 * BHOGA - Mobile Override CSS
 * Este archivo se carga DESPUÉS de todo para garantizar
 * que las reglas mobile se apliquen correctamente
 */

/* Ocultar barra inferior por defecto (solo visible en mobile) */
.mobile-bottom-nav { display: none; }

/* ===== MOBILE MENU HAMBURGUESA ===== */
.mobile-menu-btn {
    display: none;
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1001;
    background: var(--color-primary, #2c2c2c);
    color: white;
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: all 200ms;
}

.mobile-menu-btn:active {
    transform: scale(0.95);
}

.mobile-menu-btn svg {
    width: 24px;
    height: 24px;
}

.mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms;
}

.mobile-overlay.active {
    opacity: 1;
    pointer-events: all;
}

/* ===== FORZAR 100% MOBILE EN TODOS LOS PANELES ===== */
@media screen and (max-width: 968px) {
    /* Prevenir scroll horizontal */
    html {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    body {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        position: relative !important;
    }
    
    /* Mostrar botón hamburguesa */
    .mobile-menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    
    /* Layouts de paneles - FORZAR BLOQUE */
    .layout,
    .app-layout {
        display: block !important;
        grid-template-columns: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Sidebars - COMO NAVBAR SUPERIOR */
    .sidebar,
    aside.sidebar {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        border-right: none !important;
        border-bottom: 1px solid #e8e8e6 !important;
        padding: 0.75rem 1rem !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 999 !important;
        background: white !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
        gap: 1rem !important;
    }
    
    /* Logo en mobile - más pequeño y responsive */
    .sidebar .logo,
    .logo,
    a.logo {
        padding: 0 !important;
        margin: 0 !important;
        font-size: 1.125rem !important;
        flex-shrink: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
    }
    
    .sidebar .logo img,
    .logo img,
    a.logo img {
        max-width: 90px !important;
        height: auto !important;
        width: auto !important;
    }
    
    .sidebar .logo svg {
        width: auto !important;
        height: 24px !important;
        max-width: 90px !important;
    }
    
    /* Logo badge en mobile */
    .logo-badge {
        font-size: 0.5625rem !important;
    }
    
    /* Ocultar back-link en mobile */
    .sidebar .back-link {
        display: none !important;
    }
    
    /* Ocultar sidebar footer en mobile */
    .sidebar-footer {
        display: none !important;
    }

    /* Ocultar navegación lateral si ya usamos la barra inferior */
    .sidebar > nav,
    aside.sidebar > nav {
        display: none !important;
    }
    
    /* Navegación del sidebar - HORIZONTAL SCROLLABLE */
    .sidebar-nav,
    .sidebar nav,
    .sidebar > nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: auto !important;
        flex: 1 !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    
    .sidebar-nav::-webkit-scrollbar,
    .sidebar > nav::-webkit-scrollbar {
        display: none !important;
    }
    
    .sidebar-nav li,
    .sidebar nav li {
        display: inline-flex !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }
    
    .sidebar-nav a,
    .sidebar nav a,
    .nav-item {
        padding: 0.625rem 1rem !important;
        white-space: nowrap !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        border-bottom: 3px solid transparent !important;
        font-size: 0.875rem !important;
        background: transparent !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }
    
    .sidebar-nav a .icon,
    .nav-item .icon {
        font-size: 1.125rem !important;
    }
    
    .sidebar-nav a span:not(.icon),
    .nav-item span:not(.icon) {
        display: inline !important;
    }
    
    .sidebar-nav a.active,
    .sidebar-nav a:hover,
    .nav-item.active,
    .nav-item:hover {
        border-bottom-color: #8b7d6b !important;
        border-left-color: transparent !important;
        background: rgba(139, 125, 107, 0.08) !important;
    }
    
    /* Ocultar labels de sección */
    .sidebar-label,
    .sidebar-section > .sidebar-label {
        display: none !important;
    }
    
    .sidebar-section {
        display: contents !important;
    }
    
    /* Indicadores de scroll en sidebar mobile */
    .sidebar.can-scroll-right::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 40px;
        background: linear-gradient(90deg, transparent, white);
        pointer-events: none;
        z-index: 10;
    }
    
    .sidebar.can-scroll-left::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 40px;
        background: linear-gradient(270deg, transparent, white);
        pointer-events: none;
        z-index: 10;
    }
    
    /* Main content - FULL WIDTH */
    .main-content,
    main.main-content {
        display: block !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding: 1.25rem 1rem !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    /* Top bar responsive */
    .top-bar,
    .top-bar-inner {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0.875rem 1rem !important;
    }
    
    .top-bar-inner {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }
    
    .top-actions,
    .user-menu {
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
    }
    
    /* Stats grids - 2 COLUMNAS EN MOBILE */
    .stats-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
        width: 100% !important;
    }
    
    .stat-card {
        padding: 1.125rem !important;
    }
    
    .stat-value {
        font-size: 1.875rem !important;
    }
    
    /* Cards grid - 1 COLUMNA */
    .cards-grid,
    .content-section .cards-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
        width: 100% !important;
    }
    
    /* Tables - SCROLL HORIZONTAL */
    .table-container {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin-left: -1rem !important;
        margin-right: -1rem !important;
        border-radius: 0 !important;
    }
    
    table {
        min-width: 100% !important;
        width: max-content !important;
    }
    
    th, td {
        padding: 0.75rem 0.625rem !important;
        font-size: 0.8125rem !important;
    }
    
    /* Formularios - FULL WIDTH */
    .form-card,
    form {
        width: 100% !important;
        max-width: 100% !important;
        padding: 1.25rem !important;
    }
    
    .form-input,
    .form-select,
    .form-textarea,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    select,
    textarea {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 16px !important; /* Evita zoom en iOS */
        padding: 0.75rem !important;
    }
    
    /* Botones - FULL WIDTH */
    .btn,
    .btn-primary,
    .btn-large,
    button[type="submit"] {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        padding: 0.875rem 1.5rem !important;
    }
    
    .form-actions,
    .btn-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        width: 100% !important;
    }

    /* Bottom navigation fixed */
    .mobile-bottom-nav {
        position: fixed !important;
        left: 0; right: 0; bottom: 0;
        height: calc(64px + env(safe-area-inset-bottom));
        background: #fff;
        border-top: 1px solid #e8e8e6;
        display: grid !important;
        grid-template-columns: repeat(5, 1fr);
        align-items: center;
        z-index: 1000;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .mobile-bottom-nav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #6b6b6b;
        text-decoration: none;
        font-size: 11px;
        gap: 4px;
    }
    .mobile-bottom-nav a.active,
    .mobile-bottom-nav a:hover {
        color: #2c2c2c;
        font-weight: 600;
    }
    .mobile-bottom-nav .icon { font-size: 22px; line-height: 1; }
    /* Give space for bottom nav */
    body { padding-bottom: 70px !important; }
}

/* ===== MÓVILES PEQUEÑOS (< 640px) ===== */
@media screen and (max-width: 640px) {
    /* Logo extra pequeño en móviles pequeños */
    .sidebar .logo img,
    .logo img,
    a.logo img {
        max-width: 75px !important;
    }
    
    /* Ocultar texto de navegación, solo iconos */
    .nav-item span:not(.icon),
    .sidebar-nav a span:not(.icon) {
        display: none !important;
    }
    
    .nav-item .icon,
    .sidebar-nav a .icon {
        font-size: 1.25rem !important;
        margin: 0 !important;
    }
    
    /* Stats en 1 COLUMNA */
    .stats-grid {
        grid-template-columns: 1fr !important;
    }
    
    .stat-value {
        font-size: 1.75rem !important;
    }
    
    /* Padding más pequeño */
    .main-content,
    main.main-content {
        padding: 1rem 0.75rem !important;
    }
    
    .top-bar,
    .top-bar-inner {
        padding: 0.75rem !important;
    }
    
    /* Sidebar nav más compacto */
    .sidebar-nav a,
    .nav-item {
        padding: 0.625rem 0.875rem !important;
        font-size: 0.8125rem !important;
    }
    
    /* Texto más pequeño */
    .page-title,
    h1 {
        font-size: 1.5rem !important;
    }
    
    .page-subtitle,
    .product-summary {
        font-size: 0.875rem !important;
    }
}

/* ===== TABLET (entre 640px y 968px) ===== */
@media screen and (min-width: 641px) and (max-width: 968px) {
    /* Stats en 2 columnas */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Cards pueden ser 2 columnas si hay espacio */
    .cards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ===== LANDSCAPE MODE (móviles en horizontal) ===== */
@media screen and (max-width: 968px) and (orientation: landscape) {
    /* Sidebar más compacto */
    .sidebar {
        padding: 0.25rem 0 !important;
    }
    
    .sidebar-nav a,
    .nav-item {
        padding: 0.5rem 1rem !important;
        font-size: 0.8125rem !important;
    }
    
    /* Top bar más compacto */
    .top-bar,
    .top-bar-inner {
        padding: 0.5rem 1rem !important;
    }
    
    /* Main content más compacto */
    .main-content {
        padding: 1rem !important;
    }
}

/* ===== UTILITIES MOBILE ===== */
@media screen and (max-width: 968px) {
    .hide-mobile {
        display: none !important;
    }
    
    .show-mobile {
        display: block !important;
    }
    
    .w-full-mobile {
        width: 100% !important;
    }
    
    .text-center-mobile {
        text-align: center !important;
    }
}