/* =============================================================================
   Blog de Lexinit — hoja de estilo única.

   Los tokens son copia literal de front-react/src/styles/main.css, que es el
   único front con modo oscuro y tokens semánticos resueltos. El blog no puede
   importar ese CSS (vive en otro contenedor y otro pipeline), así que se
   duplican a mano: si allí cambia la paleta, aquí hay que reflejarlo.

   Sin degradados en ningún sitio, por decisión de marca.
   ========================================================================== */

:root {
  --primary: #24727d;          /* teal Lexinit — Pantone 7716 C */
  --primary-hover: #1a5a64;
  --primary-fg: #ffffff;
  --secondary: #222a30;        /* carbón */
  --tertiary: #c6a24a;         /* dorado, acento editorial */
  --quinary: #3fa58a;

  --bg: #f5f3f8;               /* lila muy pálido — la firma visual */
  --surface: #ffffff;
  --fg: #1e293b;
  --muted-fg: #64748b;
  --border: #e2e8f0;
  --accent: #e7f0f1;
  --septenary: #efe7d2;        /* crema, para el aviso legal */

  --radio: 0.625rem;
  --ancho: 1200px;
  --lectura: 720px;

  --sans: "Source Sans 3", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Source Serif 4", ui-serif, Georgia, "Times New Roman", serif;

  color-scheme: light;
}

.dark {
  /* El teal de marca no tiene contraste suficiente sobre fondo oscuro:
     se aclara. Lo mismo el dorado. */
  --primary: #4da7b3;
  --primary-hover: #6ab8c3;
  --primary-fg: #0b2f34;
  --tertiary: #d4b466;
  --quinary: #54b89c;

  --bg: #15191d;
  --surface: #1c2127;
  --fg: #e7edf0;
  --muted-fg: #94a3b8;
  --border: rgba(255, 255, 255, 0.1);
  --accent: #1f3a3f;
  --septenary: #262c33;

  color-scheme: dark;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 300; line-height: 1.2; }
a { color: var(--primary); }
a:hover { color: var(--primary-hover); }
img { max-width: 100%; height: auto; }

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

.saltar {
  position: absolute; left: -9999px;
  background: var(--primary); color: var(--primary-fg);
  padding: .75rem 1rem; z-index: 100;
}
.saltar:focus { left: 1rem; top: 1rem; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── Cabecera ─────────────────────────────────────────────────────────────── */

.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.cabecera__fila { display: flex; align-items: center; gap: 1.5rem; height: 3.5rem; }
.marca { font-family: var(--serif); font-size: 1.25rem; font-weight: 600;
         color: var(--fg); text-decoration: none; }
.nav { display: flex; gap: 1.25rem; margin-left: auto; }
.nav a { color: var(--muted-fg); text-decoration: none; font-size: .925rem; }
.nav a:hover, .nav a[aria-current] { color: var(--primary); }
.cabecera__acciones { display: flex; align-items: center; gap: .75rem; }

.tema {
  background: none; border: 1px solid var(--border); border-radius: var(--radio);
  width: 2.25rem; height: 2.25rem; cursor: pointer; color: var(--fg);
  display: grid; place-items: center; font-size: 1rem;
}
/* Los iconos se alternan por CSS, no por JS: así pintan bien desde el primer
   frame, sin esperar a que corra ningún script. */
.tema__oscuro { display: none; }
.dark .tema__claro { display: none; }
.dark .tema__oscuro { display: inline; }

.boton {
  display: inline-block; padding: .5rem 1rem; border-radius: var(--radio);
  text-decoration: none; font-size: .925rem; font-weight: 500;
  border: 1px solid transparent;
}
.boton--primario { background: var(--primary); color: var(--primary-fg); }
.boton--primario:hover { background: var(--primary-hover); color: var(--primary-fg); }

@media (max-width: 768px) {
  .nav { display: none; }
  .cabecera__acciones { margin-left: auto; }
}

/* ── Encabezado de sección ────────────────────────────────────────────────── */

.migas { font-size: .8rem; color: var(--muted-fg); padding: 1.5rem 0 0; }
.migas a { color: var(--muted-fg); text-decoration: none; }
.migas a:hover { color: var(--primary); }

.encabezado { padding: 1.5rem 0 2rem; }
.encabezado h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 0; }
.encabezado__regla {
  width: 4rem; height: .25rem; border-radius: 999px;
  background: var(--tertiary); margin: 1rem 0;
}
.encabezado p { color: var(--muted-fg); max-width: 42rem; margin: 0; }

/* ── Buscador y chips ─────────────────────────────────────────────────────── */

.buscador { display: flex; gap: .5rem; margin: 1.5rem 0; max-width: 34rem; }
.buscador input {
  flex: 1; padding: .625rem .875rem; font: inherit;
  border: 1px solid var(--border); border-radius: var(--radio);
  background: var(--surface); color: var(--fg);
}

