/* Aula virtual (Fase 17): página que embebe la videoconferencia.
   El iframe manda: ocupa todo el alto disponible y el resto se apoya. */

.sesion-aula__video {
    width: 100%;
    /* Alto de la ventana menos cabecera y notas, con suelo para que en
       pantallas cortas el vídeo no quede reducido a una franja. */
    height: clamp(320px, calc(100vh - 260px), 900px);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-gray-900);
}

.sesion-aula__video iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.sesion-aula__nota {
    margin-top: var(--space-3);
    color: var(--color-gray-400);
    font-size: var(--text-sm);
}

/* El aviso de grabación tiene que verse antes de entrar, no después. */
.sesion-aula__grabacion {
    margin-bottom: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-warning, #d97706);
    background: color-mix(in srgb, var(--color-warning, #d97706) 12%, transparent);
    font-weight: 600;
}

.sesion-aula__aviso,
.sesion-aula__resumen,
.sesion-aula__externa,
.sesion-aula__error {
    max-width: 46rem;
    padding: var(--space-6);
}

.sesion-aula__aviso h2,
.sesion-aula__resumen h2 {
    margin-bottom: var(--space-4);
}

.sesion-aula__aviso p,
.sesion-aula__resumen p,
.sesion-aula__externa p {
    margin-bottom: var(--space-3);
    line-height: 1.6;
}

.sesion-aula__aviso .btn,
.sesion-aula__externa .btn {
    margin-top: var(--space-2);
}

.sesion-aula__dato {
    font-size: var(--text-lg);
}

.sesion-aula__dato .badge {
    margin-left: var(--space-2);
}

/* En móvil el vídeo va a pantalla completa: en una franja pequeña no se sigue
   una clase. La cabecera queda accesible para poder salir. */
@media (max-width: 768px) {
    .sesion-aula__video {
        height: calc(100dvh - var(--mobile-navbar-height, 56px) - 120px);
        min-height: 60dvh;
        border-radius: var(--radius-md);
        margin-inline: calc(-1 * var(--space-4));
        width: calc(100% + var(--space-8));
        padding-bottom: env(safe-area-inset-bottom);
    }

    .sesion-aula__aviso,
    .sesion-aula__resumen,
    .sesion-aula__externa,
    .sesion-aula__error {
        padding: var(--space-4);
    }
}

/* Panel en vivo de la tutoría ------------------------------------------- */

.panel-sesion__cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

.panel-sesion__acciones {
    display: flex;
    gap: var(--space-2);
}

/* Estado del stream: si el panel deja de recibir, tiene que verse. Un dato
   congelado sin avisar es peor que no mostrar nada. */
.panel-sesion__conexion {
    margin-left: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-gray-400);
}

.panel-sesion__conexion.is-vivo { color: var(--color-success, #16a34a); }
.panel-sesion__conexion.is-caido { color: var(--color-warning, #d97706); }

.panel-sesion__punto {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: var(--space-2);
    background: var(--color-gray-400);
}

.panel-sesion__punto.is-dentro { background: var(--color-success, #16a34a); }

.panel-sesion__tiempo {
    font-variant-numeric: tabular-nums;
}

.panel-sesion__resumen,
.panel-sesion__nota {
    margin-bottom: var(--space-3);
}

.panel-sesion__nota {
    margin-top: var(--space-4);
    color: var(--color-gray-400);
    font-size: var(--text-sm);
}

@media (max-width: 768px) {
    .panel-sesion__cabecera {
        flex-direction: column;
        align-items: flex-start;
    }

    .panel-sesion__acciones {
        width: 100%;
    }

    .panel-sesion__acciones .btn {
        flex: 1;
    }
}

/* Cuenta atrás previa a la apertura de la ventana de acceso. */
.sesion-aula__cuenta {
    margin-top: var(--space-3);
    font-size: var(--text-lg);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* Grabación publicada en la sesión finalizada. */
.sesion-aula__grabacion-video {
    margin-top: var(--space-5);
}

.sesion-aula__grabacion-video h3 {
    margin-bottom: var(--space-3);
}

.sesion-aula__grabacion-video video {
    width: 100%;
    max-height: 60vh;
    border-radius: var(--radius-md);
    background: var(--color-gray-900);
}