/* mobile.css — Ajustes de tamaño para celular */

@media (max-width: 768px) {
    /* Textos generales más grandes */
    body { font-size: 15px; }
    
    /* Títulos de página */
    .main-content h1, .main-content h2 { font-size: 2rem !important; }
    
    /* Stat cards */
    .stat-card p, .card-stats p { font-size: 11px !important; }
    .stat-card span.text-4xl, .card-stats h3 { font-size: 2.2rem !important; }
    
    /* Work rows - textos más grandes */
    .work-row h3, .sol-card h3 { font-size: 13px !important; }
    .work-row p, .sol-card p { font-size: 11px !important; }
    
    /* Work row: stack vertical en mobile */
    .work-row .flex.items-center.gap-4 {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    
    /* Ocultar icono de engineering en mobile */
    .work-row .hidden.sm\\:flex { display: none !important; }
    
    /* Botones de acción: fila horizontal con wrap */
    .work-row .flex.items-center.gap-1.flex-shrink-0 {
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        max-width: 100% !important;
        gap: 4px !important;
    }
    
    /* Badges y tags más grandes */
    .work-row span[style*="font-size:8px"],
    .work-row span[style*="font-size:9px"] { font-size: 10px !important; }
    
    /* Botones de acción en mobile - grilla en vez de fila */
    .work-row button.p-2, 
    .sol-card button { 
        padding: 8px !important; 
        min-width: 40px; 
        min-height: 40px; 
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .work-row .material-symbols-outlined.text-xl { font-size: 22px !important; }
    
    /* Fila de botones de acción: wrap en mobile */
    .work-row .flex.items-center.gap-1.flex-shrink-0 {
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
        max-width: 180px !important;
        gap: 2px !important;
    }
    
    /* Inputs más grandes */
    input, select, textarea { 
        font-size: 16px !important; 
        min-height: 48px; 
    }
    
    /* Search inputs */
    .search-input, .filtro-select { 
        font-size: 13px !important; 
        padding: 14px 16px !important; 
    }
    
    /* Nav links del sidebar más grandes */
    .nav-link { 
        padding: 14px 16px !important; 
        font-size: 13px !important; 
        gap: 12px !important; 
    }
    .nav-link .material-symbols-outlined { font-size: 22px !important; }
    
    /* Botones principales más grandes */
    button[style*="background:#E31E24"],
    a[style*="background:#E31E24"],
    .save-btn,
    button[style*="background:rgba(227,30,36"] {
        min-height: 52px !important;
        font-size: 12px !important;
    }
    
    /* Timer bar más grande */
    .work-row > div:nth-child(2) button {
        min-height: 44px !important;
        padding: 8px 14px !important;
    }
    
    /* Mini rows más grandes */
    .mini-row { 
        padding: 14px 16px !important; 
    }
    .mini-row p { font-size: 12px !important; }
    
    /* Cards con más padding */
    .card, .card-stats, .section-card { 
        padding: 1.25rem !important; 
    }
    
    /* SweetAlert modals más grandes */
    .swal2-title { font-size: 1.3rem !important; }
    .swal2-html-container { font-size: 14px !important; }
    .swal2-confirm, .swal2-cancel, .swal2-deny { 
        min-height: 48px !important; 
        font-size: 13px !important; 
    }
    
    /* Labels más grandes */
    label { font-size: 12px !important; }
    
    /* Section titles */
    .section-title { font-size: 11px !important; }
    
    /* Tab buttons */
    .tab-btn { 
        padding: 14px 20px !important; 
        font-size: 12px !important; 
    }
    
    /* Badge de solicitudes en sidebar */
    #solicitudes-badge { 
        font-size: 11px !important; 
        min-width: 22px !important; 
        height: 22px !important; 
    }
    
    /* Notificaciones */
    #notif-badge {
        width: 22px !important;
        height: 22px !important;
        font-size: 11px !important;
    }
    
    /* Kanban cards */
    .kanban-card { 
        padding: 16px !important; 
    }
    .kanban-card h4 { font-size: 13px !important; }
    .kanban-card p { font-size: 11px !important; }
    
    /* User card en settings */
    .user-card { padding: 16px !important; }
    .user-card h3 { font-size: 14px !important; }
    
    /* Formulario campos más grandes */
    .campo-row { padding: 14px !important; }
    .campo-label { font-size: 14px !important; }
    
    /* Dashboard stat cards - iconos más visibles */
    .stat-card .material-symbols-outlined { 
        opacity: 1 !important;
        font-size: 40px !important;
        filter: drop-shadow(0 0 12px currentColor) !important;
    }
    
    /* Toggle switches más grandes */
    input[type="checkbox"].toggle { 
        width: 48px !important; 
        height: 26px !important; 
    }
    input[type="checkbox"].toggle::after { 
        width: 20px !important; 
        height: 20px !important; 
    }
    
    /* Tooltips en SweetAlert */
    .swal2-popup { overflow: visible !important; }
    .swal2-html-container { overflow: visible !important; }
    
    /* Botón INFO del cliente - más tappeable en mobile */
    .work-row button[onclick*="verInfoCliente"] {
        font-size: 10px !important;
        padding: 4px 10px !important;
        min-height: 32px;
    }
    input[type="checkbox"].toggle:checked::after { 
        left: 25px !important; 
    }
}