/* WikiFEN — estilos del sitio.
   Dirección: papel y tinta. Líneas finas en vez de cajas, titulares con serifa,
   cifras alineadas y un solo color de acento (ocre) reservado para la nota. */

:root {
  --fondo: #fcfbfa;          /* papel: a medio camino entre blanco puro (#fff) y el crema anterior (#f9f8f6) */
  --fondo-2: #f3f2ee;        /* un tono más oscuro, para citas y filas al pasar el cursor */
  --superficie: #ffffff;     /* campos y cuadros */
  --tinta: #181a1b;
  --tinta-suave: #5d6168;
  --linea: #dcd9d3;          /* líneas divisorias finas */
  --regla: #181a1b;          /* líneas editoriales fuertes */
  --marca: #0f2744;          /* azul marino: enlaces y botones */
  --marca-suave: #e6eaf0;
  --acento: #b45309;         /* ocre: la nota */
  --acento-suave: #f6eadb;
  --boton: #0f2744;
  --sobre-boton: #ffffff;
  --aviso: #8a5a00;
  --aviso-suave: #fbf1dc;
  --malo: #a3271f;
  --radio: 4px;
  --ancho: 1120px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Solo modo claro, aunque el dispositivo esté en modo oscuro: también los controles del navegador. */
:root { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 120px; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--fondo);
  color: var(--tinta);
  font: 17px/1.6 var(--sans);
}

main { flex: 1; outline: none; }
a { color: var(--marca); text-decoration-thickness: 1px; text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; letter-spacing: -0.025em; overflow-wrap: break-word; }
p { overflow-wrap: break-word; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

.ancho { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -9999px; top: 8px; z-index: 50; padding: 8px 14px; background: var(--boton); color: var(--sobre-boton); }
.saltar:focus { left: 12px; }

/* Textos chicos y cifras: sans con números de ancho parejo */
.meta, .dato, .cuenta { font-family: var(--sans); font-variant-numeric: tabular-nums; color: var(--tinta-suave); }
.meta { font-size: 14px; }
.cuenta { font-size: 13px; font-weight: 600; letter-spacing: 0; }

/* Rótulo de sección: versalitas pequeñas sobre una línea */
.rotulo-seccion { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin: 46px 0 0; padding-bottom: 10px; border-bottom: 1px solid var(--regla); }
.rotulo-seccion h2 { margin: 0; font: 700 12.5px/1.3 var(--sans); letter-spacing: 0.11em; text-transform: uppercase; }
.rotulo-seccion a { font: 600 14px var(--sans); }

/* ---------- Barra superior ---------- */

.top { position: sticky; top: 0; z-index: 20; background: var(--fondo); border-bottom: 1px solid var(--regla); }
.top .ancho { display: flex; align-items: center; gap: 6px 22px; flex-wrap: wrap; min-height: 58px; padding-top: 8px; padding-bottom: 8px; }

.marca { display: inline-flex; align-items: center; gap: 10px; color: var(--tinta); text-decoration: none; }
.marca .logo { font: 700 25px/1 var(--serif); letter-spacing: -0.03em; }
.marca .logo i { font-style: italic; font-weight: 400; }
/* En la portada el nombre va en grande, como cabecera de diario: la barra solo lleva el menú. */
body[data-ruta="inicio"] .top { position: static; border-bottom-color: transparent; }
body[data-ruta="inicio"] .top .marca { display: none; }

.menu { display: flex; gap: 20px; margin-left: auto; }
.menu a { padding: 6px 0 4px; border-bottom: 2px solid transparent; color: var(--tinta-suave); font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; }
.menu a:hover { color: var(--tinta); }
.menu a[aria-current="page"] { color: var(--tinta); border-bottom-color: var(--acento); }

.buscador-top { position: relative; flex: 1 1 220px; max-width: 340px; margin-left: 8px; }
body[data-ruta="inicio"] .buscador-top { display: none; }
.buscador-top input, .filtro input {
  width: 100%; padding: 8px 12px; font: inherit; font-size: 16px; color: var(--tinta);
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio);
}
.buscador-top input:focus, .filtro input:focus { outline: none; border-color: var(--regla); }

.panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; max-height: 70vh; overflow: auto; padding: 4px 0; background: var(--superficie); border: 1px solid var(--regla); border-radius: var(--radio); }
.panel h3 { margin: 10px 14px 4px; font: 700 11px/1.3 var(--sans); letter-spacing: 0.11em; text-transform: uppercase; color: var(--tinta-suave); }
.panel a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 14px; color: inherit; text-decoration: none; }
.panel a:hover, .panel a:focus-visible { background: var(--fondo-2); }
.panel a .nombre { font: 600 17px/1.3 var(--serif); }
.panel a.todos { justify-content: flex-start; margin-top: 4px; border-top: 1px solid var(--linea); color: var(--marca); font: 600 14px var(--sans); }
.panel .vacio { margin: 0; padding: 10px 14px; }

/* ---------- Portada: cabecera de diario, buscador y accesos ---------- */

.cabecera-inicio { padding: 6px 0 26px; border-bottom: 1px solid var(--regla); }
.cabecera-inicio h1 { margin: 0; font-size: clamp(46px, 7vw, 70px); line-height: 1; letter-spacing: -0.035em; }
.cabecera-inicio h1 i { font-style: italic; font-weight: 400; }
.linea-fecha { display: flex; justify-content: space-between; gap: 2px 24px; flex-wrap: wrap; margin: 14px 0 20px; padding: 7px 0; border-top: 1px solid var(--regla); border-bottom: 1px solid var(--regla); font: 600 13px/1.5 var(--sans); color: var(--tinta-suave); font-variant-numeric: tabular-nums; }

.buscador { position: relative; max-width: 720px; }
.buscador input {
  display: block; width: 100%; padding: 14px 52px 14px 16px; font: 400 18px/1.3 var(--sans); color: var(--tinta);
  background: var(--superficie); border: 1px solid var(--regla); border-radius: var(--radio);
}
.buscador input::placeholder { color: var(--tinta-suave); }
.buscador input:focus { outline: 2px solid var(--marca); outline-offset: 1px; }
.atajo { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); min-width: 24px; padding: 1px 7px; text-align: center; pointer-events: none; font: 600 13px/1.5 var(--sans); color: var(--tinta-suave); background: var(--fondo); border: 1px solid var(--linea); border-bottom-width: 2px; border-radius: 4px; }
.buscador input:focus ~ .atajo, .buscador input:not(:placeholder-shown) ~ .atajo { display: none; }
@media (hover: none), (max-width: 720px) { .atajo { display: none; } }


/* ---------- Retícula de ramos ---------- */

