/*
 * QUIOS OTEC — hoja propia de la marca en el aula (demo).
 *
 * Viste el aula con la misma identidad de la pagina (clientes/quios/index.php, v2.1):
 * papel blanco frio, tinta, vino como unico color de marca y lavanda solo sobre fondo
 * oscuro; Schibsted Grotesk en titulos y Atkinson Hyperlegible Next en el texto, las dos
 * autoalojadas. Se carga despues de las hojas del producto y solo cambia la apariencia.
 * Los colores de estado (aprobado, en curso, no aprobado, error) no se tocan.
 *
 * Contrastes: blanco sobre vino #6B1F45 11,4:1; lavanda #DCD0F2 sobre vino 7,5:1;
 * tinta-2 #544C5B sobre papel 7,9:1; #B9B1C2 sobre tinta #1D1722 8,3:1.
 */

@font-face {
  font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(fonts/schibsted-grotesk-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(fonts/atkinson-next-latin.woff2) format("woff2");
}

:root {
  --q-papel: #FBFAFC;
  --q-niebla: #F2EEF4;
  --q-linea: #E3DCE6;
  --q-tinta: #1D1722;
  --q-tinta-2: #544C5B;
  --q-vino: #6B1F45;
  --q-vino-2: #521635;
  --q-vino-tenue: #F5EAF0;
  --q-lavanda: #DCD0F2;

  --color-fondo: var(--q-papel);
  --color-superficie: #FFFFFF;
  --color-superficie-alt: #FAF8FB;
  --color-borde: var(--q-linea);
  --color-borde-fuerte: #CBC1D0;
  --color-texto: var(--q-tinta);
  --color-texto-suave: var(--q-tinta-2);

  --radio: 14px;
  --radio-chico: 8px;
  --sombra: none;
  --sombra-alta: 0 2px 6px rgba(29, 23, 34, .06), 0 14px 32px rgba(29, 23, 34, .08);
}

body {
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(107, 31, 69, .12);
}

h1, h2, h3,
.titulo-seccion,
.curso-titulo {
  font-family: var(--fuente-titulo);
  font-weight: 750;
  letter-spacing: -.02em;
  color: var(--q-tinta);
}

h1 { font-weight: 800; letter-spacing: -.03em; }

a { color: var(--q-vino); }
a:hover { color: var(--q-vino-2); }

/* Rotulos chicos sobre los titulos, como en la pagina */
.antetitulo,
.curso-categoria {
  font-family: var(--fuente);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--q-vino);
}

/* ------------------------------------------------------------------ */
/* Botones                                                             */
/* ------------------------------------------------------------------ */

button,
.boton {
  font-weight: 700;
  font-size: 15.5px;
  padding: .65rem 1.35rem;
  transition: background .15s, color .15s, border-color .15s;
}

.boton-secundario {
  background: transparent;
  color: var(--q-tinta);
  border: 2px solid var(--q-tinta);
}

.boton-secundario:hover {
  background: var(--q-tinta);
  border-color: var(--q-tinta);
  color: #fff;
}

.boton-pequeno {
  font-size: 14px;
  min-height: 40px;
}

input[type="text"],
input[type="email"],
input[type="date"],
input[type="number"],
input[type="password"],
select,
textarea {
  border: 1.5px solid #C4BACB;
  background: var(--q-papel);
}

input:focus,
select:focus,
textarea:focus {
  outline: 3px solid var(--q-lavanda);
  border-color: var(--q-vino);
}

/* ------------------------------------------------------------------ */
/* Barra superior (sitio y panel)                                      */
/* ------------------------------------------------------------------ */

.barra-superior {
  background: var(--q-papel);
  border-top: 0;
  border-bottom: 1px solid var(--q-linea);
  padding-top: .9rem;
  padding-bottom: .9rem;
  /* alinea logo y sesion con el contenido (main.contenedor: --ancho centrado + 1.25rem) */
  padding-left: max(1.25rem, env(safe-area-inset-left), calc((100% - var(--ancho)) / 2 + 1.25rem));
  padding-right: max(1.25rem, env(safe-area-inset-right), calc((100% - var(--ancho)) / 2 + 1.25rem));
}

