/* psy-tests-base.css — PSY Tests System v4.0.0
   Tokens de diseño centralizados para el sistema de tests psicológicos.
   Cargado por psy-shortcode.php antes de cualquier CSS de test individual. */

/* ══════════════════════════════════════════════════════════
   TOKENS GLOBALES — :root
   Disponibles en todo el documento. Los tests los consumen
   a través de sus variables locales (.psytest-wrap).
   ══════════════════════════════════════════════════════════ */

:root {
  /* ════════════════════════════════════════════════════════════════════
     CAPA NEUTRA — fundación / fuente de verdad (architecture/design-tokens/tokens.json).
     DUPLICADA por archivo (excepción sancionada · no se comparte entre plugins).
     psy-tests NO recibe la paleta spot (exclusiva del portal). Ver FASE0_TOKEN_MAPPING.md.
     ════════════════════════════════════════════════════════════════════ */
  --green-50:#f0f4f0; --green-100:#e8efe8; --green-200:#dde5dd; --green-300:#b8c9b8;
  --green-500:#3a5e3a; --green-700:#2d4a2d; --green-800:#243d24; --green-900:#1e2e1e;
  --brand:var(--green-700); --brand-hover:var(--green-800); --brand-soft:var(--green-500);
  --sage:#7a9e8a; --sage-dark:#4f735f; --sage-light:#a8c5b5;
  --cream:#faf7f2; --bg:#f7faf7;
  --surface:#ffffff; --surface-subtle:#f6f8f4; --surface-muted:#f0f4f0;
  --border:#dde5dd; --border-subtle:#eaf0ea;
  --text:#1e2e1e; --text-muted:#5a6c5a; --text-inverse:#ffffff; --text-disabled:#a8b3a8;
  --ink:#0f172a; --ink-muted:rgba(15,23,42,.72); --ink-faint:rgba(15,23,42,.45);
  --action:#c0604a; --action-hover:#a84f3b;
  --success:#2d6a4f; --success-bg:#e8f3ee;
  --warning:#b76105; --warning-bg:#fef3e2;
  --danger:#b0271a; --danger-hover:#8f1f15; --danger-bg:#fbeae8;
  --info:#2d4a6a; --info-bg:#e8eef4;
  --sev-0:#a9ddb4; --sev-1:#c3dda4; --sev-2:#cfe4b6; --sev-3:#e6e7ae; --sev-4:#f4c58f; --sev-5:#f2a39b; --sev-6:#e87c73;
  --chart-1:#2d4a2d; --chart-2:#7a9e8a; --chart-3:#c0604a; --chart-4:#4f735f; --chart-grid:#eaf0ea; --chart-axis:#5a6c5a;
  --font-sans:'DM Sans', system-ui, sans-serif; --font-serif:'Playfair Display', Georgia, serif;
  --text-xs:0.78rem; --text-sm:0.88rem; --text-base:0.95rem; --text-lg:1.1rem; --text-xl:1.25rem; --text-2xl:1.5rem; --text-3xl:1.85rem;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;
  --leading-tight:1.25; --leading-base:1.5;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
  --radius-sm:6px; --radius:10px; --radius-lg:14px; --radius-pill:999px; --radius-full:50%;
  --shadow-xs:0 1px 2px rgba(30,46,30,.05); --shadow-sm:0 2px 6px rgba(30,46,30,.08), 0 1px 2px rgba(30,46,30,.05);
  --shadow-md:0 4px 16px rgba(30,46,30,.10), 0 2px 4px rgba(30,46,30,.06); --shadow-lg:0 12px 40px rgba(30,46,30,.14), 0 4px 8px rgba(30,46,30,.07);
  --shadow-card:0 4px 24px rgba(30,46,30,.08), 0 1px 4px rgba(30,46,30,.05);
  --focus-ring:0 0 0 3px rgba(45,74,45,.18);
  --ease:cubic-bezier(.4, 0, .2, 1); --ease-out:cubic-bezier(0, 0, .2, 1);
  --duration-fast:120ms; --duration-base:180ms; --duration-slow:280ms;
  --transition-fast:120ms cubic-bezier(.4, 0, .2, 1); --transition-base:180ms cubic-bezier(.4, 0, .2, 1); --transition-slow:280ms cubic-bezier(0, 0, .2, 1);
  --z-base:1; --z-dropdown:100; --z-sticky:200; --z-modal:1000; --z-toast:1100; --z-tooltip:1200;

  /* ════ ESPEJO --psy-* (alias de la capa neutra · derivas del agente adoptadas) ════ */
  /* Identidad cromática */
  --psy-green:          var(--brand);
  --psy-green-light:    var(--green-100);
  --psy-green-tint:     var(--surface-subtle);
  --psy-action:         var(--action);
  --psy-action-h:       var(--action-hover);

  /* Escala de texto — unificada a VERDE (decisión 2026-06-11; antes slate #0f172a) */
  --psy-ink:            var(--text);
  --psy-ink-muted:      rgba(30,46,30,.78);
  --psy-ink-faint:      rgba(30,46,30,.5);

  /* Superficies */
  --psy-surface:        var(--surface);
  --psy-surface-raised: #fbfbfc;
  --psy-bg:             var(--bg);

  /* Bordes — verde-tinte (agente; antes slate) */
  --psy-border:         rgba(30,46,30,.14);
  --psy-border-strong:  rgba(30,46,30,.26);

  /* Sombras — verde-tinte (agente; antes slate) */
  --psy-shadow:         0 10px 26px rgba(30,46,30,.08);
  --psy-shadow-soft:    0 6px 18px rgba(30,46,30,.10);
  --psy-shadow-card:    var(--shadow-card);

  /* Semánticos */
  --psy-danger:         #b91c1c;
  --psy-ok:             #166534;
  --psy-warning:        #d97706;
  --psy-warning-bg:     #fff8f0;   /* fondo de avisos no críticos (ej. perfil incompleto en gate) */
  --psy-warning-border: #fbd38d;   /* borde de esos avisos */
  --psy-warning-text:   #92400e;   /* texto/título de esos avisos */

  /* Tipografía */
  --psy-font-body:      'DM Sans', system-ui, sans-serif;
  --psy-font-title:     'Playfair Display', Georgia, serif;

  /* Radio y espaciado */
  --psy-radius-sm:      12px;
  --psy-radius-md:      14px;
  --psy-radius-lg:      18px;

  /* Escala Likert — paleta cromática completa de 6 pasos (verde → rojo)
     Cada test elige el subconjunto apropiado según su número de opciones.
     Las clases .l0–.l5 en cada test CSS asignan el token al --dot local. */
  --psy-dot-0:  #a9ddb4;   /* verde suave      — 0/nada/nunca/muy falso */
  --psy-dot-1:  #c3dda4;   /* verde amarillento — paso intermedio bajo   */
  --psy-dot-2:  #cfe4b6;   /* verde pálido      — paso intermedio        */
  --psy-dot-3:  #e6e7ae;   /* amarillo          — algo / a veces         */
  --psy-dot-4:  #f4c58f;   /* naranja           — bastante / frecuente   */
  --psy-dot-5:  #f2a39b;   /* salmón            — mucho / siempre        */
  --psy-dot-6:  #e87c73;   /* rojo coral        — extremo / muy verdadero */

  /* Colores de severidad (bandas de resultados) */
  --psy-sev-mild-bg:    rgba(169,221,180,.30);
  --psy-sev-mild-bg-a:  rgba(169,221,180,.80);
  --psy-sev-mild-text:  #166534;

  --psy-sev-mod-bg:     rgba(230,231,174,.30);
  --psy-sev-mod-bg-a:   rgba(230,231,174,.80);
  --psy-sev-mod-text:   #a16207;

  --psy-sev-modsev-bg:     rgba(244,197,143,.30);
  --psy-sev-modsev-bg-a:   rgba(244,197,143,.80);
  --psy-sev-modsev-text:   #9a3412;

  --psy-sev-severe-bg:  rgba(242,163,155,.30);
  --psy-sev-severe-bg-a:rgba(242,163,155,.80);
  --psy-sev-severe-text:#b91c1c;

  /* Feedback de formulario */
  --psy-ok-border:  rgba(22,101,52,.25);
  --psy-ok-bg:      rgba(22,101,52,.06);
  --psy-err-border: rgba(185,28,28,.25);
  --psy-err-bg:     rgba(185,28,28,.06);
}

