/* ==========================================================================
   Obrería — Tablón vivo (/tablon). Página pública, compartible por redes.
   Encargo de María (28/07/2026): "un tablón vivo, tarjetas con las ofertas que
   se van actualizando, y una turbina gigante de fondo".

   IDEA VISUAL: papel sobre acero. Las ofertas REALES son notas de papel
   atornilladas al tablón; el contexto del sector son placas de acero. Que se
   distingan a simple vista no es decoración: es honestidad — nadie puede
   confundir un dato del sector con una oferta de trabajo.

   Paleta CHISPA (María, 26/07) y logo Brida (27/07). El naranja de la marca
   NUNCA va sobre fondo claro como texto (2,76:1); sobre papel se usa como
   fondo macizo con tinta carbón (5,57:1) o se cambia por carbón.

   Fuentes: stack del sistema. Cero peticiones externas (regla de la casa:
   nunca Google Fonts CDN). Autocontenida: no depende del CSS de la app.
   ========================================================================== */

:root {
  /* Paleta CHISPA — idénticos a /conoce/ y a la PWA */
  --c-bg: #1a1a1d;
  --c-surface: #232327;
  --c-surface-2: #2b2b30;
  --c-border: #3d3d44;
  --c-text: #f0eeea;
  --c-text-muted: #c7c4be;
  --c-accent: #ff5a1f;
  --c-accent-ink: #1a1a1d;
  --c-ambar: #ffc24b;

  /* El papel de las ofertas reales */
  --c-papel: #efece6;
  --c-papel-borde: #d6d1c7;
  --c-papel-tinta: #1a1a1d;
  --c-papel-tenue: #56534d;      /* 7,0:1 sobre papel — cumple de sobra */

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.75rem;
  --space-8: 4rem;

  --radius: 12px;
  --radius-sm: 8px;
  --maxw: 72rem;

  --font-sys: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Escala z semántica: nada de 999 */
  --z-escena: 0;
  --z-contenido: 10;
  --z-cabecera: 20;
  --z-mas: 30;

  /* Curvas: salida exponencial, sin rebote */
  --sal: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body { margin: 0; padding: 0; }

body {
  min-height: 100svh;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sys);
  line-height: 1.6;
  overflow-x: hidden;          /* las tarjetas van giradas: sin esto, barra lateral */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

.oculto {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.salto {
  position: absolute;
  left: -999px; top: 0;
  z-index: var(--z-cabecera);
  background: var(--c-accent);
  color: var(--c-accent-ink);
  padding: var(--space-2) var(--space-4);
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 700;
}
.salto:focus { left: 0; }

:where(a, button, dialog):focus-visible {
  outline: 3px solid var(--c-ambar);
  outline-offset: 3px;
}

/* ==========================================================================
   LA ESCENA — la turbina de fondo
   El fondo REAL es la imagen estática puesta por CSS. El <canvas> solo se
   enciende encima cuando el dispositivo puede con él (ver tablon.js). Si no
   hay WebGL, si el usuario pide menos movimiento, si va con ahorro de datos o
   si three.js no carga, la página se ve igual de terminada.
   ========================================================================== */
.escena {
  position: fixed;
  inset: 0;
  z-index: var(--z-escena);
  background-color: #101013;
  background-image: url("/tablon/img/turbina-fondo.webp");
  background-size: cover;
  background-position: 62% center;   /* el rotor queda a la derecha, como en MONTAGE */
  pointer-events: none;
}

/* La imagen de respaldo es apaisada (1920×1080). En un móvil vertical,
   `cover` la amplía muchísimo, así que hay que decirle por dónde recortar o
   se ve un trozo de fondo vacío en vez de los álabes. */
@media (max-width: 47.99rem) {
  .escena { background-position: 74% 26%; }
}

.escena__lienzo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 900ms var(--sal);
}
.escena__lienzo.encendida { opacity: 1; }

/* Velo de legibilidad. No es cristal decorativo: es lo que sostiene el
   contraste del texto sobre una escena 3D que cambia.
   Va en DOS capas, y el reparto no es casual:
   · la horizontal tapa la IZQUIERDA, que es donde vive el único texto que se
     apoya directamente en el fondo (titular, entradilla, pie);
   · la derecha se deja casi limpia a propósito — es donde está la masa de la
     turbina y es lo que María quería ver.
   Las tarjetas tienen fondo macizo, así que su texto no depende del velo. */
.escena__velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(16,16,19,0.94) 0%, rgba(16,16,19,0.80) 30%, rgba(16,16,19,0.42) 62%, rgba(16,16,19,0.16) 100%),
    linear-gradient(180deg, rgba(16,16,19,0.40) 0%, rgba(16,16,19,0.16) 34%, rgba(16,16,19,0.46) 72%, rgba(16,16,19,0.88) 100%);
}