.kicker {
  font-size: .75rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--primary); margin: 2rem 0 .75rem;
}

/* Los chips son <a href> reales, no botones con onclick: cada tema es una
   página indexable con su propio h1, no un estado invisible del cliente. */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.chip {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .375rem .75rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--fg); text-decoration: none; font-size: .875rem;
}
.chip:hover { border-color: var(--primary); color: var(--primary); }
.chip[aria-current] {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary); border-color: color-mix(in srgb, var(--primary) 30%, transparent);
}
.chip__n { font-variant-numeric: tabular-nums; color: var(--muted-fg); font-size: .8rem; }

@media (max-width: 768px) {
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: .25rem; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; }
}

/* ── Tarjetas ─────────────────────────────────────────────────────────────── */

.rejilla {
  display: grid; gap: 1.25rem; padding: 0; margin: 0 0 2.5rem; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}
.tarjeta {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radio); overflow: hidden;
}
.tarjeta:hover { border-color: var(--primary); }
/* width y height explícitos en el HTML + aspect-ratio aquí: sin esto la imagen
   provoca layout shift al cargar y se paga en CLS. */
.tarjeta__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--accent); }
.tarjeta__cuerpo { padding: 1rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.tarjeta__tags { display: flex; flex-wrap: wrap; gap: .375rem; }
.tarjeta__tag { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
                color: var(--primary); }
.tarjeta h3 { font-size: 1.125rem; margin: 0; }
.tarjeta h3 a { color: var(--fg); text-decoration: none; }
.tarjeta h3 a:hover { color: var(--primary); }
.tarjeta__resumen {
  color: var(--muted-fg); font-size: .9rem; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tarjeta__pie {
  margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--border);
  font-size: .8rem; color: var(--muted-fg);
}

/* ── Paginación ───────────────────────────────────────────────────────────── */

.paginacion { display: flex; gap: .5rem; justify-content: center;
              align-items: center; margin: 2rem 0 3rem; flex-wrap: wrap; }
.paginacion a, .paginacion span {
  padding: .5rem .75rem; border-radius: var(--radio);
  border: 1px solid var(--border); text-decoration: none; font-size: .9rem;
}
.paginacion [aria-current] { background: var(--primary); color: var(--primary-fg);
                             border-color: var(--primary); }
.paginacion span { color: var(--muted-fg); border-color: transparent; }

/* ── Artículo ─────────────────────────────────────────────────────────────── */

.articulo { display: grid; gap: 2.5rem; padding-bottom: 3rem;
            grid-template-columns: minmax(0, 1fr); }

@media (min-width: 1024px) {
  .articulo { grid-template-columns: 13rem minmax(0, 1fr); }
}
@media (min-width: 1280px) {
  .articulo { grid-template-columns: 13rem minmax(0, 1fr) 17rem; }
}

.indice { position: sticky; top: 5rem; align-self: start;
          max-height: 70vh; overflow-y: auto; font-size: .875rem; }
.indice ul { list-style: none; margin: .5rem 0 0; padding: 0; }
.indice li { margin: 0; }
.indice a {
  display: block; padding: .3rem 0 .3rem .75rem;
  border-left: 2px solid var(--border);
  color: var(--muted-fg); text-decoration: none;
}
.indice a:hover { color: var(--primary); }
.indice a.activo { color: var(--primary); border-left-color: var(--primary); }
.indice .n3 { padding-left: 1.5rem; font-size: .825rem; }
@media (max-width: 1023px) { .indice--lateral { display: none; } }

/* En mobile el índice es un <details> nativo: cero JavaScript. */
.indice--movil { margin: 1.5rem 0; border: 1px solid var(--border);
                 border-radius: var(--radio); background: var(--surface); }
.indice--movil summary { padding: .75rem 1rem; cursor: pointer; font-weight: 500; }
.indice--movil ul { padding: 0 1rem 1rem; }
@media (min-width: 1024px) { .indice--movil { display: none; } }

.post__categoria { font-size: .75rem; text-transform: uppercase;
                   letter-spacing: .12em; color: var(--primary); }
.post h1 { font-size: clamp(1.875rem, 4.5vw, 2.75rem); margin: .5rem 0 1rem;
           text-wrap: balance; }
.post__meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem;
              color: var(--muted-fg); font-size: .875rem; margin-bottom: 1rem; }
.post__autores a { color: var(--fg); text-decoration: none; font-weight: 500; }
.post__autores a:hover { color: var(--primary); }
.post__acciones { display: flex; gap: .5rem; margin: 1rem 0 1.5rem; }
.post__acciones button, .post__acciones a {
  font: inherit; font-size: .875rem; padding: .45rem .8rem;
  border: 1px solid var(--border); border-radius: var(--radio);
  background: var(--surface); color: var(--fg); cursor: pointer; text-decoration: none;
  min-height: 2.5rem;
}
.post__acciones button:hover { border-color: var(--primary); color: var(--primary); }

