/* yohual-interior.css — estética "Trayectorias" para el interior del simulador
   (encabezado, asistente, resultados, pie). Se carga DESPUÉS de yohual-theme.css. */

:root {
  --glass:        rgba(11,15,26,.58);
  --glass-strong: rgba(8,11,20,.82);
  --on-accent:    #1a1408;
  --gold:   #e6c590;
  --silver: #c4cbd9;
  --bronze: #d4a07a;
  --coral:  #ef9a92;
  --c-scale:#c7a6f0;
}
:root[data-theme="sepia"] {
  --glass: rgba(250,247,242,.9); --glass-strong: #faf7f2; --on-accent:#fff;
  --gold:#b35c00; --silver:#3b5bdb; --bronze:#92400e; --coral:#993060; --c-scale:#7c3aed;
}
:root[data-theme="light"] {
  --glass: rgba(255,255,255,.92); --glass-strong:#fff; --on-accent:#fff;
  --gold:#d97706; --silver:#3b5bdb; --bronze:#92400e; --coral:#be185d; --c-scale:#7c3aed;
}

@keyframes yhUp { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:none } }

/* ── Encabezado ── */
.site-header {
  background: transparent;
  color: var(--fg);
  border-bottom: 1px solid var(--border);
  padding-block: 30px 26px;
  margin-inline: -16px;
}
.site-header h1 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  letter-spacing: -.01em;
  line-height: 1.1;
}
.site-header p { color: var(--fg-muted); opacity: 1; letter-spacing: .02em; margin-top: 6px; }
.header-badge {
  background: transparent; color: var(--teal);
  border: 1px solid var(--teal);
  border-radius: 999px; padding: 4px 11px;
  letter-spacing: .16em; font-weight: 600;
}
.theme-toggle {
  background: var(--glass); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px;
}
.theme-btn { color: var(--fg-muted); border-radius: 999px; width: 32px; height: 28px; }
.theme-btn svg { width: 15px; height: 15px; }
.theme-btn.active, .theme-btn:hover { background: var(--teal-soft); color: var(--teal); }
@media (max-width: 640px) {
  .site-header { flex-wrap: wrap; padding-inline: 20px; }
  .header-text { flex-basis: 100%; }
}

/* ── Progreso: estrellas conectadas ── */
.progress-strip { gap: 0; margin-bottom: 30px; }
.progress-label { margin-right: 16px; color: var(--fg-muted); letter-spacing: .14em; }
.progress-step {
  position: relative; height: 1px; background: var(--border);
  border-radius: 0; overflow: visible; margin-left: 4px;
}
.progress-step::before {
  content: ""; position: absolute; left: -4px; top: 50%;
  width: 14px; height: 14px; transform: translateY(-50%);
  background: var(--fg-dim);
  clip-path: polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  transition: background var(--transition);
}
.progress-step::after {
  content: ""; position: absolute; left: -11px; top: 50%;
  width: 28px; height: 28px; transform: translateY(-50%);
  border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, var(--teal-soft) 0%, transparent 70%);
}
.progress-step.done { background: var(--teal); }
.progress-step.done::before,
.progress-step.active::before { background: var(--teal); }
.progress-step.active { background: var(--border); }
.progress-step.done::after,
.progress-step.active::after { opacity: 1; }
.progress-step.active::after { animation: yhPulse 2.6s ease-in-out infinite; }
@keyframes yhPulse { 50% { transform: translateY(-50%) scale(1.5); opacity:.55 } }

/* ── Panel del asistente ── */
.wizard-panel, .result-card {
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  animation: yhUp .5s ease both;
}
.wizard-panel { padding: 40px 44px; }
@media (max-width: 600px) { .wizard-panel { padding: 26px 20px; } }

.block-header { gap: 16px; padding-bottom: 20px; margin-bottom: 28px; }
.block-icon {
  width: 44px; height: 44px; border-radius: 50%;
  font-size: 0; border: 1px solid currentColor;
}
.block-icon svg { width: 21px; height: 21px; }
.block-icon.context { color: var(--teal);  background: var(--teal-soft); }
.block-icon.innov   { color: var(--amber); background: var(--amber-soft); }
.block-icon.impact  { color: var(--rose);  background: var(--rose-soft); }
.block-icon.scale   { color: var(--teal);  background: var(--teal-soft); }
.block-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(1.6rem, 3vw, 2.15rem); letter-spacing: -.01em; line-height: 1.05;
}
.block-subtitle { margin-top: 6px; font-size: 13px; }

