/* Aula virtual: mismo lenguaje del curso de referencia (tarjetas por unidad, pastillas azules y amarillas, barra naranja). */
:root {
  --azul: #0b4a8f;
  --azul-noche: #08315f;
  --azul-medio: #2a78c6;
  --amarillo: #f6b60f;
  --amarillo-claro: #ffd24a;
  --naranja: #f98012;
  --fondo: #eef1f5;
  --papel: #ffffff;
  --linea: #dde2e9;
  --tinta: #1b2a3a;
  --suave: #566374;
  --tick: #3b7cc2;
  --bien: #1c8a55;
  --bien-fondo: #e3f4ea;
  --mal: #c7382e;
  --mal-fondo: #fbe7e5;
  --letra: "Source Sans 3", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 4rem; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--letra);
  font-size: 1.0625rem;
  line-height: 1.45;
}

h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--azul); }

:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }

.saltar { position: absolute; left: -999px; top: 0; z-index: 50; padding: .5rem 1rem; background: var(--papel); }
.saltar:focus { left: .5rem; top: .5rem; }

/* ---------- Barra superior ---------- */
.barra { background: var(--azul-noche); color: #fff; padding-top: env(safe-area-inset-top, 0); }
.barra__interior { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 76rem; margin: 0 auto; padding: .7rem 1rem; }
.marca { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; font-size: 1.15rem; }
.marca svg { width: 1.6rem; height: 1.6rem; fill: var(--amarillo); }
.barra__acceso { font-size: .9rem; color: #cfe0f3; }

/* ---------- Cabecera del curso ---------- */
.pagina { max-width: 76rem; margin: 0 auto; padding: 0 0 2rem; }
.cabecera { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem; background: var(--papel); }
.cabecera__foto { flex: none; width: 4.5rem; height: 4.5rem; background: linear-gradient(160deg, var(--azul-medio), var(--azul)); overflow: hidden; }
.cabecera__foto svg { display: block; width: 100%; height: 100%; fill: #06305c; }
.cabecera__texto { flex: 1; min-width: 0; }
.cabecera h1 { font-size: 1.15rem; line-height: 1.25; font-weight: 700; text-wrap: balance; }
.cabecera__programa { margin-top: .15rem; color: var(--suave); font-size: .95rem; }
.progreso { display: flex; align-items: center; gap: .6rem; margin-top: .6rem; }
.progreso__pista { flex: 1; height: .5rem; border-radius: 1rem; background: #e6e9ee; overflow: hidden; }
.progreso__pista span { display: block; height: 100%; width: 0; border-radius: 1rem; background: var(--naranja); transition: width .3s ease; }
.progreso__dato { font-size: .9rem; font-weight: 600; color: var(--suave); font-variant-numeric: tabular-nums; }

/* ---------- Pestañas ---------- */
.pestanas { position: sticky; top: 0; z-index: 10; display: flex; gap: .25rem; overflow-x: auto; background: var(--papel); border-bottom: 1px solid var(--linea); scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas a { flex: none; padding: .8rem 1rem; color: var(--suave); text-decoration: none; font-weight: 600; border-bottom: 3px solid transparent; }
.pestanas a.activa { color: var(--tinta); border-bottom-color: var(--naranja); }

.diseno { padding: 1rem .75rem 0; }
.indice { display: none; }

/* ---------- Secciones ---------- */
.seccion { background: var(--papel); border: 1px solid var(--linea); border-radius: .85rem; margin-bottom: 1rem; scroll-margin-top: 4rem; }
.seccion__titulo { display: flex; align-items: flex-start; gap: .55rem; padding: .95rem 1rem; font-size: 1.15rem; font-weight: 700; line-height: 1.25; cursor: pointer; list-style: none; }
.seccion__titulo::-webkit-details-marker { display: none; }
.seccion__titulo svg { flex: none; width: 1.3rem; height: 1.3rem; margin-top: .05rem; fill: none; stroke: var(--tinta); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transform: rotate(-90deg); transition: transform .18s ease; }
.seccion[open] > .seccion__titulo svg { transform: none; }

.item { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem 1rem; border-top: 1px solid var(--linea); }

/* Pastillas: el botón brillante con disco plateado del curso de referencia */
.pastilla {
  position: relative;
  display: flex;
  align-items: center;
  gap: .7rem;
  flex: 0 1 19rem;
  min-width: 0;
  min-height: 3.6rem;
  padding: .28rem 1.6rem .28rem .28rem;
  border: 1px solid rgba(8, 49, 95, .28);
  border-radius: 999px;
  text-align: left;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 2px 5px rgba(8, 49, 95, .28);
  transition: transform .12s ease, box-shadow .12s ease;
}
.pastilla::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 2.6rem; border-radius: 0 999px 999px 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(226, 231, 238, .95) 80%); pointer-events: none; }
.pastilla:hover { transform: translateY(-1px); box-shadow: 0 4px 9px rgba(8, 49, 95, .32); }
.pastilla:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(8, 49, 95, .3); }
.pastilla--amarilla { background: linear-gradient(180deg, var(--amarillo-claro), var(--amarillo) 55%, #e6a300); color: var(--azul-noche); }
.pastilla--azul { background: linear-gradient(180deg, var(--azul-medio), #105aa6 55%, var(--azul)); color: #fff; }
.pastilla__icono { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: linear-gradient(180deg, #fff, #cfd6df); box-shadow: inset 0 0 0 1px rgba(8, 49, 95, .15), 0 1px 3px rgba(0, 0, 0, .25); }
.pastilla__icono svg { width: 1.6rem; height: 1.6rem; }
.pastilla--amarilla .pastilla__icono svg { fill: #e29d00; }
.pastilla--azul .pastilla__icono svg { fill: var(--azul); }
.pastilla__texto { position: relative; z-index: 1; flex: 1; min-width: 0; text-align: center; line-height: 1.15; }

.fila { display: flex; align-items: center; gap: .7rem; flex: 1; min-width: 0; padding: .1rem 0; background: none; border: 0; color: var(--tinta); text-align: left; text-decoration: none; }
.fila:hover .fila__titulo { color: var(--azul); text-decoration: underline; }
.fila__icono { flex: none; width: 1.75rem; height: 1.75rem; }
.fila__icono svg { display: block; width: 100%; height: 100%; }
.fila__textos { display: flex; flex-direction: column; min-width: 0; }
.fila__titulo { font-weight: 600; }
.fila__nota { font-size: .92rem; color: var(--suave); }

.tick { flex: none; width: 1.35rem; height: 1.35rem; margin: 0; accent-color: var(--tick); cursor: pointer; }

/* ---------- Paneles ---------- */
.panel { background: var(--papel); border: 1px solid var(--linea); border-radius: .85rem; padding: 1.1rem 1rem; }
.panel h2 { font-size: 1.3rem; margin-bottom: .75rem; }
.panel__nota { margin-top: .85rem; color: var(--suave); font-size: .95rem; }

.persona { display: flex; align-items: center; gap: .75rem; padding: .65rem 0; border-top: 1px solid var(--linea); }
.persona__avatar { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--azul); color: #fff; font-weight: 700; font-size: .95rem; }
.persona__nombre { font-weight: 600; }
.persona__rol { color: var(--suave); font-size: .95rem; }

.tabla-envoltura { overflow-x: auto; }
.tabla { width: 100%; min-width: 26rem; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabla th, .tabla td { padding: .65rem .5rem; text-align: left; border-top: 1px solid var(--linea); }
.tabla th { border-top: 0; color: var(--suave); font-weight: 600; }

.herramientas__grupo { margin: 1.3rem 0 .3rem; font-size: 1.08rem; }
.herramienta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; padding: .7rem 0; border-top: 1px solid var(--linea); }
.herramienta > div:first-child { flex: 1 1 16rem; min-width: 0; }
.herramienta__nombre { font-weight: 700; }
.herramienta__uso { color: var(--suave); }
.herramienta__acciones { display: flex; flex-wrap: wrap; gap: .4rem; }

/* ---------- Botones y opciones ---------- */
.boton { display: inline-block; padding: .65rem 1.15rem; border: 1px solid var(--azul); border-radius: .5rem; background: var(--azul); color: #fff; font-weight: 700; text-decoration: none; text-align: center; }
.boton:hover { background: var(--azul-noche); }
.boton--borde { background: var(--papel); color: var(--azul); }
.boton--borde:hover { background: #e7effa; }
.boton--chico { padding: .4rem .8rem; font-size: .95rem; }

.opcion { display: block; width: 100%; padding: .8rem .9rem; background: var(--papel); border: 1px solid #c8d0db; border-radius: .55rem; color: var(--tinta); text-align: left; }
.opcion:hover:not(:disabled) { border-color: var(--azul); background: #f1f6fc; }
.opcion:disabled { cursor: default; color: var(--tinta); }
.opcion--bien { background: var(--bien-fondo); border-color: var(--bien); font-weight: 600; }
.opcion--mal { background: var(--mal-fondo); border-color: var(--mal); }

/* ---------- Ventana emergente ---------- */
.modal { width: min(38rem, calc(100vw - 1.5rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 0; border-radius: .85rem; color: var(--tinta); }
.modal::backdrop { background: rgba(8, 28, 52, .55); }
.modal__cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem .7rem; border-bottom: 1px solid var(--linea); }
.modal__cabecera h2 { font-size: 1.25rem; line-height: 1.25; }
.modal__cerrar { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; background: none; border: 0; border-radius: 50%; }
.modal__cerrar:hover { background: var(--fondo); }
.modal__cerrar svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: var(--tinta); stroke-width: 2.2; stroke-linecap: round; }
.modal__cuerpo { padding: 1rem 1.1rem 1.25rem; }

.prosa { display: grid; gap: .7rem; justify-items: start; max-width: 65ch; }
.prosa ol { list-style: decimal; padding-left: 1.3rem; display: grid; gap: .35rem; }
.prosa__destacado { font-size: 1.2rem; font-weight: 700; }

.cuestionario { display: grid; gap: .8rem; justify-items: start; }
.cuestionario__paso { color: var(--suave); font-size: .95rem; font-variant-numeric: tabular-nums; }
.cuestionario__pregunta { font-size: 1.15rem; font-weight: 600; line-height: 1.3; }
.cuestionario__opciones { display: grid; gap: .5rem; width: 100%; }
.cuestionario__explicacion { padding: .7rem .85rem; border-radius: .55rem; background: var(--bien-fondo); }
.cuestionario__explicacion--mal { background: var(--mal-fondo); }

.pie { padding: 1.2rem 1rem 1.6rem; text-align: center; color: var(--suave); font-size: .92rem; }

/* ---------- Interacción en vivo: pensada para proyector ---------- */
.envivo { min-height: 100dvh; display: flex; flex-direction: column; gap: .9rem; padding: max(.9rem, env(safe-area-inset-top)) 1rem 1.2rem; background: var(--azul-noche); color: #fff; }
.envivo__cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.envivo__cabecera-acciones { display: flex; flex-wrap: wrap; gap: .5rem; }

.chip { display: inline-block; padding: .5rem .95rem; border: 1px solid var(--amarillo); border-radius: 999px; background: var(--amarillo); color: var(--azul-noche); font-weight: 700; text-decoration: none; }
.chip:hover { background: var(--amarillo-claro); }
.chip--borde { background: transparent; border-color: #7fa6d1; color: #fff; }
.chip--borde:hover { background: rgba(255, 255, 255, .12); }

.envivo__pestanas { display: flex; gap: .3rem; overflow-x: auto; border-bottom: 1px solid rgba(255, 255, 255, .22); }
.envivo__pestana { flex: none; padding: .55rem .95rem; background: none; border: 0; border-bottom: 3px solid transparent; color: #cfe0f3; font-weight: 600; }
.envivo__pestana.activa { color: #fff; border-bottom-color: var(--amarillo); }

.envivo__cuerpo { flex: 1; display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
.envivo__pregunta { font-size: clamp(1.5rem, 3.2vw, 2.6rem); line-height: 1.15; text-wrap: balance; }
.envivo__resultados { margin-top: 1.2rem; }
.envivo__espera { color: #cfe0f3; font-size: 1.15rem; }

.envivo__lateral { display: flex; flex-direction: column; gap: .6rem; align-items: stretch; }
.envivo__qr { width: min(15rem, 70vw); align-self: center; background: #fff; border-radius: .6rem; padding: .5rem; }
.envivo__qr:empty { display: none; }
.envivo__qr svg { display: block; width: 100%; height: auto; }
.envivo__instruccion { text-align: center; color: #cfe0f3; }
.envivo__enlace { text-align: center; font-weight: 700; overflow-wrap: anywhere; }
.envivo__cuenta { text-align: center; font-size: 1.5rem; font-weight: 700; color: var(--amarillo); font-variant-numeric: tabular-nums; }
.envivo__controles { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.envivo__aviso { padding: .6rem .75rem; border-radius: .5rem; background: rgba(246, 182, 15, .16); color: #ffe7a6; }
.envivo__pin { width: 100%; display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; justify-content: center; }
.envivo__pin label { width: 100%; text-align: center; }
.envivo__pin input, .envivo__formulario input { flex: 1; min-width: 0; padding: .45rem .7rem; border: 1px solid #7fa6d1; border-radius: .45rem; background: #fff; color: var(--tinta); }
.envivo__pin-aviso { width: 100%; text-align: center; color: #ffc9c3; }
.envivo__manual summary { cursor: pointer; text-align: center; color: #cfe0f3; }
.envivo__manual-cuerpo { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.envivo__formulario { display: flex; gap: .4rem; width: 100%; }

.nube { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem 1.1rem; min-height: 12rem; }
.nube__palabra { font-weight: 700; line-height: 1.1; overflow-wrap: anywhere; }
.nube__palabra--0 { color: #fff; }
.nube__palabra--1 { color: var(--amarillo-claro); }
.nube__palabra--2 { color: #8ec5ff; }

.barras { display: grid; gap: .85rem; }
.barra-dato__cabecera { display: flex; justify-content: space-between; gap: 1rem; font-size: clamp(1.02rem, 1.6vw, 1.3rem); }
.barra-dato__cifra { font-weight: 700; font-variant-numeric: tabular-nums; }
.barra-dato__pista { height: 1.15rem; margin-top: .25rem; border-radius: .4rem; background: rgba(255, 255, 255, .16); overflow: hidden; }
.barra-dato__pista span { display: block; height: 100%; background: var(--amarillo); transition: width .35s ease; }
.barra-dato--correcta .barra-dato__cabecera { color: #a5f0c6; font-weight: 700; }
.barra-dato--correcta .barra-dato__pista span { background: #4fd18b; }

.muro { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr)); }
.muro__nota { padding: .75rem .85rem; border-radius: .4rem; background: var(--amarillo-claro); color: var(--azul-noche); font-weight: 600; overflow-wrap: anywhere; }

/* ---------- Participar desde el celular ---------- */
.participar { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1.2rem 1rem 2rem; background: var(--azul-noche); }
.participar__marca { color: #fff; font-weight: 700; font-size: 1.15rem; }
.participar__tarjeta { width: min(32rem, 100%); display: grid; gap: .9rem; padding: 1.2rem 1.1rem; background: var(--papel); border-radius: .85rem; }
.participar__tipo { color: var(--suave); font-weight: 600; }
.participar__pregunta { font-size: 1.35rem; line-height: 1.25; text-wrap: balance; }
.participar__opciones { display: grid; gap: .55rem; }
.participar__formulario { display: grid; gap: .6rem; }
.participar__formulario input, .participar__formulario textarea { width: 100%; padding: .7rem .8rem; border: 1px solid #c8d0db; border-radius: .5rem; resize: vertical; }
.participar__aviso { margin-top: .6rem; color: var(--mal); }
.participar__gracias { display: grid; gap: .55rem; justify-items: start; }
.participar__ok { color: var(--bien); font-size: 1.25rem; font-weight: 700; }

/* ---------- Escritorio ---------- */
@media (min-width: 720px) {
  .cabecera { padding: 1.25rem 1.5rem; gap: 1.25rem; }
  .cabecera__foto { width: 6rem; height: 6rem; }
  .cabecera h1 { font-size: 1.5rem; }
  .progreso { max-width: 30rem; }
  .pestanas { padding: 0 .75rem; }
  .diseno { padding: 1.25rem 1.5rem 0; }
  .panel { padding: 1.3rem 1.5rem; }
  .seccion__titulo, .item { padding-left: 1.25rem; padding-right: 1.25rem; }
}

@media (min-width: 1000px) {
  .diseno { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 1.5rem; align-items: start; }
  .indice { display: block; position: sticky; top: 3.75rem; background: var(--papel); border: 1px solid var(--linea); border-radius: .85rem; padding: .9rem .6rem; }
  .indice h2 { font-size: 1.05rem; padding: 0 .55rem .45rem; }
  .indice__enlace { display: flex; justify-content: space-between; gap: .6rem; width: 100%; padding: .5rem .55rem; background: none; border: 0; border-radius: .4rem; color: var(--tinta); text-align: left; line-height: 1.25; }
  .indice__enlace:hover { background: var(--fondo); }
  .indice__cuenta { flex: none; color: var(--suave); font-size: .92rem; font-variant-numeric: tabular-nums; }

  .envivo { padding: 1.1rem 2rem 1.5rem; }
  .envivo__cuerpo { grid-template-columns: minmax(0, 1fr) 19rem; gap: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}