/* ==========================================================================
   Estilos Generales para el Panel de Control - GDC Boletos
   ========================================================================== */

/* Ajustes de tipografía y suavizado */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f6f9;
    color: #333;
    -webkit-font-smoothing: antialiased;
}

/* --- Contenedor e Interfaz Dividida --- */
.taquilla-item {
    font-weight: 500;
    color: #495057;
    border-left: 4px solid transparent;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

/* Efecto Hover para la lista de taquillas del costado izquierdo */
.taquilla-item:hover {
    background-color: #f1f3f5 !important;
    color: #0d6efd;
    border-left-color: #0d6efd;
    padding-left: 20px !important; /* Le da un ligero desplazamiento dinámico */
}

/* Estilo cuando el renglón está seleccionado o en modo edición */
.taquilla-item.active-edit {
    background-color: #e7f1ff !important;
    color: #0c63e4;
    border-left-color: #0c63e4;
}

/* --- Ajustes del Formulario y Componentes --- */
.card {
    border-radius: 8px;
    overflow: hidden;
}

.card-header {
    font-size: 1.05rem;
    letter-spacing: 0.03em;
}

/* Transición suave para cuando el panel cambie de color al editar (bg-primary a bg-info) */
#form_taquilla_header {
    transition: background-color 0.4s ease;
}

/* Ajustes finos para interruptores y elementos de formulario */
.form-switch .form-check-input {
    cursor: pointer;
    width: 2.5em;
    height: 1.25em;
}

.form-check-label {
    cursor: pointer;
    user-select: none;
}

/* Badges estilizados de bootstrap */
.badge {
    font-size: 0.78rem;
    padding: 0.35em 0.65em;
    border-radius: 4px;
}