/* ============================================================
   npc.css — Modal NPC con flujo pedagógico de 3 fases
   ============================================================ */

/* ── Overlay ─────────────────────────────────────────────── */
#npc-v2-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: rgba(0,0,0,0);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    pointer-events: none;
    transition: background .25s ease;
}
#npc-v2-overlay.visible {
    background: rgba(0,0,0,.72);
    pointer-events: all;
}

/* ── Card ────────────────────────────────────────────────── */
#npc-v2-card {
    background: #0d1a14;
    border: 2px solid #1a3a28;
    border-radius: 18px;
    width: 100%;
    max-width: 520px;
    font-family: 'Segoe UI', Arial, sans-serif;
    display: flex;
    flex-direction: column;
    max-height: 88vh;
    transform: scale(.88) translateY(20px);
    opacity: 0;
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
}
#npc-v2-card.visible {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* ── Barra de fases superior ─────────────────────────────── */
#npc-phase-bar {
    display: flex;
    background: rgba(0,0,0,.3);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.npc-phase-step {
    flex: 1;
    padding: 10px 6px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: rgba(255,255,255,.3);
    letter-spacing: .5px;
    text-transform: uppercase;
    border-bottom: 2px solid transparent;
    transition: color .3s, border-color .3s;
}
.npc-phase-step.active {
    color: #00FF88;
    border-bottom-color: #00FF88;
}
.npc-phase-step.done {
    color: rgba(0,255,136,.5);
    border-bottom-color: rgba(0,255,136,.3);
}

/* ── Header del NPC ──────────────────────────────────────── */
#npc-v2-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px 16px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
#npc-v2-avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a4a30, #0a2a18);
    border: 2px solid #00FF88;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; flex-shrink: 0;
}
#npc-v2-name {
    font-size: 18px; font-weight: 700; color: #00FF88;
    margin: 0 0 2px;
}
#npc-v2-role {
    font-size: 17px; color: #5a8a6a;
}
.npc-v2-close {
    margin-left: auto;
    background: none; border: none;
    color: rgba(255,255,255,.3); font-size: 17px;
    cursor: pointer; padding: 4px; line-height: 1;
    transition: color .2s;
}
.npc-v2-close:hover { color: rgba(255,255,255,.7); }

/* ── Cuerpo ──────────────────────────────────────────────── */
#npc-v2-body {
    padding: 20px 24px;
    min-height: 120px;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
#npc-v2-body::-webkit-scrollbar { width: 4px; }
#npc-v2-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }

/* Fase 1: problema */
.npc-speech-bubble {
    background: rgba(0,255,136,.05);
    border: 1px solid rgba(0,255,136,.15);
    border-left: 3px solid #00FF88;
    border-radius: 10px;
    padding: 16px 18px;
    font-size: 17px; color: #c8e8d8;
    line-height: 1.75; font-style: italic;
    margin-bottom: 16px;
}
.npc-phase-label {
    font-size: 15px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
    color: #5a8a6a; margin-bottom: 8px;
}

/* Fase 2: pista */
.npc-hint-box {
    background: rgba(255,215,0,.05);
    border: 1px solid rgba(255,215,0,.2);
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 14px;
}
.npc-hint-concept {
    font-size: 17px; color: #e8d8a0; line-height: 1.7;
    margin-bottom: 12px;
}
.npc-hint-example {
    font-size: 17px; color: #8a7a50;
    border-top: 1px solid rgba(255,215,0,.1);
    padding-top: 10px; line-height: 1.6;
}
.npc-hint-question {
    font-size: 15px; font-weight: 600;
    color: #FFD700; margin-top: 14px;
}

/* Fase 3: selección */
.npc-select-label {
    font-size: 17px; color: #5a8a6a;
    text-transform: uppercase; letter-spacing: 1px;
    font-weight: 700; margin-bottom: 12px;
}
.npc-no-drives {
    text-align: center; color: #FFD700;
    font-size: 15px; padding: 20px 0;
}
#npc-v2-choices {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.npc-v2-choice {
    background: rgba(0,255,136,.07);
    border: 1px solid rgba(0,255,136,.2);
    border-radius: 10px;
    padding: 12px 10px;
    cursor: pointer;
    display: flex; align-items: center; gap: 10px;
    transition: background .2s, transform .15s, border-color .2s;
    text-align: left;
}
.npc-v2-choice:hover {
    background: rgba(0,255,136,.16);
    border-color: rgba(0,255,136,.5);
    transform: translateY(-2px);
}
.npc-v2-choice:disabled {
    opacity: .45; pointer-events: none;
}
.npc-v2-choice-emoji { font-size: 17px; flex-shrink: 0; }
.npc-v2-choice-name  { font-size: 17px; font-weight: 600; color: #c8e8d8; }

/* ── Footer ──────────────────────────────────────────────── */
#npc-v2-footer {
    padding: 14px 24px 20px;
    display: flex; gap: 10px;
    border-top: 1px solid rgba(255,255,255,.05);
}
.npc-v2-btn {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 16px; font-weight: 700;
    border: none; border-radius: 10px;
    padding: 11px 22px; cursor: pointer;
    transition: transform .15s, filter .15s;
    letter-spacing: .3px;
}
.npc-v2-btn:hover  { filter: brightness(1.15); }
.npc-v2-btn:active { transform: scale(.96); }
.npc-v2-btn-primary {
    background: linear-gradient(135deg, #1a6b3a, #00cc66);
    color: #fff; flex: 1;
}
.npc-v2-btn-secondary {
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.5);
    border: 1px solid rgba(255,255,255,.1);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 520px) {
    #npc-v2-card      { border-radius: 14px; }
    #npc-v2-body      { padding: 16px 16px; }
    #npc-v2-choices   { grid-template-columns: 1fr; }
    #npc-v2-footer    { padding: 12px 16px 16px; }
}

/* ── Ajuste al design system ─────────────────────────────── */
#npc-v2-card, .npc-v2-btn { font-family: var(--font, 'Inter', sans-serif); }