/* Contenedor padre para centrar los elementos de forma vertical y limpia */
    .wrapper-tickets-principal {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Estilo del contenedor para lograr la cápsula superior */
    .capsula-tabs {
        background-color: #f1f3f5 !important;
        border-radius: 50px !important;
        padding: 6px !important;
        display: inline-flex !important;
        border: 1px solid #e9ecef !important;
        margin-bottom: 25px !important;
    }

    .capsula-tabs .nav-link {
        border-radius: 50px !important;
        color: #6c757d !important;
        font-weight: 600 !important;
        font-size: 12px !important;
        letter-spacing: 0.05em !important;
        padding: 10px 24px !important;
        text-transform: uppercase !important;
        border: none !important;
        background: transparent !important;
        transition: all 0.3s ease !important;
    }

    .capsula-tabs .nav-link.active {
        background-color: #ffffff !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    }

    #disponibles-tab.active { color: #20a8d8 !important; }
    #reservados-tab.active { color: #495057 !important; }
    
    .contenedor-fijo-tabs {
        width: 100% !important;
        max-width: 950px !important; /* Mantiene el ancho controlado */
        margin: 0 auto !important;   /* Lo fuerza a estar centrado horizontalmente */
    }

    .tarjeta-tickets {
        display: block !important;    /* Evita que colapse como inline-block */
        width: 100% !important;       /* Fuerza a que use todo el ancho de los 850px */
        background-color: #ffffff !important;
        border: 1px solid #eef0f2 !important;
        border-radius: 16px !important;
        padding: 30px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
        text-align: left !important;  /* Mantiene los textos internos alineados a la izquierda */
    }

    .titulo-seccion {
        font-size: 1.2rem !important;
        font-weight: 700 !important;
        color: #2d3748 !important;
        margin-bottom: 8px !important;
    }

    /* Estructura clásica de tablas */
    .tabla-estricta {
        background-color: #fff !important;
        border: 1px solid #ddd !important;
    }
    .tabla-estricta th {
        background-color: #f5f5f5 !important;
        color: #333 !important;
        font-weight: bold !important;
        text-align: center !important;
        border: 1px solid #ddd !important;
        padding: 6px 8px !important;
    }
    .tabla-estricta td {
        color: #333 !important;
        vertical-align: middle !important;
        border: 1px solid #ddd !important;
        padding: 4px 8px !important;
        line-height: 1.4 !important;
    }
    .mi-badge-oscuro {
        display: inline-block !important;
        padding: 3px 8px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #fff !important;
        background-color: #2f353a !important; 
        border-radius: 3px !important;
        text-align: center !important;
        min-width: 45px !important;
    }
    
    .mi-badge-azul-oficial {
        display: inline-block !important;
        padding: 3px 8px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #fff !important;
        background-color: #20a8d8 !important; 
        border-radius: 3px !important;
        text-align: center !important;
        min-width: 45px !important;
    }

    /* Control estricto de visibilidad */
    .tab-content > .tab-pane {
        display: none !important;
    }
    .tab-content > .tab-pane.active {
        display: block !important;
    }

    /* Estilos de Alertas Estandarizadas */
    .alert {
        position: relative !important;
        padding: 10px 15px !important;
        margin-bottom: 15px !important;
        border: 1px solid transparent !important;
        border-radius: 4px !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    .alert-secondary {
        color: #383d41 !important;
        background-color: #e2e3e5 !important;
        border-color: #d6d8db !important;
    }

    .alert-light {
        color: #636464 !important;
        background-color: #fdfdfe !important;
        border-color: #e2e3e5 !important;
    }

    .alert-primary {
        color: #1b4965 !important;
        background-color: #dbeafe !important;
        border-color: #bfdbfe !important;
    }

    .alert-info {
        color: #0c5460 !important;
        background-color: #d1ecf1 !important;
        border-color: #bee5eb !important;
    }

    .alert-success {
        color: #155724 !important;
        background-color: #d4edda !important;
        border-color: #c3e6cb !important;
    }

    .alert-warning {
        color: #856404 !important;
        background-color: #fff3cd !important;
        border-color: #ffeeba !important;
    }

    .alert-danger {
        color: #721c24 !important;
        background-color: #f8d7da !important;
        border-color: #f5c6cb !important;
    }

    .alert-dark {
        color: #1b1e21 !important;
        background-color: #d6d8d9 !important;
        border-color: #c6c8ca !important;
    }

    /* Modales e interfaz de Login */
    .modal .modal-dialog #fuerzaBlanca .modal-header.modal-estricto-header {
        padding: 15px 20px !important;
        border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    }
    #loginModal {
        opacity: 1 !important;
        visibility: visible !important;
        display: none; 
        z-index: 99999 !important;
    }
    #fuerzaBlanca {
        background-color: #ffffff !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
    }
    .modal-backdrop {
        z-index: 99990 !important;
        opacity: 0.5 !important; 
    }
    body.modal-open {
        overflow: hidden !important;
    }
    .modal-dinamico {
        margin-top: 120px;
        width: auto;
    }
    @media (min-width: 768px) {
        .modal-dinamico { width: 450px !important; margin: 120px auto 0 auto !important; }
    }