/* ============================================================
   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, encabezados y destacados
     (display). Se auto-aloja (ver design/FUENTE_goldenbook.md); Fraunces queda de
     respaldo por si los archivos aún no están. El @font-face vive en base.html.
     El cuerpo va en Montserrat (Google Fonts, pesos 400-700), muy legible en
     pantalla; Work Sans y las fuentes del sistema quedan detrás como respaldo. */
  --wp-display:'Goldenbook','Fraunces',Georgia,'Times New Roman',serif;
  --wp-sans:'Montserrat','Work Sans',system-ui,-apple-system,'Segoe UI',Roboto,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;
  /* Movimiento (papelería fina: suave, corto, sin rebote). Solo transform y opacity. */
  --wp-ease:cubic-bezier(.22,.7,.25,1);   /* ease-out fino */
  --wp-t-fast:150ms;                       /* hover, foco, elegir */
  --wp-t-base:220ms;                       /* aparecer, salir */
  --wp-t-slow:320ms;                       /* revelado de un bloque */
  --wp-rise:10px;                          /* cuánto se desplaza al aparecer */
  --wp-stagger:45ms;                       /* escalonado entre hermanos */
  --wp-container:1040px;
  /* Tamaño de letra de los campos. En móvil sube a 16px: con menos, iOS hace zoom
     al enfocar y la página queda con scroll horizontal. Toda regla de input/select/
     textarea usa estos tokens, nunca un px suelto (lo vigila tests/test_ui_guards). */
  --wp-fs-input:14px; --wp-fs-input-sm:13.5px;
}
@media (max-width:768px){ :root{ --wp-fs-input:16px; --wp-fs-input-sm:16px; } }

/* ---- 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;
  overflow-x:hidden; overflow-x:clip; }
/* Campos nativos de fecha/hora: en iOS traen un ancho intrínseco que se sale del
   contenedor; se les quita la apariencia nativa y se les impide crecer. */
input[type="date"],input[type="time"],input[type="datetime-local"],input[type="month"]{
  -webkit-appearance:none; appearance:none; min-width:0; max-width:100%; display:block; min-height:2.6em; }
input::-webkit-date-and-time-value{ text-align:left; min-height:1.3em; }
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; flex-wrap:wrap; justify-content:center; }
.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); }
}

/* ---- Marca (monograma + nombre) donde antes decía «whitepaperst» ----
   Mismo bloque que la barra superior, en un parcial (_brand.html). El monograma
   es PNG de 800 px: nítido en retina a 32 px. */
.wp-brand{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--wp-ink); }
.wp-brand--center{ justify-content:center; }
.wp-brand .wp-brand-mark{ width:var(--mark, 32px); height:var(--mark, 32px); display:block; }
.wp-brand-name{ display:flex; flex-direction:column; line-height:1; text-align:left; }
.wp-brand-name b{ font-family:var(--wp-display); font-weight:400; font-size:1.05rem; letter-spacing:.3px; color:var(--wp-ink); }
.wp-brand-name small{ font-family:var(--wp-sans); font-size:.55rem; letter-spacing:.26em; text-transform:uppercase; color:var(--wp-ink-mute); margin-top:3px; }
/* Protagonista en las páginas del público: claro y primero en la jerarquía
   (logo → título → texto) pero comedido: unos 100 px, para que en una pantalla
   corta el contenido se vea sin tener que hacer scroll. */
.wp-brand--hero{ flex-direction:column; gap:8px; }
.wp-brand--hero .wp-brand-mark{ width:clamp(84px, 24vw, 104px); height:auto; }
.wp-brand--hero .wp-brand-name{ align-items:center; text-align:center; }
.wp-brand--hero .wp-brand-name b{ font-size:1.1rem; letter-spacing:.35px; }
.wp-brand--hero .wp-brand-name small{ font-size:.58rem; margin-top:3px; }

/* Pie legal de las páginas públicas: razón social y RIF, discreto. */
.wp-legal{ text-align:center; font-size:11px; letter-spacing:.02em; color:var(--wp-ink-mute); opacity:.5; margin:0; padding:12px 16px 24px; }

