/* Student View */
.perfil-container {
    font-family: Arial, sans-serif;
    color: #222;
}

.responsive-container {
    max-width: 100%;
    overflow-x: hidden;
}

.perfil-nombre {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 15px;
}

.perfil-info {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    /* gap: 10px; */
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    align-items: start;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

.perfil-info div {
    font-size: 14px;
}

.perfil-info .info {
    padding: 10px 0;
    border-bottom: 1px solid #f2f2f2;
}

.perfil-info .info:nth-last-child(3),
.perfil-info .info:nth-last-child(2),
.perfil-info .info:nth-last-child(1) {
    padding: 10px 0;
    border-bottom: 0;
}

.perfil-info div:last-child {
    grid-column: 3;
    grid-row: 1 / span 8; /* Ajusta el span según la cantidad de filas necesarias */
    align-self: stretch;
    padding: 0 3px;
}

.test-container {
    margin-top: 25px;
}

.test-titulo {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #002c8c;
}

.test-card {
    flex: 2;
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

.test-descripcion-titulo,
.test-resultado-titulo {
    font-weight: bold;
    color: #002c8c;
    margin-top: 10px;
}

.test-escala-titulo {
    font-weight: bold;
    color: #0056b3;
    margin-top: 10px;
}

.test-escala-sugerencia-titulo {
    font-weight: bold;
    color: #fff;
    margin-top: 10px;
}

.test-descripcion {
    font-size: 14px;
    line-height: 1.5;
}

.test-resultado {
    display: flex;
    align-items: center;
    margin: 10px 0;
}

.test-resultado-barra {
    width: 120px;
    height: 30px;
    background: green;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    border-radius: 4px;
    margin-right: 10px;
}

.test-resultado-texto {
    font-size: 14px;
}

.test-interpretacion {
    font-size: 14px;
    line-height: 1.5;
    margin-top: 10px;
}

.sugerencias {
    flex: 1;
    background: #002c8c;
    color: #038cf5;
    padding: 15px;
    border-radius: 8px;
    max-width: 40%;
}

.sugerencias-titulo {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid white;
    color: white;
}

.sugerencias ol,
.sugerencias ul {
    list-style: auto;
    padding-left: 20px;
}

.sugerencias li {
    font-size: 14px;
    margin-bottom: 8px;
}

.sugerencias li strong {
    color: #f2f2f2;
}

.test-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-top: 25px;
    align-items: stretch;
    /* Hace que los hijos tengan la misma altura */
}

.test-card,
.sugerencias {
    display: flex;
    flex-direction: column;
    flex: 1;
    /* Asegura que ambos ocupen el mismo espacio vertical */
}

@media (max-width: 768px) {
    .test-layout {
        flex-direction: column;
    }

    .perfil-info {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .perfil-info div:last-child {
        grid-column: 1;
        grid-row: auto;
        margin-top: 20px;
    }
}

/* Media queries para tablets y pantallas medianas (720px - 1200px) */
@media (min-width: 720px) and (max-width: 1200px) {
    .perfil-info {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .perfil-info div:last-child {
        grid-column: 1;
        grid-row: auto;
        margin-top: 20px;
        align-self: center;
    }

    .test-layout {
        flex-direction: column;
        gap: 15px;
    }

    .sugerencias {
        max-width: 100%;
    }

    .test-card,
    .sugerencias {
        flex: none;
    }

    /* Ajustes para los widgets de gráficos */
    .test-card .fi-wi {
        min-height: 300px;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

/* Ajustes específicos para widgets de Filament */
@media (min-width: 720px) and (max-width: 1200px) {
    [wire\:ignore] > div {
        width: 100% !important;
        height: auto !important;
    }

    .apexcharts-canvas {
        width: 100% !important;
        height: auto !important;
    }

    .fi-wi-chart {
        height: 300px !important;
    }

    /* Estilos específicos para SemaphoreChart y otros widgets */
    .fi-widget {
        width: 100% !important;
        max-width: none !important;
    }

    .fi-widget-content {
        padding: 15px !important;
    }

    /* Ajustes para gráficos circulares y de área polar */
    .apexcharts-svg {
        height: auto !important;
        max-height: 400px !important;
    }
}

/* Dashboard */
.dashboard-grid {
    display: grid;
    grid-template-columns: 70% 30%;
    /* Define dos columnas: 70% y 30% */
    gap: 20px;
    /* Espacio entre elementos */
    width: 100%;
}

.big-widget,
.small-widget {
    background: white;
    border-radius: 8px;
}

.small-widget {
    background: #002c8c;
}

/* Hacer que los widgets ocupen toda la fila en pantallas pequeñas */
@media (max-width: 768px) {
    .dashboard-grid {
        grid-template-columns: 100%;
        /* 1 columna en móviles */
    }

    .big-widget,
    .small-widget {
        width: 100%;
    }
}

.fi-sidebar-nav {
    background-color: #001d9b;
}

.fi-sidebar-nav span,
.fi-sidebar-nav svg {
    color: white !important;
}

.fi-sidebar-item-button:hover {
    background-color: #008ff6 !important;
}

.fi-sidebar-item .bg-gray-100 {
    background-color: #008ff6 !important;
}

.fi-header-heading {
    color: #001d9b !important;
}

.test-card-outstanding {
    border: 1px solid #ddd;
    padding: 24px;
    border-radius: 12px;
    background-color: #fafafa;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin: 35px 0;
}