/* ==========================================================================
   ATLAS · ARQUITECTURA B4 · producto real y pieza editorial

   El hero y el procedimiento vienen de B2 sin cambios. El dossier vuelve a
   ser una pieza editorial y los actores usan el componente real del mapa de
   Atlas, acotado en lib/atlas-b4-map.css.
   ========================================================================== */

/* ============================================================ HERO (de B) == */

.ab-hero { padding-top: var(--s10); padding-bottom: var(--s9); }

.ab-hero-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s9) var(--s7); align-items: start;
}
.ab-hero-copy { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: var(--s5); }
.ab-hero-copy h1 { max-width: 15ch; }
.ab-hero-copy .lede { max-width: 42ch; }
.ab-flag {
  margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--navy);
}
.ab-hero-piece { grid-column: 7 / span 6; margin: 0; }
.ab-piece-title {
  margin: 0; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.2;
  font-weight: 500; color: var(--ink); max-width: 30ch;
}
.ab-piece-state {
  margin: var(--s5) 0 0; padding-top: var(--s4); border-top: 2px solid var(--gold);
  display: grid; gap: 6px;
}
.ab-piece-state .n-k {
  font-size: 9.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
.ab-piece-state .n-v { font-size: 15px; line-height: 1.35; color: var(--ink); }

.ab-rail { margin: var(--s5) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.ab-rail li {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s5); align-items: baseline;
  padding: 9px 0 9px var(--s5);
  border-bottom: 1px solid var(--line); border-left: 1px solid var(--line);
}
.ab-rail li::before {
  content: ""; position: absolute; left: -3.5px; top: 15px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--teal); flex: none;
}
.ab-rail .s-t { font-size: 14px; line-height: 1.3; color: var(--ink); }
.ab-rail .s-d { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ab-rail li.is-now { border-left: 2px solid var(--gold); }
.ab-rail li.is-now::before { background: var(--gold); }
.ab-rail li.is-now .s-t { color: var(--navy); font-weight: 500; }
.ab-rail li.is-prev::before { background: transparent; border: 1px dashed var(--line-2); width: 7px; height: 7px; }
.ab-rail li.is-prev .s-t,
.ab-rail li.is-prev .s-d { color: var(--ink-3); }

.ab-areas {
  margin-top: var(--s9); padding-top: var(--s5);
  border-top: 1px solid var(--line-2); display: grid; gap: var(--s4);
}
.ab-areas-k {
  margin: 0; font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
.ab-areas-list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px var(--s4); }
.ab-areas-list li { display: flex; align-items: center; gap: var(--s4); min-width: 0; }
.ab-areas-list li + li::before { content: "·"; color: var(--line-2); }
.ab-areas-list a { font-size: 15px; color: var(--ink); border-bottom: 1px solid transparent; }
.ab-areas-list a:hover { color: var(--navy); border-color: var(--navy); }

/* ====================================================== PLATO (de base) === */

.ax-k {
  margin: 0; font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
.ax-plate {
  margin: 0; background: var(--paper);
  border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden;
}
.ax-plate-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px var(--s5); min-height: 46px; padding: 8px var(--s6);
  border-bottom: 1px solid var(--line); background: var(--ivory);
}
.ax-plate-bar .b-label {
  font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3);
}
.ax-plate-bar .b-meta { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ax-plate-body { padding: var(--s6); }
.ax-plate-body.is-roomy { padding: var(--s7) var(--s6); }

/* ==================================== 2 · PROCEDIMIENTO REAL DEL RDL 21/2026 */

.b2-procedure { padding-bottom: var(--s11); }

.b2-seq { margin-top: var(--s8); }
.b2-seq-asunto {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px var(--s5);
  margin: 0 0 var(--s6);
}
.b2-seq-title { font-size: 17px; font-weight: 500; color: var(--ink); }
.b2-seq-topic { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* la secuencia real, de izquierda a derecha; cada fase es un control */
.b2-track {
  position: relative; display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0; margin: 0; padding: 0; list-style: none;
  border-top: 1px solid var(--line-2);
}
.b2-track::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--navy) 0 78%, var(--gold) 78% 100%);
  opacity: .5;
}
.b2-track li { min-width: 0; }
.b2-step {
  display: grid; gap: 6px; width: 100%; height: 100%;
  padding: var(--s5) var(--s5) var(--s5) var(--s4);
  border: 0; border-right: 1px solid var(--line); border-radius: 0;
  background: transparent; font-family: inherit; text-align: left; cursor: pointer;
  transition: background-color .18s ease;
}
.b2-track li:last-child .b2-step { border-right: 0; }
.b2-step .s-t { font-size: 13.5px; line-height: 1.3; color: var(--ink); }
.b2-step .s-d { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.b2-step::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal); margin-bottom: 2px;
}
.b2-step:hover { background: rgba(26, 46, 94, .04); }
.b2-step.is-now .s-t { font-weight: 500; color: var(--navy); }
.b2-step.is-now::before { background: var(--gold); }
.b2-step[aria-current="true"],
.b2-step.is-selected { background: rgba(197, 160, 108, .12); }
.b2-step[aria-current="true"] .s-t,
.b2-step.is-selected .s-t { color: var(--navy); font-weight: 500; }
.b2-step[aria-current="true"]::before,
.b2-step.is-selected::before { background: var(--navy); box-shadow: 0 0 0 3px rgba(26, 46, 94, .12); }
.b2-step.is-dimmed { opacity: .45; }

