/* Páginas de detalle (scorm.html y plataforma.html, 2 de noviembre de 2026). Se carga después de base.css. */

/* Rise 360 frente a desarrollo a medida: dos columnas con filetes y las mismas cuatro filas, para leerlas en paralelo */
.comparacion { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.comparacion-col { display: grid; align-content: start; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.comparacion-col h3 { padding: clamp(18px, 2.4vw, 24px) clamp(20px, 2.6vw, 28px); background: var(--negro); color: #f2efdc; font-size: 1.5rem; }
.comparacion dl { margin: 0; display: grid; }
.comparacion dl > div { display: grid; gap: 6px; padding: 18px clamp(20px, 2.6vw, 28px); border-top: 1px solid var(--rule); }
.comparacion dl > div:first-child { border-top: 0; }
.comparacion dt { font: 400 .74rem/1.25 var(--font-rotulo); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.comparacion dd { margin: 0; color: var(--ink-2); line-height: 1.55; }
@media (min-width: 760px) {
  .comparacion { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Las filas de las dos columnas se alinean: cada columna es una subrejilla de las mismas filas */
  @supports (grid-template-rows: subgrid) {
    .comparacion { grid-template-rows: auto repeat(4, auto); }
    .comparacion-col { grid-row: span 5; grid-template-rows: subgrid; }
    .comparacion dl { display: contents; }
    .comparacion dl > div:first-child { border-top: 0; }
  }
}

.portada .etiqueta { color: var(--muted); }

/* Módulo con texto y maqueta, como el del campus en la portada */
.detalle-modulo { gap: clamp(20px, 3vw, 40px); align-items: center; }
.detalle-modulo p { color: var(--ink-2); max-width: 34rem; }
@media (min-width: 900px) { .detalle-modulo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }

/* Registro de una sesión (scorm.html, «Qué recibe la plataforma»): pestañas con filetes arriba, como las de
   «Muestras» en la portada (la elegida en negro con la letra amarilla), y debajo los pasos del intento: a la
   izquierda lo que hace el estudiante y a la derecha las llamadas a la plataforma, en la letra de los rótulos.
   Sin JavaScript se ven las tres sesiones seguidas, cada una con su título. */
.sesion { margin-top: clamp(28px, 4vw, 44px); border: 1px solid var(--ink); background: var(--grano) 0 0 / 512px 512px, var(--papel-claro); }
.sesion-cabecera { display: grid; gap: 8px; padding: clamp(18px, 2.6vw, 26px) clamp(18px, 2.6vw, 28px); border-bottom: 1px solid var(--ink); }
.sesion-cabecera h3 { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); }
.sesion-cabecera p { color: var(--ink-2); max-width: 46rem; }
.sesion-pestanas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--ink); overflow: hidden; }
.sesion-pestanas[hidden] { display: none; }
.sesion-pestanas button {
  min-height: 52px; margin: 0; padding: 10px 12px; border: 0; border-radius: 0; cursor: pointer; text-align: center;
  font: 400 .74rem/1.2 var(--font-rotulo); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); background: transparent;
  box-shadow: 1px 0 0 var(--ink), 0 1px 0 var(--ink); transition: background-color var(--dur-hover) ease, color var(--dur-hover) ease;
}
@media (hover: hover) and (pointer: fine) { .sesion-pestanas button:hover { background: var(--surface); } }
.sesion-pestanas button[aria-selected="true"] { color: var(--disco-a); background: var(--negro); }
.sesion-panel { padding: 0 clamp(18px, 2.6vw, 28px) 8px; }
.sesion-panel + .sesion-panel { border-top: 1px solid var(--ink); }
.sesion-titulo { padding: 18px 0 6px; font: 600 1.1rem/1.3 var(--font-titular); }
.con-pestanas .sesion-titulo [data-pestana] { display: none; }
.sesion-pasos { list-style: none; margin: 0; padding: 0; }
.sesion-pasos > li { display: grid; gap: 6px 28px; padding: 14px 0; border-top: 1px solid var(--rule); }
.sesion-pasos > li:first-child { border-top: 0; }
.sesion-paso { font-weight: 600; color: var(--ink); line-height: 1.45; }
.sesion-codigo {
  margin: 0; font: 400 .76rem/1.7 var(--font-mono); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere;
  background: none; padding: 0;
}
.sesion-codigo code { font: inherit; background: none; padding: 0; }
.sesion-vuelve { color: var(--muted); }
@media (min-width: 860px) {
  .sesion-pasos > li { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); align-items: start; }
  .sesion-paso { padding-top: 1px; }
}
@media (max-width: 559px) { .sesion-pestanas { grid-template-columns: minmax(0, 1fr); } }

/* Ficha de ajustes (plataforma.html): cabecera con su texto y, debajo, filas con filetes; el nombre del ajuste en la
   letra de los rótulos a la izquierda y el valor a la derecha desde 760 px. La cabecera lleva una franja de tinta
   arriba, como las celdas de los servicios. */
.ajustes { margin-top: clamp(28px, 4vw, 44px); border: 1px solid var(--ink); background: var(--grano) 0 0 / 512px 512px, var(--papel-claro); }
.ajustes-cabecera { display: grid; gap: 8px; padding: clamp(18px, 2.6vw, 26px) clamp(18px, 2.6vw, 28px); border-bottom: 1px solid var(--ink); }
.ajustes-cabecera::before { content: ""; height: 14px; margin: calc(-1 * clamp(18px, 2.6vw, 26px)) calc(-1 * clamp(18px, 2.6vw, 28px)) 10px; border-bottom: 1px solid var(--ink); background: url("../img/grano-tinta.webp?v=b42be2f6") 0 0 / 256px 256px, repeating-linear-gradient(-45deg, var(--tinta-naranja) 0 7px, var(--disco-a) 7px 11px); }
.ajustes-cabecera h3 { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); }
.ajustes-cabecera p { color: var(--ink-2); max-width: 46rem; }
.ajustes-lista { margin: 0; }
.ajustes-lista > div { display: grid; gap: 4px 28px; padding: 14px clamp(18px, 2.6vw, 28px); border-top: 1px solid var(--rule); }
.ajustes-lista > div:first-child { border-top: 0; }
.ajustes-lista dt { font: 400 .74rem/1.5 var(--font-rotulo); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }
.ajustes-lista dd { margin: 0; color: var(--ink-2); line-height: 1.55; }
@media (min-width: 760px) { .ajustes-lista > div { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); align-items: baseline; } }
@media (forced-colors: active) { .ajustes-cabecera::before { display: none; } }
.sesion-pestanas button:focus-visible { outline-offset: -4px; }
.sesion-pestanas button:active:not([aria-selected="true"]) { background: var(--surface); }
.sesion-panel:focus-visible { outline-offset: -4px; }