/* ---- Foto de perfil (o iniciales) ----
   Tamaño por --av; el texto de las iniciales escala con él. */
.wp-avatar{ width:var(--av,28px); height:var(--av,28px); border-radius:50%; flex:none; object-fit:cover; vertical-align:middle;
  display:inline-flex; align-items:center; justify-content:center; background:var(--wp-brand-light); color:var(--wp-accent);
  font-family:var(--wp-sans); font-weight:600; font-size:calc(var(--av,28px) * .4); letter-spacing:.02em; border:1px solid var(--wp-line-soft); }
.wp-account-link{ display:inline-flex; align-items:center; gap:8px; }
/* Menú en una sola línea también con 10 secciones (Mafer) en pantallas de 1280–1440 px:
   enlaces más compactos y, en la barra, solo la foto (el nombre ya va en el encabezado). */
@media (min-width:769px) and (max-width:1500px){
  .wp-topnav{ gap:2px; flex-wrap:nowrap; }
  .wp-navlink{ padding:8px 9px; gap:6px; font-size:.86rem; white-space:nowrap; }
  .wp-navlink i{ font-size:17px; }
  .wp-account{ gap:10px; }
  .wp-account-name{ display:none; }
}
@media (min-width:769px) and (max-width:1180px){
  .wp-navlink i{ display:none; }   /* en pantallas chicas de PC, solo el texto */
}

/* ---- Menú del equipo en el móvil (botón «Menú» + cajón) ----
   En PC no existe: el menú va en la barra de arriba. En el teléfono la barra
   esconde el menú, así que el botón abre un cajón con las mismas entradas. */
.wp-menu{ display:none; }
@media (max-width:768px){
  body.wp-has-menu .wp-topbar{ justify-content:space-between; }
  body.wp-has-menu .wp-menu{ display:block; }
  .wp-menu > summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px; padding:8px 12px;
    border:1px solid var(--wp-line); border-radius:var(--wp-r); font-size:.9rem; font-weight:500; color:var(--wp-ink); background:var(--wp-surface); }
  .wp-menu > summary::-webkit-details-marker{ display:none; }
  .wp-menu > summary i{ font-size:20px; }
  .wp-menu[open] > summary::before{ content:""; position:fixed; inset:0; background:rgba(42,47,58,.38); z-index:55; }
  .wp-drawer{ position:fixed; top:0; right:0; bottom:0; width:min(320px, 86vw); z-index:60; background:var(--wp-surface);
    box-shadow:var(--wp-shadow); padding:16px 12px calc(16px + env(safe-area-inset-bottom)); overflow:auto; display:flex; flex-direction:column; gap:4px; }
  .wp-drawer .wp-navlink{ display:flex; width:100%; font-size:1rem; padding:13px 12px; }   /* 48px: cómodo a dedo */
  .wp-drawer .wp-navlink i{ font-size:20px; }
  .wp-drawer-head{ display:flex; gap:10px; align-items:center; padding:2px 6px 14px; border-bottom:1px solid var(--wp-line-soft); margin-bottom:8px; }
  .wp-drawer-head > div{ flex:1; min-width:0; }
  .wp-drawer-head b{ display:block; font-size:.95rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .wp-drawer-head span{ font-size:.8rem; color:var(--wp-ink-mute); }
  .wp-drawer-close{ width:40px; height:40px; border-radius:50%; border:1px solid var(--wp-line-soft); background:var(--wp-surface); color:var(--wp-ink-soft); font-size:20px; cursor:pointer; flex:none; }
  .wp-drawer form{ margin-top:auto; padding-top:8px; border-top:1px solid var(--wp-line-soft); }
  .wp-drawer .wp-drawer-out{ background:none; border:none; cursor:pointer; font:inherit; font-size:1rem; color:var(--wp-no-fg); text-align:left; }
}

