/* ==========================================================================
   ATLAS AREA LAB · PATRÓN A7 · Salud

   1. El mapa usa el CSS REAL del producto (lib/atlas-map-full.css) y el hover
      real de atlas.js. Aquí sólo quedan los overrides imprescindibles:
      fondo blanco, caja de 860 px como en producción, line-height base del
      producto y el panel anclado a la sección sin cambiar su ancho.
   2. La agenda usa el contenedor normal de la página (1 300 px a 1440 px) con
      la rejilla compacta de tres columnas de A5.
   3. Cada ficha de dossier ordena su interior con una guía lateral fina: label
      fuerte, titular oscuro y texto de apoyo subordinado.
   ========================================================================== */

/* ------------------------------------------------- 1 · mapa, paridad ------ */

/* medida real de producción: 860 × 860 en escritorio */
.b4-map .stakeholder-map {
  width: 860px; max-width: 100%; aspect-ratio: 1; min-height: 0; margin: 0 auto;
  background: #ffffff; border-color: transparent;
}
/* el producto no fija line-height en su base: aquí el de la página estorba */
.b4-map { line-height: normal; }
/* el CSS real del producto incluye su fondo de papel en el contenedor; aquí
   sólo se neutraliza esa superficie, sin tocar ninguna regla funcional */
.b4-map { background: transparent; }
.b4-map .map-hover-detail,
.b4-map .map-hover-detail-v311,
.b4-map .stakeholder-detail-v311,
.b4-map .map-node-identity { background: #ffffff; }

/* el panel conserva el ancho real del producto (min(420px, 36vw)) y sólo cambia
   su anclaje: dentro de la sección en lugar de la ventana. En móvil se deja la
   regla del producto, que lo convierte en hoja inferior. */
@media (min-width: 901px) {
  .b4-map .stakeholder-detail-v311 { position: absolute; width: min(420px, 36vw); }
}

/* dos composiciones del mismo componente: la de escritorio y la de móvil */
.b4-map.is-mobile { display: none; }

/* ------------------------------------------ 2 · agenda al ancho de página -- */

/* A6 · se deshace el tope de A5: la agenda usa el contenedor normal de la
   página (el mismo `.wrap` del hero, del mapa y del resto de secciones) en
   lugar de un max-width propio. Medido a 1440 px: 1 020 px en A5, 1 300 px en
   A6, con las tres fichas a 393 px y márgenes laterales de 70 px. */
.a-agenda .wrap { max-width: var(--wrap); }
.a-agenda { padding-top: var(--s9); border-top: 1px solid var(--line); }
.a-agenda .a-agenda-head { margin-bottom: var(--s5); }

.dcards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4); align-items: start;
}

.dcard {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px; border: 1px solid var(--line-2); border-radius: 3px;
  background: var(--paper);
}

.dcard-state {
  display: flex; align-items: flex-start; gap: 6px; margin: 0;
  font-size: 8px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); line-height: 1.3;
}
.dcard-state .dot { width: 5px; height: 5px; margin-top: 3px; border-radius: 50%; background: var(--teal); flex: none; }
.dcard-state .dot.is-window { background: var(--gold); }

/* variante 1 · compacta editorial: serif en el título */
.dcard-title {
  margin: 0; font-family: "Libre Baskerville", Georgia, serif;
  font-size: 17px; line-height: 1.22; font-weight: 400; color: var(--ink);
}
.dcard-title a { border-bottom: 1px solid transparent; }
.dcard-title a:hover { color: var(--navy); border-color: var(--navy); }

/* variante 2 · compacta producto: todo sans, título semibold */
.dcards.is-product .dcard-title {
  font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: -.01em;
}

.dcard-rule { height: 1px; margin: 0; border: 0; background: var(--line); }

.dcard-block { display: grid; gap: 2px; }
.dcard-k {
  margin: 0; font-size: 8px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
}
.dcard-v { margin: 0; font-size: 12.5px; line-height: 1.35; color: var(--ink); }
.dcard-s { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--ink-3); }
.dcard-v.num, .dcard-s.num { font-variant-numeric: tabular-nums; }

.dcard-window {
  display: grid; gap: 2px; padding: 8px 10px;
  border-left: 2px solid var(--gold); background: rgba(197, 160, 108, .07);
}
.dcard-window .dcard-k { color: var(--navy); }

.dcard-actor { display: grid; gap: 3px; }
.dcard-actor-row { display: flex; align-items: center; gap: 7px; margin: 0; }
.dcard-actor-row img { width: 20px; height: 20px; object-fit: contain; flex: none; }
.dcard-actor-row b { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink); }
.dcard-actor-row small { display: block; font-size: 11px; color: var(--ink-3); }

.dcard-cta { display: flex; justify-content: flex-end; margin-top: 6px; }
.dcard-cta .text-link { min-height: 32px; font-size: 12px; }

/* ---------------------------------------------------------- responsive ----- */

@media (max-width: 1080px) {
  .a-agenda .wrap { max-width: none; }
  .dcards { gap: var(--s4); }
}