.reticula { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); border-left: 1px solid var(--linea); }
.reticula li { border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.reticula a { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; height: 100%; padding: 14px 16px; color: inherit; text-decoration: none; }
.reticula a:hover { background: var(--fondo-2); }
.reticula a:hover .nombre { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.reticula .nombre { font: 600 18px/1.25 var(--serif); letter-spacing: -0.01em; }
.reticula .dato { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.reticula .dato b { font-size: 14px; color: var(--tinta); }

/* ---------- Lista comparativa de profesores ---------- */

.comparativa { list-style: none; margin: 0; padding: 0; }
.comparativa li { border-bottom: 1px solid var(--linea); }
.fila-profe { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 3px 18px; align-items: start; padding: 18px 10px; color: inherit; text-decoration: none; }
.fila-profe:hover { background: var(--fondo-2); }
.fila-profe .avatar { grid-row: 1 / span 4; }
.fila-profe .nombre { grid-column: 2; font: 700 22px/1.2 var(--serif); letter-spacing: -0.02em; }
.fila-profe:hover .nombre { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.fila-profe .ramitos { grid-column: 2; font: 600 13px/1.4 var(--sans); color: var(--tinta-suave); }
.fila-profe .extracto { grid-column: 2; margin: 2px 0 0; font: 400 16px/1.5 var(--serif); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fila-profe .extracto b { margin-right: 7px; font: 700 10.5px/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-suave); }
.fila-profe .lado { grid-column: 3; grid-row: 1 / span 4; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 92px; text-align: right; }
.nota-chica { font: 700 30px/1 var(--serif); letter-spacing: -0.02em; color: var(--acento); font-variant-numeric: tabular-nums; }
.lado .dato { font-size: 12.5px; font-weight: 600; }

.segmentos { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--regla); border-radius: var(--radio); overflow: hidden; }
.segmentos button { padding: 8px 15px; font: 600 14px var(--sans); color: var(--tinta); background: transparent; border: 0; border-right: 1px solid var(--regla); cursor: pointer; }
.segmentos button:last-child { border-right: 0; }
.segmentos button[aria-pressed="true"] { background: var(--tinta); color: var(--fondo); }
.orden { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 4px; padding-bottom: 18px; border-bottom: 1px solid var(--regla); font-size: 14px; color: var(--tinta-suave); }

/* ---------- Retratos ---------- */

.avatar { flex: none; width: 52px; height: 65px; border-radius: 2px; object-fit: cover; background: var(--linea); filter: grayscale(1) contrast(1.05); }
.avatar.sin-foto { display: grid; place-items: center; filter: none; background: var(--superficie); border: 1px solid var(--linea); color: var(--tinta-suave); font: 600 19px/1 var(--serif); letter-spacing: 0.02em; }
.avatar.grande { width: 124px; height: 155px; font-size: 40px; }

/* ---------- Lista de la portada y botones ---------- */

.nombres-inicio { padding-top: 14px; }
.ver-todos { margin: 14px 0 0; font: 600 16px var(--sans); }
.proponer { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin: 52px 0 64px; padding-top: 22px; border-top: 1px solid var(--regla); }
.proponer p { margin: 0; font: 400 20px/1.3 var(--serif); }
.fila-filtro { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin: 0 0 22px; }
.fila-filtro .filtro { flex: 1 1 280px; max-width: 440px; margin: 0; }
.acciones { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; }

.boton { display: inline-block; padding: 11px 18px; font: 600 15px/1.3 var(--sans); text-decoration: none; cursor: pointer; color: var(--sobre-boton); background: var(--boton); border: 1px solid var(--boton); border-radius: var(--radio); }
.boton:hover { text-decoration: underline; text-underline-offset: 3px; }
.boton.claro { color: var(--tinta); background: transparent; border-color: var(--regla); }
.boton:disabled { opacity: 0.6; cursor: default; }
.enlace, .reportar { padding: 0; font: inherit; color: var(--marca); background: none; border: 0; cursor: pointer; text-align: left; }
.enlace { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.vacio { margin: 30px 0; max-width: 40em; font: 400 18px/1.55 var(--serif); color: var(--tinta-suave); }

/* ---------- Páginas interiores ---------- */

.pagina { padding-top: 30px; padding-bottom: 72px; }
.pagina h1 { margin: 10px 0 12px; font-size: clamp(34px, 6vw, 60px); line-height: 1.02; letter-spacing: -0.035em; }
.pagina .bajada { margin: 0 0 24px; max-width: 40em; font: 400 19px/1.5 var(--serif); color: var(--tinta-suave); }

.migas { font: 600 13px var(--sans); letter-spacing: 0.02em; }
.migas a { color: var(--tinta-suave); text-decoration: none; }
.migas a::before { content: "← "; }
.migas a:hover { color: var(--tinta); text-decoration: underline; }

.filtro { margin: 0 0 22px; }
.filtro input { max-width: 440px; padding: 11px 14px; border-color: var(--regla); }

/* Directorio alfabético */
.letras { display: flex; flex-wrap: wrap; gap: 2px 6px; padding: 10px 0; border-top: 1px solid var(--regla); border-bottom: 1px solid var(--linea); }
.letras a { min-width: 30px; padding: 4px 6px; text-align: center; font: 700 17px/1.2 var(--serif); color: var(--tinta); text-decoration: none; }
.letras a:hover { color: var(--acento); text-decoration: underline; }
.grupo { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 0 16px; padding: 20px 0 16px; border-bottom: 1px solid var(--linea); }
.grupo h2 { margin: 0; font-size: 52px; line-height: 0.95; letter-spacing: -0.04em; }
.nombres { list-style: none; margin: 0; padding: 0; columns: 3 240px; column-gap: 32px; }
.nombres li { break-inside: avoid; }
.nombres a { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 5px 0; color: inherit; text-decoration: none; }
.nombres a:hover .nombre { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.nombres .nombre { font: 500 17px/1.3 var(--serif); }
.nombres .dato { font-size: 12.5px; white-space: nowrap; }
.nombres .dato b { color: var(--acento); font-weight: 700; }

/* ---------- Ficha de profesor ---------- */

.ficha { max-width: 860px; }
.cabeza-ficha { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 26px; align-items: end; margin-top: 12px; padding-bottom: 24px; border-bottom: 1px solid var(--regla); }
.cabeza-ficha h1 { margin: 0 0 14px; font-size: clamp(38px, 7vw, 68px); line-height: 0.98; letter-spacing: -0.04em; }
.dicta { margin: 0 0 4px; font: 400 15px/1.6 var(--sans); color: var(--tinta-suave); }
.dicta a { color: var(--tinta); font-weight: 600; }
.cabeza-ficha .meta { margin: 0; }

/* Placa de nota: una cifra, su escala y de dónde sale */
.placa { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px 30px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--linea); }
.placa .cifra { font: 700 64px/0.85 var(--serif); letter-spacing: -0.04em; color: var(--acento); font-variant-numeric: tabular-nums; white-space: nowrap; }
.placa .cifra small { margin-left: 6px; font: 600 14px/1 var(--sans); letter-spacing: 0; color: var(--tinta-suave); }
.placa .lectura { min-width: 0; }
.placa .lectura strong { display: block; font: 700 12px/1.3 var(--sans); letter-spacing: 0.11em; text-transform: uppercase; }
.placa .lectura .meta { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.45; }
.escala { display: block; width: 320px; max-width: 100%; height: auto; margin: 8px 0 0; overflow: visible; }
.escala .eje, .escala .tic { stroke: var(--tinta-suave); stroke-width: 1; }
.escala text { font: 600 11.5px var(--sans); fill: var(--tinta-suave); }
.escala .punto { fill: var(--acento); stroke: var(--fondo); stroke-width: 2.5; }
.tramos { display: inline-flex; gap: 4px; margin: 8px 0 0; vertical-align: middle; }
.tramos i { width: 34px; height: 6px; background: var(--linea); }
.tramos i.lleno { background: var(--acento); }

.indice-ficha { position: sticky; top: 58px; z-index: 5; display: flex; flex-wrap: wrap; gap: 4px 22px; padding: 12px 0; background: var(--fondo); border-bottom: 1px solid var(--linea); font: 600 14px var(--sans); }
.indice-ficha a { color: var(--tinta-suave); text-decoration: none; white-space: nowrap; }
.indice-ficha a:hover { color: var(--tinta); text-decoration: underline; }
.indice-ficha sup { margin-left: 3px; font-size: 11px; font-variant-numeric: tabular-nums; }

.seccion { padding-top: 40px; }
.seccion h2 { display: flex; align-items: baseline; gap: 12px; margin: 0 0 10px; font-size: 30px; line-height: 1.1; }
.aportes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--regla); }
.aportes li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 18px; padding: 15px 0 14px; border-bottom: 1px solid var(--linea); }
.aportes .texto { grid-column: 1; max-width: 68ch; font: 400 18px/1.6 var(--serif); overflow-wrap: anywhere; }
.dato-aporte { grid-column: 1 / -1; margin-bottom: 4px; font: 700 11.5px/1.4 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--acento); font-variant-numeric: tabular-nums; }
.reportar { grid-column: 2; align-self: end; font: 500 12px/1.8 var(--sans); color: var(--tinta-suave); opacity: 0; transition: opacity 0.15s; }
.aportes li:hover .reportar, .reportar:focus-visible { opacity: 1; }
.reportar:hover { color: var(--marca); text-decoration: underline; }
@media (hover: none) { .reportar { opacity: 0.7; } }