/* En vertical el contenido ocupa todo el ancho y no queda "lado limpio": el
   velo tiene que ser parejo o el titular se apoya sobre los álabes. */
@media (max-width: 47.99rem) {
  .escena__velo {
    /* Más flojo arriba que la primera versión: en el móvil la única franja de
       fondo que se ve de verdad es la de la cabecera y el titular (las
       tarjetas tapan el resto), así que si ahí se tapa la turbina, la turbina
       no existe en el móvil — y el móvil es por donde va a llegar casi todo
       el mundo desde WhatsApp. */
    background:
      linear-gradient(180deg, rgba(16,16,19,0.62) 0%, rgba(16,16,19,0.42) 30%, rgba(16,16,19,0.60) 70%, rgba(16,16,19,0.92) 100%);
  }
}

/* ==========================================================================
   CABECERA
   ========================================================================== */
.cabecera {
  position: relative;
  z-index: var(--z-cabecera);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) 0;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--c-text);
}
.marca__simbolo { flex: none; }
.marca__nombre {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.pulso {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background: rgba(26,26,29,0.72);
  color: var(--c-text-muted);
  font-size: 0.8rem;
  line-height: 1.4;
}
.pulso__punto {
  width: 8px; height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--c-accent);
}
/* El punto respira solo cuando el tablón está de verdad conectado. */
.pulso.vivo .pulso__punto { animation: latido 2.6s ease-in-out infinite; }
@keyframes latido {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.82); }
}

/* ==========================================================================
   INTRO
   ========================================================================== */
main {
  position: relative;
  z-index: var(--z-contenido);
}

.intro {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-5);
}

/* Sombra suave: el titular y la entradilla son el ÚNICO texto que se apoya
   directamente en la escena 3D, y la escena se mueve. El velo sostiene el
   contraste de base; esto es el seguro para cuando pasa por debajo el filo
   claro de un álabe. No es decoración — sin ella hay fotogramas concretos en
   los que el contraste baja del mínimo. */
.intro h1,
.entrada {
  text-shadow: 0 2px 14px rgba(10, 10, 12, 0.85);
}

.intro h1 {
  margin: 0 0 var(--space-4);
  font-size: clamp(2rem, 7.2vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.03em;      /* suelo de la casa: nunca por debajo de -0.04em */
  font-weight: 800;
  text-wrap: balance;
  max-width: 16ch;
}

.entrada {
  margin: 0;
  max-width: 54ch;
  font-size: clamp(1rem, 2.6vw, 1.2rem);
  color: var(--c-text-muted);
  text-wrap: pretty;
}

/* ==========================================================================
   EL TABLÓN
   ========================================================================== */
#tablon {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--space-4) var(--space-7);
}

.cargando {
  margin: 0 0 var(--space-4);
  color: var(--c-text-muted);
  font-size: 0.9rem;
}
.cargando[hidden] { display: none; }

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-4);
  align-items: start;
}

/* Base común de toda tarjeta.
   ⚠️ 30/07: `--giro` se queda SIEMPRE en 0deg. La inclinación de ±1,1° que daba
   el aire de papel clavado se retiró por decisión de María: en su móvil se leía
   como un defecto de alineación, no como un gesto. El token se conserva porque
   la animación de entrada (`aterriza`) lo compone en su `transform`, y ya nadie
   lo escribe desde JS. No volver a ponerlo distinto de 0 sin preguntárselo. */