@media (max-width: 900px) {
  /* el mapa pasa a la composición móvil real del producto */
  .area-first .b4-map[data-variant="desktop"] { display: none; }
  .b4-map.is-mobile { display: block; }
  .b4-map .stakeholder-map { width: 100%; }
  .b4-map .stakeholder-detail-v311 { position: fixed; }

  .a-agenda { padding-top: var(--s8); }
  .dcards { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .dcard { padding: 14px; }
  .dcard-title { font-size: 17px; }
  .dcards.is-product .dcard-title { font-size: 16px; }
}

/* ==========================================================================
   A6 · ajuste mínimo de las placas de anillo

   La colisión es inherente a la geometría del propio producto: en
   normativo.es/atlas/tema/salud/, con el lienzo real de 860 px y el mismo
   viewBox 1000, los nodos se dibujan después de las placas y las círculos
   caen exactamente encima de éstas (Comisión de Sanidad tapa 78,4 × 20,6 px
   de IMPLEMENTA Y COORDINA y unos 53 px de su texto; CISNS tapa 47,5 × 15,2
   px de PARTICIPA y unos 24 px de su texto; el Ministerio de Sanidad tapa
   23,5 × 20,6 px de la placa de LEGISLA Y REGULA). Las tres coincidencias
   aparecen medidas, en el mismo viewport, en producción y en A5.

   No se tocan nodos, anillos, relaciones, tipografía ni el lienzo: sólo se
   desplaza cada placa lo mínimo imprescindible, y el desplazamiento se calcula
   por separado para cada composición porque el lienzo cambia de escala.
   Posiciones calculadas con tools/solve-a6-labels.js (escritorio) y
   tools/solve-a6-mobile.js (móvil, libre a la vez en 360, 390 y 414 px):
   búsqueda del desplazamiento más corto que deja la placa sin intersección
   con ningún nodo, con 4 u de aire. Unidades del viewBox.
   ========================================================================== */

/* Escritorio: lienzo real de 860 px (1 u = 0,86 px). */
.b4-map[data-variant="desktop"] .map-ring-label-group.label-implementation { transform: translate(-2px, -69px); }
.b4-map[data-variant="desktop"] .map-ring-label-group.label-participation { transform: translate(-1px, -22px); }

/* La placa de LEGISLA Y REGULA se desplaza sobre su propio anillo (radio 294
   frente a 300 del anillo de legislación) para no caer en el anillo exterior.
   El desplazamiento libre más corto (120, 81) dejaba el label a radio 378. */
.b4-map[data-variant="desktop"] .map-ring-label-group.label-legislation { transform: translate(-127px, -87px); }

/* Móvil: lienzo de 316-370 px, con nodos de tamaño fijo y por tanto mucho
   mayores en unidades del viewBox. LEGISLA Y REGULA y DECIDE E IMPULSA ya
   están libres en la geometría real. */
.b4-map[data-variant="mobile"] .map-ring-label-group.label-implementation { transform: translate(-100px, -3px); }
.b4-map[data-variant="mobile"] .map-ring-label-group.label-participation { transform: translate(-1px, -23px); }

/* ==========================================================================
   A7 · jerarquía interna de la ficha de dossier

   Variante elegida: guía neutra, labels y titulares en tinta casi negra y el
   dorado reservado a Ventana abierta (y al punto funcional del estado, que ya
   lo tenía). La comparativa de las dos microvariantes está en
   `fichas-variantes-a7.html` y su captura en
   `shots/parity/a7-comparativa-microvariantes-1440.png`.

   La guía no es una cronología: es una línea de 1 px que ordena las partes del
   dossier, sin flechas y sin fechas encadenadas. No se cambia el contenedor de
   la ficha, ni el grid, ni el ancho, ni la tipografía general.
   ========================================================================== */

/* 3.1 · la guía lateral ---------------------------------------------------- */

.dcard-guide { position: relative; display: grid; gap: 11px; padding-left: 18px; }
.dcard-guide::before {
  content: ""; position: absolute; left: 3px; top: 5px; bottom: 6px; width: 1px;
  background: #dedcd7;
}
.dcard-guide > * { position: relative; }
.dcard-guide > *::before {
  content: ""; position: absolute; left: -17px; top: 4px;
  width: 5px; height: 5px; border-radius: 50%; background: #c6c4bf;
}
/* el único punto con color propio: la ventana abierta */
.dcard-guide > .dcard-window::before { background: var(--gold); }

/* 3.2 · label pequeño y fuerte, titular oscuro, apoyo suave --------------- */

.dcard-k { font-size: 8px; font-weight: 700; letter-spacing: .1em; color: var(--ink); }
.dcard-v { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.dcard-s { font-size: 11.5px; font-weight: 400; line-height: 1.45; color: var(--ink-3); }
.dcard-guide .dcard-block { gap: 3px; }
.dcard-guide .dcard-s { margin-top: 2px; }

/* último movimiento: fecha secundaria, titular fuerte, tipo suave */
.dcard-date {
  margin: 0; font-size: 11.5px; font-weight: 500; line-height: 1.35;
  letter-spacing: .01em; color: var(--ink-3); font-variant-numeric: tabular-nums;
}

/* actor actual: el nombre pesa más que el rol */
.dcard-actor-row b { font-weight: 600; color: var(--ink); }

/* la ventana abierta mantiene su tratamiento, sólo pierde el label en cursiva
   heredado: borde dorado, fondo tenue y label en azul */
.dcard-window .dcard-k { color: var(--navy); }

/* el CTA no cambia de tamaño y sigue abajo a la derecha */
.dcard-cta { margin-top: 2px; }

/* ==========================================================================
   FASE 9 · Landing informativa · una sola implementacion del mapa real

   Se retira la composicion movil reducida (7 nodos) y se conserva el mismo
   mapa real de Salud (14 nodos) en todos los anchos: una sola geometria de
   860 px, las mismas placas A6 ya corregidas y, en movil, el desplazamiento
   horizontal real del componente en lugar de una segunda maqueta divergente.
   ========================================================================== */

.b4-map .stakeholder-map { width: 860px; max-width: 100%; margin: 0 auto; }

@media (max-width: 900px) {
  .b4-map-wrap { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
  .b4-map { width: 860px; max-width: none; margin: 0; }
  .b4-map .stakeholder-map { width: 860px; max-width: none; margin: 0; }
}