/* ---- 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; font-size:var(--wp-fs-input); 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; } }

/* ---- Movimiento: clases reutilizables ----
   .wp-enter      aparece (fundido + leve subida). --wp-dir:-1 invierte el sentido.
   .wp-leave      sale (fundido + leve subida), para quitar algo con gracia.
   .wp-stagger    sus hijos aparecen escalonados (hasta 12; el resto, a la vez).
   .wp-pop        aparece desde un poco más pequeño (sello, código, icono de cierre).
   .wp-lift       micro-interacción: se eleva 1px al pasar y se asienta al pulsar.
   Todo se apaga con prefers-reduced-motion (abajo). */
@keyframes wp-enter{ from{ opacity:0; transform:translateY(calc(var(--wp-rise) * var(--wp-dir,1))); } to{ opacity:1; transform:none; } }
@keyframes wp-leave{ from{ opacity:1; transform:none; } to{ opacity:0; transform:translateY(calc(-6px * var(--wp-dir,1))); } }
@keyframes wp-pop{ from{ opacity:0; transform:scale(.92); } to{ opacity:1; transform:none; } }
.wp-enter{ animation:wp-enter var(--wp-t-slow) var(--wp-ease) both; }
.wp-leave{ animation:wp-leave var(--wp-t-fast) var(--wp-ease) both; }
.wp-pop{ animation:wp-pop var(--wp-t-slow) var(--wp-ease) both; }
.wp-stagger > *{ animation:wp-enter var(--wp-t-slow) var(--wp-ease) both; animation-delay:calc(var(--i, 11) * var(--wp-stagger)); }
.wp-stagger > :nth-child(1){ --i:0; } .wp-stagger > :nth-child(2){ --i:1; } .wp-stagger > :nth-child(3){ --i:2; }
.wp-stagger > :nth-child(4){ --i:3; } .wp-stagger > :nth-child(5){ --i:4; } .wp-stagger > :nth-child(6){ --i:5; }
.wp-stagger > :nth-child(7){ --i:6; } .wp-stagger > :nth-child(8){ --i:7; } .wp-stagger > :nth-child(9){ --i:8; }
.wp-stagger > :nth-child(10){ --i:9; } .wp-stagger > :nth-child(11){ --i:10; } .wp-stagger > :nth-child(12){ --i:11; }
.wp-lift{ transition:transform var(--wp-t-fast) var(--wp-ease), box-shadow var(--wp-t-fast) var(--wp-ease),
  border-color var(--wp-t-fast) var(--wp-ease), background-color var(--wp-t-fast) var(--wp-ease), color var(--wp-t-fast) var(--wp-ease); }
.wp-lift:hover{ transform:translateY(-1px); }
.wp-lift:active{ transform:translateY(0) scale(.985); }

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

/* ---- Ayuda para quien se pierde ----
   Tres piezas, sin JavaScript obligatorio:
   .wp-hint  texto corto bajo un campo.
   .wp-tip   un «?» que se abre al tocar (<details>): funciona en el móvil, con
             teclado y con lector de pantalla; los tooltips de hover no.
   .wp-next  tarjeta «Siguiente paso»: una frase + un botón, calculada en el servidor.
   .wp-steps lista de pasos hecho / ahora / pendiente. */
.wp-hint{ font-size:12px; color:var(--wp-ink-mute); margin-top:5px; line-height:1.45; }
.wp-tip{ display:inline-block; position:relative; vertical-align:middle; margin-left:4px; }
.wp-tip > summary{ list-style:none; cursor:pointer; width:18px; height:18px; border-radius:50%; border:1px solid var(--wp-line);
  background:var(--wp-surface); color:var(--wp-ink-soft); font-size:11.5px; font-weight:600; line-height:16px; text-align:center;
  display:inline-block; font-family:var(--wp-sans); text-transform:none; letter-spacing:0; }
.wp-tip > summary::-webkit-details-marker{ display:none; }
.wp-tip[open] > summary{ border-color:var(--wp-accent); color:var(--wp-accent); }
.wp-tip > div{ position:absolute; z-index:30; left:0; top:24px; width:min(280px, 80vw); padding:10px 12px; background:var(--wp-ink);
  color:var(--wp-brand-light); font-size:12.5px; font-weight:400; line-height:1.5; border-radius:var(--wp-r); box-shadow:var(--wp-shadow);
  text-transform:none; letter-spacing:0; text-align:left; white-space:normal; }
