/* Estilos base para móviles (celulares) - Mobile First */
@media (max-width: 575px) {
    /* Texto más grande para celulares */
    body {
        font-size: 18px !important;
    }
    
    h1 { font-size: 2rem !important; }
    h2 { font-size: 1.8rem !important; }
    h3 { font-size: 1.6rem !important; }
    h4 { font-size: 1.4rem !important; }
    h5 { font-size: 1.3rem !important; }
    h6 { font-size: 1.2rem !important; }
    
    .btn {
        font-size: 1.1rem !important;
        padding: 0.6rem 1.2rem !important;
    }
    
    .form-control, .form-select {
        font-size: 18px !important;
        padding: 0.6rem !important;
    }
    
    .badge {
        font-size: 0.95rem !important;
    }
    
    .card-title {
        font-size: 1.4rem !important;
    }
    
    .card-body {
        font-size: 1.1rem !important;
    }
    
    /* Tablas más legibles */
    table {
        font-size: 1rem !important;
    }
    
    /* Modales */
    .modal-title {
        font-size: 1.5rem !important;
    }
    
    .modal-body {
        font-size: 1.1rem !important;
    }
}

/* Tablets y dispositivos medianos */
@media (min-width: 576px) and (max-width: 991px) {
    body {
        font-size: 16px !important;
    }
    
    h1 { font-size: 1.8rem !important; }
    h2 { font-size: 1.6rem !important; }
    h3 { font-size: 1.4rem !important; }
    h4 { font-size: 1.3rem !important; }
    h5 { font-size: 1.2rem !important; }
    h6 { font-size: 1.1rem !important; }
    
    .btn {
        font-size: 1rem !important;
    }
    
    .form-control, .form-select {
        font-size: 16px !important;
    }
}

/* Desktop - Tamaño mediano/normal */
@media (min-width: 992px) {
    body {
        font-size: 14px !important;
    }
    
    /* Mantener tamaños por defecto de Bootstrap */
    h1 { font-size: 1.75rem !important; }
    h2 { font-size: 1.5rem !important; }
    h3 { font-size: 1.3rem !important; }
    h4 { font-size: 1.2rem !important; }
    h5 { font-size: 1.1rem !important; }
    h6 { font-size: 1rem !important; }
    
    .btn {
        font-size: 0.95rem !important;
    }
    
    .form-control, .form-select {
        font-size: 14px !important;
    }
}

/* Ajustes específicos para pantallas de cocina/bar */
@media (max-width: 575px) {
    /* Tarjetas de órdenes más grandes en móvil */
    .order-card .card-title {
        font-size: 1.5rem !important;
    }
    
    .quantity-badge {
        font-size: 1.3rem !important;
        padding: 0.5rem 0.8rem !important;
    }
    
    .product-name {
        font-size: 1.2rem !important;
    }
    
    .item-notes {
        font-size: 1rem !important;
    }
}