/* ============================================================
   blog.css — Contenido del blog (tarjetas, categorías, sidebar)
   ============================================================
   Compartido por los DOS envoltorios del blog:
     · pages/blog/index.ejs / detail.ejs        → páginas autónomas (anónimos, SEO)
     · pages/blog/index-app.ejs / detail-app.ejs → dentro del layout de la app

   Aquí va SOLO lo que pinta el contenido. Lo propio del envoltorio autónomo
   (.page-hero, .page-content y los overrides de .navbar) se queda inline en
   esas vistas, porque dentro de la app no existe ni navbar de landing ni hero.

   Comprobado contra el CSS del tema (public/assets/css/style.css): ninguna de
   estas clases aparece allí, así que no hay colisión al cargarlas juntas.
   ============================================================ */

.article-card {
  border: none;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  height: 100%;
  overflow: hidden;
}

.article-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.article-img {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-badge {
  position: absolute;
  top: 15px;
  left: 15px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.category-badge.guias         { background: #1565c0; color: #fff; }
.category-badge.noticias      { background: #2e7d32; color: #fff; }
.category-badge.salarios      { background: #ff9800; color: #fff; }
.category-badge.convocatorias { background: #e65100; color: #fff; }
.category-badge.destinos      { background: #7b1fa2; color: #fff; }
.category-badge.temarios      { background: #0277bd; color: #fff; }

.article-title {
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.article-title a { color: inherit; text-decoration: none; }
.article-title a:hover { color: #1565c0; }

/* ── Columna lateral ──────────────────────────────────────────────────────
   El tema de la app define `.card { height: calc(100% - 30px) }`
   (public/assets/css/style.css) para que las tarjetas llenen su columna. En el
   blog la columna lateral lleva DOS tarjetas apiladas, y esa regla estiraba la
   primera hasta casi toda la altura de la columna (que a su vez se estira para
   igualar la de artículos): la segunda quedaba empujada fuera y se solapaba
   con el footer.

   Se ataja por partida doble, y ninguna de las dos es decorativa:

   1. `align-self: flex-start` en la columna. Al dejar de estirarse, su altura
      pasa a ser la de su contenido, y un `height` en % contra un padre de
      altura automática se resuelve como `auto`. Ataca la causa.
   2. `height: auto` en las tarjetas, pero bajo `.blog-sidebar` para que la
      especificidad (0,2,0) gane a `.card` (0,1,0) SIN depender del orden de
      carga de los ficheros. Antes era `.sidebar-card` a secas: misma
      especificidad que la regla del tema, así que solo ganaba porque este CSS
      se carga después. Demasiado frágil para algo que rompe el layout.

   Las tarjetas de artículo SÍ deben estirarse (.article-card, height: 100%)
   para quedar todas a la misma altura; estas no. */
.blog-sidebar {
  align-self: flex-start;
}

.blog-sidebar .sidebar-card {
  height: auto;
}

.sidebar-card {
  border: none;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.sidebar-card .card-header {
  background: #fff;
  border-bottom: 2px solid #f93a0b;
  font-weight: 700;
}

.category-list li {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.category-list li:last-child { border-bottom: none; }

.category-list a {
  color: #495057;
  text-decoration: none;
  display: flex;
  align-items: center;
}

.category-list a:hover { color: #1565c0; }

.category-list .cat-count {
  background: #f0f0f0;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.75rem;
  margin-left: auto;
}

/* ============================================================
   Cuerpo del artículo (detalle). Compartido por detail.ejs y
   detail-app.ejs — antes vivía solo inline en detail.ejs.
   ============================================================ */

.blog-content {
  padding: 40px 20px;
  font-size: 1.1rem;
  line-height: 1.8;
  color: #333;
}

.blog-content h2 { margin-top: 2rem;   margin-bottom: 1rem;   color: #2c3e50; font-weight: 700; }
.blog-content h3 { margin-top: 1.5rem; margin-bottom: 0.8rem; color: #34495e; font-weight: 600; }

.blog-content img { max-width: 100%; height: auto; border-radius: 12px; }

/* Enlaces del cuerpo del artículo: primario oscuro, sin subrayado.
   Acotado a .blog-content para no tocar navbar, breadcrumb ni footer.
   `:not(.btn)` excluye los botones que viven dentro del contenedor
   ("Volver al blog"), a los que si no les pintaríamos el texto naranja.

   ACCESIBILIDAD (WCAG AA), no tocar sin recalcular:
   - #d63209 sobre blanco = 4.86:1 → cumple el 4.5:1 de texto normal.
     El primario puro (#f93a0b) se queda en 3.72:1 y NO cumple.
   - Al quitar el subrayado, si el color fuera la única señal del enlace
     haría falta 3:1 contra el texto del cuerpo, y #d63209 vs #333 solo
     da 2.60:1. El `font-weight: 600` es una señal NO cromática, así que
     el enlace deja de distinguirse solo por color (WCAG 1.4.1).
   - `:focus-visible` se conserva: sin subrayado, el anillo de foco es la
     única pista para quien navega con teclado. */
.blog-content a:not(.btn) { color: #d63209; text-decoration: none; font-weight: 600; }
.blog-content a:not(.btn):hover { color: #b02907; text-decoration: none; }
.blog-content a:not(.btn):focus-visible { outline: 2px solid #d63209; outline-offset: 2px; border-radius: 2px; }

/* ============================================================
   TABLAS DEL ARTÍCULO — criterio único
   ============================================================
   Antes cada artículo traía su propio marcado (unos con clases de
   Bootstrap, otro con 12 propiedades inline y su propia tipografía,
   otro sin nada), así que la misma tabla se veía distinta en cada
   página. El aspecto vive AQUÍ y el HTML del artículo se queda con
   lo mínimo:

       <div class="table-responsive"><table>…</table></div>

   El `div` es imprescindible y no se puede poner desde CSS: es lo que
   permite el scroll lateral en móvil. Sin él, una tabla de 4-5
   columnas desborda el ancho de la pantalla.

   Los selectores NO dependen de que el artículo traiga `class="table"`,
   para que una tabla pegada a mano siga saliendo bien. */

.blog-content .table-responsive {
  margin: 2rem 0;
  border: 1px solid #e6e9ec;
  border-radius: 12px;
  overflow-x: auto;                 /* scroll lateral en pantallas estrechas */
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
}

.blog-content table {
  width: 100%;
  margin: 0;                        /* el margen lo pone el contenedor */
  border-collapse: collapse;
  font-size: .95rem;
  line-height: 1.5;
  background: #fff;
}

/* Tabla suelta (sin el div): se le da el mismo aire, pero no puede
   hacer scroll. `display: block` lo permitiría a costa de romper el
   ancho de las columnas, así que se prefiere que se vea bien y se
   normalice el marcado. */
.blog-content > table,
.blog-content p + table {
  margin: 2rem 0;
  border: 1px solid #e6e9ec;
  border-radius: 12px;
  overflow: hidden;
}

.blog-content thead th {
  background: #2c3e50;              /* mismo azul oscuro que los h2 */
  color: #fff;
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: left;
  padding: .85rem 1rem;
  white-space: nowrap;              /* que el encabezado no se parta */
  border: 0;
}

.blog-content tbody td {
  padding: .8rem 1rem;
  border: 0;
  border-top: 1px solid #eef1f4;
  vertical-align: middle;
  /* Cifras de la misma anchura: las columnas de euros quedan alineadas
     en vertical aunque los números cambien de dígitos. */
  font-variant-numeric: tabular-nums;
}

.blog-content tbody tr:nth-child(even) td { background: #fafbfc; }
.blog-content tbody tr:hover td { background: #fff5f2; }  /* naranja muy diluido */

/* Primera columna como cabecera de fila: es la que identifica el dato
   (el nivel, la fecha, el puesto) y conviene destacarla. */
.blog-content tbody td:first-child { font-weight: 600; color: #2c3e50; }

.blog-content table caption {
  caption-side: bottom;
  padding: .75rem 1rem;
  font-size: .82rem;
  color: #6c757d;
  text-align: left;
}

@media (max-width: 575.98px) {
  .blog-content thead th { font-size: .75rem; padding: .7rem .8rem; }
  .blog-content tbody td { padding: .7rem .8rem; font-size: .9rem; }
}