/*
 * Cabecera y pie del sitio público: los mismos en la portada y en el blog.
 *
 * Antes el blog tenía su propia cabecera «parecida» —otro logo, otro tamaño, otros
 * enlaces— y pasar de una página a otra parecía cambiar de sitio. Estas reglas son la
 * única fuente: las importa `LandingPage.tsx` y el generador del blog las incrusta en cada
 * guía. Si algo cambia aquí, cambia en los dos lados a la vez.
 *
 * Las variables de color viven aquí por lo mismo: `.lp-page` las declaraba solo para la
 * portada, y el blog acababa inventando tonos casi iguales pero no iguales.
 */

:root {
  --navy: #17363d;
  --teal: #17656c;
  --mint: #e7f1ea;
  --cream: #f8f6f0;
}

.lp-nav {
  position: relative;
  z-index: 20;
  width: min(1180px, calc(100% - 64px));
  height: 84px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lp-brand { display: flex; align-items: center; gap: 10px; }
/*
 * La aplicación trae `a { color: inherit; text-decoration: none }` de `index.css`, que una
 * guía servida como HTML suelto no tiene. Sin esto, la misma cabecera sale subrayada y en
 * otro color en el blog, que es justo lo que hace pensar que son dos sitios distintos.
 */
.lp-nav a, .lp-footer a { color: inherit; text-decoration: none; }
.lp-nav a:hover, .lp-footer a:hover { color: var(--teal); }
.lp-nav-links { display: flex; align-items: center; gap: 25px; color: #68787b; font-size: 11px; font-weight: 700; }
.lp-login { margin-left: 8px; color: var(--teal) !important; }
.lp-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 15px;
  border-radius: 9px;
  color: #fff !important;
  background: var(--teal);
  box-shadow: 0 8px 18px #17656c29;
}
.lp-menu { display: none; border: 0; background: none; color: var(--teal); }

.lp-footer {
  width: min(1180px, calc(100% - 64px));
  min-height: 105px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #849092;
  font-size: 9px;
}
.lp-footer > div { display: flex; gap: 24px; color: #617477; font-weight: 700; }

@media (max-width: 680px) {
  .lp-nav, .lp-footer { width: calc(100% - 38px); }
  .lp-footer { padding: 25px 0; align-items: flex-start; flex-direction: column; gap: 18px; }
  .lp-footer > div { flex-wrap: wrap; }
  /*
   * El menú desplegable de la portada necesita JavaScript, y una guía se sirve como HTML
   * estático. En el teléfono deja a la vista lo que importa —la marca y el botón— en vez
   * de amontonar siete enlaces.
   */
  .lp-nav.sin-menu .lp-nav-links a:not(.lp-nav-cta) { display: none; }
}

/*
 * Hoja del blog.
 *
 * CSS escrito a mano y no Tailwind: el blog necesita tipografía de lectura —medida, ritmo,
 * tablas que se desplazan en el teléfono—, no utilidades de interfaz. Colores y fuentes
 * son los de la portada (`src/index.css`) para que pasar de una guía a la aplicación no
 * parezca cambiar de sitio. Móvil primero: la mayoría de docentes llega desde el teléfono.
 */

/*
 * Los colores son los de la portada: `--navy`, `--teal`, `--mint` y `--cream` los declara
 * `src/marcaPublica.css`, que esta hoja acompaña. Aquí solo se nombran los que la lectura
 * necesita y que la portada no tiene: el gris del texto secundario, la línea y el papel.
 */
:root {
  --tinta: var(--navy);
  --tenue: #68787b;
  --papel: #fffefa;
  --fondo: var(--cream);
  --linea: #dce1dc;
  --petroleo: var(--teal);
  --petroleo-oscuro: #11504f;
  --salvia: #438274;
  --salvia-suave: var(--mint);
  --coral: #d47760;
  --medida: 44rem;
  color-scheme: light;
}

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

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

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 400 1.0625rem/1.7 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }

a { color: var(--petroleo); text-underline-offset: .18em; }
a:hover { color: var(--petroleo-oscuro); }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; border-radius: 4px; }

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

.contenedor { width: min(100% - 2.5rem, 72rem); margin-inline: auto; }

/* Botones de la guía. La cabecera y el pie viven en `src/marcaPublica.css`. */