.ficha {
  --giro: 0deg;
  position: relative;
  margin: 0;
  padding: var(--space-5) var(--space-4) var(--space-4);
  border-radius: var(--radius);
  transform: rotate(var(--giro));
  transition: transform 380ms var(--sal), box-shadow 380ms var(--sal);
}

/* ---------- Tarjeta de OFERTA REAL: papel atornillado ---------- */
.ficha--oferta {
  background: var(--c-papel);
  color: var(--c-papel-tinta);
  border: 1px solid var(--c-papel-borde);
  box-shadow: 0 10px 26px rgba(0,0,0,0.44);
  padding-top: var(--space-6);
}

/* El tornillo que la sujeta — el mismo gesto que la brida del logo. */
.ficha--oferta::before {
  content: "";
  position: absolute;
  top: 12px; left: 50%;
  width: 15px; height: 15px;
  margin-left: -7.5px;
  border-radius: 50%;
  background: var(--c-surface-2);
  box-shadow: inset 0 0 0 2px #4a4a52, 0 2px 4px rgba(0,0,0,0.5);
}
/* La ranura del tornillo */
.ficha--oferta::after {
  content: "";
  position: absolute;
  top: 18.5px; left: 50%;
  width: 9px; height: 2px;
  margin-left: -4.5px;
  border-radius: 1px;
  background: #14141a;
}

.oficios {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}
.oficios__uno {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--c-accent);
  color: var(--c-accent-ink);      /* carbón sobre naranja: 5,57:1 */
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: none;
}
.oficios__uno--extra {
  background: transparent;
  border: 1px solid var(--c-papel-borde);
  color: var(--c-papel-tenue);
  font-weight: 600;
}

.ficha--oferta .ficha__titulo {
  margin: 0 0 var(--space-3);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--c-papel-tinta);
  text-wrap: pretty;
  overflow-wrap: anywhere;         /* títulos largos de WhatsApp sin desbordar */
}

.detalles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
  font-size: 0.88rem;
  color: var(--c-papel-tenue);
}

.sello {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  padding-top: var(--space-3);
  border-top: 1px solid var(--c-papel-borde);
  font-size: 0.78rem;
  color: var(--c-papel-tenue);
}
.sello__origen {
  display: inline-block;
  padding: 1px var(--space-2);
  border: 1px solid var(--c-papel-borde);
  border-radius: 999px;
  font-weight: 700;
  color: var(--c-papel-tinta);
}
.sello__frescura { margin-left: auto; }

/* Oferta recién llegada mientras la página está abierta. */
.ficha--nueva { box-shadow: 0 0 0 2px var(--c-accent), 0 12px 30px rgba(0,0,0,0.5); }
.ficha--nueva .sello__frescura { color: var(--c-accent-ink); font-weight: 800; }

/* ---------- Tarjeta de DATO DEL SECTOR: placa de acero ---------- */
.ficha--dato {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  color: var(--c-text);
}

.ficha__marbete {
  margin: 0 0 var(--space-3);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ambar);           /* ámbar = contexto, nunca el naranja de oferta */
}

.ficha__cifra {
  margin: 0 0 var(--space-2);
  font-size: clamp(2.4rem, 8vw, 3.1rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}

.ficha--dato .ficha__titulo {
  margin: 0 0 var(--space-3);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.34;
  color: var(--c-text);
  text-wrap: pretty;
}

.ficha__texto {
  margin: 0 0 var(--space-3);
  font-size: 0.9rem;
  color: var(--c-text-muted);
  text-wrap: pretty;
}
.ficha--oferta .ficha__texto { color: var(--c-papel-tenue); }

.ficha__fuente {
  margin: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--c-border);
  font-size: 0.76rem;
  color: var(--c-text-muted);
}

/* ---------- Tarjeta de CATÁLOGO ---------- */
.ficha--catalogo {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
}
.ficha--catalogo .ficha__titulo {
  margin: 0 0 var(--space-4);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;
  text-wrap: pretty;
}
.listado {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
  font-size: 0.88rem;
  color: var(--c-text-muted);
}
.listado strong {
  display: block;
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}