/* Frases típicas: citas de verdad */
.aportes.frases { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); background: var(--fondo-2); border-bottom: 1px solid var(--regla); }
.aportes.frases li { position: relative; padding: 20px 18px 16px 52px; border-bottom: 1px solid var(--linea); }
.aportes.frases li::before { content: "\201C"; position: absolute; left: 14px; top: 8px; font: 700 56px/1 var(--serif); color: var(--acento); }
.aportes.frases .texto { font-style: italic; font-size: 19px; line-height: 1.5; }

.origen { margin-top: 44px; padding-top: 14px; border-top: 1px solid var(--regla); max-width: 68ch; font: 400 14px/1.6 var(--sans); color: var(--tinta-suave); }
.origen p { margin: 0 0 6px; }

/* ---------- Formularios ---------- */

.formulario { max-width: 760px; }
.caja-normas { margin: 0 0 30px; padding: 2px 0 2px 20px; border-left: 3px solid var(--regla); }
.caja-normas strong { display: block; font: 700 12px/1.3 var(--sans); letter-spacing: 0.11em; text-transform: uppercase; }
.caja-normas ul { margin: 8px 0 0; padding-left: 20px; font: 400 17px/1.55 var(--serif); }
.caja-normas li { margin: 4px 0; }

.campo { display: block; margin: 0 0 24px; padding: 0; border: 0; min-width: 0; }
.rotulo { display: block; padding: 0; font: 700 20px/1.25 var(--serif); letter-spacing: -0.015em; }
.opcional { font: 500 12.5px var(--sans); letter-spacing: 0; color: var(--tinta-suave); }
.ayuda { display: block; margin-top: 2px; font-size: 14px; color: var(--tinta-suave); }
.campo input[type="text"], .campo select, .campo textarea {
  display: block; width: 100%; margin-top: 8px; padding: 11px 13px; font: 400 17px/1.55 var(--sans);
  color: var(--tinta); background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio);
}
.campo textarea { resize: vertical; min-height: 108px; font-family: var(--serif); font-size: 18px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 1px solid var(--regla); outline-offset: 0; border-color: var(--regla); }
.pie-campo { display: flex; justify-content: space-between; gap: 12px; margin-top: 4px; }
.contador { margin-left: auto; font: 500 12.5px var(--sans); font-variant-numeric: tabular-nums; color: var(--tinta-suave); }
.contador.cerca { color: var(--acento); font-weight: 700; }
.dos-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.campo-foto input[type="file"] { display: block; margin-top: 10px; font: 400 15px var(--sans); }
.vista-foto { display: flex; align-items: flex-end; gap: 14px; margin-top: 12px; }
.vista-foto img { width: 112px; height: 140px; object-fit: cover; border: 1px solid var(--linea); border-radius: var(--radio); }

