/* assets/css/blog.css
   Estilos propios del blog. Se carga DESPUÉS de base.css, de modo que aquí solo
   hay lo que es del blog: ni un color suelto, ni una tipografía, ni un radio.
   Todo sale de los tokens, y por eso el tema oscuro funciona sin escribir una
   sola regla adicional. */

/* ---------------------------------------------------------- Cabecera ----- */
.bl-cabecera {
  background: linear-gradient(135deg, var(--azul-hondo) 0%, #0b3a6f 55%, var(--azul) 100%);
  color: #fff;
  padding: calc(var(--e-7) + 40px) 0 var(--e-6);
  position: relative;
  overflow: hidden;
}
/* Trama de puntos: da textura sin pesar nada ni pedir una imagen. */
.bl-cabecera::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.13) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  pointer-events: none;
}
.bl-cabecera h1 { font-size: clamp(2rem, 5vw, 3.1rem); font-weight: 800; letter-spacing: -.02em; }
.bl-cabecera p  { color: #c8dcf5; font-size: 1.05rem; margin-top: var(--e-2); max-width: 60ch; }
.bl-cifras { display: flex; gap: var(--e-5); flex-wrap: wrap; margin-top: var(--e-4); }
.bl-cifra b { display: block; font-size: 1.6rem; font-weight: 800; line-height: 1; }
.bl-cifra span { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: #9fc0e6; }

/* ------------------------------------------------------------ Buscador --- */
.bl-buscador { display: flex; gap: var(--e-2); margin-top: var(--e-4); max-width: 560px; }
.bl-buscador input {
  flex: 1; padding: 14px 18px; border: 0; border-radius: var(--r-full);
  font-size: 1rem; font-family: var(--fuente); background: rgba(255,255,255,.95); color: var(--texto);
}
.bl-buscador input:focus { outline: 3px solid var(--ambar); outline-offset: 2px; }
.bl-buscador button {
  border: 0; border-radius: var(--r-full); padding: 0 26px; cursor: pointer;
  background: var(--ambar); color: #3d2f00; font-weight: 800; font-size: .95rem;
  transition: transform var(--transicion), filter var(--transicion);
}
.bl-buscador button:hover { transform: translateY(-2px); filter: brightness(1.06); }

/* ------------------------------------------------------------- Chips ----- */
/* Las categorías van en horizontal y no en columna lateral: en el móvil, una
   lista vertical de categorías empuja los artículos fuera de la primera
   pantalla, que es justo lo que la gente viene a ver. */
.bl-chips { display: flex; gap: var(--e-2); flex-wrap: wrap; margin: calc(var(--e-4) * -1.6) 0 var(--e-5); position: relative; z-index: 2; }
.bl-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--r-full); text-decoration: none;
  background: var(--superficie); color: var(--texto-tenue);
  border: 1px solid var(--borde); box-shadow: var(--sombra-sm);
  font-size: .87rem; font-weight: 600; transition: var(--transicion);
}
.bl-chip:hover { transform: translateY(-2px); color: var(--azul); box-shadow: var(--sombra); }
.bl-chip.activo { background: var(--azul); color: #fff; border-color: var(--azul); }
.bl-chip i { font-size: .78rem; opacity: .75; }
.bl-chip b { font-weight: 700; opacity: .6; font-size: .78rem; }

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

.bl-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--e-4); }

/* ------------------------------------------------------------ Destacado -- */
.bl-destacado {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 0;
  background: var(--superficie); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sombra-lg); border: 1px solid var(--borde); margin-bottom: var(--e-5);
}
@media (max-width: 760px) { .bl-destacado { grid-template-columns: 1fr; } }
.bl-destacado .bl-img { aspect-ratio: 4/3; }
.bl-destacado-txt { padding: var(--e-4); display: flex; flex-direction: column; justify-content: center; }
.bl-destacado h2 { font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.25; color: var(--titulo); margin: var(--e-2) 0; }
.bl-destacado p { color: var(--texto-tenue); line-height: 1.7; }

/* ------------------------------------------------------------ Tarjetas --- */
.bl-tarjeta {
  background: var(--superficie); border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--borde); box-shadow: var(--sombra-sm);
  display: flex; flex-direction: column;
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.bl-tarjeta:hover { transform: translateY(-5px); box-shadow: var(--sombra-lg); }
.bl-img { position: relative; overflow: hidden; background: var(--superficie-2); aspect-ratio: 16/10; }
.bl-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--transicion); }
.bl-tarjeta:hover .bl-img img, .bl-destacado:hover .bl-img img { transform: scale(1.05); }
.bl-img-vacia { display: grid; place-items: center; height: 100%; color: var(--texto-tenue); font-size: 2.4rem; opacity: .3; }