/* ══════════════════════════════════════════════════════════
   BASE COMPARTIDA — .psytest-wrap
   Cada test CSS hereda estos estilos y puede sobreescribir
   sus variables locales (--bg, --text, etc.).
   ══════════════════════════════════════════════════════════ */

.psytest-wrap {
  --bg:           var(--psy-surface);
  --panel:        var(--psy-surface-raised);
  --text:         var(--psy-ink);
  --muted:        var(--psy-ink-muted);
  --border:       var(--psy-border);
  --border-strong:var(--psy-border-strong);
  --shadow:       var(--psy-shadow);
  --shadow-soft:  var(--psy-shadow-soft);
  --primary:      #111827;
  --primaryText:  #ffffff;
  --danger:       var(--psy-danger);
  --ok:           var(--psy-ok);

  background:     var(--bg);
  max-width:      900px;
  margin:         0 auto;
  padding:        26px;
  border:         1px solid var(--border);
  border-radius:  var(--psy-radius-lg);
  box-shadow:     var(--shadow);
  font-family:    var(--psy-font-body);
}

.psytest-wrap, .psytest-wrap * { color: var(--text) !important; }

/* ── Tipografía ─────────────────────────────────────────── */

.psytest-title {
  font-size:    22px;
  margin:       0 0 8px 0;
  letter-spacing: -.2px;
  font-family:  var(--psy-font-title);
  font-weight:  600;
}
.psytest-title2 {
  font-family:  var(--psy-font-title);
  font-weight:  700;
}
.psytest-sub   { margin: 0 0 18px 0; color: var(--muted) !important; line-height: 1.55; }
.psytest-small { font-size: 13px; color: var(--muted) !important; line-height: 1.5; }

