/* ========================================
   OPTIMIZACIONES MÓVILES PARA PROCESO DE COMPRA
   ======================================== */

/* ========================================
   PANTALLA: SELECCIÓN DE TICKETS (NoNumerada) - DISEÑO MEJORADO
   ======================================== */
@media (max-width: 48rem) {
    /* Contenedor principal de selección de tickets */
    .ticket-selection-container {
        padding: 0 0.75rem !important;
        margin-bottom: 2rem !important;
    }
    
    /* Título principal */
    .ticket-selection-title {
        font-size: 1.25rem !important;
        font-weight: 700 !important;
        color: #2c3e50 !important;
        margin: 1.5rem 0 1rem 0 !important;
        text-align: center !important;
        line-height: 1.3 !important;
    }
    
    /* Contenedor de tarjetas de tickets */
    .ticket-cards-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        margin-top: 1rem !important;
    }
    
    /* Tarjeta individual de ticket */
    .ticket-card {
        background: #ffffff !important;
        border: 1px solid #e1e8ed !important;
        border-radius: 12px !important;
        padding: 1.25rem !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
        transition: all 0.3s ease !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    .ticket-card:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
        transform: translateY(-2px) !important;
    }
    
    .ticket-card.has-selection {
        border-color: #ffcc03 !important;
        box-shadow: 0 4px 12px rgba(255, 204, 3, 0.15) !important;
    }
    
    /* Header de la tarjeta */
    .ticket-card-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        margin-bottom: 1rem !important;
        gap: 0.75rem !important;
    }
    
    /* Nombre del ticket */
    .ticket-name {
        font-size: 1.125rem !important;
        font-weight: 700 !important;
        color: #2c3e50 !important;
        line-height: 1.3 !important;
        flex: 1 !important;
        margin: 0 !important;
    }
    
    /* Precio del ticket */
    .ticket-price {
        font-size: 1.25rem !important;
        font-weight: 800 !important;
        color: #27ae60 !important;
        text-align: right !important;
        white-space: nowrap !important;
        margin: 0 !important;
    }
    
    /* Información de disponibilidad */
    .ticket-availability {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 1.25rem !important;
        padding: 0.75rem !important;
        background: #f8f9fa !important;
        border-radius: 8px !important;
        border: 1px solid #e9ecef !important;
    }
    
    .availability-label {
        font-size: 0.875rem !important;
        color: #6c757d !important;
        font-weight: 500 !important;
        margin: 0 !important;
    }
    
    .availability-count {
        font-size: 1rem !important;
        font-weight: 700 !important;
        color: #495057 !important;
        margin: 0 !important;
    }
    
    /* Contenedor del selector de cantidad */
    .quantity-selector-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    
    .quantity-selector-label {
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        color: #495057 !important;
        margin: 0 !important;
        text-align: center !important;
    }
    
    /* Selector de cantidad mejorado */
    .quantity-selector {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.75rem !important;
        background: #f8f9fa !important;
        border: 2px solid #e9ecef !important;
        border-radius: 12px !important;
        padding: 0.75rem !important;
        transition: all 0.3s ease !important;
    }
    
    .quantity-selector:focus-within {
        border-color: #007bff !important;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1) !important;
    }
    
    /* Botones de cantidad */
    .quantity-btn {
        width: 2.5rem !important;
        height: 2.5rem !important;
        border-radius: 8px !important;
        border: none !important;
        font-size: 1.25rem !important;
        font-weight: 700 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        flex-shrink: 0 !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    .quantity-btn-minus {
        background: #dc3545 !important;
        color: white !important;
    }
    
    .quantity-btn-minus:hover:not(:disabled) {
        background: #c82333 !important;
        transform: scale(1.05) !important;
    }
    
    .quantity-btn-minus:disabled {
        background: #6c757d !important;
        cursor: not-allowed !important;
        opacity: 0.6 !important;
    }
    
    .quantity-btn-plus {
        background: #28a745 !important;
        color: white !important;
    }
    
    .quantity-btn-plus:hover:not(:disabled) {
        background: #218838 !important;
        transform: scale(1.05) !important;
    }
    
    .quantity-btn-plus:disabled {
        background: #6c757d !important;
        cursor: not-allowed !important;
        opacity: 0.6 !important;
    }
    
    /* Display de cantidad */
    .quantity-display {
        width: 3.5rem !important;
        height: 2.5rem !important;
        background: white !important;
        border: 2px solid #dee2e6 !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.125rem !important;
        font-weight: 700 !important;
        color: #495057 !important;
        font-family: 'Courier New', monospace !important;
    }
    
    /* Mensajes de error */
    .ticket-error-message {
        font-size: 0.75rem !important;
        color: #dc3545 !important;
        text-align: center !important;
        margin-top: 0.5rem !important;
        padding: 0.5rem !important;
        background: #f8d7da !important;
        border: 1px solid #f5c6cb !important;
        border-radius: 6px !important;
        font-weight: 500 !important;
        animation: shake 0.5s ease-in-out !important;
    }
    
    @keyframes shake {
        0%, 100% { transform: translateX(0); }
        25% { transform: translateX(-5px); }
        75% { transform: translateX(5px); }
    }
    
    /* Indicador de selección */
    .ticket-selected-indicator {
        position: absolute !important;
        top: 0.75rem !important;
        right: 0.75rem !important;
        width: 1.5rem !important;
        height: 1.5rem !important;
        background: #ffcc03 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #000 !important;
        font-size: 0.75rem !important;
        font-weight: 700 !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease !important;
        animation: pulse 2s infinite !important;
    }
    
    @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.1); }
        100% { transform: scale(1); }
    }
    
    .ticket-card.has-selection .ticket-selected-indicator {
        opacity: 1 !important;
    }
    
    /* Estilos para estacionamiento */
    .parking-section {
        margin-top: 2rem !important;
        padding-top: 1.5rem !important;
        border-top: 2px solid #e9ecef !important;
    }
    
    .parking-checkbox-container {
        background: #f8f9fa !important;
        border: 1px solid #e9ecef !important;
        border-radius: 12px !important;
        padding: 1rem !important;
        margin-bottom: 1rem !important;
        transition: all 0.3s ease !important;
    }
    
    .parking-checkbox-container:hover {
        background: #e9ecef !important;
        border-color: #007bff !important;
    }
    
    .parking-checkbox-label {
        font-size: 1rem !important;
        font-weight: 600 !important;
        color: #495057 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        cursor: pointer !important;
    }
    
    .parking-title {
        font-size: 1.125rem !important;
        font-weight: 700 !important;
        color: #2c3e50 !important;
        margin: 1rem 0 !important;
        text-align: center !important;
    }
    
    /* Ocultar tabla original en móvil */
    .table-responsive {
        display: none !important;
    }
    
    /* Mostrar diseño de tarjetas en móvil */
    .mobile-ticket-cards {
        display: block !important;
    }
    
    /* Mejoras de accesibilidad */
    .quantity-btn:focus {
        outline: 2px solid #007bff !important;
        outline-offset: 2px !important;
    }
    
    /* Efectos de toque para móvil */
    .quantity-btn:active {
        transform: scale(0.95) !important;
    }
    
    /* Mejorar legibilidad en pantallas pequeñas */
    @media (max-width: 20rem) {
        .ticket-card {
            padding: 1rem !important;
        }
        
        .ticket-name {
            font-size: 1rem !important;
        }
        
        .ticket-price {
            font-size: 1.125rem !important;
        }
        
        .quantity-btn {
            width: 2.25rem !important;
            height: 2.25rem !important;
            font-size: 1.125rem !important;
        }
        
        .quantity-display {
            width: 3rem !important;
            height: 2.25rem !important;
            font-size: 1rem !important;
        }
    }
    
    /* Orientación landscape */
    @media (max-width: 48rem) and (orientation: landscape) {
        .ticket-cards-container {
            gap: 0.75rem !important;
        }
        
        .ticket-card {
            padding: 1rem !important;
        }
        
        .ticket-selection-title {
            margin: 1rem 0 0.75rem 0 !important;
        }
    }
}