.barra-superior .logo-marca {
  height: 60px;   /* como la pagina: 44 px en el telefono, mas en pantalla ancha */
  margin: -.25rem 0;
}

.barra-superior nav a {
  color: var(--q-tinta);
  font-weight: 700;
  font-size: 15px;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  padding: .5rem .15rem;
  margin: 0 .55rem;
}

.barra-superior nav a:hover {
  background: transparent;
  color: var(--q-vino);
  border-bottom-color: var(--q-vino);
}

.barra-superior nav a.activo {
  background: transparent;
  color: var(--q-vino);
  border-bottom-color: var(--q-vino);
}

.usuario-sesion { color: var(--q-tinta-2); }

/* El panel se distingue con un filete vino arriba. */
.barra-admin {
  border-top: 3px solid var(--q-vino);
}

.marca-sufijo {
  color: var(--q-tinta-2);
  border-left-color: var(--q-linea);
}

@media (max-width: 640px) {
  .barra-superior .logo-marca { height: 44px; margin: 0; }
  .barra-superior nav {
    gap: 0;
    scrollbar-width: none;
  }
  .barra-superior nav::-webkit-scrollbar { display: none; }
  .barra-superior nav a {
    font-size: 14.5px;
    margin: 0 .5rem 0 0;
    padding: .45rem .1rem;
  }
  .barra-superior nav a + a { margin-left: .6rem; }
}

/* ------------------------------------------------------------------ */
/* Portada del aula                                                    */
/* ------------------------------------------------------------------ */

.portada {
  background: var(--q-papel);
  border-bottom: 0;
}

.portada .interior {
  padding-top: 2rem;
  padding-bottom: 1rem;
}

.portada-con-foto {
  display: grid;
  gap: 1.75rem;
}

.portada-con-foto > * { min-width: 0; }

.portada h1 {
  font-family: var(--fuente-titulo);
  font-size: clamp(2.1rem, 9vw, 3.6rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.035em;
  max-width: 16ch;
  margin-bottom: 1rem;
}

.portada .antetitulo { margin-bottom: .8rem; }

.portada .bajada-portada {
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--q-tinta-2);
  max-width: 50ch;
}

.acciones-portada .boton { min-height: 52px; padding-left: 1.6rem; padding-right: 1.6rem; }

.puntos-portada {
  border-top: 1px solid var(--q-linea);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.puntos-portada li { border-left: 3px solid var(--q-vino); }
.puntos-portada strong { font-family: var(--fuente-titulo); font-size: 1.02rem; letter-spacing: -.01em; }
.puntos-portada span { color: var(--q-tinta-2); }

.portada-foto { margin: 0; }

.portada-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 35% 50%;
  border-radius: 14px;
  background: var(--q-niebla);
}

@media (max-width: 640px) {
  .portada .interior { padding-top: 1.5rem; padding-bottom: .5rem; }
  .acciones-portada { display: grid; grid-template-columns: 1fr; }
}

@media (min-width: 960px) {
  .portada .interior { padding-top: 3.5rem; padding-bottom: 1.5rem; }
  .portada-con-foto {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 3.5rem;
    align-items: center;
  }
  .portada-foto img { aspect-ratio: 1 / 1; object-position: 28% 50%; }
}

/* ------------------------------------------------------------------ */
/* Contenedor y tarjetas                                               */
/* ------------------------------------------------------------------ */

main.contenedor { padding-top: 2.25rem; }

.encabezado-pagina h1,
.titulo-seccion {
  font-size: clamp(1.75rem, 6.5vw, 2.4rem);
  line-height: 1.1;
}

p.subtitulo { color: var(--q-tinta-2); }

.tarjeta {
  border-color: var(--q-linea);
  box-shadow: none;
}

.tarjeta h2 { font-size: 1.3rem; }

.migas a { color: var(--q-vino); font-weight: 700; }

.chip-modalidad,
.chip-tipo,
.chip-estado-leccion {
  background: var(--q-niebla);
  border-color: var(--q-linea);
  color: var(--q-tinta-2);
}

.chip-online,
.chip-presencial {
  background: var(--q-vino-tenue);
  border-color: #DDC3D0;
  color: var(--q-vino);
}

