@import url('fuentes.css');

/* ============================================================================
   Portal familyquinta.cl — sistema visual

   Mismo lenguaje que los afiches impresos del edificio: quien escanea el QR en
   el ascensor tiene que reconocer que llegó al mismo sitio. Grotesca para los
   titulares (la voz de la señalética), serif para el cuerpo (la del documento),
   monoespaciada para datos y fuentes.

   Mobile-first, y no por convención: la mitad de las visitas van a llegar desde
   un teléfono, de pie en un pasillo, con un QR recién escaneado.
   ========================================================================= */

:root {
  --tinta:   #141B2D;
  --papel:   #FBFAF8;
  --sello:   #1F3A63;
  --archivo: #7A5B14;
  --lacre:   #A4272B;
  /* #939088 y no un gris más claro: la regla que separa la fuente del cuerpo
     comunica estructura, así que WCAG 1.4.11 le exige 3:1 y no basta con que se
     vea "bonita". Medido: 3,06:1 sobre el papel. */
  --regla:   #939088;
  --tenue:   #565D6E;
  --acento:  var(--sello);
  --ancho:   44rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---- Cabecera ----------------------------------------------------------- */

.cabecera {
  border-top: 5px solid var(--acento);
  background: #fff;
  padding: 1rem 1.25rem;
}

.cabecera-int {
  max-width: var(--ancho);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: .9rem;
}

.cabecera img { width: 116px; height: auto; flex-shrink: 0; }

.cabecera .sitio {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tenue);
  line-height: 1.4;
}

/* ---- Estructura --------------------------------------------------------- */

.env { max-width: var(--ancho); margin: 0 auto; padding: 0 1.25rem; }

main { padding-bottom: 3rem; }

h1 {
  font-family: 'Archivo', 'Arial Narrow', sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 8vw, 3rem);
  line-height: .98;
  letter-spacing: -.015em;
  text-transform: uppercase;
  margin: 1.75rem 0 0;
}

h2 {
  font-family: 'Archivo', 'Arial Narrow', sans-serif;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--acento);
  margin: 2.25rem 0 .5rem;
}

.entradilla {
  font-size: 1.1875rem;
  line-height: 1.5;
  margin: .9rem 0 0;
}

p { margin: 0 0 .9rem; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 600; }
em { font-style: italic; }

a { color: var(--acento); }
a:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- Bloque con su fuente ------------------------------------------------
   En los afiches la fuente va en una columna al margen. En un teléfono no cabe
   al lado, así que va debajo del bloque; desde 900px vuelve al margen. */

.bloque {
  border-left: 2px solid var(--regla);
  padding-left: 1.1rem;
  margin: 1.5rem 0;
}

.fuente {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .72rem;
  line-height: 1.5;
  color: var(--tenue);
  margin-top: .6rem;
}

.fuente b {
  display: block;
  font-weight: 600;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--acento);
}

@media (min-width: 56rem) {
  :root { --ancho: 58rem; }
  .bloque {
    display: grid;
    /* La fuente va PRIMERO (order:1) y por tanto en la primera columna: es la
       angosta. El cuerpo va segundo y se queda con el resto. Invertir estos dos
       valores aplasta el contenido en 13rem y deja la nota al margen ocupando
       toda la página — pasó, y sólo se ve mirando el render. */
    grid-template-columns: 13rem 1fr;
    gap: 2rem;
    border-left: 0;
    padding-left: 0;
    align-items: start;
  }
  .bloque > .cuerpo { border-left: 2px solid var(--regla); padding-left: 1.6rem; order: 2; }
  .fuente { order: 1; text-align: right; margin-top: .25rem; }
}

/* ---- Dato destacado ----------------------------------------------------- */

.cuando {
  border-top: 3px solid var(--acento);
  margin-top: 1.4rem;
  padding-top: .7rem;
}

.cuando .fecha {
  font-family: 'Archivo', 'Arial Narrow', sans-serif;
  font-weight: 700;
  font-size: clamp(1.05rem, 4.6vw, 1.45rem);
  text-transform: uppercase;
  color: var(--acento);
  line-height: 1.15;
}

.dato {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* ---- Tablas ------------------------------------------------------------- */

.tabla-env { overflow-x: auto; margin: 0 0 1rem; }

table { width: 100%; border-collapse: collapse; font-size: .95rem; }

th {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tenue);
  text-align: left;
  padding: 0 .8rem .4rem 0;
  border-bottom: 2px solid var(--regla);
  white-space: nowrap;
}

td {
  padding: .55rem .8rem .55rem 0;
  border-bottom: 1px solid #E6E3DC;
  vertical-align: baseline;
}