.wp-tip.right > div{ left:auto; right:0; }
.wp-next{ display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:var(--wp-r); background:var(--wp-brand-light);
  color:var(--wp-ink); font-size:13.5px; line-height:1.5; margin-bottom:14px; flex-wrap:wrap; }
.wp-next > i{ font-size:20px; color:var(--wp-accent); flex:none; margin-top:1px; }
.wp-next > div{ flex:1; min-width:200px; }
.wp-next b{ display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--wp-accent); margin-bottom:2px; }
.wp-next strong{ font-weight:600; color:inherit; }
.wp-next .wp-next-act{ flex:none; align-self:center; }
.wp-next.pend{ background:var(--wp-pend-bg); } .wp-next.pend > i,.wp-next.pend b{ color:var(--wp-pend-fg); }
.wp-next.ok{ background:var(--wp-yes-bg); } .wp-next.ok > i,.wp-next.ok b{ color:var(--wp-yes-fg); }
.wp-steps{ display:flex; flex-wrap:wrap; gap:6px 14px; margin:0 0 12px; padding:0; list-style:none; font-size:12.5px; }
.wp-steps li{ display:flex; align-items:center; gap:5px; color:var(--wp-ink-mute); }
.wp-steps li.done{ color:var(--wp-yes-fg); } .wp-steps li.now{ color:var(--wp-accent); font-weight:600; }
.wp-steps li i{ font-size:15px; }
/* «Volver»: siempre arriba a la izquierda de una sub-página, al lugar lógico
   (la lista o el panel del que se viene), no al historial del navegador. */
.wp-back{ display:inline-flex; align-items:center; gap:6px; margin:0 0 12px -6px; padding:6px 10px 6px 6px; border-radius:var(--wp-r);
  font-size:13px; font-weight:500; color:var(--wp-ink-soft); text-decoration:none; }
.wp-back:hover{ background:var(--wp-surface); color:var(--wp-accent); }
.wp-back i{ font-size:16px; }

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

/* ============================================================
   Ayuda: botón «?» flotante y visita guiada (static/js/ayuda.js)
   ============================================================ */