/* ---------- Tarjeta de LLAMADA ---------- */
.ficha--llamada {
  background: var(--c-accent);
  color: var(--c-accent-ink);
  border: 1px solid var(--c-accent);
}
.ficha--llamada .ficha__titulo {
  margin: 0 0 var(--space-3);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.24;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}
.ficha--llamada .ficha__texto { color: #2c1b12; }

/* ==========================================================================
   BOTONES
   ========================================================================== */
.boton {
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-weight: 800;
  font-size: 0.96rem;
  text-decoration: none;
  text-align: center;
  transition: transform 200ms var(--sal), background-color 200ms var(--sal);
}
.boton--principal {
  background: var(--c-accent-ink);
  color: var(--c-text);
}
.ficha--dato .boton--principal,
.cierre .boton--principal {
  background: var(--c-accent);
  color: var(--c-accent-ink);
}
.boton--secundario {
  background: transparent;
  color: var(--c-text);
  border: 1px solid var(--c-border);
}

/* ==========================================================================
   CIERRE Y PIE
   ========================================================================== */
.cierre {
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--space-7) var(--space-4);
  text-align: center;
}
.cierre h2 {
  margin: 0 0 var(--space-4);
  font-size: clamp(1.5rem, 5vw, 2.25rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 800;
  text-wrap: balance;
}
.cierre p { margin: 0 0 var(--space-5); color: var(--c-text-muted); text-wrap: pretty; }
.cierre__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}
.lema { color: var(--c-text-muted); font-size: 0.95rem; }
.lema strong { color: var(--c-text); }

.pie {
  position: relative;
  z-index: var(--z-contenido);
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) calc(var(--space-8) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--c-border);
  color: var(--c-text-muted);
  font-size: 0.86rem;
  text-align: center;
}
.pie p { margin: 0 0 var(--space-2); }
.pie a { color: var(--c-accent); }
/* `.pie .pie__nota` y no `.pie__nota` a secas: `.pie p` es más específico
   (clase + elemento) y ganaba, así que los márgenes `auto` no se aplicaban y
   la nota quedaba pegada a la izquierda en vez de centrada. */
.pie .pie__nota {
  max-width: 46ch;
  margin: var(--space-4) auto 0;
  font-size: 0.8rem;
}

/* ==========================================================================
   EL "+" Y SU PANEL
   ========================================================================== */
.mas {
  position: fixed;
  right: var(--space-4);
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  z-index: var(--z-mas);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5) var(--space-3) var(--space-4);
  border: none;
  border-radius: 999px;
  background: var(--c-accent);
  color: var(--c-accent-ink);
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  transition: transform 220ms var(--sal);
}
.mas:hover { transform: translateY(-2px); }
.mas__signo { font-size: 1.5rem; line-height: 1; font-weight: 700; }

/* En móvil el botón con texto tapaba media tarjeta (visto en la captura real a
   390 px). Se queda en el "+" redondo que pidió María — el patrón de siempre —
   y el texto se conserva para los lectores de pantalla en el aria-label del
   botón. Quien prefiera leerlo tiene la tarjeta naranja y el cierre. */
@media (max-width: 47.99rem) {
  .mas {
    width: 60px;
    height: 60px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }
  .mas__texto {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .mas__signo { font-size: 2rem; }
}

.panel {
  width: min(30rem, calc(100vw - 2rem));
  padding: var(--space-6);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
  color: var(--c-text);
}
.panel::backdrop { background: rgba(10,10,12,0.72); }
.panel__titulo {
  margin: 0 0 var(--space-5);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.panel__via {
  display: block;
  margin-bottom: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-surface-2);
  color: var(--c-text);
  text-decoration: none;
  transition: border-color 200ms var(--sal);
}
.panel__via:hover { border-color: var(--c-accent); }
.panel__via strong { display: block; margin-bottom: var(--space-1); font-size: 1.02rem; }
.panel__via span { color: var(--c-text-muted); font-size: 0.88rem; }
.panel__pie { margin: var(--space-4) 0; color: var(--c-text-muted); font-size: 0.84rem; }
.panel__cerrar {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--c-text);
  font-family: inherit;
  font-size: 0.94rem;
  font-weight: 700;
  cursor: pointer;
}

