// vita-services2.jsx — Nutrición, Psicología, Diagnóstico

// ════ 2. NUTRICIÓN ═════════════════════════════════════════════
const NUTRIOLOGOS = [
  { nombre: 'Dra. Marcela Ruiz', esp: 'Nutrición clínica · Cardiometabólica', match: 'Experta en hipertensión y corazón', rating: 4.9, modalidad: 'Virtual y presencial', tag: 'Mejor para ti' },
  { nombre: 'Dr. Andrés Patiño', esp: 'Nutrición deportiva', match: 'Enfocado en energía y hábitos', rating: 4.7, modalidad: 'Virtual', tag: null },
];
function NutricionService({ t, persona, profile, asis, nutricion, loading, onGenerate, onBack, onSchedule }) {
  const accent = persona.accent;
  const [tab, setTab] = React.useState('plan'); // plan | nutriologo
  React.useEffect(() => { if (!nutricion && !loading) onGenerate(); }, []);

  return (
    <Stage t={t}>
      <ServiceHeader t={t} persona={persona} titulo="Nutrición" sub="Plan a tu medida, según tu historia" onBack={onBack} />
      <div style={{ padding: '10px 18px 4px' }}>
        <div style={{ display: 'flex', gap: 4, padding: 4, borderRadius: 13, background: t.dark ? 'rgba(255,255,255,0.05)' : 'rgba(10,26,51,0.04)', border: `1px solid ${t.stroke}` }}>
          {[['plan', 'Mi plan'], ['nutriologo', 'Mi nutriólogo']].map(([k, l]) => (
            <button key={k} onClick={() => setTab(k)} style={{ flex: 1, padding: '9px 0', borderRadius: 10, cursor: 'pointer', border: 'none', background: tab === k ? `linear-gradient(135deg, ${accent}, ${persona.accentDeep})` : 'transparent', color: tab === k ? t.onAccent : t.textSoft, fontFamily: 'Hanken Grotesk, sans-serif', fontSize: 14, fontWeight: 700 }}>{l}</button>
          ))}
        </div>
      </div>
      <div style={{ flex: 1, overflow: 'auto', padding: '14px 18px 30px' }}>
        {tab === 'plan' && (
          (loading || !nutricion) ? (
            <div style={{ textAlign: 'center', padding: '50px 20px' }}>
              <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 16 }}><Spinner c={accent} /></div>
              <div style={{ fontSize: 14.5, color: t.textSoft, fontWeight: 500 }}>Vita está armando tu plan<br/>según tu historia clínica…</div>
            </div>
          ) : (
            <div>
              <div style={{ borderRadius: 20, padding: 16, marginBottom: 16, background: `linear-gradient(135deg, ${hexA(accent, 0.16)}, ${hexA(accent, 0.04)})`, border: `1px solid ${hexA(accent, 0.25)}` }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>{Icon.food({ s: 18, c: accent })}<span style={{ fontSize: 12, fontWeight: 800, letterSpacing: 0.5, textTransform: 'uppercase', color: accent, whiteSpace: 'nowrap' }}>Tu enfoque</span></div>
                <p style={{ fontSize: 15.5, color: t.text, lineHeight: 1.5, margin: 0, fontWeight: 450 }}>{nutricion.enfoque}</p>
              </div>

              <SecTitle t={t}>Tus metas</SecTitle>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 18 }}>
                {nutricion.objetivos.map((o, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '12px 14px', borderRadius: 13, background: t.dark ? 'rgba(255,255,255,0.04)' : '#FFFFFF', border: `1px solid ${t.stroke}` }}>
                    <span style={{ width: 26, height: 26, borderRadius: 8, flexShrink: 0, display: 'grid', placeItems: 'center', background: hexA(accent, 0.14), color: accent, fontWeight: 800, fontSize: 13 }}>{i + 1}</span>
                    <span style={{ fontSize: 14, color: t.text, fontWeight: 500 }}>{o}</span>
                  </div>
                ))}
              </div>

              <SecTitle t={t}>Un día de ejemplo</SecTitle>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 18 }}>
                {nutricion.comidas.map((c, i) => (
                  <div key={i} style={{ display: 'flex', gap: 13, padding: 14, borderRadius: 16, background: t.dark ? 'rgba(255,255,255,0.04)' : '#FFFFFF', border: `1px solid ${t.stroke}` }}>
                    <span style={{ width: 42, height: 42, flexShrink: 0, borderRadius: 12, display: 'grid', placeItems: 'center', background: hexA(accent, 0.13) }}>{Icon.food({ s: 20, c: accent })}</span>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: 11.5, fontWeight: 800, letterSpacing: 0.4, textTransform: 'uppercase', color: t.muted }}>{c.momento}</div>
                      <div style={{ fontSize: 14.5, color: t.text, fontWeight: 600, marginTop: 1 }}>{c.idea}</div>
                      {c.nota && <div style={{ fontSize: 12.5, color: t.textSoft, marginTop: 2, fontWeight: 450 }}>{c.nota}</div>}
                    </div>
                  </div>
                ))}
              </div>

              <SecTitle t={t}>Reduce poco a poco</SecTitle>
              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                {nutricion.evitar.map((e, i) => (
                  <span key={i} style={{ fontSize: 13, fontWeight: 600, color: t.coral, background: hexA(t.coral, 0.12), padding: '8px 13px', borderRadius: 11 }}>{e}</span>
                ))}
              </div>
              <button onClick={() => setTab('nutriologo')} style={{ width: '100%', marginTop: 20, padding: '15px', borderRadius: 15, border: 'none', cursor: 'pointer', background: `linear-gradient(135deg, ${accent}, ${persona.accentDeep})`, color: t.onAccent, fontFamily: 'Hanken Grotesk, sans-serif', fontSize: 15.5, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 9 }}>{Icon.user({ s: 18, c: t.onAccent })} Ver mi nutriólogo recomendado</button>
            </div>
          )
        )}

        {tab === 'nutriologo' && (
          <div>
            <p style={{ fontSize: 14, color: t.textSoft, lineHeight: 1.5, margin: '2px 2px 16px', fontWeight: 450 }}>De nuestra red, este es quien mejor se ajusta a tu historia clínica:</p>
            {NUTRIOLOGOS.map((n, i) => (
              <div key={i} style={{ borderRadius: 20, padding: 16, marginBottom: 12, border: `1.5px solid ${i === 0 ? accent : t.stroke}`, background: i === 0 ? hexA(accent, t.dark ? 0.08 : 0.05) : (t.dark ? 'rgba(255,255,255,0.04)' : '#FFFFFF') }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 13 }}>
                  <div style={{ width: 52, height: 52, borderRadius: '32%', flexShrink: 0, display: 'grid', placeItems: 'center', background: `linear-gradient(135deg, ${accent}, ${persona.accentDeep})`, color: t.onAccent, fontFamily: 'Instrument Serif, serif', fontSize: 22 }}>{n.nombre.split(' ')[1].charAt(0)}</div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}><span style={{ fontSize: 15.5, fontWeight: 700, color: t.text }}>{n.nombre}</span></div>
                    <div style={{ fontSize: 12.5, color: t.muted, fontWeight: 500 }}>{n.esp}</div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginTop: 3 }}>{Icon.star({ s: 13, c: '#E6A93C', fill: '#E6A93C' })}<span style={{ fontSize: 12.5, fontWeight: 700, color: t.text }}>{n.rating}</span><span style={{ fontSize: 12, color: t.muted }}>· {n.modalidad}</span></div>
                  </div>
                  {n.tag && <span style={{ fontSize: 10, fontWeight: 800, color: accent, background: hexA(accent, 0.14), padding: '4px 8px', borderRadius: 7, flexShrink: 0 }}>{n.tag}</span>}
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginTop: 12, padding: '9px 12px', borderRadius: 11, background: t.dark ? 'rgba(255,255,255,0.04)' : 'rgba(10,26,51,0.03)' }}>{Icon.sparkle({ s: 14, c: accent })}<span style={{ fontSize: 12.5, color: t.textSoft, fontWeight: 500 }}>{n.match}</span></div>
                {i === 0 && <button onClick={() => onSchedule && onSchedule({ id: 'nut' + Date.now(), tipo: 'cita', titulo: 'Cita con ' + n.nombre, detalle: 'Nutrición · ' + n.modalidad, estado: 'pendiente' })} style={{ width: '100%', marginTop: 12, padding: '13px', borderRadius: 13, border: 'none', cursor: 'pointer', background: `linear-gradient(135deg, ${accent}, ${persona.accentDeep})`, color: t.onAccent, fontFamily: 'Hanken Grotesk, sans-serif', fontSize: 14.5, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8 }}>{Icon.calendar({ s: 17, c: t.onAccent })} Agendar con Vita</button>}
              </div>
            ))}
          </div>
        )}
      </div>
    </Stage>
  );
}

