/* ============================================================
   1. TOKENS DE DISEÑO
   Variables que reutilizamos en todo el archivo. Cambiar un
   valor aquí cambia toda la aplicación de una vez.
   ============================================================ */
:root {
  /* Colores */
  --c-tinta: #10222b;       
  --c-papel: #eceee9;     
  --c-superficie: #ffffff;  
  --c-borde: #cfd6d3;
  --c-apagado: #5c6b6e;     
  --c-foco: #1f6f6b;
    /* Colores de veredicto: significan algo, no se usan como decoración */
  --c-verificado: #1f6f6b;
  --c-dudoso: #8a5f1f;
  --c-falso: #92323c;
  --c-sindatos: #5c6b6e;    

  /* Tipografía */
  --f-texto: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-titulo: "Newsreader", Georgia, "Times New Roman", serif;

  /* Espaciado (escala de 4px, para que todo quede alineado) */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-6: 1.5rem;
  --e-8: 2rem;

  /* Formas */
  --radio: 6px;
  --radio-pill: 999px;      /* un número enorme = bordes perfectamente redondos */
  --transicion: 160ms ease;
}

/* ============================================================
   2. REINICIO BÁSICO
   Cada navegador trae sus propios márgenes por defecto en
   elementos como <h2> o <p>. Esto los deja todos en cero,
   para partir de un mismo punto.
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

body, h1, h2, h3, p {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--c-papel);
  color: var(--c-tinta);
  font-family: var(--f-texto);
  line-height: 1.6;
}

/* ============================================================
   3. LAYOUT GENERAL
   ============================================================ */
main#contenido {
  max-width: 46rem;
  margin-inline: auto;
  padding: var(--e-8) var(--e-6);
}

/* ============================================================
   4. SECCIÓN DE FUENTES
   ============================================================ */
.fuentes h2,
.noticias h2 {
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}

.fuentes__intro,
.noticias__intro {
  margin-top: var(--e-2);
  color: var(--c-apagado);
  max-width: 60ch;
}

/* La "píldora": fila flexible, esquinas totalmente redondeadas,
   sombra suave para que "flote" un poco sobre el fondo. */
.barra-busqueda {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin-top: var(--e-6);
  padding: var(--e-2) var(--e-2) var(--e-2) var(--e-4);
  background-color: var(--c-superficie);
  border: 1px solid var(--c-borde);
  border-radius: var(--radio-pill);
  box-shadow: 0 1px 3px rgba(16, 34, 43, 0.08);
  transition: box-shadow var(--transicion), border-color var(--transicion);
}

/* :focus-within es la clave del efecto "Gemini": se activa cuando
   CUALQUIER hijo de .barra-busqueda tiene el foco (en este caso,
   el <input> de adentro), no solo cuando el contenedor mismo lo
   tiene. Así toda la píldora "brilla", no solo el campo de texto. */
.barra-busqueda:focus-within {
  border-color: var(--c-foco);
  box-shadow: 0 2px 10px rgba(31, 111, 107, 0.18);
}

.barra-busqueda__icono {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--c-apagado);
}

.barra-busqueda__campo {
  flex: 1;
  border: none;
  outline: none;
  background: none;
  font: inherit;
  font-size: 0.95rem;
  color: var(--c-tinta);
  padding-block: var(--e-2);
}

.barra-busqueda__campo::placeholder {
  color: var(--c-apagado);
}

.barra-busqueda__boton {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background-color: var(--c-tinta);
  color: var(--c-papel);
  cursor: pointer;
  transition: background-color var(--transicion);
}

.barra-busqueda__boton:hover {
  background-color: #1b3b48;
}

.barra-busqueda__boton svg {
  width: 16px;
  height: 16px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-4);
}

.chip {
  border: 1px solid var(--c-borde);
  background-color: var(--c-superficie);
  color: var(--c-apagado);
  padding: var(--e-1) var(--e-4);
  border-radius: var(--radio-pill);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background-color var(--transicion), color var(--transicion), border-color var(--transicion);
}

.chip:hover {
  border-color: var(--c-apagado);
  color: var(--c-tinta);
}

.chip.is-activo {
  background-color: var(--c-tinta);
  border-color: var(--c-tinta);
  color: var(--c-papel);
}

.estado-vacio {
  margin-top: var(--e-4);
  color: var(--c-apagado);
  font-size: 0.9rem;
}

/* Oculta visualmente sin ocultar del lector de pantalla.
   Es la técnica estándar para esto — no uses display:none ni
   visibility:hidden aquí, porque esas SÍ lo esconden también
   de quien usa lector de pantalla. */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   5. TARJETAS DE FUENTES (compactas)
   ============================================================ */
.resultados-fuentes {
  margin-top: var(--e-6);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--e-3);
}

