/* assets/css/articulo.css
   Estilos de la página de lectura de un artículo. Prefijo: ar-
   Se carga DESPUÉS de base.css.

   PROHIBICIÓN QUE IMPORTA: aquí no hay ningún bloque :root. El archivo que
   esto sustituye declaraba --fondo: #f4f7f6, y --fondo es también un token
   semántico del sistema (claro #f0f4f8 / oscuro #070d1a). Redeclararlo aquí
   rompería el tema oscuro de toda la página.

   Tampoco hay un solo color hexadecimal salvo sobre superficies que son
   oscuras siempre. Es la comprobación más simple de que el tema oscuro
   funcionará sin escribir una regla más: si no hay hex, funciona. */

/* ------------------------------------------------------------ Estructura - */
.ar-cuerpo-pagina { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: var(--e-5); align-items: start; padding: var(--e-5) 0 var(--e-7); }
@media (max-width: 980px) { .ar-cuerpo-pagina { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- Migas --- */
.ar-migas { display: flex; gap: var(--e-2); flex-wrap: wrap; align-items: center; font-size: .82rem; color: var(--texto-tenue); margin-bottom: var(--e-3); }
.ar-migas a { color: var(--texto-tenue); text-decoration: none; }
.ar-migas a:hover { color: var(--azul); }
.ar-migas i { font-size: .6rem; opacity: .5; }
.ar-migas [aria-current] { color: var(--texto); font-weight: 600; }

/* ------------------------------------------------------------- Artículo -- */
.ar-ficha { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r); box-shadow: var(--sombra); overflow: hidden; }
.ar-portada { aspect-ratio: 16/9; background: var(--superficie-2); overflow: hidden; }
.ar-portada img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ar-interior { padding: var(--e-4); }
@media (max-width: 620px) { .ar-interior { padding: var(--e-3); } }

.ar-categoria { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; background: var(--superficie-2); color: var(--azul); padding: 6px 14px; border-radius: var(--r-full); font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.ar-categoria:hover { background: var(--naranja); color: #000; }

.ar-titulo { font-size: clamp(1.6rem, 4vw, 2.5rem); line-height: 1.22; color: var(--titulo); margin: var(--e-3) 0; letter-spacing: -.015em; }
.ar-resumen { font-size: 1.06rem; line-height: 1.7; color: var(--texto-tenue); border-left: 3px solid var(--azul); padding-left: var(--e-3); margin-bottom: var(--e-3); }

.ar-datos { display: flex; gap: var(--e-3); flex-wrap: wrap; align-items: center; font-size: .82rem; color: var(--texto-tenue); border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); padding: var(--e-2) 0; margin-bottom: var(--e-4); }
.ar-datos span { display: inline-flex; align-items: center; gap: 6px; }

/* ------------------------------------------- Contenido venido de la BD --- */
/* Estas reglas se portan literalmente del archivo anterior. El HTML lo pega el
   administrador desde fuera y trae medidas fijas; sin ellas, artículos ya
   publicados se desbordan en el teléfono. El !important está a propósito: el
   height fijo viene en el atributo del propio <img>. */
.ar-texto { font-size: 1.05rem; line-height: 1.85; color: var(--texto); }
.ar-texto p { margin-bottom: var(--e-3); }
.ar-texto h2, .ar-texto h3, .ar-texto h4 { color: var(--titulo); margin: var(--e-4) 0 var(--e-2); line-height: 1.3; }
.ar-texto h2 { font-size: 1.5rem; } .ar-texto h3 { font-size: 1.25rem; }
.ar-texto img { max-width: 100%; height: auto !important; border-radius: var(--r-sm); margin: var(--e-3) 0; }
.ar-texto iframe { max-width: 100%; border-radius: var(--r-sm); }
.ar-texto table { width: 100%; border-collapse: collapse; margin: var(--e-3) 0; font-size: .93rem; }
.ar-texto th, .ar-texto td { border: 1px solid var(--borde); padding: 10px; text-align: left; }
.ar-texto th { background: var(--superficie-2); font-weight: 700; }
.ar-texto a { color: var(--azul); font-weight: 700; text-decoration: underline; }
.ar-texto a:hover { color: var(--naranja); }
.ar-texto ul, .ar-texto ol { margin: 0 0 var(--e-3) var(--e-4); }
.ar-texto li { margin-bottom: var(--e-1); }
.ar-texto blockquote { border-left: 4px solid var(--azul); background: var(--superficie-2); padding: var(--e-3); margin: var(--e-3) 0; border-radius: 0 var(--r-sm) var(--r-sm) 0; font-style: italic; color: var(--texto-tenue); }
.ar-texto code { font-family: var(--mono); background: var(--superficie-2); padding: 2px 6px; border-radius: 4px; font-size: .9em; }

/* ------------------------------------------------------------------ PDF -- */
.ar-pdf { background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--r); padding: var(--e-3); margin: var(--e-4) 0; }
.ar-pdf-cab { display: flex; gap: var(--e-3); align-items: center; flex-wrap: wrap; }
.ar-pdf-icono { font-size: 2rem; color: var(--rojo); }
.ar-pdf-txt { flex: 1; min-width: 180px; }
.ar-pdf-txt b { display: block; color: var(--titulo); font-size: .98rem; }
.ar-pdf-txt small { color: var(--texto-tenue); font-size: .8rem; }
.ar-pdf-bajar { background: var(--azul); color: #fff; text-decoration: none; padding: 11px 20px; border-radius: var(--r-sm); font-weight: 700; font-size: .88rem; white-space: nowrap; transition: filter var(--transicion); }
.ar-pdf-bajar:hover { filter: brightness(1.12); }
.ar-visor { width: 100%; height: 80vh; border: 1px solid var(--borde); border-radius: var(--r-sm); margin-top: var(--e-3); background: var(--superficie); }

/* ------------------------------------------------------------ Compartir -- */
.ar-compartir { display: flex; gap: var(--e-2); flex-wrap: wrap; align-items: center; margin-top: var(--e-4); padding-top: var(--e-3); border-top: 1px solid var(--borde); }
.ar-compartir b { font-size: .82rem; color: var(--texto-tenue); font-weight: 700; margin-right: var(--e-1); }
.ar-comp {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none; cursor: pointer;
  border: 1px solid var(--borde); background: var(--superficie); color: var(--texto-tenue);
  padding: 9px 15px; border-radius: var(--r-full); font-size: .84rem; font-weight: 600;
  font-family: var(--fuente); transition: var(--transicion);
}
.ar-comp:hover { transform: translateY(-2px); box-shadow: var(--sombra-sm); color: var(--azul); border-color: var(--azul); }
.ar-comp.ok { color: var(--verde); border-color: var(--verde); }

/* --------------------------------------------------------- Relacionados - */
.ar-relacionados { margin-top: var(--e-5); }
.ar-relacionados > h2 { font-size: 1.2rem; color: var(--titulo); margin-bottom: var(--e-3); display: flex; align-items: center; gap: 10px; }
.ar-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--e-3); }
.ar-rel { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r); overflow: hidden; text-decoration: none; display: flex; flex-direction: column; transition: var(--transicion); }
.ar-rel:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.ar-rel-img { aspect-ratio: 16/10; background: var(--superficie-2); overflow: hidden; display: grid; place-items: center; }
.ar-rel-img img { width: 100%; height: 100%; object-fit: cover; }
.ar-rel-img i { font-size: 1.8rem; color: var(--texto-tenue); opacity: .3; }
.ar-rel-txt { padding: var(--e-2) var(--e-3) var(--e-3); }
.ar-rel-txt h3 { font-size: .95rem; line-height: 1.35; color: var(--titulo); margin-bottom: 6px; }
.ar-rel-txt p { font-size: .8rem; color: var(--texto-tenue); line-height: 1.5; }

