/* =============================================================================
   Escuela PIB 2 - Progreso, asistencia, reportes, analitica
   ============================================================================= */

.kpi-tarjeta {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-md);
    padding: var(--espacio-3) var(--espacio-4);
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
    transition: transform 120ms ease;
}
.kpi-tarjeta:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.kpi-tarjeta__etiqueta {
    font-size: var(--tamano-texto-xs);
    color: var(--color-texto-secundario);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.kpi-tarjeta__valor {
    font-size: var(--tamano-texto-2xl);
    color: var(--color-marron-profundo);
    font-weight: 700;
}
.kpi-tarjeta--presente { border-left: 4px solid #2f7a3f; }
.kpi-tarjeta--ausente { border-left: 4px solid #c0392b; }
.kpi-tarjeta--tardanza { border-left: 4px solid #f0ad4e; }
.kpi-tarjeta--justificado { border-left: 4px solid #5bc0de; }

/* Barras de progreso */
.barra-progreso {
    position: relative;
    background: var(--color-beige);
    border-radius: var(--radio-completo);
    height: 22px;
    overflow: hidden;
    margin: var(--espacio-2) 0;
}
.barra-progreso__relleno {
    background: linear-gradient(90deg, var(--color-oliva) 0%, var(--color-cacao) 100%);
    height: 100%;
    transition: width 200ms ease;
    border-radius: var(--radio-completo);
}
.barra-progreso__texto {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-marron-profundo);
    font-size: var(--tamano-texto-xs);
    font-weight: 600;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
}
.barra-progreso-grande {
    position: relative;
    background: var(--color-beige);
    border-radius: var(--radio-md);
    height: 48px;
    overflow: hidden;
    margin: var(--espacio-3) 0;
}
.barra-progreso-grande__relleno {
    background: linear-gradient(90deg, var(--color-oliva) 0%, var(--color-cacao) 100%);
    height: 100%;
    transition: width 400ms ease;
}
.barra-progreso-grande__texto {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-marron-profundo);
    font-size: var(--tamano-texto-lg);
    font-weight: 700;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}

/* Lista de actividad */
.lista-actividad {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--espacio-1);
}
.actividad-item {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    padding: var(--espacio-2) var(--espacio-3);
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-md);
}
.actividad-item__icono {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-beige);
    border-radius: var(--radio-completo);
    color: var(--color-cacao);
    flex-shrink: 0;
}
.actividad-item__cuerpo {
    flex: 1;
    min-width: 0;
}
.actividad-item__cuerpo h3 {
    margin: 0;
    font-size: var(--tamano-texto-base);
}
.actividad-item__estado {
    text-align: right;
    flex-shrink: 0;
}
.actividad-item__estado p {
    margin: var(--espacio-1) 0 0;
    font-size: var(--tamano-texto-xs);
}

.badge--completada { background: #c8e6c9; color: #1b5e20; }
.badge--en_progreso { background: #bbdefb; color: #0d47a1; }
.badge--no_iniciada { background: var(--color-beige); color: var(--color-texto-secundario); }

/* Tarjeta de progreso */
.tarjeta--progreso {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-1);
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-md);
    padding: var(--espacio-3);
}
.tarjeta--progreso .tarjeta__titulo {
    margin: 0;
    font-size: var(--tamano-texto-base);
}
.tarjeta--progreso .tarjeta__titulo a {
    color: var(--color-marron-profundo);
    text-decoration: none;
}
.tarjeta--progreso .tarjeta__titulo a:hover {
    text-decoration: underline;
}
.tarjeta--progreso .tarjeta__meta {
    margin: 0;
    color: var(--color-texto-secundario);
    font-size: var(--tamano-texto-xs);
}

/* Ranking */
.lista-ranking {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--espacio-1);
}
.ranking-item {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    padding: var(--espacio-2) var(--espacio-3);
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-md);
}
.ranking-item__posicion {
    width: 32px;
    height: 32px;
    background: var(--color-cacao);
    color: #fff;
    border-radius: var(--radio-completo);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}
.ranking-item__titulo {
    flex: 1;
}
.ranking-item__titulo a {
    color: var(--color-marron-profundo);
    text-decoration: none;
}
.ranking-item__titulo a:hover {
    text-decoration: underline;
}
.ranking-item__valor {
    color: var(--color-texto-secundario);
    font-size: var(--tamano-texto-sm);
    font-weight: 500;
}

/* Grafico de barras (CSS-only) */
.grafico-barras {
    display: flex;
    align-items: flex-end;
    gap: var(--espacio-1);
    height: 200px;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-md);
    padding: var(--espacio-3);
    overflow-x: auto;
}
.grafico-barras__col {
    flex: 1;
    min-width: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    height: 100%;
    justify-content: flex-end;
}
.grafico-barras__barra {
    width: 100%;
    background: linear-gradient(180deg, var(--color-cacao) 0%, var(--color-oliva) 100%);
    border-radius: var(--radio-sm) var(--radio-sm) 0 0;
    min-height: 4px;
    transition: height 200ms ease;
}
.grafico-barras__etiqueta {
    font-size: var(--tamano-texto-xs);
    color: var(--color-texto-secundario);
    white-space: nowrap;
}

/* Tarjeta de KPI */
.tarjeta--kpi {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-2);
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-md);
    padding: var(--espacio-3);
}
.tarjeta--kpi .tarjeta__titulo {
    margin: 0;
    color: var(--color-marron-profundo);
    font-size: var(--tamano-texto-lg);
}
.tarjeta--kpi .tarjeta__descripcion {
    margin: 0;
    color: var(--color-texto-secundario);
    font-size: var(--tamano-texto-sm);
}
.kpi-cifras {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--espacio-2);
    text-align: center;
}
.kpi-cifras__etiqueta {
    display: block;
    font-size: var(--tamano-texto-xs);
    color: var(--color-texto-secundario);
    text-transform: uppercase;
}
.kpi-cifras__valor {
    display: block;
    font-size: var(--tamano-texto-lg);
    color: var(--color-marron-profundo);
    font-weight: 700;
}

/* Tabla de asistencia */
.tabla--asistencia select.campo--select {
    padding: var(--espacio-1) var(--espacio-2);
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-sm);
    font-size: var(--tamano-texto-sm);
}

/* Responsive */
@media (max-width: 600px) {
    .kpi-grupo {
        grid-template-columns: 1fr 1fr !important;
    }
    .ranking-item {
        flex-wrap: wrap;
    }
    .grafico-barras { height: 150px; }
}