.question-group { margin-bottom: 32px; }
.question-label { font-size: 14px; font-weight: 500; }
.q-num {
  background: transparent; color: var(--teal);
  border: 1px solid var(--border); border-radius: 999px;
  letter-spacing: .08em; padding: 1px 8px;
}

/* Likert */
.likert label .pip {
  background: transparent; border: 1px solid var(--border); color: var(--fg-muted);
}
.likert label:hover .pip { border-color: var(--teal); color: var(--teal); box-shadow: 0 0 14px var(--teal-soft); }
.likert input:checked + label .pip {
  background: var(--teal); border-color: var(--teal); color: var(--on-accent);
  box-shadow: 0 0 18px var(--teal-soft);
}

/* Select */
.q-select {
  background-color: var(--glass-strong); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 11px 36px 11px 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23a6aebf' stroke-width='1.4' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  transition: border-color var(--transition), box-shadow var(--transition);
}
.q-select:hover { border-color: var(--fg-dim); }
.q-select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
.q-select option { background: var(--surface); color: var(--fg); }

/* Botones */
.btn { border-radius: 999px; padding: 11px 26px; letter-spacing: .02em; }
.btn-primary { background: var(--teal); color: var(--on-accent); }
.btn-primary:hover { filter: none; box-shadow: 0 0 28px var(--teal-soft), 0 0 0 1px var(--teal); transform: translateY(-1px); }
.btn-ghost { border-color: var(--border); }
.btn-ghost:hover { background: var(--teal-soft); border-color: var(--teal); color: var(--teal); }

/* ── Resultados ── */
.card-title { letter-spacing: .16em; color: var(--fg-muted); font-weight: 600; }
.score-big {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 4.6rem; color: var(--teal);
  text-shadow: 0 0 42px var(--teal-soft);
}
.score-band { border-radius: 999px; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; padding: 5px 14px; }
.band-gold    { background: color-mix(in srgb, var(--gold) 14%, transparent);   color: var(--gold); }
.band-silver  { background: color-mix(in srgb, var(--silver) 14%, transparent); color: var(--silver); }
.band-bronze  { background: color-mix(in srgb, var(--bronze) 14%, transparent); color: var(--bronze); }
.band-frontier{ background: var(--rose-soft); color: var(--rose); }

.axis-bar-track { height: 3px; background: var(--border); }
.axis-bar-fill { background: var(--teal); }
.axis-bar-fill.is-impact { background: var(--amber); }
.axis-bar-fill.is-scale  { background: var(--c-scale); }

.gap-item {
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  border: 1px solid var(--border); border-left: 2px solid var(--amber);
  border-radius: var(--radius); padding: 14px 16px; line-height: 1.6;
}
.gap-item.warn { border-left-color: var(--gold); }
.gap-item.crit { border-left-color: var(--coral); }
.gap-item strong { font-weight: 600; letter-spacing: .01em; margin-bottom: 4px; }

.cat-badge { border-radius: 999px; padding: 4px 12px; letter-spacing: .08em; text-transform: uppercase; font-size: 10px; }
.comp-btn { border-radius: 999px; background: transparent; }
.comp-btn:hover { border-color: var(--rose); color: var(--rose); }
.legend-dot { box-shadow: 0 0 8px currentColor; }

/* ── Pie ── */
.site-footer {
  border-top: 1px solid var(--border); color: var(--fg-dim);
  max-width: 1080px; margin-inline: auto; line-height: 1.8; padding-bottom: 36px;
}
.site-footer a { color: var(--teal); }
.site-footer a:hover { text-decoration: underline; }

/* ── Modal de usuario recurrente ── */
#projectChoiceModal > div {
  background: var(--glass-strong) !important;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-radius: var(--radius-lg) !important;
}
#projectChoiceModal h2 { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: 1.7rem !important; }
#projectChoiceModal button { border-radius: 999px !important; text-align: center !important; }

@media (prefers-reduced-motion: reduce) {
  .wizard-panel, .result-card, .progress-step::after { animation: none !important; }
}