/* ==========================================================================
   ENTRADA DE LAS TARJETAS
   Regla de la casa: la animación MEJORA algo que ya se ve. El estado base de
   .ficha es visible; `.entrando` solo se pone desde JS, y JS la quita pase lo
   que pase. Una animación que no salta nunca puede dejar la página en blanco.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .ficha.entrando {
    animation: aterriza 620ms var(--sal) both;
    animation-delay: var(--retardo, 0ms);
  }
  @keyframes aterriza {
    from { opacity: 0; transform: translateY(14px) rotate(var(--giro)) scale(0.985); }
    to   { opacity: 1; transform: translateY(0)    rotate(var(--giro)) scale(1); }
  }
}

/* ==========================================================================
   MENOS MOVIMIENTO — obligatorio
   Sin giros, sin latido, sin entradas, sin turbina 3D (tablon.js ni la
   arranca). Queda la misma página, quieta.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ficha { --giro: 0deg !important; transform: none !important; }
  .pulso.vivo .pulso__punto { animation: none; }
  .mas:hover { transform: none; }
  .escena__lienzo { transition: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   PANTALLAS GRANDES
   Rompe la cuadrícula uniforme: la primera oferta y la llamada ocupan dos
   columnas. Sin esto son doce tarjetas idénticas en fila.
   ========================================================================== */
@media (min-width: 48rem) {
  .cabecera { padding-top: var(--space-5); }
  .intro { padding-top: var(--space-7); }
  .rejilla { gap: var(--space-5); }
  /* Solo la llamada ocupa dos columnas: es la que cierra el tablón y la única
     que tiene texto para llenarlas. Se probó también con la primera oferta y
     quedaba mal — los anuncios que llegan por WhatsApp traen dos líneas, y a
     doble ancho la tarjeta se ve medio vacía. */
  .ficha--llamada { grid-column: span 2; }
  .mas { right: var(--space-6); bottom: var(--space-6); }
}

@media (min-width: 72rem) {
  .intro h1 { max-width: 18ch; }
}


/* ==========================================================================
   B6 · EL CALENDARIO DE PARADAS DENTRO DEL TABLON (28/07/2026)

   TERCER MATERIAL. El tablon ya tenia dos: papel (las ofertas reales, notas
   atornilladas) y acero (el contexto del sector, placas). Las paradas son un
   tercero a proposito — fichas de obra con una banda de color a la izquierda,
   como las etiquetas de una carpeta de proyecto. Que se distingan de un
   vistazo NO es decoracion: una parada NO es una oferta de trabajo, y nadie
   puede confundirlas.

   EL COLOR SIGUE A LA CONFIANZA (BR-069 y regla R4 del estudio):
     naranja de marca  -> confirmada por la empresa o el regulador
     ambar             -> anunciada sin dia exacto, o reportada por la comunidad
     ceniza            -> estimada o deducida del ciclo de la planta
   El color no es un adorno: es la unica forma de que un obrero sepa de un
   vistazo cuanto puede fiarse de esa fecha.
   ========================================================================== */

.titular {
  margin: var(--space-5) 0 0;
  font-size: clamp(1.05rem, 1.4vw + 0.8rem, 1.45rem);
  line-height: 1.35;
  max-width: 42rem;
}

.titular__cifra {
  display: block;
  color: var(--c-text);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* El numero, cuando existe, se pinta en naranja dentro del titular. */
.titular__cifra b {
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}

.titular__detalle {
  display: block;
  margin-top: var(--space-2);
  color: var(--c-text-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.paradas {
  position: relative;
  z-index: var(--z-contenido);
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--space-7) var(--space-5) var(--space-4);
}

.paradas h2 {
  margin: 0;
  font-size: clamp(1.3rem, 1vw + 1.05rem, 1.75rem);
  line-height: 1.2;
}

.paradas__entrada {
  margin: var(--space-3) 0 var(--space-5);
  max-width: 46rem;
  color: var(--c-text-muted);
}

.paradas__nota {
  margin: var(--space-5) 0 0;
  max-width: 46rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--c-text-muted);
}

.paradas__nota strong { color: var(--c-text); }

.paradas__rejilla {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}

/* La ficha. Fondo de acero + banda de color a la izquierda segun confianza. */
.parada {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4) var(--space-4) calc(var(--space-4) + 6px);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  border-left: 6px solid var(--c-borde-confianza, var(--c-border));
  overflow-wrap: anywhere;
}

