/* ============================================================
   ESTILO DE LAS PESTAÑAS
============================================================ */

.bazan-seg-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
    padding-bottom: 6px;
}

.seg-tab {
    padding: 8px 16px;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}

/* Hover */
.seg-tab:hover {
    background: #eaeaea;
    color: #333;
}

/* Activa con color corporativo */
.seg-tab.seg-activo {
    background: #ffffff;
    border-bottom: 2px solid rgb(0,127,162);
    color: rgb(0,127,162);
    font-weight: 600;
    box-shadow: 0 -2px 6px rgba(0,0,0,0.05);
    position: relative;
    top: 2px;
}

/* ============================================================
   RESPONSIVE REAL — SOLO UNA VISTA A LA VEZ
============================================================ */

/* Escritorio → mostrar pestañas, ocultar selector */
@media (min-width: 768px) {
    .bazan-seg-tabs {
        display: flex;
    }
    .bazan-seg-select {
        display: none;
    }
}

/* Móvil → ocultar pestañas, mostrar selector */
@media (max-width: 767px) {
    .bazan-seg-tabs {
        display: none;
    }
    .bazan-seg-select {
        display: block;
        margin-bottom: 18px;
    }

    /* Barra plegada (select) → azul corporativo */
    .bazan-seg-select select {
        width: 100%;
        box-sizing: border-box;
        padding: 10px 40px 10px 12px;
        font-size: 15px;
        line-height: 1.4;
        height: 42px;

        border: none;
        border-radius: 6px;
        background-color: rgb(0,127,162) !important;
        color: #fff !important;
        cursor: pointer;

        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;

        background-image: url("data:image/svg+xml;utf8,<svg fill='%23ffffff' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 18px;
    }

    /* Mantener azul también en focus/active */
    .bazan-seg-select select:focus,
    .bazan-seg-select select:active {
        outline: none;
        background-color: rgb(0,127,162) !important;
        color: #fff !important;
    }

    /* Opciones internas → gris claro */
    .bazan-seg-select select option {
        background: #f5f5f5 !important;
        color: #333 !important;
    }

    /* Ajustes de tamaño en móvil */
    .seg-tab {
        padding: 6px 12px;
        font-size: 13px;
    }
}


/* ============================================================
   RESPONSIVE REAL — SOLO UNA VISTA A LA VEZ
============================================================ */

/* Escritorio → mostrar pestañas, ocultar selector */
@media (min-width: 768px) {
    .bazan-seg-tabs {
        display: flex;
    }
    .bazan-seg-select {
        display: none;
    }
}

/* Móvil → ocultar pestañas, mostrar selector */
@media (max-width: 767px) {
    .bazan-seg-tabs {
        display: none;
    }
    .bazan-seg-select {
        display: block;
        margin-bottom: 18px;
    }

    /* Ajustes de tamaño en móvil */
    .seg-tab {
        padding: 6px 12px;
        font-size: 13px;
    }
}


/*Hasta aquí el estilo de las pestañas*/

/*============================================================
REDISEÑO PANEL DE MI NIVEL DE APROBADOS EN SEGUIMIENTO
============================================================*/

/* Estructura del contenedor mixto en dos columnas */
.seg-dashboard-mixto {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 24px;
    width: 100%;
    align-items: start;
}

@media (max-width: 820px) {
    .seg-dashboard-mixto {
        grid-template-columns: 1fr;
    }
}

/* Base de las tarjetas contenedor */
.seg-bloque {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    margin-bottom: 20px;
}

.seg-bloque-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 12px;
    flex-wrap: wrap;
    gap: 12px;
}

.seg-bloque-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
}

/* ============================================================
   SELECTOR (NO SE TOCA — SE MANTIENE TAL CUAL)
============================================================ */
.seg-selector-intentos {
    display: flex;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 8px;
    gap: 2px;
}

