/* Sitio de un solo tema, deliberadamente.
   El banner es un PNG sin transparencia: trae horneado su fondo crema y su
   tinta es casi negra. En modo oscuro quedaba como un bloque claro flotando
   sobre la página, que es justo la desconexión que se quiso eliminar. Para
   tener modo oscuro haría falta una versión del logo con tinta clara y fondo
   transparente; mientras no exista, el sitio entero va en el crema del logo. */
:root {
  color-scheme: light;
  /* --bg es el crema del banner (#f8f3f0, el 76% de sus píxeles): así el logo
     no se recorta contra la página, se funde con ella. El resto de la paleta
     se corrió al mismo lado cálido para que no queden grises fríos al lado. */
  --bg: #f8f3f0;
  --surface: #fffdfc;
  --fg: #1a1a1a;
  --muted: #6f6862;
  --border: #e4ddd7;
  --accent: #7a1f2b;
  --badge-es: #2f5d50;
  --badge-en: #1f4e79;
  --status-urgente: #a33221;
  --status-abierta: #2f6d45;
  --status-permanente: #4a5568;
  --status-cerrada: #8b8b8b;
  --note-bg: #efe7e2;
}

/* El atributo `hidden` lo pisa cualquier regla que declare `display`, y abajo
   hay varias (.kind-filter es flex). Sin esto, el filtro por tipo se cuela en
   todas las pestañas. */
[hidden] {
  display: none !important;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.45;
}

header {
  padding: 1.5rem 1rem 1rem;
  border-bottom: 1px solid var(--border);
  text-align: center;
}

h1 {
  margin: 0 0 0.5rem;
  font-size: 1.3rem;
  line-height: 0;
}

.banner {
  max-width: 100%;
  height: auto;
  width: 420px;
}

.subtitle {
  margin: 0 0 0.5rem;
  font-weight: 400;
  color: var(--muted);
  font-size: 0.9rem;
}

.updated {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 1rem;
}

/* Menú plano sobre un riel: los temas son navegación, no controles. Se marcan
   con un subrayado apoyado en el riel, no rellenando una píldora. */
/* Dos filas deliberadas, no un desborde: arriba los temas del feed, abajo lo
   que no es coyuntura —el catálogo y el archivo de JSK—. El corte lo fuerza
   .topic-break, así que la agrupación no depende del ancho de la ventana. */
.topic-filter {
  display: flex;
  column-gap: 1.15rem;
  row-gap: 0.1rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.topic-btn {
  padding: 0.45rem 0 0.5rem;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px; /* el subrayado se apoya sobre el riel, no debajo */
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.9rem;
  font-family: inherit;
}

.topic-btn:hover {
  color: var(--fg);
}

.topic-btn.active {
  color: var(--accent);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

/* Separa las pestañas de noticias de las dos que se sirven del catálogo. */
/* Salto de fila en un contenedor flex: ocupa todo el ancho disponible y empuja
   lo que sigue a la línea de abajo. Reemplazó al separador vertical, que solo
   funcionaba mientras las pestañas cupieran en una sola fila. */
.topic-break {
  flex-basis: 100%;
  height: 0;
}

.controls {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.kind-filter {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.kind-btn {
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  font-size: 0.8rem;
}

.kind-btn.active {
  color: var(--fg);
  border-color: var(--accent);
  font-weight: 600;
}

.section-note {
  margin: 0 0 0.75rem;
  padding: 0.6rem 0.75rem;
  background: var(--note-bg);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  font-size: 0.83rem;
  color: var(--muted);
}

#search {
  flex: 1 1 240px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--fg);
  font-size: 1rem;
}

.lang-filter {
  display: flex;
  gap: 0.25rem;
}

.lang-btn {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
  font-size: 0.9rem;
}

.lang-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.result-count {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0 0 0.5rem;
}

.card {
  border-bottom: 1px solid var(--border);
  padding: 0.85rem 0;
}

.card-title {
  display: block;
  font-weight: 600;
  color: var(--fg);
  text-decoration: none;
  font-size: 1.02rem;
}

.card-title:hover {
  text-decoration: underline;
}

.card-meta {
  margin-top: 0.25rem;
  font-size: 0.82rem;
  color: var(--muted);
}

.badge {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  margin-right: 0.35rem;
}

.badge-es {
  background: var(--badge-es);
}

.badge-en {
  background: var(--badge-en);
}

.badge-kind {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  font-weight: 600;
}

.badge-status-urgente {
  background: var(--status-urgente);
}

.badge-status-abierta {
  background: var(--status-abierta);
}

.badge-status-permanente,
.badge-status-sinfecha {
  background: var(--status-permanente);
}

.badge-status-cerrada {
  background: var(--status-cerrada);
}

/* Las convocatorias cerradas quedan al final y atenuadas: no se borran porque
   casi todas son anuales y sirven para saber cuándo vuelven a abrir. */
.card-catalog:has(.badge-status-cerrada) {
  opacity: 0.6;
}

.card-note {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.card-alt-link {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--accent);
}

.card-summary {
  margin: 0.4rem 0 0;
  font-size: 0.92rem;
}

.also-reported {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
  font-style: italic;
}

.empty-state {
  color: var(--muted);
  text-align: center;
  padding: 2rem 0;
}

footer {
  max-width: 720px;
  margin: 1rem auto 2rem;
  padding: 1rem;
  font-size: 0.82rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
}

footer a {
  color: var(--accent);
}