/* ============================================
   RESPONSIVE FIX - Ajustes globales responsive
   Se carga AL FINAL para sobreescribir sin romper
   ============================================ */

/* === BASE: viewport y box-sizing === */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

img {
    max-width: 100%;
    height: auto;
}

/* === TABLAS: scroll horizontal en móvil === */
.table-responsive-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* === LOGIN: responsive completo === */
@media (max-width: 480px) {
    .login {
        width: 92% !important;
        margin: 10px auto !important;
        font-size: 14px;
    }
    .login .logo {
        width: 100% !important;
        height: auto !important;
    }
    .login .logo img {
        width: 100% !important;
        height: auto !important;
        max-height: 120px;
        object-fit: contain;
    }
    .login-header {
        font-size: 1.1em !important;
        padding: 8px !important;
    }
    .login input {
        font-size: 16px !important; /* evita zoom en iOS */
        padding: 12px !important;
    }
    .boton {
        width: 50% !important;
    }
    .session-message {
        width: 95% !important;
        font-size: 12px !important;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .login {
        width: 70% !important;
    }
    .login .logo {
        width: 100% !important;
    }
    .login .logo img {
        width: 100% !important;
        height: auto !important;
    }
    .boton {
        width: 30% !important;
    }
}

/* === ADMIN PANEL: correcciones responsive === */

/* Fix: media query con coma faltante en css_admin.css */
@media (max-width: 768px) {
    /* Secciones del admin */
    .section {
        width: 100% !important;
        left: 0 !important;
        margin-top: 15% !important;
        padding: 10px !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
    }

    /* Menú lateral ocupa menos */
    .menu {
        width: 65% !important;
    }

    /* Título principal */
    .title-modern {
        font-size: 1.5rem !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        margin: 60px auto 10px !important;
        text-align: center;
    }

    /* Usuario badge */
    .usuario {
        font-size: 11px !important;
        padding: 5px 10px !important;
        max-width: 60% !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Tablas admin */
    table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }

    /* Filtros en columna */
    .contenedorFiltros,
    .contenedorFiltrosinv {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .filtroCategoria select,
    .filtroProducto input,
    .filtroCategoriainv select,
    .filtroProductoinv input {
        width: 100% !important;
    }

    /* Formularios admin */
    .estado-select-container {
        flex-direction: column !important;
        align-items: stretch !important;
    }
}

@media (max-width: 400px) {
    .section {
        margin-top: 20% !important;
        font-size: 14px !important;
    }

    .title-modern {
        font-size: 1.2rem !important;
    }

    .navigation a {
        font-size: 1rem !important;
        padding: 10px 15px !important;
    }

    .btn-nav {
        font-size: 1.5rem !important;
    }
}

/* Monitores grandes */
@media (min-width: 1400px) {
    .section {
        max-width: 85% !important;
        left: 10% !important;
    }

    .title-modern {
        font-size: 3.5rem !important;
    }
}

@media (min-width: 1920px) {
    .section {
        max-width: 80% !important;
        left: 12% !important;
    }
}

/* === PANEL MESERO: correcciones responsive === */

/* Fix: modal-content en 768px tenía width:10% y max-height:0vh */
@media (max-width: 768px) {
    .modal-content {
        width: 95% !important;
        max-height: 95vh !important;
        padding: 15px !important;
        margin: 2vh auto !important;
    }

    .modal-contentdet {
        width: 95% !important;
        max-height: 85vh !important;
        padding: 15px !important;
    }

    .modal-contentinv {
        width: 95% !important;
        height: 95% !important;
        margin-top: 10px;
     
    }

    .modal-contentdomi {
        width: 95% !important;
        height: auto !important;
        max-height: 96vh !important;
        margin: 2% auto !important;
    }

    .modal-aviso-content {
        width: 90% !important;
        height: auto !important;
        min-height: 150px;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) !important;
    }

    
    /* Mesa cards */
    .mesa-card {
        width: calc(45% - 10px) !important;
        height: auto !important;
        min-height: 280px;
        padding: 15px !important;
        margin: 5px !important;
    }

    .mesas-container {
        justify-content: center !important;
        gap: 8px !important;
    }

    .card-title {
        font-size: 2rem !important;
        margin-top: 15px;
    }

    .card-text {
        font-size: 1.2em !important;
    }

    /* Botones de acción en mesas */
    .btn_pedido,
    .btn-detalle,
    .btn-factura,
    .btn-cancelarped,
    .btn-editarp {
        font-size: 0.85rem !important;
        padding: 8px 6px !important;
        margin: 2px !important;
    }

    /* Botones domicilio e inventario */
   

    /* Título elegante */
    .titulo-elegante {
        margin-left: 0 !important;
        font-size: 1.8rem !important;
        height: auto !important;
        padding: 10px !important;
    }

    .titulo-elegante span {
        font-size: 2.5rem !important;
    }

    /* Botones imprimir y editar */
    .btnImprimirOrden,
    .btn-editar {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        margin: 10px 0 !important;
    }
}

@media (max-width: 400px) {
    .mesa-card {
        width: calc(48% - 6px) !important;
        min-height: 250px;
        padding: 10px !important;
    }

    .card-title {
        font-size: 1.6rem !important;
    }

    .card-text {
        font-size: 1em !important;
    }

    .badge {
        font-size: 12px !important;
        width: 80px !important;
        padding: 3px 6px !important;
    }

    .btn_pedido,
    .btn-detalle,
    .btn-factura,
    .btn-cancelarped,
    .btn-editarp {
        font-size: 0.75rem !important;
        padding: 6px 4px !important;
    }

    .titulo-elegante {
        font-size: 1.4rem !important;
    }

    .titulo-elegante span {
        font-size: 2rem !important;
    }

    .modal-header h5,
    .modal-headerfac h5,
    .modal-headerdet h5,
    .modal-headerinv h5 {
        font-size: 1.2rem !important;
        white-space: normal;
        word-wrap: break-word;
        max-width: 200px; 
    }
}

/* Pantallas muy pequeñas (320px) */
@media (max-width: 320px) {
    .mesa-card {
        width: 100% !important;
        min-height: 220px;
    }

    .modal-content,
    .modal-contentdet,
    .modal-contentinv,
    .modal-contentdomi {
        width: 100% !important;
        border-radius: 0 !important;
        margin: 0 !important;
        max-height: 100vh !important;
    }
}

/* Monitores grandes */
@media (min-width: 1400px) {
    .mesa-card {
        width: 200px !important;
        height: 480px !important;
    }

    .modal-content {
        max-width: 95% !important;
    }
}

/* === PRODUCTOS / PEDIDOS: responsive cards === */

@media (max-width: 1200px) {
    .product-card {
        width: calc(25% - 8px) !important; /* 4 por fila */
    }
}

@media (max-width: 992px) {
    .product-card {
        width: calc(33.33% - 8px) !important; /* 3 por fila */
    }

    .pedido-container {
        flex-direction: column !important;
    }

    .pedido-info {
        width: 100% !important;
        order: 2 !important;
    }

    .scroll-container {
        order: 1 !important;
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    .product-card {
        width: calc(41% - 6px) !important; /* 3 por fila */
    }

    .product-card img {
        height: 100px !important;
    }

    .product-info h3 {
        font-size: 13px !important;
    }

    .product-price,
    .total-value {
        font-size: 12px !important;
    }

    .quantity-input {
        width: 35px !important;
        font-size: 14px !important;
    }

    .btn-decrease,
    .btn-increase {
        width: 26px !important;
        height: 26px !important;
        font-size: 14px !important;
    }

    /* Categorías: scroll horizontal */
    .botones-categoria,
    .botones-catepediedi,
    .category-buttons {
        flex-wrap: wrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px !important;
        justify-content: flex-start !important;
        width: auto;
        align-items: center;
        margin-top: -1px;
    }

    .botones-categoria button,
    .botones-catepediedi button,
    .category-buttons button {
        flex: 4 0 auto !important;
        width: 80px !important;
        height: 80px !important;
        align-items: center;
    }

    .botones-categoria button img,
    .botones-catepediedi button img,
    .category-buttons button img {
        height: 60px !important;
    }

    .botones-categoria button span,
    .botones-catepediedi button span,
    .category-buttons button span {
        font-size: 11px !important;
    }

    /* Formulario pedido */
    .order-form {
        width: 100% !important;
    }

    /* Domicilio form section */
    .form-section {
        width: 100% !important;
        position: static !important;
    }

    .desktop-container {
        flex-direction: column !important;
    }

    /* Fixed totals */
    .fixed-total,
    .fixed-totale,
    .fixed-totales {
        width: 100% !important;
    }

    .btn-confpedido,
    .btn-continuar,
    .btn-primary {
        width: 100% !important;
    }

    /* Selected products */
    .selected-products-container {
        width: 100% !important;
    }

    .selected-products-list {
        max-height: 150px !important;
    }
}

@media (max-width: 480px) {
    .product-card {
        width: calc(50% - 6px) !important; /* 2 por fila */
    }

    .product-card img {
        height: 80px !important;
    }

    .product-info h3 {
        font-size: 12px !important;
    }

    .scroll-container {
        max-height: 50vh !important;
    }

    .extra-option {
        font-size: 10px !important;
    }

    .extra-option label {
        font-size: 10px !important;
    }
}

@media (max-width: 320px) {
    .product-card {
        width: 100% !important; /* 1 por fila */
    }

    .botones-categoria button,
    .botones-catepediedi button,
    .category-buttons button {
        width: 65px !important;
        height: 85px !important;
    }
}

/* Monitores grandes: más cards por fila */
@media (min-width: 1400px) {
    .product-card {
        width: calc(16.66% - 8px) !important; /* 6 por fila */
    }
}

@media (min-width: 1920px) {
    .product-card {
        width: calc(18.28% - 10px) !important; /* 7 por fila */
    }

    .scroll-container {
        max-height: 90vh !important;
    }
}

/* === FACTURACIÓN: responsive === */

@media (max-width: 576px) {
    .modal-contentfac {
        width: 95% !important;
        height: auto !important;
        max-height: 90vh !important;
        padding: 15px !important;
        margin: 10px auto !important;
    }

    #ConfirmarForm,
    #ConfirmarFormdomi {
        width: auto !important;
        padding: 10px !important;
        margin-left: -3%;
    }

    .form-control,
    .form-select {
        font-size: 16px !important; /* evita zoom iOS */
        padding: 10px !important;
    }

    .button-container {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .btn-confirmar,
    .btn-confirmardomi {
        width: 100% !important;
        padding: 12px !important;
    }

    .btn-secondary {
       
        align-self: center;
    }
}

/* === TICKETS DE IMPRESIÓN: responsive === */
@media print {
    body {
        width: 80mm;
        margin: 0;
        padding: 0;
    }
}

/* === PÁGINA PRINCIPAL (index.html): responsive === */

@media (max-width: 768px) {
    /* Header fijo */
    .header {
        padding: 5px 10px !important;
    }

   
    /* Carrusel */
    .carousel-track-container {
        height: 250px !important;
    }

    .carousel-item img {
        height: 250px !important;
    }

    /* Cards nosotros */
    .cards_item {
        width: 100% !important;
        padding: 0.5rem !important;
    }

    /* Cards servicios */
    .card-containerser {
        flex-direction: column !important;
        align-items: center !important;
        margin-left: 0 !important;
    }

    .cardser {
        width: 90% !important;
        margin: 10px auto !important;
    }

    /* Contacto */
    .container_contact {
        flex-direction: column !important;
    }

    .columncont {
        height: auto !important;
        min-height: auto !important;
    }

    .form-container,
    .contact-container {
        max-width: 100% !important;
        padding: 15px !important;
    }

    /* Redes sociales */
    .wrapper .icon {
        width: 40px !important;
        height: 40px !important;
        line-height: 40px !important;
        font-size: 18px !important;
        margin: 5px !important;
    }
}

@media (max-width: 480px) {
    .carousel-track-container {
        height: 180px !important;
    }

    .carousel-item img {
        height: 180px !important;
    }

    

    .cardser {
        width: 95% !important;
    }

    
}

/* === INVENTARIO: responsive === */
@media (max-width: 768px) {
    .verde td,
    .amarillo td,
    .rojo td {
        font-size: 0.9rem !important;
        padding: 6px !important;
    }
}

/* === UTILIDADES RESPONSIVE GENERALES === */

/* Evitar overflow horizontal en todo el sitio */
body {
    overflow-x: hidden;
}

/* Inputs no deben causar zoom en iOS */
@media (max-width: 768px) {
    input[type="text"],
    input[type="password"],
    input[type="number"],
    input[type="email"],
    input[type="tel"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Scroll suave en contenedores con overflow */
.scroll-container,
.table-container,
.table-containeredi,
.table-containerdomi,
.table-containerdet,
.table-containerinv,
.modal-content,
.modal-contentdet,
.modal-contentinv {
    -webkit-overflow-scrolling: touch;
  width: 100%;
  height: 100%;
 
  align-items: center;
}


.error-message {
    color: white;              /* ← CAMBIA ESTO */
    font-size: 14px;
    margin-top: 10px;
    text-align: center;
}