/* ============================================================
   White Paper Stationery — base visual del portal
   Única hoja base: tokens aprobados + armazón + componentes.
   Portada de wp-base.css (whitepaperst) sin la capa vieja
   (Goldenbook/Inter) ni sus puentes. Sin url() (WhiteNoise-safe).
   ============================================================ */

/* ---- Tokens ---- */
: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;
  /* Goldenbook es la fuente de la marca, en títulos y en cuerpo. Se auto-aloja
     (ver design/FUENTE_goldenbook.md); Fraunces y Work Sans quedan de respaldo
     por si los archivos aún no están. El @font-face vive en base.html. */
  --wp-display:'Goldenbook','Fraunces',Georgia,'Times New Roman',serif;
  --wp-sans:'Goldenbook','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;
  --wp-container:1040px;
}

/* ---- Reset / armazón ---- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; min-height:100vh; display:flex; flex-direction:column;
  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,h4{ font-family:var(--wp-display); font-weight:400; color:var(--wp-ink); letter-spacing:.2px; line-height:1.2; margin:0 0 .5em; }
h1{ font-weight:300; }
p{ margin:0 0 1em; }
a{ color:var(--wp-accent); } a:hover{ color:var(--wp-accent-deep); }
img{ max-width:100%; }
:focus-visible{ outline:2px solid var(--wp-accent); outline-offset:2px; border-radius:2px; }
.wp-main{ flex:1; width:100%; max-width:var(--wp-container); margin:0 auto; padding:var(--wp-sp-5) var(--wp-sp-4) var(--wp-sp-7); }
.muted{ color:var(--wp-ink-mute); }

/* ---- Barra superior ---- */
.wp-topbar{ background:var(--wp-surface); color:var(--wp-ink); border-bottom:1px solid var(--wp-line);
  display:flex; align-items:center; justify-content:space-between; gap:var(--wp-sp-4); padding:10px 20px; }
.wp-topbar a{ color:var(--wp-ink); text-decoration:none; }
.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-topnav{ display:flex; align-items:center; gap:6px; }
.wp-navlink{ display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border-radius:var(--wp-r);
  font-size:.9rem; color:var(--wp-ink-soft); transition:background var(--wp-t),color var(--wp-t); }
.wp-navlink i{ font-size:18px; }
.wp-navlink.active,.wp-navlink:hover{ color:var(--wp-accent); background:var(--wp-surface-2); }
.wp-account{ display:flex; align-items:center; gap:14px; font-size:.85rem; color:var(--wp-ink-mute); }
.wp-account form{ margin:0; }
.wp-logout-btn{ background:transparent; color:var(--wp-ink-soft); border:1px solid var(--wp-line);
  padding:6px 14px; border-radius:var(--wp-r); font:inherit; font-size:.85rem; cursor:pointer; }
.wp-logout-btn:hover{ background:var(--wp-surface-2); }

/* ---- Pie ---- */
.wp-footer{ border-top:1px solid var(--wp-line); padding:22px 16px 28px; text-align:center; }
.wp-footer-copy{ color:var(--wp-ink-mute); font-size:.78rem; margin:0; }

/* ---- Barra inferior (móvil) ---- */
.wp-bottombar{ display:none; }
@media (max-width:768px){
  .wp-topnav,.wp-account{ display:none; }
  .wp-topbar{ justify-content:center; padding:10px 16px; }
  body.has-bottombar{ padding-bottom:74px; }
  .wp-bottombar{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50;
    background:var(--wp-surface); border-top:1px solid var(--wp-line); justify-content:space-around; padding:6px 0 8px; }
  .wp-tab{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--wp-ink-mute);
    text-decoration:none; font-size:.68rem; padding:2px 0; background:none; border:none; cursor:pointer; font-family:inherit; }
  .wp-tab i{ font-size:24px; }
  .wp-tab.active{ color:var(--wp-accent); }
}

/* ---- Mensajes (django.contrib.messages) ---- */
.wp-messages{ list-style:none; margin:0 0 var(--wp-sp-4); padding:0; display:grid; gap:var(--wp-sp-2); }
.wp-msg{ display:flex; align-items:flex-start; gap:8px; padding:11px 13px; border-radius:var(--wp-r); font-size:.88rem;
  background:var(--wp-surface-2); border:1px solid var(--wp-line-soft); color:var(--wp-ink-soft); }
.wp-msg i{ font-size:17px; flex-shrink:0; margin-top:1px; }
.wp-msg--success{ background:var(--wp-yes-bg); border-color:#cdddc8; color:var(--wp-yes-fg); }
.wp-msg--warning{ background:var(--wp-pend-bg); border-color:#e0d6b8; color:var(--wp-pend-fg); }
.wp-msg--error{ background:var(--wp-no-bg); border-color:#e3c9c9; color:var(--wp-no-fg); }

/* ---- Botones ---- */
.wp-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--wp-sans);
  font-size:.95rem; font-weight:500; padding:11px 18px; border-radius:var(--wp-r-btn); cursor:pointer; text-decoration:none;
  border:1px solid var(--wp-accent); background:var(--wp-accent); color:#fff;
  transition:transform var(--wp-t),box-shadow var(--wp-t),background var(--wp-t),border-color var(--wp-t); }
.wp-btn:hover{ background:var(--wp-accent-deep); color:#fff; transform:translateY(-1px); box-shadow:var(--wp-shadow-sm); }
.wp-btn--ghost{ background:transparent; color:var(--wp-ink); border-color:var(--wp-line); }
.wp-btn--ghost:hover{ background:var(--wp-surface-2); color:var(--wp-ink); border-color:var(--wp-brand); box-shadow:none; transform:none; }
.wp-btn--block{ display:flex; width:100%; }

/* ---- 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); }
.wp-field input[type="checkbox"],.wp-field input[type="radio"]{ width:auto; }

/* ---- 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); }
.wp-pill--neutral{ background:var(--wp-surface-2); color:var(--wp-ink-soft); }

/* ---- 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 ---- */
.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; }
}