/* ==========================================================================
   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;
  /* 17/08 (v60) — mismo verde "ok" que la PWA (styles.css --c-ok): "Redacción
     Obrería" (fuente pública citada) se distingue del resto con el mismo
     código de color en toda la app, no uno nuevo inventado para el tablón. */
  --c-ok: #3fb950;
  --c-ok-tint: rgba(63, 185, 80, 0.14);

  /* 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);
}
/* 17/08 (v60) — "Redacción Obrería": mismo sello, tono distinto (ver el
   :root de arriba), para que se note A SIMPLE VISTA en el escaparate. */
.sello__origen--editorial {
  border-color: var(--c-ok);
  background: var(--c-ok-tint);
  color: #1e5c2a;
}
.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; }

/* ==========================================================================
   "VER MÁS OFERTAS" (v74, 24/08/2026) — decisión de María
   --------------------------------------------------------------------------
   Cierra la fila entera (`grid-column: 1 / -1`) a propósito: es un separador
   entre lo que la persona ha venido a leer (las ofertas) y el contexto del
   sector, no una tarjeta más. Si ocupara una celda, se leería como una
   sexta placa y nadie lo distinguiría de las otras.

   No inventa ni un color ni una medida: reutiliza `.boton--secundario` tal
   cual y los tokens de espacio de la casa. El naranja de marca NO se usa
   aquí — está reservado para la llamada a publicar (`.ficha--llamada`), que
   es la única acción de la página que debe destacar sobre todo lo demás.
   ========================================================================== */
.tablon-mas {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: var(--space-2) 0 var(--space-3);
}

.tablon-mas__boton {
  /* `.boton` nace como `inline-block` para los <a>; aquí es un <button> real y
     hay que apagarle lo que el navegador le pone por su cuenta. */
  background: transparent;
  color: var(--c-text);
  border: 1px solid var(--c-border);
  font-family: inherit;
  cursor: pointer;
  min-height: 2.75rem;          /* objetivo táctil con guantes de obra */
  /* Sólo estas dos: `transform` y `background-color` no tocan el layout. */
  transition: transform 160ms var(--sal), background-color 160ms var(--sal);
}

/* El hover, sólo donde hay puntero de verdad. En un móvil, `:hover` se queda
   pegado después del toque y el botón parece encendido sin estarlo. */
@media (hover: hover) and (pointer: fine) {
  .tablon-mas__boton:hover { background: var(--c-surface-2); }
}

/* Respuesta al toque: el botón acusa el golpe. Sin esto, en un móvil con
   datos lentos parece que no ha pasado nada y se toca tres veces. */
.tablon-mas__boton:active { transform: scale(0.97); }

.tablon-mas__boton:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

.tablon-mas__boton[disabled] {
  cursor: progress;
  opacity: 0.72;
  transform: none;
}

/* "Ya están todas las ofertas del tablón." Es un cierre honesto, no un
   aviso: pequeño, en el gris de apoyo y sin adorno ninguno. */
.tablon-mas__fin {
  display: block;
  text-align: center;
  color: var(--c-text-muted);
  font-size: 0.92rem;
}

@media (prefers-reduced-motion: reduce) {
  .tablon-mas__boton { transition: background-color 160ms linear; }
  .tablon-mas__boton:active { transform: none; }
}

/* ==========================================================================
   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); }

/* 30/08 — VIGENCIA INTELIGENTE (SPEC_VIGENCIA_INTELIGENTE_OFERTAS_2026-08-30.md).
   Mismo tono ámbar que .parada__fuente (contexto, nunca el naranja de oferta):
   explica por qué una oferta con el plazo pasado sigue publicada, no es una
   promesa ni una alarma. */
.ficha__vigencia,
.ficha-modal__vigencia {
  margin-top: var(--space-2);
  font-size: 0.82rem;
  color: var(--c-ambar);
}

/* 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); }
/* 17/08 (v60) — el enlace de la fila "Fuente". Mismo color y mismo criterio
   de hover/foco que .parada__fuente a, el enlace de fuente que ya existía. */
.dato__valor a { color: var(--c-ambar); text-decoration: underline; text-underline-offset: 2px; }
.dato__valor a:hover,
.dato__valor a:focus-visible { color: var(--c-accent); }

.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; }


/* ---------------------------------------------------------------------------
   PIE — regla de la casa (07/08/2026): quién opera esto y el sello legal.
   Los dos van en gris y un punto más pequeños que el resto del pie: son
   información obligatoria (§5 DDG identifica a la responsable), no un reclamo.
   --------------------------------------------------------------------------- */
.pie__operadora,
.pie__sello {
  font-size: 0.85rem;
  line-height: 1.5;
}

/* ==========================================================================
   ÚLTIMAS OFERTAS, EN HTML CRUDO (21/09/2026) — ver la nota en index.html.
   Mismo ritmo de sección que `.noticias` (max-width + padding de la escala),
   variables ya definidas arriba — nada de hex/px inventados.
   ========================================================================== */
.ultimas-ofertas {
  position: relative;
  z-index: var(--z-contenido);
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) var(--space-4);
}

.ultimas-ofertas__intro {
  color: var(--c-text-muted);
  margin: 0 0 var(--space-4);
}
.ultimas-ofertas__intro a { color: var(--c-ambar); }

.ultimas-ofertas__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.ultimas-ofertas__fila {
  display: block;
  background: var(--c-papel);
  color: var(--c-papel-tinta);
  border: 1px solid var(--c-papel-borde);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
}
.ultimas-ofertas__fila:hover,
.ultimas-ofertas__fila:focus-visible { border-color: var(--c-accent); }

.ultimas-ofertas__titulo {
  display: block;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.ultimas-ofertas__meta {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.85rem;
  color: var(--c-papel-tenue);
  overflow-wrap: anywhere;
}

@media (min-width: 48rem) {
  .ultimas-ofertas__lista { grid-template-columns: repeat(2, 1fr); }
}