.aviso-cuenta { border-left: 4px solid var(--q-vino); }

/* ------------------------------------------------------------------ */
/* Catalogo y "Mis cursos": tarjetas como las de la pagina             */
/* ------------------------------------------------------------------ */

.grid-cursos { gap: 1.25rem; }

@media (min-width: 760px) {
  .grid-cursos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
}

.tarjeta-curso,
.tarjeta-curso.es-online,
.tarjeta-curso.es-presencial {
  border: 1px solid var(--q-linea);
  border-top: 3px solid var(--q-vino);
  box-shadow: none;
  padding: 1.5rem 1.4rem 1.4rem;
  transition: box-shadow .15s;
}

.tarjeta-curso:hover { box-shadow: var(--sombra-alta); border-color: var(--q-linea); border-top-color: var(--q-vino); }

.curso-titulo { font-size: 1.4rem; line-height: 1.18; }
.curso-titulo a { color: var(--q-tinta); }
.curso-titulo a:hover { color: var(--q-vino); }

.curso-datos { border-top-color: var(--q-linea); }

@media (min-width: 960px) {
  .tarjeta-curso { padding: 1.9rem 2rem 1.75rem; }
  .curso-titulo { font-size: 1.55rem; }
}

/* ------------------------------------------------------------------ */
/* Cabecera de curso, leccion y actividad                              */
/* Por defecto: banda gris lila con filete vino. En la ficha del curso */
/* (publica y del alumno) pasa a ser la "portada" del curso en vino,    */
/* el mismo tratamiento de la seccion Empresas de la pagina.           */
/* ------------------------------------------------------------------ */

.cabecera-curso {
  background: var(--q-niebla);
  border-left: 4px solid var(--q-vino);
  border-radius: 0 14px 14px 0;
  padding: 1.4rem 1.4rem 1.5rem;
}

.cabecera-curso h1 {
  font-size: clamp(1.6rem, 6vw, 2.25rem);
  line-height: 1.1;
  margin-bottom: 0;
}

.cabecera-curso .chips { margin-top: 1rem; }

.cabecera-curso:has(+ [aria-labelledby="datos-curso"]),
.cabecera-curso:has(+ [aria-labelledby="mi-avance"]) {
  background: var(--q-vino);
  border-left: 0;
  border-radius: 14px;
  padding: 2rem 1.4rem 2.1rem;
  color: #fff;
}

.cabecera-curso:has(+ [aria-labelledby="datos-curso"]) h1,
.cabecera-curso:has(+ [aria-labelledby="mi-avance"]) h1 {
  color: #fff;
  font-size: clamp(1.9rem, 7.5vw, 3rem);
  line-height: 1.05;
  max-width: 18ch;
}

.cabecera-curso:has(+ [aria-labelledby="datos-curso"]) .curso-categoria,
.cabecera-curso:has(+ [aria-labelledby="mi-avance"]) .curso-categoria {
  color: var(--q-lavanda);
}

.cabecera-curso:has(+ [aria-labelledby="datos-curso"]) .chip-modalidad {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .4);
  color: #fff;
}

@media (min-width: 960px) {
  .cabecera-curso { padding: 1.75rem 2rem 1.9rem; }
  .cabecera-curso:has(+ [aria-labelledby="datos-curso"]),
  .cabecera-curso:has(+ [aria-labelledby="mi-avance"]) { padding: 3rem 2.75rem 3.1rem; }
}

/* ------------------------------------------------------------------ */
/* Temario, avance y leccion                                           */
/* ------------------------------------------------------------------ */

.leccion-numero {
  background: var(--q-niebla);
  border-color: var(--q-linea);
  color: var(--q-tinta-2);
  font-family: var(--fuente-titulo);
}

.leccion-enlace:hover .leccion-titulo { color: var(--q-vino); }

.barra-progreso {
  background: var(--q-niebla);
  border-color: var(--q-linea);
}

.barra-progreso-relleno { background: var(--q-vino); }

.progreso-grande { font-family: var(--fuente-titulo); }

.lista-lateral a:hover { background: var(--q-niebla); }