/* ── Utilidades ─────────────────────────────────────────── */

.psytest-hidden { display: none !important; }

/* ── Escala Likert burbujas — paleta base 0–6 ───────────── */

.psytest-opt.l0 { --dot: var(--psy-dot-0); }
.psytest-opt.l1 { --dot: var(--psy-dot-1); }
.psytest-opt.l2 { --dot: var(--psy-dot-2); }
.psytest-opt.l3 { --dot: var(--psy-dot-3); }
.psytest-opt.l4 { --dot: var(--psy-dot-4); }
.psytest-opt.l5 { --dot: var(--psy-dot-5); }
.psytest-opt.l6 { --dot: var(--psy-dot-6); }

/* ── Severidades ────────────────────────────────────────── */

.psytest-severity-level.mild          { background: var(--psy-sev-mild-bg); }
.psytest-severity-level.moderate      { background: var(--psy-sev-mod-bg); }
.psytest-severity-level.moderate_severe{ background: var(--psy-sev-modsev-bg); }
.psytest-severity-level.severe        { background: var(--psy-sev-severe-bg); }

.psytest-severity-level.active.mild           { background: var(--psy-sev-mild-bg-a);   color: var(--psy-sev-mild-text); }
.psytest-severity-level.active.moderate       { background: var(--psy-sev-mod-bg-a);    color: var(--psy-sev-mod-text); }
.psytest-severity-level.active.moderate_severe{ background: var(--psy-sev-modsev-bg-a); color: var(--psy-sev-modsev-text); }
.psytest-severity-level.active.severe         { background: var(--psy-sev-severe-bg-a); color: var(--psy-sev-severe-text); }

/* ── Mensajes de formulario ─────────────────────────────── */

.psytest-msg { margin-top: 14px; padding: 12px; border-radius: var(--psy-radius-sm); display: none; background: var(--psy-surface); }
.psytest-msg.ok  { border: 1px solid var(--psy-ok-border);  background: var(--psy-ok-bg); }
.psytest-msg.err { border: 1px solid var(--psy-err-border); background: var(--psy-err-bg); }

/* ══════════════════════════════════════════════════════════
   FASE 3 — Blindaje contra estilos del tema padre
   ══════════════════════════════════════════════════════════
   Algunos temas WP (Astra, OceanWP, Elementor Pro) aplican estilos
   universales a botones (button, .button, [type=button], [type=submit])
   con :hover en colores que no coinciden con la identidad psy-tests
   (típicamente rosado/magenta). Aquí imponemos los colores correctos
   con !important sobre todos los botones dentro de .psytest-wrap.
   ══════════════════════════════════════════════════════════ */

