/* ═══════════════════════════════════════════════════════════════
   subpage.css — cascarón compartido de las páginas de sub-flujo
   (enviar-imperial, enviar-masisa y toda "página suelta" nueva que
   no sea un módulo completo del workspace).
   ───────────────────────────────────────────────────────────────
   POR QUÉ EXISTE (2026-08-09): las sub-páginas se escribían con
   <style> inline y tokens INVENTADOS (--surface, --txt, --accent…)
   que NO existen → el navegador caía al hex de respaldo genérico
   (#fff, #6b7280…) y la página salía blanca/gris, fuera de la paleta
   acero de Belk. La regla del skill ya lo decía: "una convención sin
   componente compartido se deshace sola". Este ES ese componente.

   CÓMO SE USA (una página nueva de sub-flujo):
     <link rel="stylesheet" href="css/foundation.css">   (tokens --belk-*)
     <link rel="stylesheet" href="css/components.css">   (.belk-btn)
     <link rel="stylesheet" href="css/subpage.css">      (este)
     <body class="belk-subpage"> … usar las clases .subpage-* …

   REGLA DURA: dentro de una sub-página NO se define ni se usa ningún
   token propio (--surface, --txt, --acc…). Todo color sale de un token
   --belk-* (definidos en foundation.css, válidos en ambas zonas) o de
   una de estas clases. Botones = SIEMPRE .belk-btn (components.css).
   Lo único que puede llevar <style> inline es lo IRREPETIBLE de esa
   página (una ilustración, un mockup) — nunca el color base ni la
   tipografía. El guard scripts/check-page-tokens.mjs lo verifica.
   ═══════════════════════════════════════════════════════════════ */

body.belk-subpage{
  background:var(--belk-level-1);
  color:var(--belk-text);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  min-height:100vh;
  margin:0;
}

.subpage{ max-width:760px; margin:0 auto; padding:16px 16px 48px; }

/* Cabecera de la sub-página: logo + título + acción de retorno.
   El retorno va como .belk-btn a la derecha, con label "← <Módulo>". */
.subpage-top{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.subpage-top .subpage-logo{ width:34px; height:34px; border-radius:var(--belk-radius-sm); flex-shrink:0; }
.subpage-top h1{ font-size:1.15rem; margin:0; line-height:1.2; color:var(--belk-text); }
.subpage-top .subpage-sub{ font-size:.8rem; color:var(--belk-text-muted); }

/* Tarjeta = nivel 2 con filo (obligatorio: sin borde las capas se funden). */
.subpage-card{
  background:var(--belk-level-2);
  border:1px solid var(--belk-border);
  border-radius:var(--belk-radius);
  padding:16px;
  margin-bottom:14px;
  box-shadow:var(--belk-shadow-1);
}
.subpage-card h2{ font-size:.95rem; margin:0 0 10px; display:flex; align-items:center; gap:8px; color:var(--belk-text); }

/* Número de paso: círculo de marca. */
.subpage-step{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  background:var(--belk-brand); color:var(--belk-on-brand);
  font-size:.75rem; font-weight:700; flex-shrink:0;
}

.subpage-muted{ color:var(--belk-text-muted); font-size:.85rem; }

.subpage-badge{
  display:inline-block; padding:2px 8px; border-radius:999px;
  background:var(--belk-level-2-hi); border:1px solid var(--belk-border);
  font-size:.72rem; color:var(--belk-text);
}

/* Avisos: usan los tokens de estado de la zona (ya con contraste medido). */
.subpage-alert{ padding:10px 12px; border-radius:var(--belk-radius-sm); font-size:.85rem; border:1px solid var(--belk-border); }
.subpage-alert--ok{ background:var(--belk-ok-soft); color:var(--belk-ok); }
.subpage-alert--warn{ background:var(--belk-warn-soft); color:var(--belk-warn); }
.subpage-alert--err{ background:var(--belk-err-soft); color:var(--belk-err); }

.subpage-hidden{ display:none; }