td:last-child, th:last-child { padding-right: 0; }
.num { text-align: right; white-space: nowrap; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
tr.total td { border-bottom: 0; border-top: 2px solid var(--tinta); font-weight: 600; padding-top: .7rem; }

/* ---- Listas ------------------------------------------------------------- */

ol.materias { margin: 0; padding: 0; list-style: none; counter-reset: m; }

ol.materias li {
  counter-increment: m;
  padding-left: 2rem;
  text-indent: -2rem;
  margin-bottom: .7rem;
}

ol.materias li::before {
  content: counter(m) ".";
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 600;
  font-size: .9rem;
  color: var(--acento);
  display: inline-block;
  width: 2rem;
  text-indent: 0;
}

ul.simple { margin: 0; padding: 0; list-style: none; }
ul.simple li { padding-left: 1.2rem; text-indent: -1.2rem; margin-bottom: .5rem; }
ul.simple li::before { content: "—"; color: var(--acento); font-weight: 600; margin-right: .5rem; }

/* ---- Cita --------------------------------------------------------------- */

blockquote {
  margin: 0 0 .9rem;
  padding-left: 1rem;
  border-left: 4px solid var(--acento);
  font-style: italic;
}

/* ---- Placa de estado ---------------------------------------------------- */

.placa {
  display: inline-block;
  font-family: 'Archivo', 'Arial Narrow', sans-serif;
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #fff;
  background: var(--acento);
  padding: .35rem .7rem .3rem;
  margin-bottom: .6rem;
}

.placa.gris { background: var(--tenue); }

/* ---- Botón / llamada ---------------------------------------------------- */

.accion {
  display: inline-block;
  background: var(--acento);
  color: #fff;
  font-family: 'Archivo', 'Arial Narrow', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .95rem 1.6rem;
  border-radius: 3px;
  min-height: 44px;
  transition: filter .18s ease;
}

.accion:hover { filter: brightness(1.15); }

/* ---- Índice de la portada ----------------------------------------------- */

.indice { display: grid; gap: .9rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }

.indice a {
  display: block;
  background: #fff;
  border: 1px solid var(--regla);
  border-left: 5px solid var(--tono, var(--sello));
  border-radius: 3px;
  padding: 1rem 1.15rem;
  text-decoration: none;
  color: var(--tinta);
  transition: border-color .18s ease, transform .18s ease;
}

.indice a:hover { border-color: var(--tono, var(--sello)); transform: translateX(2px); }

/* `display:block` no es opcional: son <span>, y sin esto el subtítulo se pega
   al final del título cuando éste no llena la línea. */
.indice .tit {
  display: block;
  font-family: 'Archivo', 'Arial Narrow', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
  color: var(--tono, var(--sello));
  line-height: 1.2;
}

.indice .sub {
  display: block;
  font-size: .95rem;
  line-height: 1.45;
  color: var(--tenue);
  margin-top: .3rem;
}

/* ---- Aviso -------------------------------------------------------------- */

.aviso {
  background: #fff;
  border: 1px solid var(--regla);
  border-radius: 3px;
  padding: 1rem 1.15rem;
  font-size: .95rem;
  margin: 1.75rem 0;
}

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

.pie {
  border-top: 3px solid var(--tinta);
  margin-top: 3rem;
  padding: 1.5rem 0 3rem;
  font-size: .9rem;
}

.pie .nombre {
  font-family: 'Archivo', 'Arial Narrow', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.pie .cargo {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .78rem;
  color: var(--tenue);
  margin-bottom: .7rem;
}

.pie .legal {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .72rem;
  line-height: 1.55;
  color: var(--tenue);
  margin-top: 1rem;
}

.volver {
  display: inline-block;
  margin: 1.5rem 0 0;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .8rem;
  text-decoration: none;
}

/* ---- Tabla de sesiones: apilada en móvil -------------------------------- */
/* Tres columnas en 375px dejan la materia en una columna de ~20 caracteres.
   Bajo 34rem cada sesión se lee como un bloque, con la hora de ancla. */

@media (max-width: 34rem) {
  .sesiones thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sesiones, .sesiones tbody, .sesiones tr, .sesiones td { display: block; width: 100%; }
  .sesiones tr {
    border-bottom: 1px solid #E6E3DC;
    padding: .8rem 0;
  }
  .sesiones tr:last-child { border-bottom: 0; }
  .sesiones td { border: 0; padding: 0; }
  .sesiones td.hora {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--acento);
    line-height: 1.2;
  }
  .sesiones td.sesion { font-weight: 600; margin: .1rem 0 .15rem; }
  .sesiones td.materia { color: var(--tenue); font-size: .95rem; }
}