/* Confianza -> color de la banda y del marbete. */
.parada--confirmada { --c-borde-confianza: var(--c-accent); }
.parada--anunciada,
.parada--comunidad  { --c-borde-confianza: var(--c-ambar); }
.parada--recurrente,
.parada--estimada   { --c-borde-confianza: var(--c-text-muted); }

.parada__cabecera {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.parada__estado {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  border: 1px solid var(--c-border);
}

.parada__estado--en_curso {
  background: var(--c-accent);
  color: var(--c-accent-ink);      /* carbon sobre naranja: 6,9:1 */
  border-color: transparent;
}

.parada__confianza {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-borde-confianza, var(--c-text-muted));
}

.parada__planta {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.3;
  color: var(--c-text);
}

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

/* La ventana temporal LITERAL de la fuente. Nunca una fecha reconstruida. */
.parada__cuando {
  margin: 0;
  font-size: 0.9rem;
  color: var(--c-text);
  border-top: 1px dashed var(--c-border);
  padding-top: var(--space-2);
}

.parada__magnitud {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--c-text-muted);
}

.parada__oficios {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.parada__oficio {
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  color: var(--c-text-muted);
}

.parada__fuente {
  margin-top: auto;
  padding-top: var(--space-2);
  font-size: 0.78rem;
}

.parada__fuente a {
  color: var(--c-ambar);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.parada__fuente a:hover,
.parada__fuente a:focus-visible { color: var(--c-accent); }

/* Entrada escalonada, igual que las tarjetas de oferta. El estado base ya es
   visible: la animacion mejora algo que ya se ve. */
@media (prefers-reduced-motion: no-preference) {
  .parada.entrando {
    animation: aterriza 0.5s var(--sal) both;
    animation-delay: var(--retardo, 0ms);
  }
}

@media (max-width: 30rem) {
  .paradas { padding-left: var(--space-4); padding-right: var(--space-4); }
  .paradas__rejilla { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PASE UX DEL 29/07/2026 — feedback de María usando el tablón en su móvil.

   1. La tarjeta de oferta se puede tocar: hace falta que SE NOTE que se puede.
      Una tarjeta que se abre pero no lo parece es igual de inútil que una que
      no se abre (que es lo que había).
   2. La ficha que se abre encima.
   3. El segundo enlace de fuente de una parada.
   ========================================================================== */

/* ---- La tarjeta como botón ---------------------------------------------- */
.ficha--oferta[role="button"] {
  cursor: pointer;
  /* El giro de papel clavado ya viene de --giro; aquí solo se añade la
     respuesta al dedo. `transform` no se toca para no pelearse con él. */
  transition: box-shadow 180ms var(--sal), border-color 180ms var(--sal);
}
.ficha--oferta[role="button"]:hover,
.ficha--oferta[role="button"]:focus-visible {
  border-color: var(--c-accent);
  box-shadow: 0 14px 34px rgba(0,0,0,0.52), 0 0 0 2px var(--c-accent);
}
.ficha--oferta[role="button"]:focus-visible {
  outline: 3px solid var(--c-ambar);
  outline-offset: 3px;
}
.ficha--oferta[role="button"]:active { box-shadow: 0 6px 16px rgba(0,0,0,0.5); }

/* El reclamo. Tinta tenue sobre papel (7,0:1) y flecha decorativa aparte,
   para que un lector de pantalla no lea "flecha derecha" en medio. */
.ficha__vermas {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--c-papel-tenue);
}
.ficha__vermas::after {
  content: "→";
  transition: transform 180ms var(--sal);
}
.ficha--oferta[role="button"]:hover .ficha__vermas { color: var(--c-papel-tinta); }
.ficha--oferta[role="button"]:hover .ficha__vermas::after { transform: translateX(3px); }

/* ---- La ficha de la oferta ---------------------------------------------- */
.ficha-modal {
  width: min(34rem, calc(100vw - 1.5rem));
  max-height: min(88vh, 48rem);
  overflow-y: auto;
  padding: var(--space-6);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
  color: var(--c-text);
  /* En un móvil, dentro de una obra y con una mano: la ficha se pega abajo,
     que es donde llega el pulgar. */
  margin: auto auto 0;
}
.ficha-modal::backdrop { background: rgba(10,10,12,0.78); }

@media (min-width: 40rem) {
  .ficha-modal { margin: auto; }
}

/* "← Volver al tablón" (30/07). Se pega arriba mientras se lee la ficha, y
   sangra hasta los bordes del <dialog> para que sea una barra de verdad y no un
   botón perdido. Los márgenes negativos compensan el padding del diálogo. */
.ficha-modal__volver {
  position: sticky;
  top: calc(var(--space-6) * -1);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: calc(100% + var(--space-6) * 2);
  min-height: 3rem;                 /* dedo con guantes */
  margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-4);
  padding: var(--space-3) var(--space-6);
  border: 0;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text);
  /* Un <button> no hereda ni la fuente ni el color (lección del 28/07). */
  font-family: inherit;
  font-size: 1rem;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}
.ficha-modal__volver:hover { color: var(--c-accent-2); }
.ficha-modal__flecha { font-size: 1.15rem; line-height: 1; }

.ficha-modal__titulo {
  margin: 0 0 var(--space-4);
  font-size: 1.24rem;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--c-text);
}