.b2-step-detail {
  margin-top: var(--s6); padding-top: var(--s5);
  border-top: 1px solid var(--line-2);
  display: grid; gap: 6px; max-width: 78ch;
}
.b2-detail-k {
  margin: 0; font-size: 9.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
.b2-detail-doc { margin: 0; font-size: 16px; line-height: 1.4; color: var(--ink); }
.b2-detail-meta { margin: 0; font-size: 12.5px; color: var(--ink-3); }
.b2-detail-meta a { color: var(--navy); border-bottom: 1px solid var(--line); }
.b2-detail-meta a:hover { border-color: var(--navy); }

/* ================================================ 3 · DOSSIER (ilustracion) == */

.b4-dossier { padding-bottom: var(--s11); }

.b4-art { position: relative; margin: var(--s8) 0 0; }
.b4-art picture { display: block; }
.b4-art img { display: block; width: 100%; height: auto; }

/* La pieza es una seccion del expediente. Encima va una capa minima de web:
   una linea que recorre los estratos y dos fragmentos reales de Atlas. */
.b4-art-layer {
  position: absolute; left: 0; right: 0; top: 46.5%; height: 1px;
  background: var(--navy); opacity: 0;
}
.b4-chip {
  position: absolute; display: grid; gap: 3px; max-width: 17rem;
  padding: 9px 12px; margin: 0;
  border: 1px solid rgba(197, 160, 108, .45); border-left: 2px solid var(--gold);
  border-radius: 2px; background: rgba(255, 255, 255, .94);
}
.b4-chip .c-k {
  font-size: 9.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
.b4-chip .c-v { font-size: 13px; line-height: 1.3; color: var(--ink); }
.b4-chip-phase { left: 2.5%; bottom: 12%; }
.b4-chip-evidence { right: 3%; top: 14%; }

/* ================================================ 4 · ACTORES (mapa real) == */

.b4-actors { padding-bottom: var(--s11); }

/* Encuadre del componente real: caja cuadrada y centrada, como en Atlas. El
   interior del mapa no se toca: sus reglas vienen de atlas.css. */
.b4-map { position: relative; margin-top: var(--s8); }
.b4-map .stakeholder-map {
  position: relative; width: min(880px, 100%); aspect-ratio: 1;
  min-height: 0; margin: 0 auto;
}

/* Unica concesion: el panel de detalle del producto se ancla a la seccion en
   lugar de a la ventana. Su contenido y su logica no cambian. */
.b4-map .stakeholder-detail-v311 {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 40%);
  max-height: none; border-radius: 8px;
}

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

/* ================================================================= MOTION == */

.motion .b4-art.is-in img { animation: b4-art-in 1.1s ease-out both; }
.motion .b4-art.is-in .b4-art-layer { animation: b4-art-rule .9s ease-out .35s both; }
.motion .b4-art.is-in .b4-chip { animation: b4-chip-in .6s ease-out both; }
.motion .b4-art.is-in .b4-chip-phase { animation-delay: .8s; }
.motion .b4-art.is-in .b4-chip-evidence { animation-delay: 1.15s; }

@keyframes b4-art-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes b4-art-rule { from { opacity: 0; transform: scaleX(.72); transform-origin: left center; } to { opacity: .35; transform: none; } }
@keyframes b4-chip-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .motion .b4-art img, .motion .b4-art-layer, .motion .b4-chip { animation: none !important; }
}

/* ============================================================ RESPONSIVE == */

@media (max-width: 1080px) {
  .b4-map .stakeholder-map { width: min(780px, 100%); }
}

@media (max-width: 900px) {
  .ab-hero { padding-top: var(--s9); padding-bottom: var(--s8); }
  .ab-hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s8); }
  .ab-hero-copy, .ab-hero-piece { grid-column: 1 / -1; }
  .ab-hero-copy h1, .ab-hero-copy .lede { max-width: none; }
  .ab-areas-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px var(--s4); }
  .ab-areas-list li + li::before { display: none; }

  /* el procedimiento pasa a recorrido vertical, como en B3 */
  .b2-track { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .b2-track::before { display: none; }
  .b2-step {
    position: relative;
    grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
    padding: 13px 0 13px var(--s5);
    border-right: 0; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line);
  }
  .b2-track li:last-child .b2-step { border-bottom: 0; }
  .b2-step::before { left: -4px; top: 19px; margin-bottom: 0; }
  .b2-step .s-t { grid-column: 1; }
  .b2-step .s-d { grid-column: 2; text-align: right; }
  .b2-step.is-selected, .b2-step[aria-current="true"] { border-left: 2px solid var(--navy); }

  /* la ilustracion usa su propio recorte, no la panoramica encogida */
  .b4-art { margin-top: var(--s7); }
  .b4-chip { max-width: 13rem; padding: 7px 9px; }
  .b4-chip .c-v { font-size: 12px; }
  .b4-chip-phase { left: 3%; bottom: 8%; }
  .b4-chip-evidence { right: 3%; top: 8%; }

  /* el mapa se conserva real y navegable: se desplaza en su propio carril */
  .b4-map { margin-top: var(--s7); }
  .b4-map .stakeholder-map { width: 660px; margin: 0 0 0 0; }
  .b4-map::after {
    content: ""; display: block; height: 1px; margin-top: var(--s4);
    background: var(--line-2);
  }
  .b4-map { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding-bottom: var(--s5); }
  /* en pantallas pequeñas el producto usa una hoja inferior anclada a la
     ventana: se conserva tal cual, porque dentro del carril desplazable un
     panel absoluto quedaría fuera de sitio */
  .b4-map .stakeholder-detail-v311 { position: fixed; }
}

@media (max-width: 640px) {
  .b4-chip-phase { max-width: 11rem; }
  .b4-map .stakeholder-map { width: 600px; }
}