/* VARIABLES DE COLOR */
.btn-lang {
    background: transparent;
    border: 1px solid #fff;
    color: white;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 4px;
    margin-right: 10px;
    font-weight: bold;
    transition: 0.3s;
}

.btn-lang:hover {
    background: var(--dorado);
    color: #003366; /* El azul de tu aerolínea */
}

:root {
    --azul-oscuro: #001F4D;
    --dorado: #D4AF37;
    --rojo: #C8102E;
    --amarillo: #FFCD00;
    --gris-claro: #F2F2F2;
    --blanco: #FFFFFF;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: var(--blanco);
    color: var(--azul-oscuro);
    line-height: 1.6;
}

/* NAVEGACIÓN PRINCIPAL */
header {
    background-color: var(--azul-oscuro);
    padding: 10px 5%;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 3px solid var(--dorado);
}

.navbar {
    display: flex;
    justify-content: space-between; /* Distribuye Logo, Links y Botones */
    align-items: center;
    width: 100%;
}

/* 1. LOGO (IZQUIERDA) */
.logo-container {
    flex: 1; /* Ocupa espacio proporcional a la izquierda */
    display: flex;
    justify-content: flex-start;
    text-decoration: none;
}

.company-logo {
    height: 75px; 
    width: auto;
    display: block;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.company-logo:hover {
    transform: scale(1.05);
}

/* 2. LINKS DEL MENÚ (CENTRADO) */
.nav-links {
    list-style: none;
    display: flex;
    justify-content: center; /* Centra los links internamente */
    flex: 2; /* Toma más espacio central para forzar el centrado real */
}

.nav-links li {
    margin: 0 5px;
}

.nav-links li a {
    color: var(--blanco);
    text-decoration: none;
    padding: 10px 15px;
    font-weight: bold;
    transition: 0.3s;
    font-size: 1.05rem;
    white-space: nowrap;
}

.nav-links li a:hover {
    color: var(--amarillo);
}

/* 3. BOTONES DE ACCESO (DERECHA) */
.auth-buttons {
    flex: 1; /* Ocupa espacio proporcional a la derecha */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

/* Botón Ingreso (Dorado) */
.btn-login {
    border: 2px solid var(--dorado);
    color: var(--dorado);
    padding: 8px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: 0.3s;
    font-size: 0.95rem;
}

.btn-login:hover {
    background-color: var(--dorado);
    color: var(--azul-oscuro);
}

/* Botón Registro (Rojo) */
.btn-reg {
    background-color: var(--rojo);
    color: var(--blanco);
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: 0.3s;
    font-size: 0.95rem;
}

.btn-reg:hover {
    background-color: #a00d25;
}

/* HERO SECTION */
.hero {
    background: linear-gradient(rgba(0,31,77,0.6), rgba(0,31,77,0.6)), url('/imagenes/IMG_2829.PNG');
    background-size: cover;
    background-position: center;
    height: 100vh; /* Ocupa el 100% de la altura de la ventana */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0;
    
}

/* --- ESLOGAN RESPONSIVO Y BLANCO --- */
.hero-slogan {
    color: #ffffff !important; /* Letra blanca pura */
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8); /* Sombra para legibilidad */
    font-weight: bold;
    text-align: center;
    width: 90%; /* Deja un margen a los lados en celulares */
    margin: 0 auto;
    line-height: 1.3;
    
    /* El tamaño se ajusta solo: grande en PC, pequeño en móvil */
    font-size: clamp(1.4rem, 5vw, 2.5rem); 
    
    /* IMPORTANTE: Eliminamos 'white-space: nowrap' para que el texto NO se salga en celulares */
    white-space: normal; 
}


/* FOOTER PROFESIONAL */
.main-footer {
    background-color: var(--azul-oscuro);
    color: var(--blanco);
    padding: 60px 5% 20px 5%;
    border-top: 3px solid var(--dorado); /* Línea dorada superior igual que el header */
    margin-top: 0; /* Asegura que se pegue a la sección superior */
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
}

/* Estilo de Columnas */
.footer-column h3 {
    color: var(--amarillo);
    margin-bottom: 20px;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-column ul {
    list-style: none;
    padding: 0;
}

.footer-column ul li {
    margin-bottom: 10px;
}

.footer-column ul li a {
    color: var(--blanco);
    text-decoration: none;
    transition: 0.3s;
    font-size: 0.95rem;
}

.footer-column ul li a:hover {
    color: var(--dorado);
    padding-left: 5px; /* Pequeño efecto de movimiento */
}

/* Logo en Footer */
.footer-logo {
    height: 60px;
    margin-bottom: 15px;
    width: auto;
}

.footer-tagline {
    font-size: 0.9rem;
    color: var(--gris-claro);
    font-style: italic;
    max-width: 250px;
}

/* Barra Final */
.footer-bottom {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    font-size: 0.85rem;
    color: var(--gris-claro);
}

/* Ajuste para dispositivos móviles */
@media (max-width: 768px) {
    .footer-container {
        text-align: center;
    }
    .footer-logo {
        margin: 0 auto 15px auto;
    }
    .footer-tagline {
        margin: 0 auto;
    }
}

/* --- AJUSTES DE LOGOS EN EL FOOTER --- */

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 30px 0; /* Más espacio para los logos grandes */
    margin-top: 40px;
}

.bottom-content {
    display: flex;
    justify-content: space-between; /* Alineación extrema */
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5%;
}

.footer-partners {
    display: flex;
    align-items: center;
    gap: 25px; /* Mayor separación entre marcas */
}

/* Aumento de tamaño para IVAO y VATSIM */
.partner-img-large {
    height: 45px; /* De 30px sube a 45px para mayor protagonismo */
    width: auto;
    filter: brightness(0) invert(1); /* Mantiene el color blanco elegante */
    opacity: 0.9;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.partner-img-large:hover {
    filter: none; /* Recupera color original al pasar el mouse */
    transform: scale(1.1);
    opacity: 1;
}

/* Bandera de Colombia más visible */
.flag-img-large {
    height: 30px; /* Tamaño aumentado proporcionalmente */
    width: auto;
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.copyright {
    font-size: 0.9rem;
    color: var(--gris-claro);
}

/* Ajuste para móviles para mantener el orden */
@media (max-width: 768px) {
    .bottom-content {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }
    .footer-partners {
        justify-content: center;
    }
}


/* TOPBAR */

#topbar{
background:#003366;
color:#ffffff;
padding:8px;
font-weight:bold;
text-align:center;
}


/* SIDEBAR */

#sidebar{
position:absolute;
top:210px;
left:10px;
width:260px;
background:#ffffff;
border-radius:8px;
padding:15px;
z-index:999;
max-height:70vh;
overflow-y:auto;
box-shadow:0 0 10px rgba(0,0,0,0.4);
}

#sidebar h3{
margin-bottom:10px;
border-bottom:1px solid #1e3b5c;
padding-bottom:6px;
}