.seg-selector-btn {
    padding: 6px 14px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 12px;
    color: #64748b;
    background: transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.seg-selector-btn.active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* ============================================================
   DISEÑO DE LA COLUMNA DE ANILLO
============================================================ */

.layout-anillo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px; /* antes 20 */
}

.seg-intento-kpis-anillo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px; /* más respiración */
    width: 100%;
}

/* Donut más grande y equilibrado */
.seg-donut-chart {
    position: relative;
    width: 160px;   /* antes 130 */
    height: 160px;  /* antes 130 */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}

.seg-donut-chart::before {
    content: '';
    position: absolute;
    width: 118px;   /* antes 96 */
    height: 118px;  /* antes 96 */
    background: #ffffff;
    border-radius: 50%;
}

.seg-donut-inner {
    position: relative;
    text-align: center;
    z-index: 1;
}

.seg-donut-number {
    display: block;
    font-size: 30px; /* antes 26 */
    font-weight: 700;
    color: #0f172a;
    line-height: 1;
}

.seg-donut-label {
    font-size: 10px; /* más discreto */
    color: #64748b;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 2px;
}

.seg-kpi-nota-mini {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 18px;
    text-align: center;
}

/* Leyendas del Anillo */
.seg-leyenda-vertical {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px; /* antes 8 */
    background: #f9fafb; /* más suave */
    padding: 10px 12px; /* más compacto */
    border-radius: 8px;
}

.seg-leyenda-item {
    font-size: 12px; /* antes 13 */
    color: #334155;
    display: flex;
    align-items: center;
}

.seg-dot {
    width: 8px;  /* antes 10 */
    height: 8px; /* antes 10 */
    border-radius: 50%;
    margin-right: 8px;
    display: inline-block;
}

.dot-aprob { background: #10b981; }
.dot-susp  { background: #ef4444; }
.dot-pend  { background: #f59e0b; }

/* ============================================================
   DISEÑO DE LA COLUMNA DE BARRAS
============================================================ */

.layout-barras {
    display: flex;
    flex-direction: column;
    gap: 12px; /* antes 14 */
}

.seg-header-barras {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #64748b;
    border-bottom: 1px dashed #e2e8f0;
    padding-bottom: 4px; /* antes 6 */
}

.seg-header-barras strong {
    color: #0f172a;
}

.seg-fila-barra {
    display: flex;
    flex-direction: column;
    gap: 4px; /* antes 6 */
}

.seg-barra-label {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}

.seg-barra-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

/* Barra más fina y elegante */
.seg-barra-progreso {
    height: 8px; /* antes 10 */
    border-radius: 20px;
    background-color: #cbd5e1;
    transition: width 0.4s ease-out;
    max-width: calc(100% - 50px);
}

.seg-barra-porcentaje {
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    min-width: 38px; /* antes 40 */
}

/* Colores de las líneas de barra individuales */
.bg-aprob { background-color: #10b981; }
.bg-susp  { background-color: #ef4444; }
.bg-pend  { background-color: #f59e0b; }

.kpi-label { 
    font-size: 11px; 
    text-transform: uppercase; 
    color: #64748b; 
    font-weight: 600; 
    display: block; 
}

.kpi-valor { 
    font-size: 22px; 
    font-weight: 700; 
    color: #0f172a; 
}

.kpi-valor small { 
    font-size: 12px; 
    color: #94a3b8; 
}

/* ============================================================
   REDISEÑO PESTAÑA "MI NIVEL DE ACIERTOS" EN "SEGUIMIENTO"
============================================================ */

/* Corrección semántica y de textos para leyendas en la sección preguntas */
.seg-leyenda-item small {
    color: #64748b;
    font-weight: 500;
}

/* Colores adaptados para métricas de efectividad lineal */
.seg-nota-lineal strong {
    color: #10b981;
}

/* Asegurar el correcto comportamiento responsivo del grid de preguntas */
@media (max-width: 820px) {
    .seg-columna-anillo, .seg-columna-desglose {
        width: 100%;
    }
}