/* Nota: una sola barra segmentada del 1 al 7 */
.campo-nota { margin: 0 0 28px; padding: 0; border: 0; min-width: 0; }
.barra-nota { display: grid; grid-template-columns: repeat(7, 1fr); max-width: 440px; margin: 10px 0 6px; border: 1px solid var(--regla); border-radius: var(--radio); overflow: hidden; }
.barra-nota label { position: relative; cursor: pointer; border-right: 1px solid var(--linea); }
.barra-nota label:last-child { border-right: 0; }
.barra-nota input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.barra-nota span { display: grid; place-items: center; height: 48px; font: 600 19px/1 var(--serif); font-variant-numeric: tabular-nums; }
.barra-nota label:hover span { background: var(--fondo-2); }
.barra-nota label:has(~ label input:checked) span { background: var(--acento-suave); }
.barra-nota input:checked + span { background: var(--acento); color: #fff; font-weight: 700; }
.barra-nota input:focus-visible + span { outline: 2px solid var(--marca); outline-offset: -3px; }
.linea-nota { display: flex; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; }

.mas-secciones { margin: 0 0 24px; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.mas-secciones summary { padding: 14px 0; cursor: pointer; font: 600 15px var(--sans); }
.mas-secciones[open] summary { margin-bottom: 8px; }
.casilla { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0; cursor: pointer; }
.casilla input { flex: none; width: 20px; height: 20px; margin: 3px 0 0; }
.error { display: block; margin-top: 4px; font: 600 14px var(--sans); color: var(--malo); }
.error:empty { display: none; }
.error.general { margin: 14px 0; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.turnstile:not(:empty) { margin: 6px 0 14px; }
.formulario button[type="submit"] { margin-top: 14px; }

.cuadro { width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 24px 26px; color: var(--tinta); background: var(--fondo); border: 1px solid var(--regla); border-radius: var(--radio); }
.cuadro::backdrop { background: rgba(10, 12, 14, 0.6); }
.cuadro h2 { margin: 0 0 14px; font-size: 28px; line-height: 1.1; }
.cuadro blockquote { margin: 0 0 18px; padding: 2px 0 2px 16px; max-height: 140px; overflow: auto; border-left: 3px solid var(--regla); font: italic 400 17px/1.5 var(--serif); }
.cuadro .rotulo { font-size: 17px; }
.cuadro .campo { margin-bottom: 16px; }
.cuadro .campo textarea { min-height: 80px; font-size: 16px; }
.opcion { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; }
.opcion input { flex: none; width: 18px; height: 18px; margin: 0; }

/* Etiquetas sueltas (las usa el panel de moderación) */
.chip { display: inline-block; padding: 3px 10px; font: 600 13.5px/1.4 var(--sans); color: var(--tinta); text-decoration: none; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); }
.nombre { overflow-wrap: anywhere; }

/* ---------- Texto corrido (Cómo funciona) ---------- */

.prosa { max-width: 760px; }
.prosa h2 { margin: 44px 0 10px; padding-top: 14px; border-top: 1px solid var(--linea); font-size: 30px; line-height: 1.1; }
.prosa p, .prosa li { max-width: 62ch; font: 400 19px/1.65 var(--serif); }
.prosa ul { padding-left: 22px; }
.prosa li { margin: 8px 0; }
.prosa p.creditos { font: 400 14px/1.5 var(--sans); color: var(--tinta-suave); }

/* ---------- Pie ---------- */

.pie { margin-top: 24px; padding: 22px 0 34px; border-top: 1px solid var(--regla); font-size: 13.5px; color: var(--tinta-suave); }
.pie p { margin: 0 0 6px; max-width: 62em; }
.pie strong { color: var(--tinta); }
.pie a { color: var(--tinta-suave); }

/* ---------- Celular ---------- */

@media (max-width: 720px) {
  body { font-size: 16px; }
  html { scroll-padding-top: 64px; }
  .ancho { padding: 0 18px; }
  .top { position: static; }
  .top .ancho { gap: 4px 10px; min-height: 52px; padding-top: 6px; padding-bottom: 6px; }
  .marca .logo { font-size: 23px; }
  .menu { gap: 16px; }
  .menu a { font-size: 14px; padding: 9px 0 6px; }
  .buscador-top { order: 3; flex: 1 1 100%; max-width: none; margin: 2px 0 6px; }
  .buscador-top input { padding: 11px 13px; }
  .cabecera-inicio { padding: 0 0 22px; }
  .linea-fecha { flex-direction: column; margin: 10px 0 16px; }
  .buscador input { padding: 13px 14px; font-size: 17px; }
  .nombres-inicio li:nth-child(n+9) { display: none; }
  .proponer { margin-top: 40px; }
  .proponer .boton { flex: 1 1 100%; text-align: center; }
  .rotulo-seccion { margin-top: 36px; }
  .reticula { grid-template-columns: 1fr 1fr; }
  .reticula a { flex-direction: column; gap: 6px; padding: 12px 12px; }
  .reticula .nombre { font-size: 16px; }
  .fila-profe { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 2px 12px; padding: 16px 0; }
  .fila-profe .avatar { grid-row: 1 / span 2; width: 44px; height: 55px; font-size: 16px; }
  .fila-profe .nombre { font-size: 20px; }
  .fila-profe .lado { grid-row: 1 / span 2; min-width: 0; }
  .fila-profe .extracto { grid-column: 1 / -1; margin-top: 6px; }
  .nota-chica { font-size: 26px; }
  .pagina { padding-top: 20px; padding-bottom: 56px; }
  .grupo { grid-template-columns: 46px minmax(0, 1fr); gap: 0 10px; }
  .grupo h2 { font-size: 36px; }
  .nombres { columns: 1; }
  .cabeza-ficha { gap: 0 16px; align-items: start; }
  .avatar.grande { width: 84px; height: 105px; font-size: 28px; }
  .placa { grid-template-columns: auto minmax(0, 1fr); gap: 14px 20px; }
  .placa .cifra { font-size: 52px; }
  .placa .boton { grid-column: 1 / -1; text-align: center; }
  .indice-ficha { top: 0; flex-wrap: nowrap; gap: 0 20px; overflow-x: auto; margin: 0 -18px; padding: 12px 18px; scrollbar-width: none; }
  .indice-ficha::-webkit-scrollbar { display: none; }
  .seccion { padding-top: 32px; }
  .seccion h2 { font-size: 26px; }
  .aportes li { grid-template-columns: minmax(0, 1fr); }
  .reportar { grid-column: 1; justify-self: end; }
  .aportes.frases { grid-template-columns: 1fr; }
  .dos-campos { grid-template-columns: 1fr; }
  .cuadro { padding: 20px; }
}

@media (max-width: 360px) {
  .reticula { grid-template-columns: 1fr; }
  .menu { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reportar { transition: none; }
}