/* ============================================================
   White Paper Stationery — sistema de diseño base (Diseño · paso 1)
   Capa NUEVA cargada DESPUÉS de brand.css: define los tokens
   aprobados y reapunta los heredados para que toda la app adopte
   la nueva paleta/tipografía sin tocar el markup. Sin url() (WhiteNoise-safe).
   ============================================================ */
:root{
  --wp-brand-light:#D5DBE2;  --wp-brand:#B7BDCA;
  --wp-paper:#DDE2E8;  --wp-surface:#FFFFFF;  --wp-surface-2:#E7EBF1;
  --wp-ink:#2A2F3A;  --wp-ink-soft:#565E6C;  --wp-ink-mute:#8C93A2;
  --wp-accent:#3A4A66;  --wp-accent-deep:#2C3A52;
  --wp-line:#B7BDCA;  --wp-line-soft:#C9CFD9;
  --wp-yes-bg:#E2EBE3;  --wp-yes-fg:#3E6B43;
  --wp-pend-bg:#EDE8DA; --wp-pend-fg:#7E6B33;
  --wp-no-bg:#ECE0E0;   --wp-no-fg:#8A4A52;
  --wp-display:'Fraunces',Georgia,'Times New Roman',serif;
  --wp-sans:'Work Sans',system-ui,-apple-system,sans-serif;
  --wp-r:8px; --wp-r-btn:5px; --wp-r-lg:12px;
  --wp-sp-1:4px; --wp-sp-2:8px; --wp-sp-3:12px; --wp-sp-4:16px;
  --wp-sp-5:24px; --wp-sp-6:32px; --wp-sp-7:48px; --wp-sp-8:64px;
  --wp-shadow:0 10px 26px rgba(42,47,58,.12);
  --wp-shadow-sm:0 6px 16px rgba(44,58,82,.18);
  --wp-t:.16s ease;
  /* Puentes con tokens heredados (brand.css) — adopción global sin romper */
  --wp-serif:var(--wp-display);
  --wp-text:var(--wp-ink-soft);  --wp-muted:var(--wp-ink-mute);
  --wp-border:var(--wp-line-soft);  --wp-border-strong:var(--wp-line);
  --wp-blue-light:var(--wp-brand-light);  --wp-blue-dark:var(--wp-brand);
  --wp-nav-inactive:var(--wp-ink-mute);
  --wp-radius:var(--wp-r-lg);  --wp-radius-sm:var(--wp-r);
}
/* ---- Armazón ---- */
body{ background:var(--wp-paper); color:var(--wp-ink); font-family:var(--wp-sans);
  line-height:1.65; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
h1,h2,h3{ font-family:var(--wp-display); font-weight:400; color:var(--wp-ink); letter-spacing:.2px; line-height:1.2; }
h1{ font-weight:300; }
a{ color:var(--wp-accent); } a:hover{ color:var(--wp-accent-deep); }
:focus-visible{ outline:2px solid var(--wp-accent); outline-offset:2px; border-radius:2px; }
/* ---- Header / nav (identidad nueva) ---- */
.wp-topbar{ background:var(--wp-surface); color:var(--wp-ink); border-bottom:1px solid var(--wp-line); }
.wp-topbar a{ color:var(--wp-ink); }
.wp-wordmark{ display:flex; flex-direction:row; align-items:center; gap:10px; text-decoration:none; }
.wp-wordmark .wp-mono{ height:38px; width:auto; display:block; }
.wp-wordmark .wm-text{ display:flex; flex-direction:column; line-height:1; }
.wp-wordmark .wm-name{ font-family:var(--wp-display); font-size:1.3rem; letter-spacing:.4px; color:var(--wp-ink); }
.wp-wordmark .wm-tag{ font-family:var(--wp-sans); font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; color:var(--wp-ink-mute); margin-top:3px; }
.wp-navlink{ color:var(--wp-ink-soft); }
.wp-navlink.active,.wp-navlink:hover{ color:var(--wp-accent); background:var(--wp-surface-2); }
.wp-account{ color:var(--wp-ink-mute); }
.wp-logout-btn{ color:var(--wp-ink-soft); border-color:var(--wp-line); }
.wp-logout-btn:hover{ background:var(--wp-surface-2); }
.wp-footer{ border-top:1px solid var(--wp-line); }
/* ---- Botones nuevos (modificadores; no tocan .wp-btn existente) ---- */
.wp-btn--primary{ background:var(--wp-accent); color:#fff; border:1px solid var(--wp-accent);
  border-radius:var(--wp-r-btn); padding:11px 18px;
  transition:transform var(--wp-t),box-shadow var(--wp-t),background var(--wp-t); }
.wp-btn--primary:hover{ background:var(--wp-accent-deep); transform:translateY(-1px); box-shadow:var(--wp-shadow-sm); }
.wp-btn--ghost{ background:transparent; color:var(--wp-ink); border:1px solid var(--wp-line);
  border-radius:var(--wp-r-btn); padding:11px 18px; transition:background var(--wp-t),border-color var(--wp-t); }
.wp-btn--ghost:hover{ background:var(--wp-surface-2); border-color:var(--wp-brand); }
/* ---- Tarjeta / panel ---- */
.wp-card{ background:var(--wp-surface); border:1px solid var(--wp-line); border-radius:var(--wp-r-lg);
  padding:var(--wp-sp-5); transition:transform var(--wp-t),box-shadow var(--wp-t); }
.wp-card:hover{ transform:translateY(-2px); box-shadow:var(--wp-shadow); }
.wp-panel{ background:var(--wp-surface); border:1px solid var(--wp-line); border-radius:var(--wp-r-lg); padding:var(--wp-sp-5); }
/* ---- Campos ---- */
.wp-field{ margin:var(--wp-sp-3) 0; }
.wp-field label{ display:block; font-weight:500; font-size:.88rem; color:var(--wp-ink-soft); margin-bottom:6px; }
.wp-field input,.wp-field select,.wp-field textarea{ width:100%; font:inherit; color:var(--wp-ink);
  background:var(--wp-surface); border:1px solid var(--wp-line); border-radius:var(--wp-r); padding:10px 12px;
  transition:border-color var(--wp-t),box-shadow var(--wp-t); }
.wp-field input:focus,.wp-field select:focus,.wp-field textarea:focus{ outline:none; border-color:var(--wp-accent);
  box-shadow:0 0 0 3px rgba(58,74,102,.18); }
/* ---- Píldoras de estado ---- */
.wp-pill{ display:inline-block; padding:3px 11px; border-radius:999px; font-size:.78rem; font-weight:500; white-space:nowrap; }
.wp-pill--yes{ background:var(--wp-yes-bg); color:var(--wp-yes-fg); }
.wp-pill--pending{ background:var(--wp-pend-bg); color:var(--wp-pend-fg); }
.wp-pill--no{ background:var(--wp-no-bg); color:var(--wp-no-fg); }
/* ---- Eyebrow / título de sección ---- */
.wp-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:var(--wp-sans); font-size:.7rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--wp-accent); font-weight:500; }
.wp-eyebrow::before{ content:""; width:24px; height:1px; background:var(--wp-accent); }
.wp-title{ font-family:var(--wp-display); font-weight:300; color:var(--wp-ink); font-size:1.8rem; line-height:1.15; margin:.2em 0 .4em; }
/* ---- Marco grabado ---- */
.wp-frame{ position:relative; border:1px solid var(--wp-brand); padding:var(--wp-sp-6); background:var(--wp-surface); }
.wp-frame::before{ content:""; position:absolute; inset:6px; border:1px solid var(--wp-line-soft); pointer-events:none; }
/* ---- Lacre (componente listo; se conecta en pasos posteriores) ---- */
.wp-seal{ width:64px; height:64px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--wp-accent),var(--wp-accent-deep));
  color:var(--wp-brand-light); display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--wp-display); box-shadow:var(--wp-shadow-sm); }
.wp-seal--press{ animation:wp-seal-press .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes wp-seal-press{ 0%{ transform:scale(.4) rotate(-8deg); opacity:0; }
  60%{ transform:scale(1.08) rotate(2deg); opacity:1; } 100%{ transform:scale(1) rotate(0); opacity:1; } }
/* ---- Reveal (opt-in) ---- */
.wp-reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease,transform .6s ease; }
.wp-reveal.is-visible{ opacity:1; transform:none; }
/* ---- Movimiento reducido ---- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .wp-reveal{ opacity:1; transform:none; }
}