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

.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;
    }
}

/* 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: rgb(22, 163, 74);
}

.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: #31beb2 !important;
}

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

.fi-topbar nav {
    background-image: url("/front/images/header.jpg");
    height: 8em;
}

.fi-topbar nav img {
    display: none;
}