.psytest-wrap .psytest-btn,
.psytest-wrap button.psytest-btn {
  font-family:    var(--psy-font-body) !important;
  border:         0 !important;
  cursor:         pointer;
  transition:     transform .12s ease, box-shadow .12s ease, background-color .12s ease;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.psytest-wrap .psytest-btn-primary,
.psytest-wrap button.psytest-btn-primary {
  background:    var(--psy-green) !important;
  color:         #ffffff !important;
  box-shadow:    0 8px 18px rgba(45,74,45,.20) !important;
}
.psytest-wrap .psytest-btn-primary:hover:not([disabled]),
.psytest-wrap button.psytest-btn-primary:hover:not([disabled]) {
  background:    #243d24 !important;        /* verde portal un punto más oscuro */
  color:         #ffffff !important;
  transform:     translateY(-1px);
  box-shadow:    0 10px 22px rgba(45,74,45,.28) !important;
}
.psytest-wrap .psytest-btn-primary:focus-visible {
  outline:       3px solid rgba(45,74,45,.35) !important;
  outline-offset:2px;
}

.psytest-wrap .psytest-btn-ghost,
.psytest-wrap button.psytest-btn-ghost {
  background:    #ffffff !important;
  color:         var(--psy-ink) !important;
  border:        1px solid var(--psy-border-strong) !important;
}
.psytest-wrap .psytest-btn-ghost:hover:not([disabled]),
.psytest-wrap button.psytest-btn-ghost:hover:not([disabled]) {
  background:    var(--psy-green-tint) !important;
  color:         var(--psy-ink) !important;
  border-color:  var(--psy-green) !important;
  transform:     translateY(-1px);
}

/* Nota auditoría: el token --primary se redefine en cada test CSS (después
   de este base) y ahí gana. Por eso NO sobrescribimos --primary aquí; en
   su lugar imponemos background/color con !important arriba, que sí gana. */

/* ══════════════════════════════════════════════════════════
   Prompt "retomar test" (psy-test-prompt.js)
   Modal que se monta en document.body (FUERA de .psytest-wrap), por eso es
   self-contained y blinda sus botones contra los estilos del tema padre.
   ══════════════════════════════════════════════════════════ */
.psytest-prompt-overlay {
  position: fixed; inset: 0; z-index: var(--z-modal, 1000);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-5);
  background: rgba(15, 23, 42, .45);
  font-family: var(--psy-font-body);
  animation: psytest-prompt-fade .18s ease both;
}
.psytest-prompt-overlay.psytest-prompt-leaving { opacity: 0; transition: opacity .16s ease; }

.psytest-prompt-card {
  background: var(--psy-surface);
  border-radius: var(--psy-radius-md);
  box-shadow: var(--psy-shadow-card);
  max-width: 420px; width: 100%;
  padding: 28px 26px 24px;
  text-align: center;
  animation: psytest-prompt-pop .22s cubic-bezier(.16, .84, .44, 1) both;
}
.psytest-prompt-icon {
  margin: 0 auto 14px; width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--psy-green-light);
}
.psytest-prompt-icon svg { width: 28px; height: 28px; }
.psytest-prompt-title {
  font-family: var(--psy-font-title); font-size: 1.2rem; font-weight: 600;
  color: var(--psy-ink); margin: 0 0 var(--space-2);
}
.psytest-prompt-body {
  font-size: .95rem; color: var(--psy-ink-muted); line-height: 1.5; margin: 0 0 22px;
}
.psytest-prompt-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.psytest-prompt-actions .psytest-btn {
  padding: var(--space-3) var(--space-5); border: 0; border-radius: var(--psy-radius-sm);
  font-family: var(--psy-font-body); font-size: .92rem; font-weight: 600; cursor: pointer;
  transition: background-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.psytest-prompt-actions .psytest-btn-primary {
  background: var(--psy-green) !important; color: var(--text-inverse) !important;
  box-shadow: 0 8px 18px rgba(45, 74, 45, .20);
}
.psytest-prompt-actions .psytest-btn-primary:hover { background: var(--green-800) !important; transform: translateY(-1px); }
.psytest-prompt-actions .psytest-btn-ghost {
  background: var(--surface) !important; color: var(--psy-ink) !important;
  border: 1px solid var(--psy-border-strong) !important;
}
.psytest-prompt-actions .psytest-btn-ghost:hover { background: var(--psy-green-tint) !important; border-color: var(--psy-green) !important; }
.psytest-prompt-actions .psytest-btn:focus-visible { outline: 3px solid rgba(45, 74, 45, .35); outline-offset: 2px; }

@keyframes psytest-prompt-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes psytest-prompt-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .psytest-prompt-overlay, .psytest-prompt-card { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════
   Pantalla de cierre (PSY_GATE.complete — Fase 0/3 Opción B)
   ══════════════════════════════════════════════════════════ */

.psytest-complete {
  text-align: center;
  padding: 40px 24px;
  background: var(--psy-surface);
  border-radius: var(--psy-radius-lg);
  box-shadow: var(--psy-shadow-card);
  border: 1px solid var(--psy-border);
}
.psytest-complete-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--psy-green-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.psytest-complete-icon svg {
  width: 36px; height: 36px;
  stroke: var(--psy-green) !important;
}
.psytest-complete-title {
  font-family: var(--psy-font-title);
  font-size: 1.45rem;
  color: var(--psy-ink) !important;
  margin: 0 0 10px;
}
.psytest-complete-text {
  font-size: 0.95rem;
  color: var(--psy-ink-muted) !important;
  margin: 0 0 16px;
  line-height: 1.55;
}
.psytest-complete-text strong#psyCompleteCountdown {
  color: var(--psy-green) !important;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: inline-block;
  min-width: 1.2em;
  text-align: center;
}

/* ── Accesibilidad global ───────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .psytest-opt,
  .psytest-bubbleDot,
  .psytest-btn,
  .psytest-severity-level {
    transition: none !important;
    animation:  none !important;
  }
}