/* Sin búsqueda, JavaScript deja este contenedor vacío. :empty lo
   detecta y quita el margen, para que no quede un hueco en blanco
   entre los chips y las noticias. */
.resultados-fuentes:empty {
  margin-top: 0;
}

/* El mensaje de "no encontramos nada" ocupa toda la fila, en vez de
   quedar encerrado en una sola columna angosta de la cuadrícula. */
.resultados-fuentes .estado-vacio {
  grid-column: 1 / -1;
  margin-top: 0;
}

.tarjeta-fuente {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-4);
  background-color: var(--c-superficie);
  border: 1px solid var(--c-borde);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}

.tarjeta-fuente:hover {
  border-color: var(--c-foco);
  box-shadow: 0 2px 10px rgba(16, 34, 43, 0.08);
}

.tarjeta-fuente__nombre {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.3;
}

.tarjeta-fuente__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
}

.tarjeta-fuente__categoria {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--c-apagado);
  background-color: var(--c-papel);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radio-pill);
}

.tarjeta-fuente__ambito {
  font-size: 0.75rem;
  color: var(--c-apagado);
}

/* ============================================================
   6. NOTICIAS DEL DÍA PEDAZO B REVISAR!!!
   ============================================================ */
.noticias {
  margin-top: var(--e-8);
  padding-top: var(--e-8);
  border-top: 1px solid var(--c-borde);
}

/* Pestañas de ámbito: estilo "periódico", subrayado en vez de píldora */
.tabs-ambito {
  display: flex;
  gap: var(--e-6);
  margin-top: var(--e-6);
  border-bottom: 1px solid var(--c-borde);
}

.tab-ambito {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: var(--e-2) 0;
  font: inherit;
  font-size: 0.95rem;
  color: var(--c-apagado);
  cursor: pointer;
  transition: color var(--transicion), border-color var(--transicion);
}

.tab-ambito:hover { color: var(--c-tinta); }

.tab-ambito.is-activo {
  color: var(--c-tinta);
  border-bottom-color: var(--c-tinta);
  font-weight: 500;
}

.lista-noticias {
  margin-top: var(--e-6);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--e-4);
}

.tarjeta-noticia {
  display: flex;
  flex-direction: column;
  background-color: var(--c-superficie);
  border: 1px solid var(--c-borde);
  border-radius: 16px;
  overflow: hidden;
  /* Revisar */
  position: relative;
  transition: border-color var(--transicion);
}

/* Marcador de posición: aquí irán las fotos reales más adelante */
.tarjeta-noticia__imagen {
  height: 96px;
  background-color: var(--c-tinta);
}

.tarjeta-noticia__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  flex: 1;
  padding: var(--e-4);
}

.tarjeta-noticia__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
}

.tarjeta-noticia__tema {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--c-apagado);
  background-color: var(--c-papel);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radio-pill);
}

.tarjeta-noticia__titular {
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.tarjeta-noticia__resumen {
  flex: 1;
  font-size: 0.875rem;
  color: var(--c-apagado);
}

.tarjeta-noticia__cobertura {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  padding-top: var(--e-3);
  border-top: 1px solid var(--c-borde);
}

.tarjeta-noticia__tiempo {
  font-size: 0.75rem;
  color: var(--c-apagado);
}

/* Píldoras de cobertura: un estilo distinto por tipo de fuente */
.pildora {
  font-size: 0.72rem;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radio-pill);
}

.pildora--oficial {
  background-color: var(--c-tinta);
  color: var(--c-papel);
}

.pildora--verificador {
  border: 1px solid var(--c-tinta);
  color: var(--c-tinta);
}

.pildora--medio {
  background-color: var(--c-papel);
  color: var(--c-apagado);
}

/* Etiquetas de veredicto  // PEDAZO C!!! */
.veredicto-etiqueta {
  flex: none;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #ffffff;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radio-pill);
}

.veredicto-etiqueta--verificado { background-color: var(--c-verificado); }
.veredicto-etiqueta--dudoso { background-color: var(--c-dudoso); }
.veredicto-etiqueta--falso { background-color: var(--c-falso); }
.veredicto-etiqueta--sindatos { background-color: var(--c-sindatos); }

/* Seccion de tarjetas EXPANDIBLES REVISAR TODO HACIA ABAJO*/

/* El titular ahora es un botón: le quitamos el aspecto de botón
   para que se siga viendo como el título de la tarjeta. */