.bl-etiqueta {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: rgba(255,255,255,.94); color: var(--azul);
  padding: 5px 12px; border-radius: var(--r-full);
  font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  backdrop-filter: blur(6px);
}
.bl-pdf {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  background: rgba(220,53,69,.94); color: #fff;
  padding: 5px 11px; border-radius: var(--r-full);
  font-size: .68rem; font-weight: 800; letter-spacing: .04em;
}

.bl-txt { padding: var(--e-3); display: flex; flex-direction: column; flex: 1; gap: var(--e-2); }
.bl-txt h3 { font-size: 1.06rem; line-height: 1.35; color: var(--titulo); }
.bl-txt h3 a { color: inherit; text-decoration: none; }
.bl-txt h3 a:hover { color: var(--azul); }
.bl-txt p { color: var(--texto-tenue); font-size: .9rem; line-height: 1.65; flex: 1; }
.bl-meta {
  display: flex; gap: var(--e-3); flex-wrap: wrap; align-items: center;
  font-size: .76rem; color: var(--texto-tenue);
  border-top: 1px solid var(--borde); padding-top: var(--e-2);
}
.bl-meta span { display: inline-flex; align-items: center; gap: 5px; }
.bl-mas { margin-left: auto; color: var(--azul); font-weight: 700; text-decoration: none; }
.bl-mas:hover { color: var(--naranja); }

/* ------------------------------------------------------------- Aside ----- */
.bl-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-4);
}
.bl-caja h4 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--texto-tenue); margin-bottom: var(--e-3);
  display: flex; align-items: center; gap: 8px;
}
.bl-leido { display: flex; gap: var(--e-2); padding: var(--e-2) 0; border-bottom: 1px dashed var(--borde); text-decoration: none; }
.bl-leido:last-child { border-bottom: 0; }
.bl-leido b { font-size: 1.35rem; color: var(--borde); font-weight: 800; line-height: 1; min-width: 26px; }
.bl-leido:hover b { color: var(--ambar); }
.bl-leido span { font-size: .87rem; color: var(--texto); line-height: 1.4; }
.bl-leido small { display: block; color: var(--texto-tenue); font-size: .74rem; margin-top: 3px; }

