/* ------------------------------------------------------------------
   Observed State -- hoja de estilos comun

   Vive fuera del HTML porque hay mas de una pagina: el indice y una por
   estudio. Inline se copiaria en cada una, y cinco copias de la misma
   paleta acaban siendo cinco paletas distintas.

   Los contrastes anotados abajo estan MEDIDOS contra el papel
   (#F2F1ED), no supuestos. Si se cambia un color hay que volver a
   medirlo: el minimo de AA es 4,5:1 para texto normal.
   ------------------------------------------------------------------ */

/* Inter solo para el H1. Autoalojado en el mismo bucket: mismo origen,
   ningún CDN. Si el woff2 no estuviera, la pila de sistema de --sans
   recoge el H1 sin que se note un hueco. */
@font-face{
  font-family:"Inter";
  src:url("/inter-600.woff2") format("woff2");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

:root{
  /* Paleta del sitio, sin tocar. */
  --paper:#F2F1ED;
  --ink:#1A1D1A;
  --rule:#C9C8C1;
  --muted:#6B6E68;
  --signal:#A63A2B;
  /* Era #8A7B4F, que daba 3.70:1 sobre --paper y no llega al 4.5:1
     que pide AA para texto normal. Mismo tono (44.7) y misma
     saturación, 12% menos de luminosidad: 4.53:1. Importa porque este
     es el color de las filas SIN DATO, que es justo el estado que no
     debe quedar más difícil de leer que los demás. */
  --unmeasured:#7A6D46;
  /* Mismo tono (173.8) y misma saturación que el #52BCB1 pedido, pero
     aquel da 2.02:1 sobre --paper y no pasa AA ni como texto grande
     (que pide 3:1): es un acento pensado para fondo oscuro. Este da
     4.54:1, o sea que aguanta a cualquier tamaño por si el H1 encoge
     en móvil. Se usa en una sola palabra del título. */
  --accent:#2F7971;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  --titulo: "Inter", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding:2.5rem 1.25rem 3rem;
}
main{max-width:44rem;margin:0 auto}

/* ---------------- cabecera ---------------- */

/* Los controles van en la linea del eyebrow, no al lado del H1.
   A 375 px el titulo mide ~200 px y los dos controles ~130: puestos
   en la misma linea se pelean por el ancho. Arriba caben de sobra
   incluso a 320, y ademas es la forma clasica de una cabecera. */
.cab{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.4rem;
}
.cab .eyebrow{margin:0}

.acciones{
  display:flex;
  align-items:center;
  gap:.15rem;
  margin:-.25rem -.5rem -.25rem 0;
}
.acciones .enlace{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:.25rem .5rem;
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.08em;
  color:var(--muted);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.acciones .enlace:hover{color:var(--ink)}
.acciones .barra{
  color:var(--rule);
  font-family:var(--mono);
  font-size:.75rem;
  line-height:1;
}
.acciones .enlace:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.eyebrow{
  font-family:var(--mono);
  font-size:.6875rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 .4rem;
}
h1{
  font-family:var(--titulo);
  font-size:1.75rem;
  font-weight:600;
  letter-spacing:-.015em;
  line-height:1.15;
  margin:0 0 .9rem;
}
h1 .acento{color:var(--accent)}

.idioma{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  min-height:44px;
  padding:.25rem .5rem;
  background:none;
  border:0;
  cursor:pointer;
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.1em;
  color:var(--muted);
  line-height:1;
}
.idioma .sep{color:var(--rule)}
.idioma .on{color:var(--ink)}
.idioma:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* Una etiqueta de dos palabras no debe partirse a mitad. Medido a
   320 px con cuatro elementos: sin esto, "Acerca de" queda con
   "Acerca" arriba y "de" abajo. Con nowrap la barra entera cabe en
   una linea incluso ahi, y si algun dia no cupiera, el elemento
   saltaria de linea completo en vez de romperse. */
.acciones .enlace{white-space:nowrap}

.intro{
  font-size:1rem;
  max-width:36rem;
  margin:0 0 2rem;
  color:var(--muted);
}

/* ---------------------------------------------------------------
   El navegador muestra este bloque solo cuando JavaScript está
   desactivado, sin que haga falta ni una línea de JS para lograrlo.
   En gris y con un filete, no en rojo ni en caja de aviso: no es un
   error del sitio, es la explicación de por qué faltan las cifras.
   --------------------------------------------------------------- */
.sinjs{
  max-width:36rem;
  margin:0 0 2rem;
  padding:.1rem 0 .1rem 1rem;
  border-left:2px solid var(--rule);
  color:var(--muted);
  font-size:.9375rem;
}
.sinjs p{margin:0 0 .5rem}
.sinjs p:last-child{margin:0}
.sinjs strong{color:var(--ink);font-weight:600}

.intro strong{color:var(--ink);font-weight:600}

/* ---------------------------------------------------------------
   TITULAR DEL DIA. Cuenta, no juzga.

   Sin color, sin icono y sin cambiar de aspecto segun el numero: si
   el dia raro se pintara distinto del tranquilo, la pagina estaria
   opinando sobre lo que ve, y eso es exactamente lo que no hace. La
   diferencia entre "nada" y "tres cosas" la lleva la frase, que es
   donde debe estar.
   --------------------------------------------------------------- */
.titular{
  font-size:1.25rem;
  line-height:1.35;
  font-weight:600;
  color:var(--ink);
  max-width:36rem;
  margin:0 0 1.75rem;
  letter-spacing:-.01em;
}
@media (max-width:30rem){
  .titular{font-size:1.125rem}
}

/* ---------------------------------------------------------------
   FILA RESUMEN + ACORDEÓN

   <details>/<summary> nativo y no un acordeón a mano: trae gratis el
   foco, el teclado (Enter y Espacio), el estado expandido para
   lectores de pantalla y el buscar-en-página del navegador, que abre
   la sección al encontrar texto dentro. Escribir eso en JS sería más
   código para llegar peor.
   --------------------------------------------------------------- */
details.fuente{border-top:1px solid var(--rule)}
details.fuente:last-of-type{border-bottom:1px solid var(--rule)}

summary.fila{
  display:flex;
  align-items:flex-start;
  gap:.85rem;
  min-height:60px;
  padding:1rem 0;
  cursor:pointer;
  list-style:none;
}
/* El triángulo por defecto se quita en los dos motores. */
summary.fila::-webkit-details-marker{display:none}
summary.fila::marker{content:""}

summary.fila .ico{
  flex:0 0 auto;
  color:var(--muted);
  margin-top:.15rem;
}
summary.fila .txt{flex:1 1 auto;min-width:0}
/* font-weight:400 porque el elemento es un h2 y llegaria en
   negrita: el peso del nombre lo pone el <strong> de dentro, no
   el nivel del encabezado. Sin esto, el ".que" de al lado
   tambien saldria en negrita. */
summary.fila .l1{font-size:1rem;line-height:1.35;margin:0;font-weight:400}
summary.fila .l1 .que{color:var(--muted)}
summary.fila .l2{
  font-family:var(--mono);
  font-size:.75rem;
  line-height:1.5;
  color:var(--muted);
  margin:.3rem 0 0;
  font-variant-numeric:tabular-nums;
}
summary.fila .mas{
  flex:0 0 auto;
  font-family:var(--mono);
  font-size:1rem;
  line-height:1;
  color:var(--muted);
  margin-top:.35rem;
  width:1ch;
  text-align:center;
}
details[open] > summary.fila .mas::before{content:"\2212"}
details:not([open]) > summary.fila .mas::before{content:"+"}

/* El icono solo toma color cuando hay algo que decir. En estado
   normal hereda --muted, como el resto del texto secundario. */
details.fuente.es-fuera > summary.fila .ico{color:var(--signal)}
details.fuente.es-sin > summary.fila .ico{color:var(--unmeasured)}

summary.fila:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ---------------- panel expandido ---------------- */

.panel{padding:0 0 1.75rem 2.6rem}
@media (max-width:34rem){ .panel{padding-left:0} }

.panel .resumen{font-size:1rem;margin:0 0 1.25rem;max-width:34rem}
.panel h3{
  font-family:var(--mono);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin:1.5rem 0 .5rem;
}
.panel h3:first-of-type{margin-top:0}
.panel p{margin:0 0 .6rem;font-size:.9375rem;max-width:34rem}
.panel .metodo p{color:var(--muted)}
.panel .metodo strong{color:var(--ink);font-weight:600}
.panel .limites p{color:var(--muted);font-size:.875rem}
.panel .limites strong{color:var(--ink);font-weight:600}

.horarios{
  font-family:var(--mono);
  font-size:.8125rem;
  font-variant-numeric:tabular-nums;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.15rem 1.25rem;
  margin:0;
  color:var(--muted);
}
.horarios dt{letter-spacing:.08em;text-transform:uppercase;font-size:.6875rem}
.horarios dd{margin:0;color:var(--ink)}

/* La tabla se desplaza dentro de SU caja, no arrastra la pagina.
   Medido en un movil de 375 px: la columna de variacion se salia 42 px
   del panel con overflow visible, o sea cortada y sin forma de
   alcanzarla. Es justo lo que hay que evitar en una pagina que se lee
   primero en el telefono. */
.marco{overflow-x:auto;-webkit-overflow-scrolling:touch}

table.detalle{
  width:100%;
  border-collapse:collapse;
  font-family:var(--mono);
  font-size:.8125rem;
  font-variant-numeric:tabular-nums;
}
table.detalle th{
  text-align:right;
  font-weight:400;
  font-size:.6875rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  border-bottom:1px solid var(--rule);
  padding:0 0 .45rem;
}
table.detalle th:first-child,
table.detalle td:first-child{text-align:left}
table.detalle td{
  padding:.3rem 0;
  border-bottom:1px solid rgba(201,200,193,.45);
  text-align:right;
}
table.detalle td:first-child{white-space:nowrap;padding-right:.75rem}
/* Centrada solo donde la columna del medio es una CATEGORIA de texto.
   En las tablas de cifras se queda a la derecha: centrar un numero
   rompe la alineacion decimal, que es lo que hace legible una
   columna. */
table.detalle.centro2 th:nth-child(2),
table.detalle.centro2 td:nth-child(2){text-align:center}
table.detalle .clave{letter-spacing:.06em;margin-right:.55rem}
table.detalle .nombre{color:var(--muted)}
table.detalle .titulo{color:var(--ink);white-space:normal}
table.detalle td.ancha{white-space:normal;min-width:14rem}
/* 14rem de minimo sobre los 335 px utiles de un movil no deja sitio
   para las otras dos columnas. */
@media (max-width:34rem){
  table.detalle td.ancha{min-width:9rem}
  table.detalle{font-size:.75rem}
}
/* El enlace va DEBAJO de la ciudad, no en una cuarta columna: en un
   movil de 375 px una columna mas aprieta la tabla, y aqui abajo se
   lee igual de bien en las dos anchuras. */
table.detalle .sitio{
  display:block;
  font-size:.75rem;
  line-height:1.5;
  margin-top:.1rem;
  white-space:normal;
  word-break:break-all;
}
table.detalle .sitio a{
  color:var(--muted);
  text-decoration:none;
  border-bottom:1px solid var(--rule);
}
table.detalle .sitio a:hover{color:var(--ink);border-bottom-color:var(--ink)}
table.detalle .sitio .nd{color:var(--unmeasured);font-style:italic}
/* Texto tal cual lo publica la fuente (Cloudflare lo da en ingles).
   Va aparte y en cursiva para que se vea que es una cita y no una
   traduccion nuestra. */
table.detalle .cita{
  display:block;
  font-style:italic;
  color:var(--muted);
  font-size:.75rem;
  line-height:1.4;
  margin-top:.1rem;
  white-space:normal;
}
table.detalle td.desv{color:var(--muted)}
table.detalle td.desv.cruza{color:var(--signal)}
table.detalle td.desv.falta{color:var(--unmeasured)}
table.detalle tr.muda td,
table.detalle tr.muda .nombre{color:var(--unmeasured)}

details.acerca .panel p{
  font-size:.9375rem;
  color:var(--muted);
  max-width:34rem;
}
details.acerca .panel strong{color:var(--ink);font-weight:600}
.origenes{
  margin:0;
  font-family:var(--mono);
  font-size:.8125rem;
  line-height:1.9;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.1rem 1.25rem;
  color:var(--muted);
}
.origenes dt{color:var(--ink);white-space:nowrap}
.origenes dd{margin:0;word-break:break-all}
@media (max-width:30rem){
  .origenes{grid-template-columns:1fr;gap:0}
  .origenes dd{margin:0 0 .5rem}
}

.cierre{
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.6;
  color:var(--muted);
  margin:2.5rem 0 0;
  max-width:34rem;
}

a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:3px}
a:focus-visible,:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
[hidden]{display:none !important}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* ==================================================================
   PÁGINAS DE CASO

   Se añade ahora y no antes porque hasta que existió la segunda página
   no había forma de saber qué era común y qué era del índice. Todo lo
   de aquí abajo lo comparten las cuatro páginas de estudio.
   ================================================================== */

/* La cabecera envuelve en pantallas estrechas. Medido a 375 px: la
   etiqueta ocupa 112 px y la navegación 162, con 61 de hueco. Meter
   "Casos" --41 px más el separador y sus espacios, unos 53-- deja 8 px
   de margen, y a 360 px, que es un ancho muy común en Android, ya no
   existen. Envolviendo, la navegación cae a una segunda línea alineada
   a la derecha en vez de desbordarse o recortarse. */
.cab{flex-wrap:wrap}
.acciones{margin-left:auto}

/* El ancho de lectura es menor que el del índice. 44rem funciona para
   filas con su tabla al lado; para prosa continua son unos 90
   caracteres por línea, bastante más de lo que se lee cómodo. 36rem
   deja ~72, que es el rango habitual. */
.caso{max-width:36rem}

.caso .entradilla{
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.06em;
  color:var(--muted);
  margin:0 0 2.5rem;
}

/* El filete superior hace el trabajo de los separadores del original:
   cada sección empieza con una línea, sin necesidad de un <hr> que un
   lector de pantalla anunciaría por separado. */
.caso h2{
  font-size:1rem;
  font-weight:600;
  line-height:1.3;
  margin:2.5rem 0 .8rem;
  padding-top:1.5rem;
  border-top:1px solid var(--rule);
}

.caso h3{
  font-family:var(--mono);
  font-size:.6875rem;
  font-weight:400;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin:1.75rem 0 .5rem;
}

.caso p{margin:0 0 .9rem}
.caso strong{font-weight:600}
.caso ul{margin:0 0 .9rem;padding-left:1.15rem}
.caso li{margin:0 0 .4rem}
.caso code{
  font-family:var(--mono);
  font-size:.875em;
  background:rgba(201,200,193,.35);
  padding:.05em .3em;
  border-radius:2px;
}

/* Las tablas de los casos son datos, así que reutilizan el
   table.detalle del índice y el mismo .marco que las deja desplazarse
   solas en vez de desbordar la columna de texto. */
.caso .marco{margin:0 0 1.3rem}

/* En rojo de señal porque lo que va aquí es una advertencia sobre el
   propio dato, no una cita de nadie. */
.caso blockquote{
  margin:0 0 1.3rem;
  padding:.1rem 0 .1rem 1rem;
  border-left:2px solid var(--signal);
  color:var(--muted);
  font-size:.9375rem;
}

.volver{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  margin-top:2.5rem;
  padding-top:1.5rem;
  border-top:1px solid var(--rule);
  width:100%;
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.08em;
  color:var(--muted);
  text-decoration:none;
}
.volver:hover{color:var(--ink)}

/* En las páginas de caso el conmutador no cambia el texto en sitio:
   navega a la página gemela, que es una URL distinta e indexable. Por
   eso aquí es un enlace y en el índice un botón. Y esa es justamente
   la razón de tener dos URLs por caso: el hreflang no se puede
   declarar sobre una sola URL que cambia de idioma con JavaScript. */
.idioma.par{cursor:default}
.idioma.par a{color:var(--muted);text-decoration:none}
.idioma.par a:hover{color:var(--ink)}
.idioma.par a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ---------------- lista de casos ---------------- */
/* No usa .caso: aquella es la pagina de un documento, esta es un
   indice. Comparten paleta y tipografia, no estructura. */
.lista{max-width:36rem;margin:0;padding:0;list-style:none}
.lista li{padding:1.6rem 0;border-top:1px solid var(--rule)}
.lista .clase{
  font-family:var(--mono);
  font-size:.6875rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 .45rem;
}
.lista h2{font-size:1rem;font-weight:600;line-height:1.3;margin:0 0 .4rem}
.lista h2 a{
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--rule);
}
.lista h2 a:hover{border-bottom-color:var(--ink)}
.lista .resumen{margin:0;color:var(--muted);font-size:.9375rem}

/* La linea de apoyo va DESPUES del descargo, no antes: lo ultimo que
   se lee no debe ser la peticion, y el descargo pesa mas. Separadas
   para que se lean como dos notas y no como un parrafo. */
.cierre + .cierre{margin-top:1rem}

/* La linea de apoyo va detras del enlace de vuelta, y ese ya trae su
   propio filete y su margen de 2,5rem. Sin esto quedaria un hueco de
   mas de 100 px entre los dos. */
.volver + .cierre,
article.caso + .cierre{margin-top:1rem}

/* La frase de apoyo se parte en el punto, no donde caiga. Medido a
   375 px, el corte natural dejaba "apoyarlo." solo en la segunda
   linea: la unica palabra pulsable, huerfana. Un <br> no sirve aqui
   porque en el indice esa frase se rellena con data-t, que escribe
   textContent y lo mostraria literal. */
.apoyo span:first-child{display:block}