// Ejecutora — La Rutina que Vende™ — Los 3 Pilares

const RutinaScreen = () => {
  const [activePilar, setActivePilar] = React.useState('pilar1');
  const [mesActual, setMesActual] = React.useState('mayo');
  const [okrForm, setOkrForm] = React.useState({ objetivo: '', kr1: '', kr2: '', kr3: '' });

  // Pilar 1 — Planificación
  const [planMes, setPlanMes] = React.useState({
    campana: 'adquisicion',
    productoProtagonista: 'Pack Bienvenida',
    metaFacturacion: '8000',
    metaClientes: '15',
    inversion: '200',
    fechaClave: 'Día de la Madre — 11 may',
  });

  const [areas, setAreas] = React.useState([
    { id: 'producto',   label: 'Producto',    icon: '📦', pregunta: '¿Hay coherencia entre lo que ofreces y la transformación prometida?', semaforo: 'verde', notas: '' },
    { id: 'marketing',  label: 'Marketing',   icon: '📢', pregunta: '¿Qué canal genera más pedidos reales? ¿Tu contenido atrae al cliente ideal?', semaforo: 'amarillo', notas: '' },
    { id: 'ventas',     label: 'Ventas',      icon: '💰', pregunta: '¿Tienes rutina de ventas o dependes de que lleguen solas? ¿Haces upsell?', semaforo: 'amarillo', notas: '' },
    { id: 'operaciones',label: 'Operaciones', icon: '⚙️', pregunta: '¿Tu operación te libera o te consume? ¿Qué necesitas delegar?', semaforo: 'rojo', notas: '' },
  ]);

  const [tiposProducto, setTiposProducto] = React.useState([
    { tipo: 'A', nombre: 'Generador de lead', descripcion: 'Atracción gratuita (PDF, clase gratis, muestra)', ejemplo: '', color: EJ.cyan },
    { tipo: 'B', nombre: 'Generador de cliente', descripcion: 'Primera compra fácil y accesible', ejemplo: '', color: EJ.violet },
    { tipo: 'C', nombre: 'Generador de caja', descripcion: 'Inyección rápida (workshops, ediciones limitadas)', ejemplo: '', color: EJ.pink },
    { tipo: 'D', nombre: 'Generador de lucro', descripcion: 'Producto principal de mayor margen', ejemplo: '', color: EJ.navy },
  ]);

  // Pilar 2 — Campañas checklist
  const [campCheck, setCampCheck] = React.useState({
    producto: false, oferta: false, urgencia: false, prueba: false, cta: false,
    objetivo: false, inicio: false, imagenes: false, copy: false, canales: false,
  });

  // Pilar 3 — Semana
  const [semanal, setSemanal] = React.useState([
    { dia: 'Lunes', foco: 'Planificación semanal (90 min) + arranque', done: true },
    { dia: 'Martes', foco: 'Contenido de atracción + comunidad', done: true },
    { dia: 'Miércoles', foco: 'Conversión directa + publicar oferta', done: true },
    { dia: 'Jueves', foco: 'Relaciones + prueba social + contacto VIP', done: false },
    { dia: 'Viernes', foco: 'Revisión de métricas + cierre fuerte', done: false },
  ]);

  const [indicadores, setIndicadores] = React.useState([
    { id: 1, label: 'Ventas del día', frecuencia: 'Diario', valor: '$250', meta: '$300', color: EJ.cyan },
    { id: 2, label: 'Nuevos contactos', frecuencia: 'Semanal', valor: '8', meta: '10', color: EJ.violet },
    { id: 3, label: 'Tasa de cierre', frecuencia: 'Semanal', valor: '38%', meta: '30%', color: EJ.green },
    { id: 4, label: 'Ticket promedio', frecuencia: 'Mensual', valor: '$185', meta: '$200', color: EJ.cyan },
    { id: 5, label: 'Clientes reactivadas', frecuencia: 'Mensual', valor: '5', meta: '8', color: EJ.pink },
    { id: 6, label: 'Canal más efectivo', frecuencia: 'Mensual', valor: 'WhatsApp', meta: '—', color: EJ.navy },
  ]);

  const semColors = { rojo: EJ.pink, amarillo: '#F59E0B', verde: EJ.green };
  const semBg = { rojo: EJ.pinkLight, amarillo: '#FEF9EC', verde: EJ.greenLight };

  const updateArea = (id, field, val) => {
    setAreas(prev => prev.map(a => a.id === id ? { ...a, [field]: val } : a));
  };

  const pilares = [
    { id: 'pilar1', num: '1', label: 'Planificación', sublabel: 'Mensual · último viernes · 45 min', color: EJ.cyan, bg: EJ.cyanLight },
    { id: 'pilar2', num: '2', label: 'Campañas', sublabel: 'Semanal · Lunes · 60-90 min', color: EJ.violet, bg: EJ.violetLight },
    { id: 'pilar3', num: '3', label: 'Rutina Diaria', sublabel: 'Todos los días · 60-75 min máx.', color: EJ.pink, bg: EJ.pinkLight },
  ];

  return (
    <div style={{ padding: '28px 32px', background: EJ.bgApp, minHeight: '100%' }}>
      {/* Header */}
      <div style={{ marginBottom: 24 }}>
        <h2 style={{ margin: 0, fontFamily: 'Nunito, sans-serif', fontWeight: 800, fontSize: 26, color: EJ.navy }}>La Rutina que Vende™</h2>
        <p style={{ margin: '6px 0 0', fontSize: 14, color: EJ.secondary, fontFamily: 'Nunito Sans, sans-serif' }}>Sistema completo de ventas — 3 Pilares conectados</p>
      </div>

      {/* Selector de pilar */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14, marginBottom: 28 }}>
        {pilares.map(p => (
          <div
            key={p.id}
            onClick={() => setActivePilar(p.id)}
            style={{
              padding: '18px 20px', borderRadius: 20, cursor: 'pointer', transition: 'all 0.2s',
              background: activePilar === p.id ? p.color : EJ.white,
              boxShadow: activePilar === p.id ? `0 8px 30px ${p.color}44` : '0 4px 20px rgba(26,31,110,0.08)',
              border: `2px solid ${activePilar === p.id ? p.color : 'transparent'}`,
              display: 'flex', alignItems: 'center', gap: 14,
            }}
          >
            <div style={{
              width: 44, height: 44, borderRadius: '50%',
              background: activePilar === p.id ? 'rgba(255,255,255,0.25)' : p.bg,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 20, fontWeight: 800, color: activePilar === p.id ? '#fff' : p.color,
              fontFamily: 'Nunito, sans-serif', flexShrink: 0,
            }}>{p.num}</div>
            <div>
              <div style={{ fontSize: 16, fontWeight: 800, color: activePilar === p.id ? '#fff' : EJ.navy, fontFamily: 'Nunito, sans-serif' }}>Pilar {p.num}: {p.label}</div>
              <div style={{ fontSize: 11, color: activePilar === p.id ? 'rgba(255,255,255,0.8)' : EJ.muted, fontFamily: 'Nunito Sans, sans-serif', marginTop: 2 }}>{p.sublabel}</div>
            </div>
          </div>
        ))}
      </div>

      {/* PILAR 1 */}
      {activePilar === 'pilar1' && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          {/* Plan del mes */}
          <Card>
            <SectionHeader title={`Plan del mes — ${mesActual.charAt(0).toUpperCase() + mesActual.slice(1)} 2026`} subtitle="Define el QUÉ y el CUÁNDO del mes completo" />
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginBottom: 16 }}>
              <Select label="Tipo de campaña" value={planMes.campana} onChange={e => setPlanMes(p => ({...p, campana: e.target.value}))} options={[
                { value: 'adquisicion', label: '🎯 Adquisición — atraer nuevas' },
                { value: 'monetizacion', label: '💰 Monetización — vender más a las actuales' },
                { value: 'activacion', label: '🔁 Activación — reactivar inactivas' },
              ]} />
              <Input label="Producto protagonista (uno solo)" value={planMes.productoProtagonista} onChange={e => setPlanMes(p => ({...p, productoProtagonista: e.target.value}))} placeholder="ej. Pack Bienvenida" />
              <Input label="Fecha clave del sector" value={planMes.fechaClave} onChange={e => setPlanMes(p => ({...p, fechaClave: e.target.value}))} placeholder="ej. Día de la Madre" />
              <Input label="Meta de facturación $USD" value={planMes.metaFacturacion} onChange={e => setPlanMes(p => ({...p, metaFacturacion: e.target.value}))} type="number" />
              <Input label="Meta de nuevos clientes" value={planMes.metaClientes} onChange={e => setPlanMes(p => ({...p, metaClientes: e.target.value}))} type="number" />
              <Input label="Inversión en publicidad $USD" value={planMes.inversion} onChange={e => setPlanMes(p => ({...p, inversion: e.target.value}))} type="number" />
            </div>
          </Card>

          {/* Tipos de producto */}
          <Card>
            <SectionHeader title="Tipos de producto por objetivo comercial" />
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
              {tiposProducto.map((tp, i) => (
                <div key={i} style={{ background: EJ.bgApp, borderRadius: 16, padding: '14px 16px', borderTop: `3px solid ${tp.color}` }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                    <div style={{ width: 28, height: 28, borderRadius: '50%', background: tp.color, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 800, fontSize: 13, fontFamily: 'Nunito, sans-serif', flexShrink: 0 }}>{tp.tipo}</div>
                    <div style={{ fontSize: 12, fontWeight: 700, color: EJ.navy, fontFamily: 'Nunito, sans-serif' }}>{tp.nombre}</div>
                  </div>
                  <div style={{ fontSize: 11, color: EJ.secondary, fontFamily: 'Nunito Sans, sans-serif', marginBottom: 10 }}>{tp.descripcion}</div>
                  <Input placeholder="Tu producto aquí..." value={tp.ejemplo} onChange={e => setTiposProducto(prev => prev.map((t, j) => j === i ? {...t, ejemplo: e.target.value} : t))} />
                </div>
              ))}
            </div>
          </Card>

          {/* Análisis 4 áreas */}
          <Card>
            <SectionHeader title="Análisis de las 4 áreas del negocio" subtitle="Semáforo mensual — revisa cada área y anota tu situación" />
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14 }}>
              {areas.map(area => (
                <div key={area.id} style={{ borderRadius: 16, background: semBg[area.semaforo], padding: '16px 18px', border: `1.5px solid ${semColors[area.semaforo]}33` }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
                    <span style={{ fontSize: 22 }}>{area.icon}</span>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: 14, fontWeight: 800, color: EJ.navy, fontFamily: 'Nunito, sans-serif' }}>{area.label}</div>
                      <div style={{ fontSize: 11, color: EJ.secondary, fontFamily: 'Nunito Sans, sans-serif', marginTop: 2 }}>{area.pregunta}</div>
                    </div>
                  </div>
                  <div style={{ display: 'flex', gap: 6, marginBottom: 10 }}>
                    {['verde', 'amarillo', 'rojo'].map(s => (
                      <button key={s} onClick={() => updateArea(area.id, 'semaforo', s)} style={{
                        flex: 1, padding: '6px 0', borderRadius: 50, border: `2px solid ${area.semaforo === s ? semColors[s] : 'transparent'}`,
                        background: area.semaforo === s ? semColors[s] : EJ.bgApp,
                        color: area.semaforo === s ? '#fff' : EJ.muted,
                        fontSize: 11, fontWeight: 700, cursor: 'pointer', fontFamily: 'Nunito, sans-serif',
                        transition: 'all 0.15s',
                      }}>
                        {s === 'verde' ? '🟢' : s === 'amarillo' ? '🟡' : '🔴'} {s.charAt(0).toUpperCase() + s.slice(1)}
                      </button>
                    ))}
                  </div>
                  <textarea
                    placeholder="Notas, acciones concretas..."
                    value={area.notas}
                    onChange={e => updateArea(area.id, 'notas', e.target.value)}
                    rows={2}
                    style={{
                      width: '100%', boxSizing: 'border-box', fontFamily: 'Nunito Sans, sans-serif',
                      fontSize: 12, color: EJ.body, background: EJ.white, borderRadius: 12,
                      padding: '8px 12px', border: `1.5px solid ${EJ.border}`, outline: 'none', resize: 'none',
                    }}
                  />
                </div>
              ))}
            </div>
          </Card>

          {/* Revisión mensual */}
          <Card>
            <SectionHeader title="Revisión mensual — 6 preguntas de cierre" subtitle="Último viernes del mes · 45 minutos" />
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {[
                '¿Cuánto gané de verdad (ganancia neta, no facturamiento)?',
                '¿Cuál área tuvo el semáforo más rojo y cuál es la única acción para mejorarla?',
                '¿Qué funcionó bien y cómo lo repito el mes que viene?',
                '¿Ejecuté la rutina más del 80% de los días?',
                '¿Qué dinero dejé sobre la mesa (seguimientos no hechos, upsells no ofrecidos)?',
                'Si mi negocio siguiera igual 6 meses más, ¿estaría satisfecha?',
              ].map((q, i) => (
                <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                  <div style={{ width: 24, height: 24, borderRadius: '50%', background: EJ.cyanLight, color: EJ.cyanDark, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 700, fontFamily: 'Nunito, sans-serif', flexShrink: 0, marginTop: 10 }}>{i + 1}</div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 12, color: EJ.navy, fontFamily: 'Nunito Sans, sans-serif', fontWeight: 600, marginBottom: 4 }}>{q}</div>
                    <textarea rows={1} placeholder="Tu respuesta..." style={{ width: '100%', boxSizing: 'border-box', fontFamily: 'Nunito Sans, sans-serif', fontSize: 12, color: EJ.body, background: EJ.bgApp, borderRadius: 10, padding: '7px 12px', border: `1.5px solid ${EJ.border}`, outline: 'none', resize: 'none' }} />
                  </div>
                </div>
              ))}
            </div>
          </Card>
        </div>
      )}

      {/* PILAR 2 */}
      {activePilar === 'pilar2' && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          {/* 3 tipos de campaña */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
            {[
              {
                num: '1', nombre: 'Adquisición', emoji: '🎯', color: EJ.cyan, bg: EJ.cyanLight,
                desc: 'Atraer clientes nuevos · quien nunca te ha comprado',
                producto: 'El más fácil de probar',
                oferta: 'Regalo adicional o valor añadido — NUNCA descuento puro',
                canal: 'Instagram y Facebook + WhatsApp para cierre',
                duracion: '5 a 10 días',
              },
              {
                num: '2', nombre: 'Monetización', emoji: '💰', color: EJ.violet, bg: EJ.violetLight,
                desc: 'Vender más a quienes ya confían · clientes actuales',
                producto: 'Combos, packs, upsell y cross-sell',
                oferta: 'Exclusivo para mis clientes — nunca bajar precios',
                canal: 'WhatsApp directo + email',
                duracion: '7 a 14 días',
              },
              {
                num: '3', nombre: 'Activación', emoji: '🔁', color: EJ.pink, bg: EJ.pinkLight,
                desc: 'Reactivar clientes inactivos · 3-6 meses sin comprar',
                producto: 'Menciona su compra anterior específica',
                oferta: 'Mensaje personalizado con oferta de reincorporación',
                canal: 'WhatsApp personal · LinkedIn si aplica',
                duracion: '3 a 7 días',
              },
            ].map(c => (
              <Card key={c.num} style={{ borderTop: `4px solid ${c.color}` }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
                  <div style={{ width: 40, height: 40, borderRadius: '50%', background: c.bg, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20, flexShrink: 0 }}>{c.emoji}</div>
                  <div>
                    <div style={{ fontSize: 10, fontWeight: 700, color: c.color, textTransform: 'uppercase', letterSpacing: '0.06em', fontFamily: 'Nunito, sans-serif' }}>Campaña {c.num}</div>
                    <div style={{ fontSize: 16, fontWeight: 800, color: EJ.navy, fontFamily: 'Nunito, sans-serif' }}>{c.nombre}</div>
                  </div>
                </div>
                <p style={{ fontSize: 12, color: EJ.secondary, fontFamily: 'Nunito Sans, sans-serif', marginBottom: 14 }}>{c.desc}</p>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {[
                    { label: '📦 Producto', val: c.producto },
                    { label: '🎁 Oferta', val: c.oferta },
                    { label: '📣 Canal', val: c.canal },
                    { label: '⏱ Duración', val: c.duracion },
                  ].map((row, i) => (
                    <div key={i} style={{ background: c.bg, borderRadius: 10, padding: '8px 12px' }}>
                      <div style={{ fontSize: 10, fontWeight: 700, color: c.color, fontFamily: 'Nunito, sans-serif', textTransform: 'uppercase', letterSpacing: '0.04em' }}>{row.label}</div>
                      <div style={{ fontSize: 12, color: EJ.navy, fontFamily: 'Nunito Sans, sans-serif', marginTop: 2 }}>{row.val}</div>
                    </div>
                  ))}
                </div>
              </Card>
            ))}
          </div>

          {/* Checklist campaña + Palancas urgencia */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
            <Card>
              <SectionHeader title="Checklist antes del lanzamiento" subtitle="Los 5 elementos que no pueden faltar" />
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 20 }}>
                {[
                  { key: 'producto', label: '📦 Producto claro (uno solo)' },
                  { key: 'oferta',   label: '🎁 Oferta irresistible (el "por qué ahora" es obvio)' },
                  { key: 'urgencia', label: '⏰ Urgencia real (fecha o cupo definido)' },
                  { key: 'prueba',   label: '⭐ Prueba social (testimonio, foto, reseña)' },
                  { key: 'cta',      label: '📣 Una sola llamada a la acción' },
                ].map(item => (
                  <Checkbox key={item.key} checked={campCheck[item.key]} onChange={() => setCampCheck(p => ({...p, [item.key]: !p[item.key]}))} label={item.label} />
                ))}
              </div>
              <div style={{ borderTop: `1px solid ${EJ.border}`, paddingTop: 14 }}>
                <div style={{ fontSize: 12, fontWeight: 700, color: EJ.navy, fontFamily: 'Nunito, sans-serif', marginBottom: 8 }}>Durante la campaña</div>
                {[
                  { key: 'objetivo', label: 'Historia diaria publicada' },
                  { key: 'inicio',   label: 'Consultas respondidas en < 2 horas' },
                  { key: 'imagenes', label: 'Recordatorio enviado a mitad de campaña' },
                  { key: 'copy',     label: 'Ventas diarias registradas' },
                  { key: 'canales',  label: 'Seguimiento a quienes preguntaron y no compraron' },
                ].map(item => (
                  <Checkbox key={item.key} checked={campCheck[item.key]} onChange={() => setCampCheck(p => ({...p, [item.key]: !p[item.key]}))} label={item.label} style={{ marginBottom: 8 }} />
                ))}
              </div>
            </Card>

            <Card>
              <SectionHeader title="Las 6 palancas de urgencia" subtitle="Cómo convertir SIN bajar precios" />
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {[
                  { n: '1', label: 'Tiempo limitado real', desc: 'Fecha de cierre concreta y cumplida', color: EJ.cyan },
                  { n: '2', label: 'Cupos/unidades limitadas', desc: 'Cantidad específica y real', color: EJ.violet },
                  { n: '3', label: 'Valor añadido que desaparece', desc: 'Bonus que se elimina al vencer el plazo', color: EJ.pink },
                  { n: '4', label: 'Edición limitada', desc: 'Versión especial que no se repetirá', color: EJ.cyan },
                  { n: '5', label: 'Preventa con beneficio', desc: 'Precio o acceso especial por comprar antes', color: EJ.violet },
                  { n: '6', label: 'Acceso exclusivo VIP', desc: 'Solo para tu comunidad cercana', color: EJ.pink },
                ].map((p, i) => (
                  <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                    <div style={{ width: 24, height: 24, borderRadius: '50%', background: p.color, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 700, fontFamily: 'Nunito, sans-serif', flexShrink: 0 }}>{p.n}</div>
                    <div>
                      <div style={{ fontSize: 13, fontWeight: 700, color: EJ.navy, fontFamily: 'Nunito, sans-serif' }}>{p.label}</div>
                      <div style={{ fontSize: 11, color: EJ.secondary, fontFamily: 'Nunito Sans, sans-serif' }}>{p.desc}</div>
                    </div>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 16, background: EJ.pinkLight, borderRadius: 12, padding: '10px 14px' }}>
                <div style={{ fontSize: 11, fontWeight: 700, color: EJ.pink, fontFamily: 'Nunito, sans-serif', marginBottom: 2 }}>⚠️ Regla de oro</div>
                <div style={{ fontSize: 12, color: EJ.navy, fontFamily: 'Nunito Sans, sans-serif' }}>Nunca compitas por precio. Compite por valor.</div>
              </div>
            </Card>
          </div>
        </div>
      )}

      {/* PILAR 3 */}
      {activePilar === 'pilar3' && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          {/* Rutina semanal */}
          <Card>
            <SectionHeader title="Rutina semanal" subtitle="Foco de cada día — táchalo al completarlo" />
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12 }}>
              {semanal.map((d, i) => (
                <div
                  key={i}
                  onClick={() => setSemanal(prev => prev.map((x, j) => j === i ? {...x, done: !x.done} : x))}
                  style={{
                    padding: '18px 14px', borderRadius: 16, cursor: 'pointer',
                    background: d.done ? EJ.cyanLight : EJ.bgApp,
                    border: `1.5px solid ${d.done ? EJ.cyan : EJ.border}`,
                    textAlign: 'center', transition: 'all 0.2s',
                  }}
                >
                  <div style={{ fontSize: 22, marginBottom: 8 }}>{d.done ? '✅' : '○'}</div>
                  <div style={{ fontSize: 13, fontWeight: 800, color: EJ.navy, fontFamily: 'Nunito, sans-serif', marginBottom: 6 }}>{d.dia}</div>
                  <div style={{ fontSize: 11, color: EJ.secondary, fontFamily: 'Nunito Sans, sans-serif' }}>{d.foco}</div>
                </div>
              ))}
            </div>
          </Card>

          {/* 6 indicadores */}
          <Card>
            <SectionHeader title="Los 6 indicadores clave" subtitle="Revisión cada viernes · No más de 6, nunca menos" />
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
              {indicadores.map((ind, i) => (
                <div key={i} style={{ background: EJ.bgApp, borderRadius: 16, padding: '16px 18px', borderLeft: `4px solid ${ind.color}` }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 8 }}>
                    <div style={{ fontSize: 11, fontWeight: 700, color: EJ.muted, fontFamily: 'Nunito, sans-serif', textTransform: 'uppercase', letterSpacing: '0.04em' }}>{ind.frecuencia}</div>
                    <Badge variant="soft" style={{ fontSize: 10 }}>#{i + 1}</Badge>
                  </div>
                  <div style={{ fontSize: 13, fontWeight: 700, color: EJ.navy, fontFamily: 'Nunito, sans-serif', marginBottom: 4 }}>{ind.label}</div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 8 }}>
                    <div>
                      <div style={{ fontSize: 10, color: EJ.muted, fontFamily: 'Nunito Sans, sans-serif' }}>Actual</div>
                      <div style={{ fontSize: 20, fontWeight: 500, color: ind.color, fontFamily: 'JetBrains Mono, monospace' }}>{ind.valor}</div>
                    </div>
                    <div style={{ textAlign: 'right' }}>
                      <div style={{ fontSize: 10, color: EJ.muted, fontFamily: 'Nunito Sans, sans-serif' }}>Meta</div>
                      <div style={{ fontSize: 14, fontWeight: 500, color: EJ.navy, fontFamily: 'JetBrains Mono, monospace' }}>{ind.meta}</div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </Card>

          {/* Regla de oro + árbol */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 20 }}>
            <Card style={{ background: EJ.navy, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', minHeight: 200 }}>
              <div style={{ fontSize: 48, marginBottom: 12 }}>⚡</div>
              <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.6)', fontFamily: 'Nunito Sans, sans-serif', marginBottom: 8 }}>Regla de oro</div>
              <div style={{ fontSize: 20, fontWeight: 800, color: '#fff', fontFamily: 'Nunito, sans-serif', lineHeight: 1.3 }}>"1 acción de venta por día, todos los días."</div>
            </Card>
            <Card>
              <SectionHeader title="Bitácora del día" subtitle="¿Qué funcionó? ¿Qué no?" />
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                <Textarea label="✅ Lo que funcionó hoy" placeholder="Ej. El mensaje proactivo a María generó respuesta..." rows={2} />
                <Textarea label="❌ Lo que no funcionó" placeholder="Ej. No publiqué contenido a tiempo..." rows={2} />
                <Textarea label="🔔 Seguimientos pendientes" placeholder="Ej. Laura preguntó y no respondió — darle seguimiento mañana..." rows={2} />
              </div>
            </Card>
          </div>
        </div>
      )}
    </div>
  );
};

Object.assign(window, { RutinaScreen });