/* Estilos personalizados para la página de Check-in */

body {
    background-color: #f0f2f5;
    overflow-x: hidden; /* Evita la barra de desplazamiento horizontal */
    font-family: 'Montserrat', sans-serif;
}


.airline-logo {
    font-weight: 700;
    color: #E30613;
    font-size: 2.2rem;
}

.checkin-card {
    background-color: #ffffff;
    border: none;
    border-radius: 8px;
}

.checkin-card .card-title {
    font-size: 1.75rem;
    font-weight: 700;
}

.scenario-title {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 1.5rem !important;
    font-weight: 600;
}

/* --- Estilos para las pestañas de vuelo --- */
.flight-tabs {
    border-bottom: 2px solid #dee2e6;
}

.flight-tabs .nav-link {
    color: #495057;
    font-weight: 500;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}

.flight-tabs .nav-link.active {
    color: #E30613;
    border-bottom: 2px solid #E30613;
    background-color: transparent;
}

.flight-tabs .nav-link.disabled {
    color: #adb5bd;
}

.flight-tabs .reverse-icon {
    transform: scaleX(-1);
}

/* Estilos para los botones */
.btn-primary {
    /* Sobrescribimos las variables de Bootstrap para una personalización completa */
    --bs-btn-color: #fff;
    --bs-btn-bg: #E30613;
    --bs-btn-border-color: #E30613;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #c00410; /* Un rojo un poco más oscuro para el hover */
    --bs-btn-hover-border-color: #b0040e;
    --bs-btn-active-bg: #b0040e;
    --bs-btn-active-border-color: #a0030c;
    --bs-btn-focus-shadow-rgb: 227, 6, 19; /* RGB de #E30613 para el borde de foco */

    /* Los botones en el HTML usan .btn-lg, pero podemos definir un tamaño base aquí */
    padding: 10px 16px;
    font-size: 1rem;
    font-weight: 500;
}

/* --- Estilos para el contenido del check-in --- */
.flight-info-card {
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 8px 8px;
}

/* Columna de pasajeros */
.passenger-list .list-group-item {
    border-radius: 8px;
    margin-bottom: 10px;
    border: 1px solid #dee2e6;
     
}

.passenger-list .list-group-item.active {
    background-color: #f8f9fa; /* Color gris claro neutral */
    border-color: #E30613;
    color: #000;
     
}
.passenger-list .list-group-item.active h5,
.passenger-list .list-group-item.active small {
    color: #E30613;
    font-weight: 700;
     
    
}

/* Contenedor del mapa de asientos */
.seat-map-container {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px 10px;
    margin-top: 1rem;
    overflow-x: auto;
    text-align: center;
}

.plane {
    display: inline-block;
    min-width: 250px;
    position: relative;
}

.cockpit {
    background: #e9ecef;
    height: 40px;
    border-radius: 10px 10px 0 0;
    line-height: 40px;
    color: #6c757d;
    font-weight: 500;
    margin-bottom: 10px;
}

.fuselage {
    border-left: 3px solid #adb5bd;
    border-right: 3px solid #adb5bd;
    border-radius: 5px;
    padding: 10px 0;
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden; /* Evita la barra de desplazamiento horizontal interna */
    position: relative;
}

.seat-row {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
}

.row-label {
    width: 20px;
    text-align: center;
    color: #6c757d;
    font-weight: 400;
}
.aisle {
    width: 25px;
}

.seat, .seat-placeholder {
    width: 32px;
    height: 32px;
    margin: 2px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 0.9rem;
}

.seat {
    color: #495057;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    user-select: none;
}

.seat.available { background-color: #ffffff; border: 1px solid #adb5bd; }
.seat.available:hover { background-color: #E30613; color: #ffffff; border-color: #c00410; transform: scale(1.1); }
.seat.occupied { background-color: #ced4da; border: 1px solid #adb5bd; cursor: not-allowed; color: #6c757d; }
.seat.selected { background-color: #E30613; color: #ffffff; border: 2px solid #c00410; cursor: default; }

.seat-legend { display: flex; justify-content: center; gap: 15px; margin-top: 20px; flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 8px; }
.legend-item .seat { width: 20px; height: 20px; cursor: default; }
.legend-item .seat.available:hover { background-color: #ffffff; border: 1px solid #adb5bd; color: #495057; transform: none; }
.legend-item .seat.selected { cursor: default; border-width: 1px; }

/* --- Estilos para el mapa de asientos bloqueado --- */
.seat-map-locked .seat.available,
.seat-map-locked .seat.selected {
    cursor: not-allowed;
}

.seat-map-locked .seat.available:hover {
    background-color: #ffffff; /* Evita el cambio de color en hover */
    color: #495057;
    border-color: #adb5bd;
    transform: none; /* Evita el efecto de zoom */
}