/* ========== RESPONSIVE ====================================================== */
/* Resoluciones recomendadas:
Tablet (1024 x 768 px) Landscape.
Laptop 1 (1280 x 800 px) Landscape.
Laptop 2 (1600 x 900 px) Landscape.
Laptop 3 (1920 x 1200 px) Landscape.
*/
/* ============================================================================ */
/* ===============================
   CONTENEDOR GENERAL
================================ */
.tab-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* ===============================
   CONTENEDOR DE TABS
================================ */
.tabs-container {
    background-color: #ffffff;
    position: relative;
    width: 100%;
    /* Padding fluido */
    padding-left: clamp(1rem, 2vw, 1.5rem);
}

.tabs-container-primary {
    padding-bottom: 0.2rem;
}

.tabs-container-secondary {
    padding-top: 0;
}

/* ===============================
   MENÚ DE TABS
================================ */
.tab-menu {
    display: flex;
    flex-direction: row;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-start;
    background-color: #ffffff;
    padding-top: clamp(0rem, 0.8vw, 0.625rem);
    margin: 0;
    gap: clamp(0.125rem, 0.3vw, 0.25rem);
    height: auto;
}

.tab-menu-primary {
    padding-top: clamp(0.4rem, 0.8vw, 0.625rem);
}

.tab-menu-secondary {
    padding-top: 0;
}

/* ===============================
   TAB
================================ */
.tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* Espaciado consistente */
    padding: clamp(0.5rem, 0.8vw, 0.6rem);
    font-family: "Poppins", sans-serif;

    /* Texto fluido */
    font-size: clamp(0.75rem, 1vw, 1rem);
    text-decoration: none;
    color: #333;

    background-color: #e0e0e0;
    border: 1px solid transparent;
    border-bottom: none;

    /* Radio constante (no necesita escalar) */
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;

    text-align: center;
    min-width: clamp(6.25rem, 8vw, 7.5rem);
    transition: background-color 0.3s ease, opacity 0.3s ease;
}

.tab-primary {
    min-width: clamp(8rem, 10vw, 9.5rem);
}

.tab-static {
    cursor: default;
}

.tab.is-disabled {
    opacity: 0.7;
    pointer-events: none;
}

/* ===============================
   ESTADOS
================================ */
.tab:hover {
    background-color: #008080;
    opacity: 0.7;
}

.tab.active {
    background-color: #008080;
    border-color: #ccc;
    color: #ffffff;
    opacity: 1;
}

/* ===============================
   DIVISORES
================================ */
.divider {
    width: 100%;
    height: clamp(0.2rem, 0.4vw, 0.25rem);
}

.divider-teal {
    background-color: #008080;
}

.divider-yellow {
    background-color: #ffd433;
}