/* Los oficios dentro de la ficha van sobre fondo oscuro, no sobre papel. */
.oficios--ficha { margin-bottom: var(--space-4); }
.oficios--ficha .oficios__uno {
  background: var(--c-accent);
  border-color: transparent;
  color: var(--c-accent-ink);       /* carbón sobre naranja: 5,57:1 */
  font-weight: 800;
}

.datos {
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--c-border);
}
.dato {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--c-border);
  font-size: 0.94rem;
}
.dato__clave {
  flex: 0 0 7.5rem;
  color: var(--c-text-muted);
  font-weight: 700;
}
.dato__valor { flex: 1 1 10rem; color: var(--c-text); }

.ficha-modal__sub {
  margin: 0 0 var(--space-3);
  font-size: 1rem;
  font-weight: 800;
  color: var(--c-text);
}
.ficha-modal__texto {
  margin: 0 0 var(--space-5);
  /* El anuncio llega con sus saltos de línea: se respetan tal cual. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--c-text);
}
.ficha-modal__nota,
.ficha-modal__cargando {
  margin: 0 0 var(--space-5);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--c-text-muted);
}

/* El botón principal de la página nace en carbón y solo se pone naranja donde
   es LA acción de ese bloque (.ficha--dato, .cierre). En la ficha lo es: se
   viene de tocar una oferta y lo siguiente es entrar a por el contacto. */
.ficha-modal__cta .boton--principal {
  background: var(--c-accent);
  color: var(--c-accent-ink);       /* carbón sobre naranja: 5,57:1 */
}

.ficha-modal__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--c-border);
}
.ficha-modal__aviso {
  flex: 1 1 100%;
  margin: 0 0 var(--space-2);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--c-text-muted);
}
/* ---- Título del anuncio original (31/07, ronda 2) -----------------------
   Dato secundario dentro de la ficha: se distingue del cuerpo del anuncio
   para que nadie lo confunda con el titular. */
