/* ============================================================
   PsychoIA · base.css
   Compartido entre zona pública y privada:
   reset suave, tipografías, logo, botones, badges, barras de nivel.
   ============================================================ */

:root {
  /* Pública (oscura futurista) */
  --psy-night: #04060e;
  --psy-cyan: #38bdf8;
  --psy-cyan-soft: #67e8f9;
  --psy-violet: #a78bfa;
  --psy-fuchsia: #f0abfc;

  /* Privada (clara de estudio) */
  --psy-calm-bg: #f6f7f9;
  --psy-teal: #0d9488;
  --psy-teal-dark: #0f766e;
  --psy-blue: #2563eb;
  --psy-ink: #1e293b;
  --psy-slate: #64748b;
  --psy-line: #e8eaef;

  /* Escala de colores de nivel */
  --lvl-weak: #f43f5e;
  --lvl-progress: #f59e0b;
  --lvl-solid: #3b82f6;
  --lvl-dominated: #10b981;

  --radius: 16px;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }
a { text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.psy-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }

/* Ocultar la admin bar empujando el layout fijo de la app */
body.admin-bar .psy-app-header,
body.admin-bar .psy-sidebar { top: 32px; }

/* ============ Logo ============ */
.psy-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  user-select: none;
  line-height: 1;
}
.psy-logo__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: #fff;
}
.psy-logo__mark svg { width: 55%; height: 55%; }
.psy-logo--md .psy-logo__mark { width: 36px; height: 36px; }
.psy-logo--sm .psy-logo__mark { width: 32px; height: 32px; }
.psy-logo--dark .psy-logo__mark {
  background: linear-gradient(135deg, #22d3ee, #3b82f6 50%, #8b5cf6);
  box-shadow: 0 0 20px rgba(56, 189, 248, .45);
}
.psy-logo--light .psy-logo__mark {
  background: linear-gradient(100deg, var(--psy-teal), var(--psy-blue));
  box-shadow: 0 4px 14px rgba(13, 148, 136, .3);
}
.psy-logo__img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.psy-logo__text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
}
.psy-logo--sm .psy-logo__text { font-size: 17px; }
.psy-logo--dark .psy-logo__text { color: #fff; }
.psy-logo--light .psy-logo__text { color: var(--psy-ink); }
.psy-logo--dark .psy-logo__ia {
  background: linear-gradient(100deg, var(--psy-cyan-soft), var(--psy-cyan) 35%, var(--psy-violet) 75%, var(--psy-fuchsia));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.psy-logo--light .psy-logo__ia {
  background: linear-gradient(100deg, var(--psy-teal), var(--psy-blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.psy-logo__domain {
  display: block;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.psy-logo--dark .psy-logo__domain { color: #64748b; }
.psy-logo--light .psy-logo__domain { color: #94a3b8; }

/* ============ Botones ============ */
.psy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 14px;
  font-weight: 600;
  font-size: 15px;
  padding: 14px 24px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.psy-btn--neon {
  color: #fff;
  background: linear-gradient(100deg, #06b6d4, #3b82f6 55%, #8b5cf6);
  box-shadow: 0 0 24px rgba(56, 189, 248, .35), 0 0 60px rgba(139, 92, 246, .18);
}
.psy-btn--neon:hover {
  box-shadow: 0 0 34px rgba(56, 189, 248, .55), 0 0 90px rgba(139, 92, 246, .3);
  transform: translateY(-1px);
  color: #fff;
}
.psy-btn--focus {
  color: #fff;
  background: linear-gradient(100deg, var(--psy-teal), var(--psy-blue));
  box-shadow: 0 8px 20px rgba(13, 148, 136, .22);
}
.psy-btn--focus:hover {
  box-shadow: 0 10px 26px rgba(13, 148, 136, .38);
  transform: translateY(-1px);
  color: #fff;
}
.psy-btn--ghost-dark {
  color: #e2e8f0;
  background: rgba(13, 18, 34, .55);
  border: 1px solid rgba(148, 163, 184, .2);
  backdrop-filter: blur(10px);
}
.psy-btn--ghost-dark:hover { border-color: rgba(56, 189, 248, .45); color: #fff; }
.psy-btn--ghost-light {
  color: #475569;
  background: #fff;
  border: 1px solid var(--psy-line);
}
.psy-btn--ghost-light:hover { background: #f8fafc; color: var(--psy-ink); border-color: #cbd5e1; }
.psy-btn--sm { padding: 10px 18px; font-size: 14px; border-radius: 12px; }

/* ============ Badges / chips ============ */
.psy-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  border-radius: 999px;
  padding: 4px 10px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.psy-chip--level { color: #2563eb; background: #eff6ff; border-color: #dbeafe; }
.psy-chip--series { color: #64748b; background: #f1f5f9; border-color: #e2e8f0; }
.psy-chip--tone-weak { color: #be123c; background: #fff1f2; border-color: #fecdd3; }
.psy-chip--tone-progress { color: #b45309; background: #fffbeb; border-color: #fde68a; }
.psy-chip--tone-solid { color: #1d4ed8; background: #eff6ff; border-color: #bfdbfe; }
.psy-chip--tone-dominated { color: #047857; background: #ecfdf5; border-color: #a7f3d0; }
.psy-chip--dark-tag {
  color: rgba(196, 181, 253, .8);
  border-color: rgba(167, 139, 250, .25);
  background: transparent;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ============ Barra de nivel de 10 segmentos ============ */
.psy-segbar {
  display: flex;
  gap: 4px;
  flex: 1 1 0%;
  min-width: 60px;
}
.psy-segbar__seg {
  flex: 1 1 0%;
  border-radius: 999px;
  background: #f1f5f9;
  overflow: hidden;
}
.psy-segbar--md .psy-segbar__seg { height: 8px; }
.psy-segbar--sm .psy-segbar__seg { height: 6px; }
.psy-segbar__fill { display: block; height: 100%; border-radius: 999px; }
.psy-segbar--weak .psy-segbar__fill { background: var(--lvl-weak); }
.psy-segbar--progress .psy-segbar__fill { background: var(--lvl-progress); }
.psy-segbar--solid .psy-segbar__fill { background: var(--lvl-solid); }
.psy-segbar--dominated .psy-segbar__fill { background: var(--lvl-dominated); }

/* Texto de nivel coloreado */
.psy-lvl-num { font-family: var(--font-display); font-weight: 700; }
.psy-lvl-num--weak { color: var(--lvl-weak); }
.psy-lvl-num--progress { color: var(--lvl-progress); }
.psy-lvl-num--solid { color: var(--lvl-solid); }
.psy-lvl-num--dominated { color: var(--lvl-dominated); }

/* ============ Leyenda de la escala de niveles ============ */
.psy-level-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
}
.psy-level-legend span { display: inline-flex; align-items: center; gap: 5px; }
.psy-level-legend i {
  width: 8px; height: 8px; border-radius: 999px; display: inline-block;
}
.psy-level-legend .dot-weak { background: var(--lvl-weak); }
.psy-level-legend .dot-progress { background: var(--lvl-progress); }
.psy-level-legend .dot-solid { background: var(--lvl-solid); }
.psy-level-legend .dot-dominated { background: var(--lvl-dominated); }

/* ============ Tarjetas oscuras de "sistema" (identidad en zona clara) ============ */
.psy-darkcard {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: #0f172a;
  color: #fff;
  padding: 26px;
}
.psy-darkcard::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(148, 163, 184, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, .05) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}
.psy-darkcard > * { position: relative; }
.psy-darkcard__tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--psy-cyan-soft);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.psy-darkcard p { color: #cbd5e1; line-height: 1.65; font-size: 14px; }
.psy-darkcard strong { color: #fff; }

/* ============ Acentos de color por tipo ============ */
.psy-accent {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 12px;
}
.psy-accent--cyan { background: linear-gradient(135deg, #22d3ee, #3b82f6); }
.psy-accent--violet { background: linear-gradient(135deg, #a78bfa, #8b5cf6); }
.psy-accent--fuchsia { background: linear-gradient(135deg, #e879f9, #ec4899); }
.psy-accent--emerald { background: linear-gradient(135deg, #34d399, #14b8a6); }
.psy-accent--amber { background: linear-gradient(135deg, #fbbf24, #f97316); }
.psy-accent--sky { background: linear-gradient(135deg, #38bdf8, #6366f1); }

/* ============ Utilidades ============ */
.psy-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.psy-mono { font-family: var(--font-mono); }

/* Color de números de nivel según tramo */
.psy-tone-weak { color: var(--lvl-weak); }
.psy-tone-progress { color: var(--lvl-progress); }
.psy-tone-solid { color: var(--lvl-solid); }
.psy-tone-dominated { color: var(--lvl-dominated); }
.psy-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Animación de aparición al hacer scroll */
.psy-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .6s ease, transform .6s ease;
}
.psy-reveal.psy-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .psy-reveal { opacity: 1; transform: none; transition: none; }
}