.post__portada { width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
                 border-radius: var(--radio); margin-bottom: 1.5rem; }
.post__resumen { font-size: 1.125rem; color: var(--muted-fg); margin-bottom: 2rem; }

/* Cuerpo del post. Es el único sitio donde entra HTML escrito por usuarios,
   ya sanitizado en el servidor. */
.prosa { max-width: var(--lectura); }
.prosa h2 { font-size: 1.75rem; margin: 2.5rem 0 1rem; scroll-margin-top: 5.5rem; }
.prosa h3 { font-size: 1.35rem; margin: 2rem 0 .75rem; scroll-margin-top: 5.5rem; }
.prosa p, .prosa ul, .prosa ol { margin: 0 0 1.25rem; }
.prosa li { margin-bottom: .5rem; }
.prosa img { border-radius: var(--radio); margin: 1.5rem 0; }
.prosa figure { margin: 1.5rem 0; }
.prosa figcaption { font-size: .85rem; color: var(--muted-fg); text-align: center;
                    margin-top: .5rem; }
.prosa blockquote {
  margin: 1.5rem 0; padding: .5rem 0 .5rem 1.25rem;
  border-left: 3px solid var(--tertiary); color: var(--muted-fg); font-style: italic;
}
.prosa table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .925rem; }
.prosa th, .prosa td { border: 1px solid var(--border); padding: .625rem .75rem; text-align: left; }
.prosa th { background: var(--accent); font-weight: 600; }
.prosa code { background: var(--accent); padding: .15em .4em; border-radius: .25rem;
              font-size: .9em; }
.prosa pre { background: var(--secondary); color: #e7edf0; padding: 1rem;
             border-radius: var(--radio); overflow-x: auto; }
.prosa pre code { background: none; padding: 0; }
/* Tablas y bloques anchos scrollean dentro de su caja; el body nunca. */
.prosa > * { overflow-wrap: break-word; }

@media (max-width: 767px) {
  /* Imágenes a sangre completa en móvil */
  .prosa img { margin-left: -1.25rem; width: calc(100% + 2.5rem); max-width: none;
               border-radius: 0; }
}

.aviso {
  background: var(--septenary); border: 1px solid var(--border);
  border-radius: var(--radio); padding: 1rem 1.25rem; margin: 2rem 0;
  font-size: .9rem;
}
.aviso strong { display: block; margin-bottom: .25rem; }
.aviso__datos { color: var(--muted-fg); font-size: .825rem; margin: .5rem 0 0; }

.autores-pie { margin: 2.5rem 0; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.autor-ficha { display: flex; gap: .875rem; margin-bottom: 1.25rem; }
.autor-ficha img { width: 3rem; height: 3rem; border-radius: 999px; object-fit: cover; }
.autor-ficha__nombre { font-weight: 600; }
.autor-ficha__meta { color: var(--muted-fg); font-size: .875rem; }
.verificado { color: var(--quinary); font-size: .8rem; }

.lateral { align-self: start; }
@media (min-width: 1280px) { .lateral { position: sticky; top: 5rem; } }
.lateral h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .1em;
              color: var(--muted-fg); font-family: var(--sans); font-weight: 600; }

/* ── Progreso de lectura ──────────────────────────────────────────────────── */

.progreso {
  position: fixed; bottom: 1.5rem; right: 1.5rem; width: 3rem; height: 3rem;
  border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  color: var(--fg); cursor: pointer; display: grid; place-items: center;
  opacity: 0; visibility: hidden; transition: opacity .2s;
}
.progreso.visible { opacity: 1; visibility: visible; }
.progreso svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.progreso circle { fill: none; stroke-width: 2; }
.progreso .pista { stroke: var(--border); }
.progreso .avance { stroke: var(--primary); stroke-linecap: round; transition: stroke-dashoffset .1s; }

@media (max-width: 767px) { .progreso { bottom: 1rem; right: 1rem; } }

/* ── Estados ──────────────────────────────────────────────────────────────── */

.vacio { text-align: center; padding: 3rem 1rem; color: var(--muted-fg); }
.error-pagina { text-align: center; padding: 5rem 1rem; }
.error-pagina h1 { font-size: 2.5rem; margin-bottom: .5rem; }
.error-pagina p { color: var(--muted-fg); }

/* ── Pie ──────────────────────────────────────────────────────────────────── */

.pie { border-top: 1px solid var(--border); padding: 2.5rem 0; margin-top: 2rem;
       font-size: .875rem; color: var(--muted-fg); }
.pie__marca { font-family: var(--serif); margin: 0 0 1rem; }
.pie__enlaces { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.pie__enlaces a { color: var(--muted-fg); text-decoration: none; }
.pie__enlaces a:hover { color: var(--primary); }
.pie__contacto { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}