// ════ 3. PSICOLOGÍA ════════════════════════════════════════════
const MOODS = [
  { k: 5, label: 'Muy bien', color: '#3E8F5A', face: 'M8.5 14a4.5 4.5 0 0 0 7 0' },
  { k: 4, label: 'Bien', color: '#73C58E', face: 'M9 14a4 4 0 0 0 6 0' },
  { k: 3, label: 'Normal', color: '#E6A93C', face: 'M9 14.5h6' },
  { k: 2, label: 'Bajón', color: '#E08A4F', face: 'M9 15a4 4 0 0 1 6 0' },
  { k: 1, label: 'Mal', color: '#D9534F', face: 'M8.5 15.5a4.5 4.5 0 0 1 7 0' },
];
const SINTOMAS_SEG = ['Dormí bien', 'Tuve ansiedad', 'Me sentí motivado', 'Tomé mi medicación', 'Hice ejercicio'];

function PsicologiaService({ t, persona, onBack, onSchedule }) {
  const accent = persona.accent;
  const seed = [{ d: 'Lun', k: 3 }, { d: 'Mar', k: 2 }, { d: 'Mié', k: 4 }, { d: 'Jue', k: 3 }, { d: 'Vie', k: 4 }, { d: 'Sáb', k: 5 }];
  const [log, setLog] = React.useState(seed);
  const [todayMood, setTodayMood] = React.useState(null);
  const [sintomas, setSintomas] = React.useState({});
  const [saved, setSaved] = React.useState(false);

  const moodOf = (k) => MOODS.find(m => m.k === k);
  const guardar = () => {
    if (todayMood == null) return;
    setLog(l => [...l, { d: 'Hoy', k: todayMood }]);
    setSaved(true);
  };

  return (
    <Stage t={t}>
      <ServiceHeader t={t} persona={persona} titulo="Psicología" sub="Tu bienestar emocional, día a día" onBack={onBack} />
      <div style={{ flex: 1, overflow: 'auto', padding: '14px 18px 30px' }}>
        {/* treatment status */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 15, borderRadius: 18, marginBottom: 18, background: t.dark ? 'rgba(255,255,255,0.04)' : '#FFFFFF', border: `1px solid ${t.stroke}` }}>
          <div style={{ width: 46, height: 46, borderRadius: 13, flexShrink: 0, display: 'grid', placeItems: 'center', background: hexA(accent, 0.14) }}>{Icon.brain({ s: 23, c: accent })}</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14.5, fontWeight: 700, color: t.text }}>En tratamiento con Dr. Suárez</div>
            <div style={{ fontSize: 12.5, color: t.textSoft, fontWeight: 450 }}>Próxima sesión: jueves 4:00 p.m.</div>
          </div>
          <span style={{ width: 8, height: 8, borderRadius: '50%', background: t.green }} />
        </div>

        {/* mood check-in */}
        <SecTitle t={t}>¿Cómo te sientes hoy?</SecTitle>
        <div style={{ display: 'flex', gap: 8, marginBottom: 6 }}>
          {MOODS.slice().reverse().map(m => (
            <button key={m.k} onClick={() => { setTodayMood(m.k); setSaved(false); }} style={{ flex: 1, padding: '12px 4px', borderRadius: 15, cursor: 'pointer', border: `1.5px solid ${todayMood === m.k ? m.color : t.stroke}`, background: todayMood === m.k ? hexA(m.color, 0.14) : (t.dark ? 'rgba(255,255,255,0.04)' : '#FFFFFF'), display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 5, WebkitTapHighlightColor: 'transparent' }}>
              <svg viewBox="0 0 24 24" width={26} height={26} fill="none" stroke={m.color} strokeWidth={1.9} strokeLinecap="round"><circle cx="12" cy="12" r="9" /><path d={m.face} /><circle cx="9" cy="10" r=".5" fill={m.color} /><circle cx="15" cy="10" r=".5" fill={m.color} /></svg>
              <span style={{ fontSize: 10, fontWeight: 600, color: todayMood === m.k ? m.color : t.muted }}>{m.label}</span>
            </button>
          ))}
        </div>

        {/* symptoms checklist */}
        {todayMood != null && (
          <div style={{ animation: 'vitaIn .3s both', marginTop: 14 }}>
            <SecTitle t={t}>Seguimiento de hoy</SecTitle>
            <div style={{ fontSize: 12, color: t.muted, margin: '-6px 2px 10px', fontWeight: 450 }}>Lo que tu psicólogo pidió revisar</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {SINTOMAS_SEG.map(s => {
                const on = sintomas[s];
                return (
                  <button key={s} onClick={() => setSintomas(x => ({ ...x, [s]: !x[s] }))} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '12px 14px', borderRadius: 13, cursor: 'pointer', border: `1px solid ${on ? hexA(accent, 0.5) : t.stroke}`, background: on ? hexA(accent, 0.1) : (t.dark ? 'rgba(255,255,255,0.04)' : '#FFFFFF'), textAlign: 'left', WebkitTapHighlightColor: 'transparent' }}>
                    <span style={{ width: 22, height: 22, borderRadius: 7, flexShrink: 0, border: `1.5px solid ${on ? accent : t.strokeStrong}`, background: on ? accent : 'transparent', display: 'grid', placeItems: 'center' }}>{on && Icon.check({ s: 13, c: t.onAccent, w: 3 })}</span>
                    <span style={{ fontSize: 14, color: t.text, fontWeight: 500 }}>{s}</span>
                  </button>
                );
              })}
            </div>
            {!saved ? (
              <button onClick={guardar} style={{ width: '100%', marginTop: 14, padding: '14px', borderRadius: 14, border: 'none', cursor: 'pointer', background: `linear-gradient(135deg, ${accent}, ${persona.accentDeep})`, color: t.onAccent, fontFamily: 'Hanken Grotesk, sans-serif', fontSize: 15, fontWeight: 700 }}>Guardar mi día</button>
            ) : (
              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10, marginTop: 14, padding: 14, borderRadius: 14, background: hexA(t.green, 0.1), border: `1px solid ${hexA(t.green, 0.3)}` }}>
                <VitaDot t={t} size={26} /><span style={{ fontSize: 13.5, color: t.textSoft, lineHeight: 1.45, fontWeight: 450 }}>Listo, lo registré. Si veo varios días bajitos, le aviso a tu psicólogo. No estás solo. 💚</span>
              </div>
            )}
          </div>
        )}

        {/* mood history */}
        <SecTitle t={t} style={{ marginTop: 22 }}>Tu semana</SecTitle>
        <div style={{ borderRadius: 18, padding: '18px 14px', background: t.dark ? 'rgba(255,255,255,0.04)' : '#FFFFFF', border: `1px solid ${t.stroke}`, display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 6, height: 120 }}>
          {log.map((e, i) => {
            const m = moodOf(e.k);
            return (
              <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, height: '100%', justifyContent: 'flex-end' }}>
                <div style={{ width: '70%', maxWidth: 22, height: (e.k / 5 * 64) + 8, borderRadius: 7, background: `linear-gradient(180deg, ${m.color}, ${hexA(m.color, 0.5)})` }} />
                <span style={{ fontSize: 10.5, color: e.d === 'Hoy' ? accent : t.muted, fontWeight: e.d === 'Hoy' ? 800 : 600 }}>{e.d}</span>
              </div>
            );
          })}
        </div>
      </div>
    </Stage>
  );
}

