/* ===== HORNO DE CASA 2.0 - RESPONSIVE V2 ===== */

/* FIX GLOBAL: siempre permitir scroll */
html, body { 
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

@media (max-width: 768px) {
    /* ===== BODY ===== */
    body { 
        padding: 12px !important; 
        font-size: 15px;
        height: auto !important;
        min-height: 100vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    
    /* ===== HEADERS ===== */
    h1 { font-size: 1.3em !important; margin-bottom: 4px !important; }
    h2 { font-size: 1em !important; margin-bottom: 10px !important; }
    h3 { font-size: 0.95em !important; }
    
    /* ===== GRIDS GENERALES ===== */
    .grid, .grid-2, .grid-categorias, .stats-grid, .grid-resumen,
    .cards-grid, .grid-recetas {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    
    /* ===== TABLAS CON SCROLL REAL ===== */
    .caja, .card, .receta, .servicio-card, .cat-card, .rec-card,
    .balance-card, .estado-resultados, .total-card, .filtros,
    .meta-card {
        padding: 14px !important;
        border-radius: 12px !important;
        overflow: visible !important;
    }
    
    table { 
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        width: 100% !important;
    }
    table thead, table tbody { display: table !important; width: 100% !important; }
    table th, table td { padding: 8px 6px !important; font-size: 0.82em !important; }
    
    /* ===== BOTONES TÁCTILES ===== */
    .boton, button, input[type="submit"] {
        min-height: 44px !important;
        padding: 10px 14px !important;
        font-size: 0.88em !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .btn-cobrar, .boton-full { width: 100% !important; }
    
    /* ===== FORMULARIOS APILADOS ===== */
    .fila, .fila-2, .form-nueva, .form-edit-inline, .form-inline,
    .ingrediente-row, .producto-row, .rango-fechas {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        grid-template-columns: 1fr !important;
    }
    .header-acciones { flex-direction: column !important; }
    .header-acciones .boton { width: 100% !important; }
    
    /* ===== INPUTS ===== */
    input, select, textarea {
        font-size: 16px !important;
        padding: 12px !important;
        width: 100% !important;
        min-height: 44px !important;
    }
    
    /* ===== POS: ARREGLO CRÍTICO ===== */
    body { height: auto !important; overflow: auto !important; }
    .layout { 
        display: flex !important; 
        flex-direction: column !important; 
        height: auto !important; 
        overflow: visible !important;
        min-height: auto !important;
    }
    .productos { 
        width: 100% !important; 
        padding: 8px !important;
        height: auto !important;
        overflow: visible !important;
    }
    .carrito { 
        width: 100% !important; 
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        margin-top: 10px !important;
        box-shadow: 0 -4px 15px rgba(0,0,0,0.1) !important;
    }
    .carrito-items { 
        max-height: 300px !important; 
        overflow-y: auto !important;
    }
    .grid { 
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        overflow: visible !important;
        padding: 4px !important;
    }
    .card { padding: 8px !important; }
    .card img, .card .no-img { 
        width: 60px !important; 
        height: 60px !important; 
    }
    .card .nombre { font-size: 0.85em !important; }
    .card .precio { font-size: 1.1em !important; }
    .top-bar { 
        flex-wrap: wrap !important; 
        overflow: visible !important;
    }
    .buscar { min-width: 100% !important; }
    
    /* ===== MODALES SCROLLABLES ===== */
    .modal-overlay { 
        align-items: flex-end !important; 
        padding: 0 !important;
    }
    .modal { 
        padding: 20px 15px !important;
        border-radius: 20px 20px 0 0 !important;
        max-height: 92vh !important;
        overflow-y: auto !important;
        width: 100% !important;
    }
    
    /* ===== CATEGORÍAS Y TABS ===== */
    .categorias, .filtros-tabs { 
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
    }
    .cat-btn, .tab { flex-shrink: 0 !important; }
    
    /* ===== STATS ===== */
    .stat .valor { font-size: 1.6em !important; }
    
    /* ===== OCULTAR NO ESENCIAL ===== */
    .hide-mobile { display: none !important; }
}

/* ===== FIX V3: Botones superiores uniformes en móvil ===== */
@media (max-width: 768px) {
    .top-bar {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        align-items: stretch !important;
        overflow: visible !important;
    }
    
    .btn-top {
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        padding: 0 12px !important;
        font-size: 0.8em !important;
        border-radius: 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 1 auto !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
        line-height: 1 !important;
    }
    
    /* POS (2026-10-16): aqui habia un ancho fijo de 44px para .btn-ventas y
       .btn-inicio ("botones solo con emoji"), puesto cuando esos botones eran
       un cuadrado con el emoji adentro. El tamano de la barra lo decide ahora
       templates/ventas/pos/_css_tema.html: 44x44 SIEMPRE, porque desde D-135
       (2026-11-02) los accesos del POS son solo icono y el nombre viaja en
       data-tooltip / aria-label. Este archivo no debe volver a fijar anchos de
       .btn-top: cualquier medida de aqui pelea con la barra.
       Nota: .btn-top solo se usa en el POS (ver DOCS/04_DECISIONES.md). */
    
    /* El buscador siempre en su propia fila */
    .buscar {
        flex: 1 1 100% !important;
        width: 100% !important;
        margin-bottom: 8px !important;
    }
    
    /* Botón Pendientes con badge bien alineado */
    .btn-pendientes {
        position: relative !important;
    }
    .btn-pendientes .badge {
        top: -4px !important;
        right: -4px !important;
        min-width: 20px !important;
        height: 20px !important;
        font-size: 0.7em !important;
        padding: 0 5px !important;
    }
}

/* Tablets: misma uniformidad */
@media (min-width: 769px) {
    .btn-top {
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }
}

/* ===== FIX V4: Header del panel en móvil ===== */
@media (max-width: 768px) {
    .header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 15px !important;
        text-align: center !important;
    }
    
    .header h1 {
        font-size: 1.4em !important;
        margin: 0 !important;
        padding-bottom: 10px !important;
        border-bottom: 2px solid #f0fdf4 !important;
        text-align: center !important;
    }
    
    .header .user {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        align-items: center !important;
        width: 100% !important;
    }
    
    .header .user .nombre {
        font-size: 1em !important;
        text-align: center !important;
        word-break: break-word !important;
    }
    
    .header .user .rol {
        display: inline-block !important;
        font-size: 0.75em !important;
        padding: 4px 14px !important;
        text-align: center !important;
    }
    
    .header .btn-salir {
        width: 100% !important;
        text-align: center !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.95em !important;
    }
}

/* ===== FIX V5: Botón Salir compacto en móvil ===== */
@media (max-width: 768px) {
    .header .btn-salir {
        width: auto !important;
        min-width: 100px !important;
        max-width: 140px !important;
        min-height: 38px !important;
        padding: 8px 18px !important;
        font-size: 0.85em !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
        border-radius: 10px !important;
    }
    
    .header .user {
        gap: 6px !important;
    }
}

/* ===== FIX V6: Header horizontal compacto en móvil ===== */
@media (max-width: 768px) {
    .header {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        padding: 12px 15px !important;
        text-align: left !important;
    }
    
    .header h1 {
        font-size: 1.1em !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: none !important;
        text-align: left !important;
        flex: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    .header .user {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        width: auto !important;
        flex-shrink: 0 !important;
    }
    
    /* Ocultar el nombre completo y el rol en móvil para ahorrar espacio */
    .header .user .nombre,
    .header .user .rol {
        display: none !important;
    }
    
    .header .btn-salir {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        padding: 0 !important;
        font-size: 1.2em !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
    }
}

/* ===== FIX V7: Botón power moderno ===== */
.btn-salir {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
    padding: 10px 16px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    min-height: 44px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3) !important;
    border: none !important;
    line-height: 1 !important;
}

.btn-salir:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4) !important;
}

@media (max-width: 768px) {
    .btn-salir {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        font-size: 1.2em !important;
    }
}

/* ===== FIX V8: Botón SALIR rectangular ===== */
.btn-salir {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
    padding: 10px 20px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 0.85em !important;
    letter-spacing: 0.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 40px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3) !important;
    border: none !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.btn-salir:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4) !important;
}

@media (max-width: 768px) {
    .btn-salir {
        width: auto !important;
        height: 40px !important;
        min-width: 90px !important;
        max-width: 110px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        padding: 0 16px !important;
        border-radius: 10px !important;
        font-size: 0.8em !important;
    }
}