/* ========================================
   PANTALLA: REGISTRO DE DATOS (DatosCompra)
   ======================================== */
@media (max-width: 48rem) {
    /* Contenedor principal */
    .container {
        padding: 0 0.75rem !important;
        margin-bottom: 2rem !important;
    }
    
    /* Contenedor de datos */
    .row[style*="background-color: #fff"] {
        margin-top: 0.75rem !important;
        padding: 1.5rem 1rem !important;
        border-radius: 0.5rem;
    }
    
    /* Título principal */
    h2 {
        font-size: 1.5rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* Descripción */
    p[style*="font-size: 15px"] {
        font-size: 0.875rem !important;
        padding-bottom: 0.5rem !important;
    }
    
    /* Sección importante */
    p[style*="font-weight: 800"] {
        font-size: 0.875rem !important;
        padding: 1rem 0 !important;
    }
    
    /* Alertas */
    .alert {
        padding: 0.75rem !important;
        font-size: 0.875rem !important;
        border-radius: 0.375rem !important;
    }
    
    /* Texto pequeño */
    p[style*="font-size: 12px"] {
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
    }
}

/* ========================================
   PANTALLA: CONFIRMACIÓN (Confirmacion)
   ======================================== */
@media (max-width: 48rem) {
    /* Contenedor principal optimizado para móvil */
    .container {
        padding: 0 0.5rem !important;
        margin-bottom: 1rem !important;
        max-width: 100% !important;
    }
    
    /* Contenedor de confirmación - aprovecha todo el ancho */
    .row[style*="padding-top: 60px"] {
        padding: 1rem 0.75rem !important;
        margin-top: 0.5rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
    
    /* Título optimizado */
    h3 {
        font-size: 1.125rem !important;
        margin-bottom: 0.75rem !important;
        padding: 0 0.5rem !important;
    }
    
    /* Tarjeta de ticket - aprovecha todo el espacio */
    .card {
        margin-bottom: 1rem !important;
        border-radius: 0.5rem !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .card-header {
        padding: 0.75rem !important;
    }
    
    .card-title {
        font-size: 0.875rem !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.25rem !important;
        line-height: 1.3 !important;
    }
    
    .card-title .float-end {
        float: none !important;
        font-size: 0.75rem !important;
        color: #6c757d !important;
        margin-top: 0.25rem !important;
    }
    
    .card-body {
        padding: 0.75rem !important;
    }
    
    /* Tabla responsive optimizada */
    .table-responsive {
        font-size: 0.8rem !important;
        margin: 0 -0.5rem !important;
    }
    
    .table {
        width: 100% !important;
        margin: 0 !important;
    }
    
    .table th {
        font-size: 0.7rem !important;
        padding: 0.375rem 0.25rem !important;
        min-width: 5rem !important;
        font-weight: 600 !important;
    }
    
    .table td {
        padding: 0.375rem 0.25rem !important;
        word-break: break-word !important;
        font-size: 0.75rem !important;
    }
    
    /* Botones de navegación optimizados */
    .card-footer {
        padding: 0.75rem !important;
    }
    
    .card-footer .btn {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.8rem !important;
        min-width: 4rem !important;
    }
    
    /* Indicadores de ticket eliminados */
    
    /* Tabla de resumen optimizada */
    .table {
        font-size: 0.7rem !important;
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important;
    }
    
    .table th,
    .table td {
        padding: 0.375rem 0.25rem !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 0 !important;
    }
    
    /* Control específico de columnas para móvil */
    .table .col-1 {
        width: 8.33% !important;
        max-width: 8.33% !important;
    }
    
    .table .col-2 {
        width: 16.66% !important;
        max-width: 16.66% !important;
    }
    
    .table .col-3 {
        width: 25% !important;
        max-width: 25% !important;
    }
    
    .table .col-4 {
        width: 33.33% !important;
        max-width: 33.33% !important;
    }
    
    /* Contenedor de tabla con scroll horizontal si es necesario */
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Forzar que las tablas no se pasen del ancho */
    div > .table {
        min-width: auto !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Sección RESUMEN optimizada */
    p[style*="font-size: 15px"] {
        font-size: 0.875rem !important;
        padding: 0.75rem 0.5rem !important;
        margin: 0 !important;
    }
    
    /* Mejorar legibilidad del total a pagar */
    .table tbody tr:last-child {
        background-color: #f8f9fa !important;
        font-weight: 600 !important;
        border-top: 2px solid #dee2e6 !important;
    }
    
    .table tbody tr:last-child td {
        font-size: 0.8rem !important;
        font-weight: 700 !important;
        color: #212529 !important;
        padding: 0.75rem 0.25rem !important;
    }
    
    /* Asegurar que el total se vea completo */
    .table tbody tr:last-child td:last-child {
        text-align: right !important;
        padding-right: 0.75rem !important;
        font-size: 0.85rem !important;
        font-weight: 800 !important;
        color: #000 !important;
    }
    
    /* Eliminar márgenes innecesarios */
    .mb-4 {
        margin-bottom: 1rem !important;
    }
    
    /* Optimizar espaciado general */
    .d-flex.justify-content-between {
        gap: 0.5rem !important;
    }
    
    /* Contenedor de tabla principal */
    div > div > .table {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
    }
    
    /* Forzar que todas las tablas respeten el ancho */
    table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: auto !important;
    }
    
    /* Mejorar legibilidad de tablas en móvil */
    th, td {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        max-width: none !important;
        word-break: break-word !important;
        line-height: 1.2 !important;
    }
    
    /* Hacer la tabla más legible en móvil */
    .table {
        font-size: 0.75rem !important;
        border-collapse: collapse !important;
    }
    
    .table th {
        font-size: 0.7rem !important;
        font-weight: 600 !important;
        background-color: #f8f9fa !important;
        padding: 0.5rem 0.25rem !important;
        text-align: center !important;
    }
    
    .table td {
        font-size: 0.7rem !important;
        padding: 0.5rem 0.25rem !important;
        text-align: center !important;
        vertical-align: middle !important;
    }
    
    /* Simplificar columnas para mejor legibilidad */
    .table .col-1 {
        width: 15% !important;
        min-width: 2.5rem !important;
    }
    
    .table .col-2 {
        width: 35% !important;
        min-width: 5rem !important;
    }
    
    .table .col-3 {
        width: 25% !important;
        min-width: 4rem !important;
    }
    
    .table .col-4 {
        width: 25% !important;
        min-width: 4rem !important;
    }
    
    /* Permitir que los números se vean completos */
    .table td:last-child,
    .table th:last-child {
        text-align: right !important;
        padding-right: 0.5rem !important;
        min-width: 6rem !important;
        white-space: nowrap !important;
        overflow: visible !important;
    }
    
    /* Asegurar que los números de precio se vean completos */
    .table td:nth-child(3),
    .table td:nth-child(4),
    .table td:nth-child(5) {
        text-align: right !important;
        padding-right: 0.25rem !important;
        min-width: 4.5rem !important;
        white-space: nowrap !important;
        overflow: visible !important;
        font-family: 'Courier New', monospace !important;
        font-weight: 600 !important;
    }
    
    /* Mejorar descripción de productos */
    .table td:nth-child(1) {
        text-align: left !important;
        padding-left: 0.5rem !important;
        word-break: break-word !important;
        line-height: 1.3 !important;
    }
    
    /* Centrar cantidad */
    .table td:nth-child(2) {
        text-align: center !important;
        font-weight: 600 !important;
    }
    
    /* Mejorar el contenedor de tabla */
    .table-responsive {
        border: 1px solid #dee2e6 !important;
        border-radius: 0.375rem !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ========================================
   PANTALLA: SELECCIÓN DE UBICACIONES (NoNumerada)
   ======================================== */
@media (max-width: 48rem) {
    /* Contenedor de ubicaciones */
    .col-12.col-lg-10 {
        padding: 0 !important;
    }
    
    /* Título */
    h3[style*="font-weight: 800"] {
        font-size: 1.25rem !important;
        margin: 1rem 0 !important;
        padding: 0 0.75rem !important;
    }
    
    /* Layout de columnas */
    .col-md-6 {
        padding: 0.5rem !important;
    }
    
    .col-lg-5 {
        padding: 0.75rem !important;
    }
    
    /* Lista de sectores */
    .lista-sector {
        padding-left: 0.75rem !important;
    }
    
    .lista-sector li {
        font-size: 0.875rem !important;
        padding: 0.5rem 0 !important;
        padding-left: 1.75rem !important;
    }
    
    .lista-sector li::before {
        width: 1rem !important;
        height: 1rem !important;
    }
    
    /* Items de precio */
    .lista-sector .row {
        margin: 0.25rem 0 !important;
        padding: 0.5rem 0 !important;
    }
    
    .lista-sector .col-8 {
        font-size: 0.875rem !important;
        padding: 0 0.25rem !important;
    }
    
    .lista-sector .col-4 {
        font-size: 0.875rem !important;
        padding: 0 0.25rem !important;
    }
    
    /* Contador */
    .counter-group {
        gap: 0.25rem !important;
    }
    
    .counter-group .btn {
        min-width: 2rem !important;
        height: 2rem !important;
        font-size: 0.875rem !important;
    }
    
    .counter-group .form-control {
        width: 3rem !important;
        min-width: 2.5rem !important;
        font-size: 0.875rem !important;
    }
    
    /* Estilos para pantallas muy pequeñas */
    @media (max-width: 20rem) {
        .lista-sector li {
            padding-left: 1.5rem !important;
            font-size: 0.8rem !important;
        }
        
        .lista-sector li::before {
            width: 0.875rem !important;
            height: 0.875rem !important;
        }
    }
}

/* ========================================
   PANTALLA: ASIENTOS SELECCIONADOS
   ======================================== */
@media (max-width: 48rem) {
    .asientos-seleccionados-container {
        padding: 1rem !important;
        margin: 1rem 0 !important;
        border-radius: 0.5rem !important;
    }
    
    .asientos-seleccionados-title {
        font-size: 1rem !important;
        margin-bottom: 1rem !important;
        padding-bottom: 0.5rem !important;
    }
    
    .asiento-item {
        padding: 0.75rem !important;
        margin-bottom: 0.5rem !important;
        border-radius: 0.375rem !important;
    }
    
    .asiento-nombre {
        font-size: 0.875rem !important;
    }
    
    .asiento-sector {
        font-size: 0.75rem !important;
    }
    
    .asiento-precio {
        font-size: 0.875rem !important;
    }
    
    .btn-eliminar-asiento {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem !important;
    }
    
    .resumen-card {
        padding: 1rem !important;
        border-radius: 0.5rem !important;
    }
    
    .resumen-title {
        font-size: 0.875rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .resumen-item {
        font-size: 0.75rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    .resumen-total {
        font-size: 1rem !important;
        margin-top: 0.75rem !important;
    }
    
    .alert-info {
        padding: 0.75rem !important;
        font-size: 0.875rem !important;
        border-radius: 0.375rem !important;
    }
}

/* ========================================
   PANTALLA: WIZARD (Navegación)
   ======================================== */
@media (max-width: 48rem) {
    /* Contenedor de botones */
    .justify-content-center {
        padding: 0 0.75rem 3rem !important;
        gap: 0.75rem !important;
    }
    
    /* Botones */
    .d-grid.gap-2 {
        min-width: auto !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
    }
    
    .d-grid.gap-2 .btn {
        width: 100% !important;
        min-width: auto !important;
        height: 3rem !important;
        font-size: 1rem !important;
        border-radius: 0.5rem !important;
    }
    
    /* Layout vertical en móvil */
    .justify-content-center {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    /* Spinner */
    .spinner-border-sm {
        width: 1rem !important;
        height: 1rem !important;
    }
}

/* ========================================
   PANTALLA: TEMPORIZADOR
   ======================================== */
@media (max-width: 48rem) {
    .temporizador-container {
        padding: 1rem !important;
        margin: 1rem 0 !important;
        border-radius: 0.5rem !important;
    }
    
    .temporizador-titulo {
        font-size: 1rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .temporizador-tiempo {
        font-size: 1.5rem !important;
        font-weight: 700 !important;
    }
    
    .temporizador-mensaje {
        font-size: 0.875rem !important;
        margin-top: 0.5rem !important;
    }
}

/* ========================================
   PANTALLA: ERROR DE COMPRA
   ======================================== */
@media (max-width: 48rem) {
    .error-compra-container {
        padding: 1.5rem 1rem !important;
        margin: 1rem 0 !important;
        border-radius: 0.5rem !important;
    }
    
    .error-compra-titulo {
        font-size: 1.25rem !important;
        margin-bottom: 1rem !important;
    }
    
    .error-compra-mensaje {
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
        margin-bottom: 1rem !important;
    }
    
    .error-compra-boton {
        width: 100% !important;
        padding: 0.75rem 1rem !important;
        font-size: 1rem !important;
        border-radius: 0.5rem !important;
    }
}

/* ========================================
   MEJORAS GENERALES PARA MÓVIL
   ======================================== */
@media (max-width: 48rem) {
    /* Mejorar legibilidad */
    body {
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
    }
    
    /* Espaciado consistente */
    .mb-4 {
        margin-bottom: 1.5rem !important;
    }
    
    .mb-3 {
        margin-bottom: 1rem !important;
    }
    
    .mb-2 {
        margin-bottom: 0.75rem !important;
    }
    
    /* Padding consistente */
    .p-3 {
        padding: 1rem !important;
    }
    
    .p-2 {
        padding: 0.75rem !important;
    }
    
    /* Botones más grandes para toque */
    .btn {
        min-height: 2.75rem !important;
        font-size: 0.875rem !important;
        border-radius: 0.5rem !important;
    }
    
    /* Inputs más grandes */
    .form-control {
        min-height: 2.75rem !important;
        font-size: 1rem !important;
        border-radius: 0.5rem !important;
    }
    
    /* Tablas más legibles */
    .table {
        font-size: 0.875rem !important;
    }
    
    .table th,
    .table td {
        padding: 0.75rem 0.5rem !important;
    }
    
    /* Cards más compactas */
    .card {
        border-radius: 0.5rem !important;
        box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.1) !important;
    }
    
    .card-header {
        padding: 1rem !important;
        border-radius: 0.5rem 0.5rem 0 0 !important;
    }
    
    .card-body {
        padding: 1rem !important;
    }
    
    .card-footer {
        padding: 1rem !important;
        border-radius: 0 0 0.5rem 0.5rem !important;
    }
    
    /* Alertas más legibles */
    .alert {
        padding: 0.75rem 1rem !important;
        border-radius: 0.5rem !important;
        font-size: 0.875rem !important;
    }
    
    /* Eliminar márgenes innecesarios */
    .container {
        max-width: 100% !important;
    }
    
    /* Mejorar scroll */
    .table-responsive {
        border-radius: 0.5rem !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Mejoras específicas para el proceso de compra */
    .form-check-input {
        width: 1.25rem !important;
        height: 1.25rem !important;
        margin-top: 0.125rem !important;
    }
    
    .form-check-label {
        font-size: 0.875rem !important;
        line-height: 1.4 !important;
        padding-left: 0.5rem !important;
    }
    
    /* Mejorar contraste y legibilidad */
    .text-muted {
        color: #6c757d !important;
    }
    
    .text-success {
        color: #28a745 !important;
    }
    
    .text-danger {
        color: #dc3545 !important;
    }
    
    /* Mejorar espaciado de elementos */
    .row {
        margin-left: -0.5rem !important;
        margin-right: -0.5rem !important;
    }
    
    .col, .col-md-6, .col-lg-5 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    /* Mejorar navegación */
    .nav-link {
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
        border-radius: 0.5rem !important;
    }
    
    /* Mejorar modales en móvil */
    .modal-content {
        border-radius: 0.75rem !important;
        margin: 1rem !important;
    }
    
    .modal-header {
        padding: 1rem 1.25rem !important;
        border-radius: 0.75rem 0.75rem 0 0 !important;
    }
    
    .modal-body {
        padding: 1.25rem !important;
    }
    
    .modal-footer {
        padding: 1rem 1.25rem !important;
        border-radius: 0 0 0.75rem 0.75rem !important;
    }
    
    /* Mejorar tooltips y popovers */
    .tooltip {
        font-size: 0.75rem !important;
    }
    
    .popover {
        border-radius: 0.5rem !important;
        box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15) !important;
    }
    
    /* Mejorar badges y etiquetas */
    .badge {
        font-size: 0.75rem !important;
        padding: 0.375rem 0.5rem !important;
        border-radius: 0.375rem !important;
    }
    
    /* Mejorar listas */
    .list-group-item {
        padding: 0.75rem 1rem !important;
        border-radius: 0.375rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    /* Mejorar breadcrumbs */
    .breadcrumb {
        padding: 0.75rem 1rem !important;
        border-radius: 0.5rem !important;
        background-color: #f8f9fa !important;
    }
    
    .breadcrumb-item {
        font-size: 0.875rem !important;
    }
    
    /* Mejorar paginación */
    .pagination {
        gap: 0.25rem !important;
    }
    
    .page-link {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.875rem !important;
        border-radius: 0.375rem !important;
    }
    
    /* Mejorar dropdowns */
    .dropdown-menu {
        border-radius: 0.5rem !important;
        box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15) !important;
        border: 1px solid #e9ecef !important;
    }
    
    .dropdown-item {
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
    }
    
    /* Mejorar progress bars */
    .progress {
        height: 0.75rem !important;
        border-radius: 0.375rem !important;
    }
    
    /* Mejorar spinners */
    .spinner-border {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }
    
    .spinner-border-sm {
        width: 1rem !important;
        height: 1rem !important;
    }
    
    /* Mejorar imágenes responsivas */
    .img-fluid {
        border-radius: 0.5rem !important;
    }
    
    /* Mejorar figuras */
    .figure {
        border-radius: 0.5rem !important;
        overflow: hidden !important;
    }
    
    .figure-caption {
        font-size: 0.75rem !important;
        padding: 0.5rem !important;
    }
    
    /* Mejorar código inline */
    code {
        font-size: 0.875rem !important;
        padding: 0.125rem 0.25rem !important;
        border-radius: 0.25rem !important;
    }
    
    /* Mejorar bloques de código */
    pre {
        border-radius: 0.5rem !important;
        padding: 1rem !important;
        font-size: 0.875rem !important;
    }
    
    /* Mejorar blockquotes */
    blockquote {
        border-left: 4px solid #007bff !important;
        padding-left: 1rem !important;
        margin: 1rem 0 !important;
        font-style: italic !important;
        color: #6c757d !important;
    }
    
    /* Mejorar tablas responsivas */
    .table-responsive {
        border: 1px solid #dee2e6 !important;
        border-radius: 0.5rem !important;
    }
    
    /* Mejorar formularios */
    .form-group {
        margin-bottom: 1rem !important;
    }
    
    .form-label {
        font-weight: 600 !important;
        color: #495057 !important;
        margin-bottom: 0.5rem !important;
    }
    
    .form-text {
        font-size: 0.75rem !important;
        color: #6c757d !important;
    }
    
    /* Mejorar validación de formularios */
    .is-valid {
        border-color: #28a745 !important;
    }
    
    .is-invalid {
        border-color: #dc3545 !important;
    }
    
    .valid-feedback {
        font-size: 0.75rem !important;
    }
    
    .invalid-feedback {
        font-size: 0.75rem !important;
    }
    
    /* Mejorar botones de grupo */
    .btn-group {
        border-radius: 0.5rem !important;
        overflow: hidden !important;
    }
    
    .btn-group .btn {
        border-radius: 0 !important;
    }
    
    .btn-group .btn:first-child {
        border-top-left-radius: 0.5rem !important;
        border-bottom-left-radius: 0.5rem !important;
    }
    
    .btn-group .btn:last-child {
        border-top-right-radius: 0.5rem !important;
        border-bottom-right-radius: 0.5rem !important;
    }
    
    /* Mejorar input groups */
    .input-group {
        border-radius: 0.5rem !important;
        overflow: hidden !important;
    }
    
    .input-group-text {
        border-radius: 0 !important;
        font-size: 0.875rem !important;
    }
    
    /* Mejorar carousels */
    .carousel {
        border-radius: 0.5rem !important;
        overflow: hidden !important;
    }
    
    .carousel-item {
        border-radius: 0.5rem !important;
    }
    
    /* Mejorar accordions */
    .accordion-item {
        border-radius: 0.5rem !important;
        margin-bottom: 0.5rem !important;
        overflow: hidden !important;
    }
    
    .accordion-button {
        border-radius: 0.5rem !important;
        font-size: 0.875rem !important;
        padding: 1rem !important;
    }
    
    .accordion-body {
        padding: 1rem !important;
        font-size: 0.875rem !important;
    }
    
    /* Mejorar tabs */
    .nav-tabs {
        border-radius: 0.5rem 0.5rem 0 0 !important;
        overflow: hidden !important;
    }
    
    .nav-tabs .nav-link {
        border-radius: 0 !important;
        font-size: 0.875rem !important;
    }
    
    .tab-content {
        border-radius: 0 0 0.5rem 0.5rem !important;
        padding: 1rem !important;
    }
    
    /* Mejorar tooltips personalizados */
    [data-bs-toggle="tooltip"] {
        cursor: help !important;
    }
    
    /* Mejorar popovers personalizados */
    [data-bs-toggle="popover"] {
        cursor: pointer !important;
    }
    
    /* Mejorar scrollbars personalizados */
    ::-webkit-scrollbar {
        width: 8px !important;
        height: 8px !important;
    }
    
    ::-webkit-scrollbar-track {
        background: #f1f1f1 !important;
        border-radius: 4px !important;
    }
    
    ::-webkit-scrollbar-thumb {
        background: #c1c1c1 !important;
        border-radius: 4px !important;
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8 !important;
    }
    
    /* Mejorar selección de texto */
    ::selection {
        background-color: #007bff !important;
        color: white !important;
    }
    
    ::-moz-selection {
        background-color: #007bff !important;
        color: white !important;
    }
    
    /* Mejorar focus visible */
    :focus-visible {
        outline: 2px solid #007bff !important;
        outline-offset: 2px !important;
        border-radius: 0.25rem !important;
    }
    
    /* Mejorar transiciones */
    * {
        transition: all 0.2s ease !important;
    }
    
    /* Mejorar animaciones de carga */
    .loading {
        animation: pulse 1.5s ease-in-out infinite !important;
    }
    
    /* Mejorar estados de hover en móvil */
    @media (hover: hover) {
        .btn:hover {
            transform: translateY(-1px) !important;
            box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.15) !important;
        }
        
        .card:hover {
            transform: translateY(-2px) !important;
            box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15) !important;
        }
    }
    
    /* Mejorar estados activos en móvil */
    .btn:active {
        transform: translateY(0) !important;
        box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.15) !important;
    }
    
    /* Mejorar accesibilidad */
    .sr-only {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
    
    /* Mejorar contraste para accesibilidad */
    .text-dark {
        color: #212529 !important;
    }
    
    .text-light {
        color: #f8f9fa !important;
    }
    
    /* Mejorar espaciado para lectores de pantalla */
    .visually-hidden {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
}

/* ========================================
   ESTILOS PARA ESCRITORIO - INDICADORES DE TICKETS
   ======================================== */
/* Indicadores eliminados para mejor estética */

/* ========================================
   ORIENTACIÓN LANDSCAPE EN MÓVIL
   ======================================== */
@media (max-width: 48rem) and (orientation: landscape) {
    .container {
        padding: 0 1rem !important;
    }
    
    .row[style*="background-color: #fff"] {
        padding: 1rem !important;
    }
    
    .card {
        margin-bottom: 1rem !important;
    }
    
    .justify-content-center {
        padding-bottom: 2rem !important;
    }
}

/* ========================================
   PANTALLAS MUY PEQUEÑAS
   ======================================== */
@media (max-width: 20rem) {
    .container {
        padding: 0 0.25rem !important;
    }
    
    .row[style*="background-color: #fff"] {
        padding: 0.75rem 0.5rem !important;
    }
    
    .row[style*="padding-top: 60px"] {
        padding: 0.75rem 0.5rem !important;
    }
    
    h2 {
        font-size: 1.125rem !important;
    }
    
    h3 {
        font-size: 1rem !important;
    }
    
    .btn {
        font-size: 0.75rem !important;
        padding: 0.375rem 0.5rem !important;
    }
    
    .form-control {
        font-size: 0.8rem !important;
    }
    
    .card-header {
        padding: 0.5rem !important;
    }
    
    .card-body {
        padding: 0.5rem !important;
    }
    
    .card-footer {
        padding: 0.5rem !important;
    }
    
    .table th {
        font-size: 0.65rem !important;
        padding: 0.25rem 0.125rem !important;
        width: auto !important;
        max-width: none !important;
    }
    
    .table td {
        font-size: 0.7rem !important;
        padding: 0.25rem 0.125rem !important;
        width: auto !important;
        max-width: none !important;
    }
    
    /* Ajustes específicos para pantallas muy pequeñas */
    .table .col-1 {
        width: 10% !important;
        max-width: 10% !important;
    }
    
    .table .col-2 {
        width: 18% !important;
        max-width: 18% !important;
    }
    
    .table .col-3 {
        width: 22% !important;
        max-width: 22% !important;
    }
    
    .table .col-4 {
        width: 30% !important;
        max-width: 30% !important;
    }
    
    /* Forzar scroll horizontal en tablas muy anchas */
    .table-responsive {
        overflow-x: scroll !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Mejorar legibilidad en pantallas muy pequeñas */
    .table {
        font-size: 0.65rem !important;
    }
    
    .table th {
        font-size: 0.6rem !important;
        padding: 0.375rem 0.125rem !important;
    }
    
    .table td {
        font-size: 0.65rem !important;
        padding: 0.375rem 0.125rem !important;
    }
    
    /* Asegurar que los números se vean completos */
    .table td:last-child {
        min-width: 6rem !important;
        text-align: right !important;
        padding-right: 0.5rem !important;
        white-space: nowrap !important;
        overflow: visible !important;
    }
    
    /* Números de precio en pantallas pequeñas */
    .table td:nth-child(3),
    .table td:nth-child(4),
    .table td:nth-child(5) {
        min-width: 4rem !important;
        text-align: right !important;
        padding-right: 0.25rem !important;
        white-space: nowrap !important;
        overflow: visible !important;
        font-family: 'Courier New', monospace !important;
        font-weight: 600 !important;
        font-size: 0.6rem !important;
    }
    
    /* Mejorar columnas en pantallas pequeñas */
    .table .col-1 {
        width: 12% !important;
        min-width: 2rem !important;
    }
    
    .table .col-2 {
        width: 38% !important;
        min-width: 4rem !important;
    }
    
    .table .col-3 {
        width: 25% !important;
        min-width: 3.5rem !important;
    }
    
    .table .col-4 {
        width: 25% !important;
        min-width: 5rem !important;
    }
    
    /* Total más visible en pantallas pequeñas */
    .table tbody tr:last-child td:last-child {
        font-size: 0.75rem !important;
        font-weight: 800 !important;
        color: #000 !important;
        background-color: #f8f9fa !important;
    }
}