// ════ 4. DIAGNÓSTICO ═══════════════════════════════════════════
const COMPLEMENTARIOS = [
  { nombre: 'Perfil lipídico', motivo: 'Por tu hipertensión y riesgo cardiaco', tipo: 'laboratorio' },
  { nombre: 'Glucosa en ayunas', motivo: 'Control metabólico', tipo: 'laboratorio' },
  { nombre: 'Electrocardiograma', motivo: 'Antecedente familiar de infarto', tipo: 'examen' },
];
const DROGUERIAS = [
  { nombre: 'Cruz Verde · Laureles', dist: '450 m', dir: 'Cra 70 #C2-30', abierto: true, eps: true },
  { nombre: 'Farmatodo · Av. Nutibara', dist: '1.2 km', dir: 'Cl 33 #74-10', abierto: true, eps: true },
  { nombre: 'Droguería La Rebaja', dist: '1.8 km', dir: 'Cra 80 #45-12', abierto: false, eps: false },
];
function DiagnosticoService({ t, persona, profile, onBack, onSchedule }) {
  const accent = persona.accent;
  const [tab, setTab] = React.useState('estudios'); // estudios | droguerias
  const [picked, setPicked] = React.useState({});
  const [agendado, setAgendado] = React.useState(false);
  const nPicked = Object.values(picked).filter(Boolean).length;

  return (
    <Stage t={t}>
      <ServiceHeader t={t} persona={persona} titulo="Diagnóstico" sub="Estudios, labs y dónde reclamar" onBack={onBack} />
      <div style={{ padding: '10px 18px 4px' }}>
        <div style={{ display: 'flex', gap: 4, padding: 4, borderRadius: 13, background: t.dark ? 'rgba(255,255,255,0.05)' : 'rgba(10,26,51,0.04)', border: `1px solid ${t.stroke}` }}>
          {[['estudios', 'Estudios y labs'], ['droguerias', 'Droguerías']].map(([k, l]) => (
            <button key={k} onClick={() => setTab(k)} style={{ flex: 1, padding: '9px 0', borderRadius: 10, cursor: 'pointer', border: 'none', background: tab === k ? `linear-gradient(135deg, ${accent}, ${persona.accentDeep})` : 'transparent', color: tab === k ? t.onAccent : t.textSoft, fontFamily: 'Hanken Grotesk, sans-serif', fontSize: 13.5, fontWeight: 700 }}>{l}</button>
          ))}
        </div>
      </div>
      <div style={{ flex: 1, overflow: 'auto', padding: '14px 18px 30px' }}>
        {tab === 'estudios' && (
          <div>
            <SecTitle t={t}>Plan complementario sugerido</SecTitle>
            <div style={{ fontSize: 12.5, color: t.muted, margin: '-6px 2px 12px', fontWeight: 450 }}>Vita los recomienda según tu historia. Tócalos para agendar.</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {COMPLEMENTARIOS.map((c, i) => {
                const on = picked[c.nombre];
                return (
                  <button key={i} onClick={() => { setPicked(p => ({ ...p, [c.nombre]: !p[c.nombre] })); setAgendado(false); }} style={{ display: 'flex', alignItems: 'center', gap: 13, padding: 14, borderRadius: 16, cursor: 'pointer', border: `1.5px solid ${on ? accent : t.stroke}`, background: on ? hexA(accent, 0.1) : (t.dark ? 'rgba(255,255,255,0.04)' : '#FFFFFF'), textAlign: 'left', WebkitTapHighlightColor: 'transparent' }}>
                    <span style={{ width: 42, height: 42, flexShrink: 0, borderRadius: 12, display: 'grid', placeItems: 'center', background: hexA(accent, 0.13) }}>{Icon[c.tipo === 'laboratorio' ? 'lab' : 'scan']({ s: 21, c: accent })}</span>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 15, fontWeight: 700, color: t.text }}>{c.nombre}</div>
                      <div style={{ fontSize: 12.5, color: t.textSoft, fontWeight: 450, lineHeight: 1.35, marginTop: 1 }}>{c.motivo}</div>
                    </div>
                    <span style={{ width: 24, height: 24, borderRadius: 8, flexShrink: 0, border: `1.5px solid ${on ? accent : t.strokeStrong}`, background: on ? accent : 'transparent', display: 'grid', placeItems: 'center' }}>{on && Icon.check({ s: 14, c: t.onAccent, w: 3 })}</span>
                  </button>
                );
              })}
            </div>
            {nPicked > 0 && !agendado && (
              <button onClick={() => { setAgendado(true); onSchedule && Object.keys(picked).filter(k => picked[k]).forEach(k => { const c = COMPLEMENTARIOS.find(x => x.nombre === k); onSchedule({ id: 'dx' + Date.now() + k, tipo: c.tipo, titulo: k, detalle: 'Agendado con ' + (profile.eps || 'tu EPS'), estado: 'agendado' }); }); }} style={{ width: '100%', marginTop: 16, padding: '15px', borderRadius: 15, border: 'none', cursor: 'pointer', background: `linear-gradient(135deg, ${accent}, ${persona.accentDeep})`, color: t.onAccent, fontFamily: 'Hanken Grotesk, sans-serif', fontSize: 15.5, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 9 }}>{Icon.calendar({ s: 18, c: t.onAccent })} Agendar {nPicked} con mi EPS</button>
            )}
            {agendado && (
              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10, marginTop: 16, padding: 14, borderRadius: 14, background: hexA(t.green, 0.1), border: `1px solid ${hexA(t.green, 0.3)}` }}>
                {Icon.check({ s: 20, c: t.green, w: 3 })}<span style={{ fontSize: 13.5, color: t.textSoft, lineHeight: 1.45, fontWeight: 450 }}>Listo. Gestioné {nPicked} {nPicked > 1 ? 'estudios' : 'estudio'} con {profile.eps || 'tu EPS'}. Te aviso fecha, hora y lugar.</span>
              </div>
            )}
          </div>
        )}

        {tab === 'droguerias' && (
          <div>
            <SecTitle t={t}>Dónde reclamar tus medicamentos</SecTitle>
            <div style={{ fontSize: 12.5, color: t.muted, margin: '-6px 2px 12px', fontWeight: 450 }}>Aliadas y autorizadas por {profile.eps || 'tu EPS'}, cerca de ti.</div>
            {/* stylized map */}
            <div style={{ position: 'relative', height: 150, borderRadius: 18, overflow: 'hidden', marginBottom: 14, border: `1px solid ${t.stroke}`, background: t.dark ? '#0c1f3d' : '#e8eef6' }}>
              <svg viewBox="0 0 340 150" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
                <g stroke={hexA(persona.muted || '#6B7B96', 0.4)} strokeWidth="6" fill="none">
                  <path d="M-10 40 H350 M-10 100 H350 M70 -10 V160 M200 -10 V160 M280 -10 V160" stroke={t.dark ? 'rgba(255,255,255,0.06)' : 'rgba(10,26,51,0.06)'} />
                </g>
                <path d="M40 130 Q130 90 200 100 T340 60" stroke={hexA(accent, 0.5)} strokeWidth="3" fill="none" strokeDasharray="2 6" strokeLinecap="round" />
                {[[70, 100, true], [200, 40, true], [280, 110, false]].map(([x, y, on], i) => (
                  <g key={i} transform={`translate(${x},${y})`}>
                    <circle r="13" fill={on ? hexA(accent, 0.25) : hexA('#6B7B96', 0.25)} />
                    <circle r="6" fill={on ? accent : '#6B7B96'} />
                  </g>
                ))}
                <g transform="translate(40,130)"><circle r="8" fill={t.green} /><circle r="3.5" fill="#fff" /></g>
              </svg>
              <div style={{ position: 'absolute', left: 10, bottom: 10, fontSize: 10.5, fontWeight: 700, color: t.textSoft, background: t.dark ? 'rgba(6,18,43,0.7)' : 'rgba(255,255,255,0.8)', padding: '4px 9px', borderRadius: 8, display: 'flex', alignItems: 'center', gap: 5 }}>{Icon.pin({ s: 12, c: t.green, fill: t.green })} Tú estás aquí · Laureles</div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {DROGUERIAS.map((d, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 13, padding: 14, borderRadius: 16, background: t.dark ? 'rgba(255,255,255,0.04)' : '#FFFFFF', border: `1px solid ${t.stroke}` }}>
                  <span style={{ width: 42, height: 42, flexShrink: 0, borderRadius: 12, display: 'grid', placeItems: 'center', background: hexA(d.eps ? accent : t.muted, 0.13) }}>{Icon.pin({ s: 20, c: d.eps ? accent : t.muted, fill: 'none' })}</span>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 14.5, fontWeight: 700, color: t.text }}>{d.nombre}</div>
                    <div style={{ fontSize: 12, color: t.muted, fontWeight: 450 }}>{d.dir} · {d.dist}</div>
                    <div style={{ display: 'flex', gap: 6, marginTop: 4 }}>
                      <span style={{ fontSize: 10.5, fontWeight: 700, color: d.abierto ? t.green : t.coral, background: hexA(d.abierto ? t.green : t.coral, 0.14), padding: '2px 8px', borderRadius: 999 }}>{d.abierto ? 'Abierto' : 'Cerrado'}</span>
                      {d.eps && <span style={{ fontSize: 10.5, fontWeight: 700, color: accent, background: hexA(accent, 0.14), padding: '2px 8px', borderRadius: 999 }}>Cubre tu EPS</span>}
                    </div>
                  </div>
                  <button style={{ width: 40, height: 40, flexShrink: 0, borderRadius: 12, border: `1px solid ${t.stroke}`, cursor: 'pointer', display: 'grid', placeItems: 'center', background: t.dark ? 'rgba(255,255,255,0.05)' : 'rgba(255,255,255,0.7)', color: accent }}>{Icon.route({ s: 19, c: accent })}</button>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </Stage>
  );
}

function SecTitle({ t, children, style }) {
  return <div style={{ fontSize: 12, fontWeight: 800, letterSpacing: 0.6, textTransform: 'uppercase', color: t.muted, margin: '4px 4px 12px', ...style }}>{children}</div>;
}

Object.assign(window, { NutricionService, PsicologiaService, DiagnosticoService, SecTitle });