.bl-anios { display: flex; flex-wrap: wrap; gap: var(--e-1); }
.bl-anio {
  text-decoration: none; font-size: .84rem; font-weight: 700;
  padding: 7px 13px; border-radius: var(--r-sm);
  background: var(--superficie-2); color: var(--texto-tenue);
}
.bl-anio:hover, .bl-anio.activo { background: var(--azul); color: #fff; }
.bl-anio i { font-weight: 400; opacity: .6; font-size: .74rem; }

.bl-cta { background: linear-gradient(140deg, var(--azul-hondo), var(--azul)); color: #fff; border: 0; }
.bl-cta h4 { color: #a9cbf0; }
.bl-cta p { font-size: .88rem; line-height: 1.6; color: #d6e6f8; margin-bottom: var(--e-3); }
.bl-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: .9rem;
}
.bl-cta a:hover { filter: brightness(1.08); }

/* ------------------------------------------------------- Paginación ------ */
.bl-paginas { display: flex; gap: var(--e-1); justify-content: center; flex-wrap: wrap; margin-top: var(--e-5); }
.bl-paginas a, .bl-paginas span {
  min-width: 42px; height: 42px; display: grid; place-items: center; padding: 0 12px;
  border-radius: var(--r-sm); text-decoration: none; font-weight: 700; font-size: .9rem;
  background: var(--superficie); color: var(--texto-tenue); border: 1px solid var(--borde);
}
.bl-paginas a:hover { border-color: var(--azul); color: var(--azul); }
.bl-paginas .actual { background: var(--azul); color: #fff; border-color: var(--azul); }
.bl-paginas .puntos { border: 0; background: none; }

/* ----------------------------------------------------------- Vacío ------- */
.bl-vacio { text-align: center; padding: var(--e-6) var(--e-4); color: var(--texto-tenue); }
.bl-vacio i { font-size: 3rem; opacity: .25; display: block; margin-bottom: var(--e-3); }

/* -------------------------------------------------------------- RSS ------ */
.bl-rss {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  font-size: .8rem; font-weight: 700; color: var(--texto-tenue);
  border: 1px solid var(--borde); border-radius: var(--r-full); padding: 7px 14px;
}
.bl-rss:hover { color: #ff8c22; border-color: #ff8c22; }

/* Quien prefiere menos movimiento no debería sufrir ninguno. */
@media (prefers-reduced-motion: reduce) {
  .bl-tarjeta, .bl-img img, .bl-chip, .bl-buscador button { transition: none; }
  .bl-tarjeta:hover { transform: none; }
  .bl-tarjeta:hover .bl-img img, .bl-destacado:hover .bl-img img { transform: none; }
}

/* ==========================================================================
   AJUSTES DE CONTRASTE EN TEMA OSCURO
   --------------------------------------------------------------------------
   En oscuro, --superficie (#0e1626) y --fondo (#070d1a) se diferencian en tan
   poco que las tarjetas no se despegan del fondo, y el borde a .16 de alfa es
   casi invisible. En claro no se nota porque blanco sobre gris ya separa solo.

   Se resuelve con variables PROPIAS con prefijo bl-, no redefiniendo los
   tokens del sistema: --fondo o --superficie los usa todo el sitio, y tocarlos
   aquí cambiaría la portada. Estas solo existen para el blog.

   Hay que declararlo dos veces porque el tema puede venir de la elección
   explícita del usuario o de la preferencia del sistema, y son dos selectores
   distintos en base.css.
   ========================================================================== */

:root {
  --bl-tarjeta:  var(--superficie);
  --bl-borde:    var(--borde);
  --bl-realce:   transparent;
}
:root[data-tema="oscuro"] {
  /* Un peldaño más claro que el fondo: en oscuro la elevación se lee como luz. */
  --bl-tarjeta: var(--superficie-2);
  --bl-borde:   rgba(148, 180, 220, .30);
  --bl-realce:  rgba(255, 255, 255, .05);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --bl-tarjeta: var(--superficie-2);
    --bl-borde:   rgba(148, 180, 220, .30);
    --bl-realce:  rgba(255, 255, 255, .05);
  }
}

.bl-tarjeta, .bl-destacado, .bl-caja, .bl-chip {
  background: var(--bl-tarjeta);
  border-color: var(--bl-borde);
}
/* Filo superior de un píxel: en oscuro es lo que da sensación de relieve sin
   subir el brillo de toda la superficie. */
.bl-tarjeta, .bl-destacado { box-shadow: var(--sombra-sm), inset 0 1px 0 var(--bl-realce); }
.bl-tarjeta:hover, .bl-destacado:hover { box-shadow: var(--sombra-lg), inset 0 1px 0 var(--bl-realce); }
.bl-chip:hover { border-color: var(--azul); }
.bl-img { background: var(--superficie); }
.bl-meta, .bl-leido { border-color: var(--bl-borde); }
.bl-paginas a, .bl-paginas span { background: var(--bl-tarjeta); border-color: var(--bl-borde); }
.bl-rss { border-color: var(--bl-borde); }

/* ==========================================================================
   DESTACADO: que la imagen ocupe su columna entera
   --------------------------------------------------------------------------
   Con aspect-ratio fijo, un titular largo estira la columna de texto mientras
   la imagen se queda pequeña arriba y deja un hueco debajo. En pantalla ancha
   la imagen debe estirarse a lo que mida la tarjeta.
   ========================================================================== */
@media (min-width: 761px) {
  .bl-destacado .bl-img { aspect-ratio: auto; height: 100%; min-height: 340px; }
}
.bl-destacado h2 { font-size: clamp(1.25rem, 1.9vw, 1.6rem); }

/* ==========================================================================
   Widgets de la barra lateral que traen contenido de otras secciones
   ========================================================================== */
.bl-item { display: flex; gap: var(--e-2); padding: var(--e-2) 0; border-bottom: 1px dashed var(--bl-borde); text-decoration: none; align-items: flex-start; }
.bl-item:last-of-type { border-bottom: 0; }
.bl-item i { color: var(--cian); font-size: .95rem; margin-top: 3px; flex-shrink: 0; }
.bl-item span { font-size: .87rem; color: var(--texto); line-height: 1.4; }
.bl-item small { display: block; color: var(--texto-tenue); font-size: .74rem; margin-top: 3px; }
.bl-item:hover span { color: var(--azul); }

.bl-ver-todo { display: block; text-align: center; margin-top: var(--e-2); font-size: .8rem; font-weight: 700; color: var(--azul); text-decoration: none; }
.bl-ver-todo:hover { color: var(--naranja); }

/* Evento próximo: es lo único con fecha límite, así que se distingue del resto. */
.bl-evento { background: linear-gradient(140deg, var(--azul-hondo), var(--azul)); border: 0; }
.bl-evento h4 { color: var(--ambar); }
.bl-evento .bl-ev-fecha { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.14); color: #fff; padding: 5px 12px; border-radius: var(--r-full); font-size: .76rem; font-weight: 700; margin-bottom: var(--e-2); }
.bl-evento .bl-ev-tit { color: #fff; font-size: 1rem; line-height: 1.35; font-weight: 700; margin-bottom: var(--e-2); }
.bl-evento .bl-ev-desc { color: #d6e6f8; font-size: .84rem; line-height: 1.55; margin-bottom: var(--e-3); }
.bl-evento a.bl-ev-boton { display: block; text-align: center; background: var(--ambar); color: #3d2f00; padding: 11px; border-radius: var(--r-sm); text-decoration: none; font-weight: 800; font-size: .86rem; }
.bl-evento a.bl-ev-boton:hover { filter: brightness(1.08); }