/* ==========================================================================
   ATLAS AREA LAB · Salud · sistema compartido

   Base de las dos propuestas de página de área. Aquí vive lo común: cabecera
   del nuevo Atlas, migas, hero, secciones, filas de asunto y el encuadre del
   mapa real. Lo que cambia entre A y B está en area-a.css y area-b.css.

   El mapa mantiene su CSS real (lib/atlas-map.css, extraído de atlas.css) y su
   comportamiento real (lib/area-map.js).
   ========================================================================== */

body { background: var(--paper); }

/* ----------------------------------------------------------- cabecera --- */

.brand { display: inline-flex; align-items: center; }
.brand-atlas {
  display: inline-flex; align-items: center; gap: 10px;
  margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--line-2);
  font-size: 13px; font-weight: 500; color: var(--navy);
}

/* --------------------------------------------------------------- migas --- */

.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding-top: var(--s8); font-size: 12.5px; color: var(--ink-3);
}
.crumbs a { border-bottom: 1px solid transparent; }
.crumbs a:hover { color: var(--navy); border-color: var(--navy); }
.crumbs .sep { color: var(--line-2); }

/* ---------------------------------------------------------------- hero --- */

.area-hero { padding: var(--s6) 0 var(--s7); }
.area-hero .h1 { margin: 0; font-size: clamp(36px, 4.6vw, 58px); line-height: 1.04; font-weight: 400; color: var(--ink); max-width: 18ch; }
.area-hero .area-desc { margin: var(--s5) 0 0; font-size: 17px; line-height: 1.5; color: var(--ink-2); max-width: 54ch; }
.area-rule { width: 72px; height: 2px; background: var(--gold); margin: var(--s5) 0 0; }
.area-meta { margin: var(--s5) 0 0; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ secciones --- */

.area-section { padding: var(--s9) 0 var(--s10); }
.area-section.is-alt { background: var(--ivory); }
.area-section .sec-head { max-width: 62rem; }

/* -------------------------------------------------------- filas de asunto - */

.dossier {
  display: grid; gap: var(--s4);
  padding: var(--s6) 0; border-top: 1px solid var(--line);
}
.dossier:last-child { border-bottom: 1px solid var(--line); }
.dossier-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s5); }
.dossier-title { margin: 0; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.2; font-weight: 400; color: var(--ink); }
.dossier-title a { border-bottom: 1px solid transparent; }
.dossier-title a:hover { color: var(--navy); border-color: var(--navy); }
.dossier-state { margin: 0; font-size: 15px; color: var(--ink-2); }
.dossier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s5) var(--s7); }
.dossier-cell { display: grid; gap: 4px; }
.dossier-k {
  font-size: 9.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
.dossier-v { font-size: 14.5px; line-height: 1.4; color: var(--ink); }
.dossier-s { font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
.dossier-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5) var(--s6); }

/* ------------------------------------------------------- el mapa real ---- */

.b4-map { position: relative; margin-top: var(--s7); }
.b4-map .stakeholder-map {
  position: relative; width: min(1000px, 100%); aspect-ratio: 1;
  min-height: 0; margin: 0 auto;
}

/* El panel de detalle del producto se ancla a la sección en escritorio y
   mantiene su hoja inferior real en pantallas pequeñas. */
.b4-map .stakeholder-detail-v311 {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 38%);
  max-height: none; border-radius: 8px;
}

@media (max-width: 1080px) {
  .b4-map .stakeholder-detail-v311 { width: min(380px, 44%); }
}

@media (max-width: 900px) {
  .area-hero { padding: var(--s5) 0 var(--s6); }
  .crumbs { padding-top: var(--s6); }
  .area-hero .h1 { max-width: none; }

  /* el mapa no se convierte en lista: se conserva y se desplaza */
  .b4-map { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
  .b4-map .stakeholder-map { width: 640px; margin: 0; }
  .b4-map .stakeholder-detail-v311 { position: fixed; }
  .brand-atlas { font-size: 12px; }
}

@media (max-width: 640px) {
  .brand-atlas { display: none; }
}