/* ---------------------------------------------------------- Lateral ------ */
.ar-lateral { position: sticky; }
@media (max-width: 980px) { .ar-lateral { position: static; } }
.ar-caja { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r); padding: var(--e-3); box-shadow: var(--sombra-sm); margin-bottom: var(--e-3); }
.ar-caja h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--texto-tenue); margin-bottom: var(--e-2); display: flex; align-items: center; gap: 8px; }
.ar-cat-lista { list-style: none; }
.ar-cat-lista li { border-bottom: 1px solid var(--borde); }
.ar-cat-lista li:last-child { border-bottom: 0; }
.ar-cat-lista a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 4px; text-decoration: none; color: var(--texto); font-size: .9rem; transition: var(--transicion); }
.ar-cat-lista a:hover { color: var(--azul); padding-left: 10px; }
.ar-cat-lista i { font-size: .65rem; color: var(--texto-tenue); }

.ar-cta { background: linear-gradient(140deg, var(--azul-hondo), var(--azul)); border: 0; }
.ar-cta h3 { color: var(--ambar); }
.ar-cta p { font-size: .88rem; line-height: 1.6; color: #d6e6f8; margin-bottom: var(--e-3); }
.ar-cta a { display: block; text-align: center; background: var(--ambar); color: #3d2f00; padding: 12px; border-radius: var(--r-sm); text-decoration: none; font-weight: 800; font-size: .88rem; }
.ar-cta a:hover { filter: brightness(1.08); }
.ar-cta .ar-correo { display: block; text-align: center; margin-top: var(--e-2); font-size: .8rem; color: #a9cbf0; background: none; padding: 0; }

/* --------------------------------------------------------------- Pie ----- */
.ar-pie { background: var(--azul-hondo); color: #9fb6d4; text-align: center; padding: var(--e-4) var(--e-3); font-size: .85rem; }
.ar-pie a { color: var(--ambar); text-decoration: none; }

/* -------------------------------------------------------- No encontrado -- */
.ar-vacio { text-align: center; padding: var(--e-7) var(--e-4); }
.ar-vacio i { font-size: 3.4rem; color: var(--texto-tenue); opacity: .25; }
.ar-vacio h1 { font-size: 1.5rem; color: var(--titulo); margin: var(--e-3) 0 var(--e-2); }
.ar-vacio p { color: var(--texto-tenue); margin-bottom: var(--e-4); }
.ar-vacio a { background: var(--azul); color: #fff; text-decoration: none; padding: 12px 24px; border-radius: var(--r-sm); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .ar-comp, .ar-rel, .ar-cat-lista a { transition: none; }
  .ar-comp:hover, .ar-rel:hover { transform: none; }
  .ar-cat-lista a:hover { padding-left: 4px; }
}

@media print {
  .dr-nav, .ar-lateral, .ar-compartir, .ar-relacionados, .ar-pie, .ar-visor { display: none !important; }
  .ar-ficha { border: 0; box-shadow: none; }
  .ar-cuerpo-pagina { grid-template-columns: 1fr; }
}

/* ==========================================================================
   CONTRASTE EN TEMA OSCURO
   El mismo problema que en el blog: --superficie (#0e1626) y --fondo (#070d1a)
   están tan cerca que la ficha del artículo no se despega del fondo, y el
   borde a .16 de alfa apenas se ve. Se corrige con variables propias con
   prefijo ar-, sin tocar los tokens del sistema, que usa todo el sitio.
   ========================================================================== */

:root { --ar-tarjeta: var(--superficie); --ar-borde: var(--borde); --ar-realce: transparent; }
:root[data-tema="oscuro"] {
  --ar-tarjeta: var(--superficie-2);
  --ar-borde:   rgba(148, 180, 220, .30);
  --ar-realce:  rgba(255, 255, 255, .05);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --ar-tarjeta: var(--superficie-2);
    --ar-borde:   rgba(148, 180, 220, .30);
    --ar-realce:  rgba(255, 255, 255, .05);
  }
}

.ar-ficha, .ar-caja, .ar-rel, .ar-comp {
  background: var(--ar-tarjeta);
  border-color: var(--ar-borde);
}
.ar-ficha { box-shadow: var(--sombra), inset 0 1px 0 var(--ar-realce); }
.ar-datos, .ar-cat-lista li, .ar-compartir { border-color: var(--ar-borde); }
.ar-pdf, .ar-visor { border-color: var(--ar-borde); }
.ar-portada, .ar-rel-img { background: var(--superficie); }

/* El cuerpo del artículo trae tablas del editor; su borde también necesita
   subir de contraste o en oscuro se pierde la rejilla entera. */
.ar-texto th, .ar-texto td { border-color: var(--ar-borde); }