.ficha-modal__original {
  margin: var(--space-4) 0 0;
  font-size: 0.9rem;
  color: var(--c-text-muted);
  overflow-wrap: anywhere;
}
.ficha-modal__original-clave {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---- Compartir una oferta (31/07) ---------------------------------------
   Va ANTES del bloque de "entrar en Obrería" y con el ámbar de la marca, no
   con el naranja: son dos acciones distintas y no pueden competir. La de
   abajo (entrar) sigue siendo LA acción principal de la ficha; ésta es la que
   hace crecer el tablón. Ámbar con tinta carbón = 9,8:1. */
.ficha-modal__compartir {
  padding-top: var(--space-4);
  border-top: 1px solid var(--c-border);
}
.ficha-modal__compartir .boton--compartir {
  display: block;
  width: 100%;
  /* Un <button> no hereda ni la fuente ni el color del contenedor: se dicen
     los dos a mano (misma lección que el contraste de los avisos, 28/07). */
  font: inherit;
  font-weight: 800;
  border: 0;
  cursor: pointer;
  background: var(--c-ambar);
  color: var(--c-accent-ink);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  min-height: 48px;               /* se pulsa con guantes de obra */
}
.ficha-modal__compartir .boton--compartir:hover,
.ficha-modal__compartir .boton--compartir:focus-visible { filter: brightness(1.07); }
.ficha-modal__compartir-nota {
  margin: var(--space-2) 0 0;
  font-size: 0.85rem;
  color: var(--c-text-muted);
}

.ficha-modal .panel__cerrar { margin-top: var(--space-4); }

/* ---- Segunda fuente de una parada --------------------------------------- */
.parada__fuente2 { font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .ficha--oferta[role="button"],
  .ficha__vermas::after { transition: none; }
  .ficha--oferta[role="button"]:hover .ficha__vermas::after { transform: none; }
}

/* ===========================================================================
   NOTICIAS DEL SECTOR (30/07/2026) — bloque EDITORIAL del tablon publico.
   ---------------------------------------------------------------------------
   Aqui solo entra el carril editorial: hechos publicos con su fuente. Los
   "avisos entre companeros" (una empresa que no paga) NO salen a la calle —
   viven dentro de la app, con sesion.

   Se calca deliberadamente la forma de las fichas de PARADA en vez de la de
   las tarjetas de oferta: una noticia es contexto del sector, como una parada,
   y no puede confundirse con una oferta a la que apuntarse. Sin tornillo y sin
   gesto de papel clavado, que son de las ofertas.
   =========================================================================== */

.noticias {
  position: relative;
  z-index: var(--z-contenido);
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) var(--space-4);
}

.noticias h2 {
  margin: 0;
  font-size: clamp(1.3rem, 1vw + 1.05rem, 1.75rem);
  line-height: 1.2;
}

.noticias__entrada {
  margin: var(--space-3) 0 var(--space-5);
  max-width: 46rem;
  color: var(--c-text-muted);
}

.noticias__nota {
  margin: var(--space-5) 0 0;
  max-width: 46rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--c-text-muted);
}

.noticias__nota strong { color: var(--c-text); }

.noticias__rejilla {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}

.noticia {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4) var(--space-4) calc(var(--space-4) + 6px);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  /* Banda ambar: la misma que marca "anunciada" en las paradas. Dice
     "informacion del sector", no "oferta". */
  border-left: 6px solid var(--c-ambar);
  overflow-wrap: anywhere;
}

.noticia__titulo {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.3;
  color: var(--c-text);
}

.noticia__resumen {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--c-text-muted);
}

.noticia__fuente {
  margin-top: auto;
  padding-top: var(--space-2);
  font-size: 0.78rem;
  color: var(--c-ambar);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.noticia__fuente:hover,
.noticia__fuente:focus-visible { color: var(--c-accent); }

/* Entrada escalonada, igual que paradas y ofertas. El estado base YA es
   visible: la animacion mejora algo que se ve sin ella. */
@media (prefers-reduced-motion: no-preference) {
  .noticia.entrando {
    animation: aterriza 0.5s var(--sal) both;
    animation-delay: var(--retardo, 0ms);
  }
}

/* Pie legal (01/08). Mismo tamaño que la nota de seguridad de arriba: es
   información de servicio, no reclamo. */
.pie__legal {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  line-height: 2;
}
.pie__legal a { white-space: nowrap; }