.wp-ayuda{ position:fixed; right:18px; bottom:18px; z-index:60; display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
body:has(.app-nav) .wp-ayuda{ bottom:86px; }
.wp-ayuda-btn{ width:48px; height:48px; border-radius:50%; border:none; background:#2C3A52; color:#fff; font-size:24px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 10px 26px rgba(42,47,58,.28);
  transition:transform .15s, background .15s; }
.wp-ayuda-btn:hover{ background:#3A4A66; transform:translateY(-2px); }
.wp-ayuda-btn:focus-visible{ outline:3px solid #C9D1DE; outline-offset:2px; }
.wp-ayuda-menu{ background:var(--wp-surface); border-radius:18px; padding:8px; box-shadow:0 16px 40px rgba(42,47,58,.18); min-width:230px; display:flex; flex-direction:column; }
.wp-ayuda-menu[hidden]{ display:none; }
.wp-ayuda-menu > a, .wp-ayuda-menu > button{ display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:12px; font:500 14px var(--wp-sans);
  color:var(--wp-ink); text-decoration:none; background:none; border:none; cursor:pointer; text-align:left; }
.wp-ayuda-menu > a:hover, .wp-ayuda-menu > button:hover{ background:#E7EBF1; }
.wp-ayuda-menu i{ font-size:18px; color:var(--wp-accent); }
.wp-ayuda-menu > [hidden]{ display:none; }

.vg-capa{ position:fixed; inset:0; z-index:200; background:transparent; }
.vg-capa.vg-oscura{ background:rgba(20,26,38,.55); }
.vg-foco{ position:fixed; z-index:201; border-radius:18px; pointer-events:none; box-shadow:0 0 0 9999px rgba(20,26,38,.55), 0 0 0 3px #fff;
  transition:left .3s cubic-bezier(.22,.7,.25,1), top .3s cubic-bezier(.22,.7,.25,1), width .3s, height .3s; }
.vg-caja{ position:fixed; z-index:202; width:min(410px, calc(100vw - 32px)); background:var(--wp-surface); border-radius:22px; padding:20px;
  box-shadow:0 20px 50px rgba(20,26,38,.3); animation:vg-in .3s cubic-bezier(.22,.7,.25,1) both; }
.vg-caja.vg-hoja{ left:12px !important; right:12px; bottom:12px; top:auto !important; width:auto; }
@keyframes vg-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.vg-n{ font-size:11.5px; font-weight:600; letter-spacing:.08em; color:var(--wp-ink-soft); text-transform:uppercase; }
.vg-caja h2{ margin:6px 0 6px; font-family:var(--wp-display); font-weight:400; font-size:24px; line-height:1.15; color:var(--wp-ink); }
.vg-caja p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--wp-ink-soft); }
.vg-b{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:16px; flex-wrap:wrap; }
.vg-b span{ display:flex; gap:8px; }
.vg-b button{ font:600 14px var(--wp-sans); border-radius:999px; min-height:42px; padding:0 18px; cursor:pointer; }
.vg-next{ background:#2C3A52; color:#fff; border:none; }
.vg-prev{ background:var(--wp-surface); color:#2C3A52; border:1px solid var(--wp-line); }
.vg-saltar{ background:none; border:none; color:var(--wp-ink-soft); padding:0 4px !important; font-weight:500 !important; }
@media (prefers-reduced-motion:reduce){ .vg-foco, .vg-caja, .wp-ayuda-btn{ transition:none !important; animation:none !important; } }
@media print{ .wp-ayuda{ display:none; } }

/* En el portal del cliente, el «?» va en la barra de arriba (ayuda.js lo mueve ahí). */
.wp-ayuda.wp-ayuda--arriba{ position:relative; right:auto; bottom:auto !important; z-index:60; flex-direction:column-reverse; margin-left:auto; margin-right:8px; }
.wp-ayuda--arriba .wp-ayuda-btn{ width:34px; height:34px; font-size:19px; background:var(--wp-surface); color:#2C3A52; border:1px solid var(--wp-line); box-shadow:none; }
.wp-ayuda--arriba .wp-ayuda-btn:hover{ background:#E7EBF1; transform:none; }
.wp-ayuda--arriba .wp-ayuda-menu{ position:absolute; top:44px; right:-42px; }

/* «Instalar la app» en el iPhone: los 3 pasos (static/js/app.js) */
.app-ios{ position:fixed; inset:0; z-index:210; background:rgba(20,26,38,.55); display:flex; align-items:flex-end; justify-content:center; padding:12px; }
.app-ios-caja{ background:var(--wp-surface); border-radius:22px; padding:22px; width:min(420px, 100%); box-shadow:0 20px 50px rgba(20,26,38,.3); animation:vg-in .3s cubic-bezier(.22,.7,.25,1) both; }
.app-ios-caja h2{ margin:0 0 12px; font-family:var(--wp-display); font-weight:400; font-size:24px; color:var(--wp-ink); }
.app-ios-caja ol{ margin:0 0 12px; padding-left:22px; font-size:15px; line-height:1.7; color:var(--wp-ink-soft); }
.app-ios-caja b{ color:var(--wp-ink); }
.app-ios-ic{ display:inline-flex; vertical-align:middle; color:#0A84FF; }
.app-ios-nota{ font-size:13px; line-height:1.5; color:var(--wp-ink-soft); margin:0 0 16px; }
.app-ios-ok{ width:100%; min-height:48px; border:none; border-radius:999px; background:#2C3A52; color:#fff; font:600 15px var(--wp-sans); cursor:pointer; }
@media (prefers-reduced-motion:reduce){ .app-ios-caja{ animation:none; } }

/* Un correo largo (sin espacios) se corta en varias líneas en vez de salirse de la pantalla
   en el teléfono. Vale para todo el portal (equipo y cliente): enlaces mailto y textos .correo. */
a[href^="mailto:"], .correo{ overflow-wrap:anywhere; }