.tarjeta-noticia__boton {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

/* ---- Tarjeta de noticia clicable ---- */

/* El botón del titular extiende un área invisible sobre toda la tarjeta:
   así se puede tocar en cualquier parte, no solo en el texto. */
.tarjeta-noticia__boton::after {
  content: '';
  position: absolute;
  inset: 0;
}

.tarjeta-noticia:hover {
  border-color: var(--c-foco);
}

/* El anillo de foco (al navegar con teclado) rodea toda la tarjeta. */
.tarjeta-noticia__boton:focus-visible {
  outline: none;
}

.tarjeta-noticia:has(.tarjeta-noticia__boton:focus-visible) {
  outline: 2px solid var(--c-foco);
  outline-offset: 2px;
}

/* ============================================================
   7. VENTANA EMERGENTE (MODAL) DE NOTICIA
   ============================================================ */
.modal {
  width: min(44rem, calc(100% - 2rem));
  max-height: calc(100vh - 3rem);
  max-height: calc(100dvh - 3rem);
  padding: 0;
  border: 1px solid var(--c-borde);
  border-radius: 20px;
  background-color: var(--c-superficie);
  color: var(--c-tinta);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: 0 20px 60px rgba(16, 34, 43, 0.25);
}

/* El fondo detrás de la ventana: oscurecido y desenfocado.
   Aquí usamos valores directos y no variables (var(...)) porque algunos
   navegadores no le pasan las variables a ::backdrop. */
.modal::backdrop {
  background-color: rgba(16, 34, 43, 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Mientras la ventana está abierta, la página de atrás no se desplaza. */
body:has(.modal[open]) {
  overflow: hidden;
}

.modal[open] { animation: modal-entrada 180ms ease-out; }
.modal[open]::backdrop { animation: fondo-entrada 180ms ease-out; }

@keyframes modal-entrada {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

@keyframes fondo-entrada {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Quien pidió menos movimiento en su sistema no ve la animación. */
@media (prefers-reduced-motion: reduce) {
  .modal[open],
  .modal[open]::backdrop { animation: none; }
}

/* Barra superior que se queda fija mientras el contenido se desplaza */
.modal__barra {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  padding: var(--e-3) var(--e-3) 0;
  background-color: var(--c-superficie);
}

.modal__cerrar {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--c-borde);
  border-radius: 50%;
  background: none;
  color: var(--c-apagado);
  cursor: pointer;
  transition: border-color var(--transicion), color var(--transicion);
}

.modal__cerrar:hover {
  border-color: var(--c-apagado);
  color: var(--c-tinta);
}

.modal__cerrar svg {
  width: 16px;
  height: 16px;
}

.modal__contenido {
  padding: 0 var(--e-6) var(--e-8);
}

.modal__encabezado {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-2);
}

.modal__encabezado .tarjeta-noticia__cobertura {
  align-self: stretch;
}

/* ---- Contenido del detalle ---- */
.modal__titulo {
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.detalle__aviso {
  margin-top: var(--e-4);
  padding: var(--e-2) var(--e-3);
  border-radius: 8px;
  font-size: 0.8rem;
  color: var(--c-dudoso);
  background-color: rgba(138, 95, 31, 0.1);
}

.detalle__seccion {
  margin-top: var(--e-4);
  padding-top: var(--e-4);
  border-top: 1px solid var(--c-borde);
}

.detalle__titulo {
  margin: 0 0 var(--e-2);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-apagado);
}

.detalle__sectores {
  margin: 0;
}

.detalle__sectores dt {
  margin-top: var(--e-3);
  font-size: 0.95rem;
  font-weight: 600;
}

.detalle__sectores dt:first-child {
  margin-top: 0;
}

.detalle__sectores dd {
  margin: 2px 0 0;
  font-size: 0.9rem;
  color: var(--c-apagado);
}

.detalle__lista {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: var(--e-2);
  font-size: 0.92rem;
}

.detalle__lista a {
  color: var(--c-foco);
  text-underline-offset: 3px;
}

.detalle__tipo {
  margin-left: var(--e-2);
  font-size: 0.72rem;
  color: var(--c-apagado);
}

.detalle__vacio {
  font-size: 0.9rem;
  color: var(--c-apagado);
}

/* La sección más importante: la que ayuda a formarse una conclusión */
.detalle__seccion--conclusion {
  padding: var(--e-4);
  border: 1px solid rgba(31, 111, 107, 0.35);
  border-radius: 12px;
  background-color: rgba(31, 111, 107, 0.07);
}

.detalle__seccion--conclusion .detalle__titulo {
  color: var(--c-foco);
}

.detalle__grupo + .detalle__grupo {
  margin-top: var(--e-3);
}

.detalle__subtitulo {
  margin: 0 0 var(--e-1);
  font-size: 0.9rem;
  font-weight: 600;
}

/*REVISAR */

.disposicion { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 900px) {
  .disposicion:has(#fuentes-relacionadas:not([hidden])) {
    grid-template-columns: minmax(0, 1fr) 280px;
  }
}
#fuentes-relacionadas { align-self: start; }

html { scrollbar-gutter: stable; }