.flight-item{
padding:8px;
border-bottom:1px solid #1e3b5c;
font-size:14px;
}

.flight-item:last-child{
border-bottom:none;
}

.flight-item strong{
color:#00c2ff;
}


/* MAPA */

#map{
width:75%;
height:450px;
margin:30px auto;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.4);
border:1px solid #1e3b5c;
}

/*TABLA*/

.live-map-container{
padding:40px 20px;
background:#f9f9f9;
text-align:center;
}

#map{
height:500px;
width:100%;
max-width:1200px;
margin:20px auto;
border-radius:15px;
box-shadow:0 4px 15px rgba(0,0,0,0.1);
z-index:1;
}

.map-title{
margin-bottom:10px;
font-weight:bold;
color:#003366;
}

/* TABLA ESTILO AEROPUERTO */

.flight-table{
width:100%;
max-width:1200px;
margin:20px auto;
border-collapse:collapse;
background:#0a0a0a;
color:#ffd400;
font-family:'Share Tech Mono', monospace;
letter-spacing:2px;
border:3px solid #222;
}

.flight-table thead{
background:linear-gradient(to right,#000,#1a1a1a,#000);
}

.flight-table th{
padding:14px;
font-size:14px;
text-align:center;
border-bottom:2px solid #333;
color:#ffe600;
letter-spacing:3px;
}

.flight-table td{
padding:12px;
text-align:center;
font-size:16px;
border-bottom:1px solid #222;
animation:flipRow 0.5s ease;
}

.flight-table tbody tr{
background:repeating-linear-gradient(
to bottom,
#0a0a0a,
#0a0a0a 24px,
#111 25px
);
}

.flight-table tbody tr:hover{
background:#111;
}

.flight-table td:first-child{
font-weight:bold;
color:#ffd400;
}

.flight-table span{
background:#222;
color:#ffd400;
padding:4px 10px;
border-radius:3px;
font-size:14px;
}

.no-flights td{
font-size:22px;
padding:40px;
letter-spacing:4px;
color:#ffd400;
background:#0a0a0a;
}

/* efecto flip */
@keyframes flipRow{
0%{
transform:rotateX(90deg);
opacity:0;
}
100%{
transform:rotateX(0deg);
opacity:1;
}
}