.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.9rem; padding: 0 1.25rem; border-radius: 10px;
  background: var(--petroleo); color: #fff; font-weight: 700; font-size: .95rem; text-decoration: none;
}
.boton:hover { background: var(--petroleo-oscuro); color: #fff; }
.boton-pequeno { min-height: 2.4rem; padding: 0 .9rem; font-size: .85rem; }

/* Migas y etiquetas */

.migas ol { display: flex; flex-wrap: wrap; gap: .25rem; margin: 1.5rem 0 0; padding: 0; list-style: none; color: var(--tenue); font-size: .85rem; }
.migas li:not(:last-child)::after { content: '›'; margin-left: .35rem; }
.migas li[aria-current] { overflow: hidden; max-width: 22ch; white-space: nowrap; text-overflow: ellipsis; }
.migas a { color: var(--tenue); }

.etiqueta { margin: 0; color: var(--salvia); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

h1, h2, h3 { font-family: Newsreader, Georgia, serif; font-weight: 600; letter-spacing: -.015em; line-height: 1.15; }

/* Artículo */

.articulo { max-width: var(--medida); margin: 1.5rem auto 0; }
.articulo-cabecera h1 { margin: .6rem 0 0; font-size: clamp(2rem, 6vw, 3rem); }
.entradilla { margin: 1rem 0 0; color: var(--tenue); font-size: 1.15rem; line-height: 1.55; }
.firma { margin: 1.25rem 0 0; padding-bottom: 1.5rem; border-bottom: 1px solid var(--linea); color: var(--tenue); font-size: .9rem; }
.portada { display: block; margin-top: 2rem; border-radius: 14px; }

.indice { margin-top: 2rem; padding: 1.1rem 1.35rem; border: 1px solid var(--linea); border-radius: 12px; background: var(--papel); }
.indice p { margin: 0 0 .4rem; font-weight: 700; }
.indice ol { margin: 0; padding-left: 1.2rem; }
.indice li + li { margin-top: .2rem; }

.prosa { margin-top: 2rem; }
.prosa > * + * { margin-top: 1.1rem; }
.prosa h2 { margin-top: 2.75rem; font-size: clamp(1.6rem, 4.5vw, 2rem); scroll-margin-top: 1.5rem; }
.prosa h3 { margin-top: 2rem; font-size: 1.35rem; scroll-margin-top: 1.5rem; }
.prosa h2 + *, .prosa h3 + * { margin-top: .7rem; }
.prosa p, .prosa ul, .prosa ol { margin-bottom: 0; }
.prosa ul, .prosa ol { padding-left: 1.4rem; }
.prosa li + li { margin-top: .35rem; }
.prosa strong { font-weight: 700; }
.prosa blockquote { margin-inline: 0; padding: .9rem 1.2rem; border-left: 4px solid var(--salvia); border-radius: 0 10px 10px 0; background: var(--salvia-suave); }
.prosa blockquote > :first-child { margin-top: 0; }
.prosa blockquote > * { margin-bottom: 0; }
.prosa img { display: block; border-radius: 10px; }
.prosa code { padding: .1em .35em; border-radius: 5px; background: var(--salvia-suave); font-size: .92em; }
.prosa hr { margin-block: 2.5rem; border: 0; border-top: 1px solid var(--linea); }

.tabla { overflow-x: auto; border: 1px solid var(--linea); border-radius: 10px; background: var(--papel); }
.tabla table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .95rem; line-height: 1.5; }
.tabla th, .tabla td { padding: .65rem .85rem; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; }
.tabla th { background: var(--salvia-suave); font-weight: 700; }
.tabla tr:last-child td { border-bottom: 0; }

.llamado { margin-top: 2.5rem; padding: 1.5rem; border-radius: 14px; background: var(--salvia-suave); }
.llamado p { margin: 0; }
.llamado-titulo { font: 600 1.4rem/1.2 Newsreader, Georgia, serif; }
.llamado p + p { margin-top: .5rem; color: var(--tinta); }
.llamado .boton { margin-top: 1.1rem; }

.fuentes { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--linea); font-size: .95rem; }
.fuentes h2 { margin: 0; font-size: 1.25rem; }
.fuentes ul { margin: .6rem 0 0; padding-left: 1.2rem; }

/* Listados: índice, relacionados, autor */

.indice-cabecera { max-width: var(--medida); margin-top: 3rem; }
.indice-cabecera h1 { margin: .6rem 0 0; font-size: clamp(2.2rem, 7vw, 3.4rem); }
.autor-enlaces { display: flex; gap: 1rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.autor-seccion { margin-top: 3rem; }
.autor-seccion h2 { margin: 0; font-size: 1.6rem; }
.autor-seccion .tarjetas { margin-top: 1.25rem; }

.tarjetas { display: grid; gap: 1rem; margin: 2.5rem 0 0; padding: 0; list-style: none; }
.tarjeta { height: 100%; padding: 1.35rem; border: 1px solid var(--linea); border-radius: 14px; background: var(--papel); }
.tarjeta h2, .tarjeta h3 { margin: .5rem 0 0; font-size: 1.4rem; }
.tarjeta h2 a, .tarjeta h3 a { color: var(--tinta); text-decoration: none; }
.tarjeta h2 a:hover, .tarjeta h3 a:hover { color: var(--petroleo); text-decoration: underline; }
.tarjeta p { margin: .6rem 0 0; color: var(--tenue); font-size: .95rem; line-height: 1.55; }
.tarjeta .fecha { font-size: .82rem; }

.relacionados { max-width: var(--medida); margin: 4rem auto 0; }
.relacionados h2 { margin: 0; font-size: 1.6rem; }
.relacionados .tarjetas { margin-top: 1.25rem; }

.vacio { margin-top: 2rem; color: var(--tenue); }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 2rem; }

.franja-borrador { margin: 0; padding: .6rem 1rem; background: #fbece6; color: #8a3b27; font-weight: 700; text-align: center; }

@media (min-width: 48rem) {
  body { font-size: 1.125rem; }
  .tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .relacionados .tarjetas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .llamado { padding: 2rem; }
}