.lista-lateral .actual a {
  background: var(--q-vino-tenue);
  color: var(--q-vino);
}

.texto-leccion {
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--q-tinta);
}

@media (min-width: 900px) {
  .contenido-leccion { padding: 2rem 2.25rem; }
}

/* ------------------------------------------------------------------ */
/* Ingresos (alumno y administracion)                                  */
/* ------------------------------------------------------------------ */

.pagina-login {
  background: var(--q-niebla);
}

.caja-login {
  border: 1px solid var(--q-linea);
  border-top: 3px solid var(--q-vino);
  border-radius: 14px;
  box-shadow: var(--sombra-alta);
  padding: 2.1rem 1.75rem 1.9rem;
}

.caja-login .logo-marca { height: 64px; }
.caja-login .marca-login { margin-bottom: 1.1rem; }

.caja-login h1 {
  font-size: 1.6rem;
  line-height: 1.15;
}

.caja-login .subtitulo { color: var(--q-tinta-2); font-size: .95rem; }
.caja-login button { min-height: 50px; font-size: 16px; }

/* Ingreso de alumnos con foto: arriba en el telefono, a la izquierda en pantalla ancha. */
.login-con-foto {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  justify-items: center;
  padding: 0 0 2.5rem;
  background: var(--q-niebla);
}

.login-foto {
  margin: 0;
  width: 100%;
  height: 220px;
  overflow: hidden;
}

.login-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 55%;
}

.login-con-foto .caja-login {
  position: relative;
  width: calc(100% - 2rem);
  margin-top: -3rem;
}

@media (min-width: 900px) {
  .login-con-foto {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-content: stretch;
    align-items: center;
    padding: 0;
    min-height: 100vh;
  }
  .login-foto {
    position: relative;
    height: 100%;
    min-height: 100vh;
    align-self: stretch;
  }
  .login-foto img {
    position: absolute;
    inset: 0;
    object-position: 38% 50%;
  }
  .login-con-foto .caja-login {
    width: calc(100% - 4rem);
    max-width: 420px;
    margin: 3rem auto;
  }
}

/* ------------------------------------------------------------------ */
/* Verificar diploma                                                   */
/* ------------------------------------------------------------------ */

.cabecera-publica {
  background: var(--q-papel);
  border-top: 3px solid var(--q-vino);
  border-bottom: 1px solid var(--q-linea);
}

.cabecera-publica .logo-marca { height: 60px; }

.cabecera-publica h1 {
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  line-height: 1.1;
}

.cabecera-publica .bajada { color: var(--q-tinta-2); }

@media (max-width: 640px) {
  .cabecera-publica .logo-marca { height: 44px; }
}

/* ------------------------------------------------------------------ */
/* Pie oscuro, como el de la pagina                                    */
/* ------------------------------------------------------------------ */

.pie-sitio {
  background: var(--q-tinta);
  border-top: 0;
  color: #B9B1C2;
  padding-top: 2.5rem;
  padding-bottom: max(2.25rem, env(safe-area-inset-bottom));
}

.pie-sitio .logo-pie {
  display: inline-block;
  height: 58px;
  width: auto;
  margin-bottom: .5rem;
}

.pie-sitio .nombre-pie {
  color: #fff;
  font-family: var(--fuente-titulo);
}

.pie-sitio a { color: #E7E1EC; }

.pie-sitio a:hover { color: #fff; }

/* ------------------------------------------------------------------ */
/* Panel: tarjetas de resumen y accesos                                */
/* ------------------------------------------------------------------ */

.tarjeta-resumen { border-left-color: var(--q-vino); box-shadow: none; }
.tarjeta-resumen .numero { font-family: var(--fuente-titulo); }

.accesos a { box-shadow: none; }
.accesos a:hover { border-color: var(--q-vino); }

/* Diploma: logo en una linea (logo_diploma), un poco mas bajo que el de base para que no domine la hoja. */
.diploma-logo { height: .5in; }
@media screen and (max-width: 1110px) { .diploma-logo { height: 40px; } }

@media (prefers-reduced-motion: reduce) {
  button, .boton, .tarjeta-curso { transition: none; }
}