/* ==========================================================================
   EntrenaLIF — estilos del conector (entrenalif-app.js). No son parte de la
   entrega de Design: contenedor de la vista y panel "Estudiar spot".
   Ubicación: /css/entrenalif/entrenalif-host.css
   ========================================================================== */

/* Contenedor de la vista. El alto lo fija entrenalif-app.js según la pantalla. */
.el-host{display:block;min-height:540px;margin-top:-16px}
.el-host.el-app:not(.is-mesa-movil){padding-top:12px}

/* Panel de estudio: LIF Ranges encima de la mesa, sin salir de la mano. */
.el-estudio{position:fixed;inset:0;z-index:9200;display:flex;flex-direction:column;background:var(--navy-900,#081226);color:var(--texto-principal,#e0f7fa);outline:none;animation:elFade .2s ease-out}
.el-estudio__barra{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--borde,rgba(255,255,255,.12));background:var(--superficie-panel,#0B1731)}
.el-estudio__titulo{display:inline-flex;align-items:center;gap:10px;font:400 22px/1 var(--fuente-titulo,'Bebas Neue',sans-serif);letter-spacing:.06em;text-transform:uppercase;color:var(--texto-suave,#8FA8C8)}
.el-estudio__cerrar{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 18px;border:1px solid var(--lif-celeste,#6ECFF0);border-radius:6px;background:var(--lif-azul,#1481C0);color:#fff;font:700 15px/1.2 var(--fuente-texto,'Montserrat',sans-serif);cursor:pointer}
.el-estudio__cerrar:hover{filter:brightness(1.1)}
.el-estudio__cerrar:focus-visible{outline:2px solid var(--acento,#6ECFF0);outline-offset:2px}
.el-estudio__cuerpo{position:relative;flex:1;min-height:0;overflow:auto;padding:16px}
/* Mientras carga LIF Ranges: el logo que brilla (lif-components.css) tapa lo que se va armando */
.el-estudio__carga{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:var(--navy-900,#081226);font-size:16px;color:var(--texto-secundario,#B8CCE0)}
.el-estudio__logo{--lif-loader-size:72px;margin-bottom:6px}
@media (max-width:600px){
  .el-estudio__barra{padding:8px 10px}
  .el-estudio__titulo{font-size:18px}
  .el-estudio__cuerpo{padding:8px}
}

/* ==========================================================================
   Celular
   ========================================================================== */

/* Configuración y resumen: sin alto fijo, scrollea la página (una sola barra) y se aprovecha el ancho. */
@media (max-width:700px){
  .el-host:not(.is-mesa-movil){height:auto;min-height:0;overflow:visible;margin-top:-16px}
  .el-host.el-app:not(.is-mesa-movil){padding:8px 0 16px}
}

/* Mesa: pantalla completa, como una app. entrenalif-app.js mueve el contenedor al <body> mientras dura. */
.el-host.is-mesa-movil{position:fixed;inset:0;z-index:9100;width:auto;max-width:600px;height:auto!important;min-height:0;margin:0 auto;padding-bottom:env(safe-area-inset-bottom,0px);background:var(--navy-900,#081226);box-shadow:0 0 0 100vmax var(--navy-900,#081226);overscroll-behavior:contain;touch-action:manipulation}

/* El resto de la mesa en celular (feedback compacto, pie fijo, scroll del panel) vive en entrenalif.css desde la v2 de Design. */

/* ==========================================================================
   Card "Tu repaso de hoy" en el Menú Principal (solo alumnos)
   El componente es de Design (repaso-hoy.js/.css). Se monta dentro de una card nativa
   del hub y se le saca el fondo propio, así el color es el de las demás cards.
   (La franja anterior, entrenalif-repaso-card.js/.css, se borró el 19/10.)
   ========================================================================== */
.hub-repaso{display:block;margin:0 0 20px;text-align:left;cursor:default}
.hub-repaso[hidden]{display:none!important}
/* Sin padding en la card del hub (las zonas ya tienen) y
   sin la línea celeste propia (la card del hub ya tiene una). */
.hub-repaso--rh{padding:0}
.hub-repaso>.rh-host>.rh{background:none;border:0;border-radius:0;box-shadow:none}
.hub-repaso>.rh-host>.rh::before{display:none}