/* Base styles for the plugin */
.ivao-pilot-tracker {
    font-family: Arial, sans-serif;
    margin: 20px 0;
}

.ivao-pilot-tracker h2{
    color: #333;
}

.ivao-pilot-tracker h3 {
    color: #00208a;
}

.ivao-pilot-tracker table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.ivao-pilot-tracker th, .ivao-pilot-tracker td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

/* Modified header styles */
.ivao-pilot-tracker th {
    background-color: #ffffff !important; /* Fondo blanco */
    color: #00208a !important; /* Texto azul oscuro */
    font-weight: bold;
}

/* Modified table content styles */
.ivao-pilot-tracker td {
    color: #ffffff; /* White text for table content */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    /* Adjust table layout for smaller screens */
    .ivao-pilot-tracker table {
        display: block;
        width: 100%;
        overflow-x: auto;
    }

    .ivao-pilot-tracker th, .ivao-pilot-tracker td {
        white-space: nowrap;
    }

    .ivao-pilot-tracker th, .ivao-pilot-tracker td {
        padding: 10px;
    }

    /* Ensure the headings don't overflow */
    .ivao-pilot-tracker h2, .ivao-pilot-tracker h3 {
        font-size: 1.5em;
        margin-bottom: 10px;
    }

    /* Make buttons and form inputs full-width */
    .ivao-pilot-tracker form .regular-text,
    .ivao-pilot-tracker form input[type="submit"] {
        width: 100%;
        box-sizing: border-box;
    }
}

/* Extra small screens (phones) */
@media (max-width: 480px) {
    .ivao-pilot-tracker th, .ivao-pilot-tracker td {
        font-size: 14px;
    }

    .ivao-pilot-tracker h2, .ivao-pilot-tracker h3 {
        font-size: 1.2em;
    }
}
/* Contenedor de pestañas */
.ivao-tab-container {
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
}

/* Botones de pestañas */
.ivao-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

/* Estilo de las pestañas inactivas */
.ivao-tab-button {
    background-color: #00208a; /* Fondo azul cuando está inactiva */
    color: white; /* Texto blanco cuando está inactiva */
    border: 2px solid #00208a; /* Borde azul */
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    margin: 0 5px;
    border-radius: 5px;
    transition: all 0.3s ease-in-out;
}

/* Pestaña activa */
.ivao-tab-button.active {
    background-color: white !important; /* Fondo blanco cuando está activa */
    color: #00208a !important; /* Texto azul cuando está activa */
    border: 2px solid #00208a; /* Borde azul */
}


/* Contenido de pestañas */
.ivao-tab-content {
    display: none;
}

.ivao-tab-content.active {
    display: block;
}

/* Títulos */
h3.ivao-title {
    color: #00208a !important; /* Asegura el color azul oscuro */
    font-size: 20px;
    font-weight: bold;
    text-align: center; /* Centra el texto */
    margin-bottom: 10px;
}

/* Si hay otros estilos heredados que están afectando */
.ivao-title, .ivao-title h3, .ivao-title span {
    color: #00208a !important;
}


/* 📌 NUEVOS ESTILOS PARA LA TABLA */
.table-responsive {
    width: 100%;
}

/* 📌 FONDO DE TODA LA TABLA */
table {
    width: 100%;
    border-collapse: collapse;
    background-color: #00208a; /* Fondo azul oscuro */
    color: white; /* Letras en blanco */
}

/* 📌 ENCABEZADO DE LA TABLA */
th {
    background-color: #00208a; /* Color de fondo del encabezado */
    color: white !important; /* Texto en blanco */
    font-weight: bold;
    text-transform: uppercase;
    text-align: center; /* Centrar el texto */
    vertical-align: middle; /* Alinear verticalmente en el centro */
    padding: 12px; /* Ajustar el espacio */
}

/* 📌 CELDAS */
td {
    padding: 8px;
    text-align: center;
    border-bottom: 1px solid white;
}

/* 📌 SEPARACIÓN ENTRE FILAS */
tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.1); /* Un ligero efecto en las filas pares */
}