— Sección 05 / Pago

Confirma tu pedido.

// PAGO MANUAL · VERIFICACIÓN EN 30 MIN PROMEDIO

{Ic.check}01Carrito {step!=='form' && Ic.check}02Datos y pago 03Confirmación

{step==='form' && (

Dirección de envío

// Cobertura nacional · 24–72h

Dirección *

Estado *

Ciudad *

Código postal

Punto de referencia

Notas para el repartidor

</div>
              </div>
            </div>

<div className="form-card">
              <div className="head-row">
                <span className="hex">2</span>
                <h3>Método de pago manual</h3>
              </div>
              <p className="sub">// Adjunta tu comprobante · Verificamos en min.</p>

<div className="pay-options">
                <div className={`pay-opt ${pay==='transfer'?'active':''}`} onClick={()=>setPay('transfer')}>
                  <div className="ic-box">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="2" y="6" width="20" height="13" rx="2"/><path d="M2 11h20"/></svg>
                  </div>
                  <div><h4>Transferencia bancaria</h4><p>Bs · USD</p></div>
                  <div className="check">{Ic.check}</div>
                </div>
                <div className={`pay-opt ${pay==='mobile'?'active':''}`} onClick={()=>setPay('mobile')}>
                  <div className="ic-box">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="7" y="2" width="10" height="20" rx="2"/><path d="M11 18h2"/></svg>
                  </div>
                  <div><h4>Pago Móvil</h4><p>Mercantil · Banesco · BNC</p></div>
                  <div className="check">{Ic.check}</div>
                </div>
              </div>

{pay==='transfer' && (
                <div className="bank-info">
                  <h4>Datos para la transferencia</h4>
                  <ul>
                    <li><span>Banco</span><span>MERCANTIL · 0105</span></li>
                    <li><span>Beneficiario</span><span>DON JUAN SECURITY C.A.</span></li>
                    <li><span>RIF</span><span>J-50012345-6</span></li>
                    <li><span>Cuenta corriente</span><span>0105-1234-56-1234567890</span></li>
                  </ul>
                </div>
              )}
              {pay==='mobile' && (
                <div className="bank-info">
                  <h4>Datos para Pago Móvil</h4>
                  <ul>
                    <li><span>Banco</span><span>MERCANTIL · 0105</span></li>
                    <li><span>Cédula / RIF</span><span>J-50012345-6</span></li>
                    <li><span>Teléfono</span><span>0414-5550119</span></li>
                  </ul>
                </div>
              )}

<div className="form-grid" style={{marginBottom: 18}}>
                <div className="field"><label>Referencia de la operación <span className="req">*</span></label><input placeholder="00123456789"/></div>
                <div className="field"><label>Fecha del pago <span className="req">*</span></label><input type="date"/></div>
              </div>

<label style={{fontSize:12, fontWeight:600, color:'var(--ink-2)', display:'block', marginBottom:10}}>Comprobante de pago <span className="req">*</span></label>
              <label className={`upload ${file?'filled':''}`}>
                <input type="file" style={{display:'none'}} onChange={e=>setFile(e.target.files?.[0]?.name || 'comprobante.jpg')}/>
                <div className="ic">{file ? Ic.check : Ic.upload}</div>
                {!file && <h4>Arrastra tu comprobante aquí o haz click para subirlo</h4>}
                {file && <h4>{file}</h4>}
                <p>{file ? '// VERIFICAMOS EN MENOS DE 30 MIN' : '// JPG · PNG · PDF · HASTA 5MB'}</p>
              </label>
            </div>

<div style={{display:'flex', gap:10, justifyContent:'flex-end', flexWrap:'wrap', marginBottom: 40}}>
              <button className="btn btn-outline" onClick={()=>onNav('cart')}>← Volver al carrito</button>
              <button className="btn btn-outline" onClick={()=>setStep('error')} style={{color:'#B33A1F', borderColor:'#B33A1F'}}>Simular error</button>
              <button className="btn btn-primary" style={{padding:'12px 22px'}} onClick={()=>setStep('success')}>Confirmar pedido {Ic.arrow}</button>
            </div>
          </div>

<aside className="summary">
            <span className="ix-num">— Resumen</span>
            <h3>Tu pedido.</h3>
            {items.map((i, idx) => (
              <div className="item-mini" key={idx}>
                <div className="ph-wrap">
                  <img src="assets/product-camera.svg" alt=""/>
                  <span className="qty-badge">{i.qty}</span>
                </div>
                <div className="info">
                  <h4>{i.name}</h4>
                  <span>// {i.sku}</span>
                </div>
                <span className="price">${(i.price*i.qty).toFixed(2)}</span>
              </div>
            ))}
            <div className="totals">
              <div className="line"><span>Subtotal</span><span>${subtotal.toFixed(2)}</span></div>
              <div className="line muted"><span>Envío estimado</span><span>$8.50</span></div>
              <div className="line muted"><span>IVA (16%)</span><span>${iva.toFixed(2)}</span></div>
              <div className="line total-line"><span>TOTAL A PAGAR</span><span>${(subtotal+iva+8.5).toFixed(2)}</span></div>
            </div>
            <div style={{marginTop:14, padding:'14px', background:'var(--cream)', borderRadius:10, fontSize:12, color:'var(--ink-2)', lineHeight:1.5, display:'flex', gap:10}}>
              {Ic.shield}
              <span>Una vez confirmado tu comprobante de pago, te enviamos los productos al instante.</span>
            </div>
          </aside>
        </div>
        )}

{step==='success' && (
          <div className="p3-co-result">
            <div className="p3-co-card success">
              <div className="big-ic">{Ic.check}</div>
              <span className="ix-num">— Pedido #DJ-26-002847</span>
              <h2>Pago <em>confirmado.</em></h2>
              <p>Verificamos tu comprobante. Tu pedido entra a despacho en este instante.</p>
              <div className="detail-grid">
                <div><span>Total pagado</span><strong>${(subtotal+iva+8.5).toFixed(2)}</strong></div>
                <div><span>Productos</span><strong>{items.length} items</strong></div>
                <div><span>Envío estimado</span><strong>24–72hs</strong></div>
                <div><span>Notificación</span><strong>Email + WhatsApp</strong></div>
              </div>
              <div className="actions">
                <button className="btn btn-outline" onClick={()=>onNav('home')}>Ir al inicio</button>
                <button className="btn btn-primary" style={{padding:'12px 22px'}} onClick={()=>onNav('shop')}>Seguir comprando {Ic.arrow}</button>
              </div>
            </div>
          </div>
        )}

{step==='error' && (
          <div className="p3-co-result">
            <div className="p3-co-card error">
              <div className="big-ic">!</div>
              <span className="ix-num">— Pedido #DJ-26-002847 · Verificación pendiente</span>
              <h2>No pudimos validar tu <em>comprobante.</em></h2>
              <p>Los datos del pago no coinciden con la operación recibida. Revisa la referencia o vuelve a subir el comprobante.</p>
              <div className="reasons">
                <div><span>·</span> La referencia no coincide con ninguna operación recibida</div>
                <div><span>·</span> La fecha del comprobante difiere de la fecha registrada</div>
                <div><span>·</span> El monto pagado no cubre el total del pedido</div>
              </div>
              <div className="actions">
                <button className="btn btn-outline" onClick={()=>setStep('form')}>← Reintentar</button>
                <button className="btn btn-primary" style={{padding:'12px 22px'}}>{Ic.wa} Contactar por WhatsApp</button>
              </div>
            </div>
          </div>
        )}
      </main>
      <Footer onNav={onNav}/>
      <WAFloat/>
    </React.Fragment>
  );
};

// ============================================================
// 06 — AUTH
// ============================================================
const AuthScreen = ({ onNav }) => {
  const [mode, setMode] = useState('login');
  return (
    <React.Fragment>
      <style>{`
        .p3-auth { padding: 56px 0 90px; }
        .p3-auth .frame { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; display: grid; grid-template-columns: 1fr 1.05fr; }

.p3-auth .side { background: var(--forest-deep); color: var(--cream); padding: 48px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; }
        .p3-auth .side::after { content: ""; position: absolute; right: -150px; bottom: -150px; width: 460px; height: 460px; background: url('assets/logos/mark-green.png') center/contain no-repeat; opacity: 0.08; pointer-events: none; }
        .p3-auth .side .top { position: relative; }
        .p3-auth .side .top-strip { display: flex; justify-content: space-between; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgba(244,241,234,0.5); letter-spacing: 0.1em; margin-bottom: 36px; }
        .p3-auth .side .top-strip .pulse { color: var(--green); display: flex; align-items: center; gap: 7px; }
        .p3-auth .side .top-strip .pulse::before { content: ""; width: 6px; height: 6px; background: var(--green); border-radius: 50%; }
        .p3-auth .side .logo img { height: 32px; margin-bottom: 32px; }
        .p3-auth .side .ix-num { font-family: 'Fraunces', serif; font-style: italic; color: rgba(244,241,234,0.55); font-size: 15px; margin-bottom: 14px; display: block; }
        .p3-auth .side h2 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 44px; line-height: 1; letter-spacing: -0.025em; margin-bottom: 22px; }
        .p3-auth .side h2 em { font-style: italic; color: var(--green); }
        .p3-auth .side p { font-size: 14px; line-height: 1.55; color: rgba(244,241,234,0.7); max-width: 380px; margin-bottom: 24px; }
        .p3-auth .side ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
        .p3-auth .side ul li { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; color: rgba(244,241,234,0.88); }
        .p3-auth .side ul li svg { width: 16px; height: 16px; color: var(--green); flex-shrink: 0; margin-top: 2px; }

.p3-auth .side .stat-row { display: flex; gap: 0; position: relative; padding-top: 28px; border-top: 1px solid rgba(244,241,234,0.1); }
        .p3-auth .side .stat-row div { flex: 1; padding-right: 18px; border-right: 1px solid rgba(244,241,234,0.1); }
        .p3-auth .side .stat-row div:last-child { border-right: 0; }
        .p3-auth .side .stat-row div + div { padding-left: 18px; }
        .p3-auth .side .stat-row strong { display: block; font-family: 'Fraunces', serif; font-size: 30px; color: var(--green); letter-spacing: -0.02em; font-weight: 500; line-height: 1; margin-bottom: 4px; }
        .p3-auth .side .stat-row span { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: rgba(244,241,234,0.45); letter-spacing: 0.08em; }

.p3-auth .form-side { padding: 44px 48px; display: flex; flex-direction: column; justify-content: center; }
        .p3-auth .toggle { display: flex; background: var(--cream); padding: 4px; border-radius: 999px; width: fit-content; margin-bottom: 24px; }
        .p3-auth .toggle button { padding: 8px 20px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
        .p3-auth .toggle button.active { background: var(--paper); color: var(--forest); }
        .p3-auth .ix-num { font-family: 'Fraunces', serif; font-style: italic; color: var(--ink-3); font-size: 14px; margin-bottom: 8px; display: block; }
        .p3-auth h1 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 34px; letter-spacing: -0.025em; color: var(--forest-deep); margin-bottom: 6px; }
        .p3-auth h1 em { font-style: italic; color: var(--green-deep); }
        .p3-auth .lede { font-size: 13px; color: var(--ink-3); margin-bottom: 22px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em; }
        .p3-auth .google-btn {
          display: inline-flex; align-items: center; justify-content: center; gap: 10px;
          padding: 12px 16px; width: 100%;
          background: var(--paper); border: 1px solid var(--line);
          border-radius: 999px; font-size: 13px; font-weight: 600;
          margin-bottom: 16px; cursor: pointer; transition: all 0.15s;
          white-space: nowrap;
        }
        .p3-auth .google-btn:hover { border-color: var(--forest); }
        .p3-auth .google-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
        .p3-auth .divider { display: flex; align-items: center; gap: 14px; margin: 14px 0 20px; font-size: 11px; color: var(--ink-3); letter-spacing: 0.1em; font-family: 'JetBrains Mono', monospace; }
        .p3-auth .divider::before, .p3-auth .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
        .p3-auth .options-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; margin-bottom: 18px; gap: 10px; flex-wrap: wrap; }
        .p3-auth .options-row a { color: var(--forest); font-weight: 600; }
        .p3-auth .check-line { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
        .p3-auth .check-line input { width: 14px; height: 14px; accent-color: var(--forest); }
        .p3-auth .switch-line { text-align: center; font-size: 12px; color: var(--ink-3); margin-top: 18px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em; }
        .p3-auth .switch-line a { color: var(--forest); font-weight: 600; }
        .p3-auth .guest-link { text-align: center; margin-top: 10px; font-size: 12px; }
        .p3-auth .guest-link a { color: var(--ink-3); }
        .p3-auth .btn.btn-block { padding: 13px 22px; font-size: 13px; }
      `}</style>
      <Header active="auth" onNav={onNav}/>
      <main className="container p3-auth">
        <div className="frame">
          <div className="side">
            <div className="top">
              <div className="logo"><img src="assets/logos/horizontal-white.png" alt=""/></div>
              <span className="ix-num">— Sección 06 / Acceso</span>
              <h2>Tu cuenta,<br/>la <em>llave maestra</em><br/>de tu seguridad.</h2>
              <p>Regístrate una vez y accede a precios mayoristas, historial de compras, pedidos guardados y atención prioritaria por WhatsApp.</p>
              <ul>
                <li>{Ic.check}<span>Carrito y wishlist sincronizados en todos tus dispositivos</span></li>
                <li>{Ic.check}<span>Seguimiento de pedidos en tiempo real</span></li>
                <li>{Ic.check}<span>Soporte técnico prioritario por WhatsApp</span></li>
                <li>{Ic.check}<span>Descuentos exclusivos en promociones</span></li>
              </ul>
            </div>
            <div className="stat-row">
              <div><strong>+800</strong><span>PRODUCTOS</span></div>
              <div><strong>3.2k</strong><span>CLIENTES</span></div>
              <div><strong>24h</strong><span>ENVÍO PROMEDIO</span></div>
            </div>
          </div>

<div className="form-side">
            <div className="toggle">
              <button className={mode==='login'?'active':''} onClick={()=>setMode('login')}>Iniciar sesión</button>
              <button className={mode==='register'?'active':''} onClick={()=>setMode('register')}>Crear cuenta</button>
            </div>

{mode==='login' ? (
              <React.Fragment>
                <span className="ix-num">— 01 / Login</span>
                <h1>Bienvenido de <em>vuelta.</em></h1>
                <p className="lede">// INGRESA TUS CREDENCIALES</p>

<button className="google-btn">{Ic.google}<span>Continuar con Google</span></button>
                <div className="divider">O CON TU EMAIL</div>

<div className="field"><label>Email</label><input type="email" placeholder="stephanie@ejemplo.com"/></div>
                <div className="field"><label>Contraseña</label><input type="password" placeholder="••••••••"/></div>

<div className="options-row">
                  <label className="check-line"><input type="checkbox" defaultChecked/>Recordarme</label>
                  <a>¿Olvidaste tu clave?</a>
                </div>

<button className="btn btn-primary btn-block" onClick={()=>onNav('home')}>Iniciar sesión {Ic.arrow}</button>

<div className="switch-line">// ¿NO TIENES CUENTA? <a onClick={()=>setMode('register')}>Crear una</a></div>
              </React.Fragment>
            ) : (
              <React.Fragment>
                <span className="ix-num">— 02 / Registro</span>
                <h1>Crea tu <em>cuenta.</em></h1>
                <p className="lede">// MENOS DE UN MINUTO</p>

<button className="google-btn">{Ic.google}<span>Registrarme con Google</span></button>
                <div className="divider">O CON TUS DATOS</div>

<div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:'0 14px'}}>
                  <div className="field"><label>Nombre</label><input placeholder="Stephanie"/></div>
                  <div className="field"><label>Apellido</label><input placeholder="Castillo"/></div>
                  <div className="field" style={{gridColumn:'span 2'}}><label>Email</label><input placeholder="stephanie@ejemplo.com"/></div>
                  <div className="field"><label>Cédula / DNI</label><input placeholder="V-12345678"/></div>
                  <div className="field"><label>Teléfono</label><input placeholder="+58 414…"/></div>
                  <div className="field" style={{gridColumn:'span 2'}}><label>Contraseña</label><input type="password" placeholder="Mín 8 caracteres"/></div>
                </div>

<label className="check-line" style={{margin:'4px 0 18px'}}>
                  <input type="checkbox"/>
                  <span style={{fontSize:13, color:'var(--ink-2)'}}>Acepto los términos y la política de privacidad</span>
                </label>

<button className="btn btn-green btn-block">Crear cuenta {Ic.arrow}</button>
                <div className="switch-line">// ¿YA TIENES CUENTA? <a onClick={()=>setMode('login')}>Iniciar sesión</a></div>
              </React.Fragment>
            )}
          </div>
        </div>
      </main>
      <Footer onNav={onNav}/>
      <WAFloat/>
    </React.Fragment>
  );
};

// ============================================================
// 07 — TECHNICIAN PORTAL (3 sub-views: directorio público / login / perfil)
// ============================================================
const TechScreen = ({ onNav }) => {
  const [view, setView] = useState('directory');
  return (
    <React.Fragment>
      <style>{`
        .p3-tech-header { background: var(--forest-deep); color: var(--cream); padding: 14px 0; border-bottom: 1px solid var(--green); }
        .p3-tech-header .row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
        .p3-tech-header .left { display: flex; align-items: center; gap: 18px; }
        .p3-tech-header .logo img { height: 28px; }
        .p3-tech-header .badge-sub { padding: 4px 12px; background: var(--green); color: var(--forest-deep); border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; font-family: 'JetBrains Mono', monospace; }
        .p3-tech-header nav { display: flex; gap: 2px; }
        .p3-tech-header nav a { padding: 8px 14px; font-size: 13px; color: rgba(244,241,234,0.7); border-radius: 999px; cursor: pointer; }
        .p3-tech-header nav a:hover { color: var(--green); }
        .p3-tech-header nav a.active { color: var(--forest-deep); background: var(--green); }
        .p3-tech-header .domain { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--green); letter-spacing: 0.05em; display: flex; align-items: center; gap: 8px; }
        .p3-tech-header .domain::before { content: ""; width: 6px; height: 6px; background: var(--green); border-radius: 50%; }

/* ========== DIRECTORY ========== */
        .p3-tech-dir-hero { padding: 70px 0 60px; background: var(--cream); position: relative; overflow: hidden; }
        .p3-tech-dir-hero::after { content: ""; position: absolute; right: -200px; top: -100px; width: 580px; height: 580px; background: url('assets/logos/mark-green.png') center/contain no-repeat; opacity: 0.06; pointer-events: none; }
        .p3-tech-dir-hero .container { position: relative; }
        .p3-tech-dir-hero .ix-num { font-family: 'Fraunces', serif; font-style: italic; color: var(--ink-3); font-size: 16px; margin-bottom: 14px; display: block; }
        .p3-tech-dir-hero h1 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 64px; line-height: 0.95; letter-spacing: -0.03em; color: var(--forest-deep); max-width: 820px; margin-bottom: 22px; }
        .p3-tech-dir-hero h1 em { font-style: italic; color: var(--green-deep); }
        .p3-tech-dir-hero .lede { font-size: 16px; line-height: 1.55; color: var(--ink-2); max-width: 560px; margin-bottom: 30px; }
        .p3-tech-dir-hero .access { display: flex; gap: 10px; flex-wrap: wrap; }

.p3-tech-filters { padding: 24px 0; background: var(--paper); border-bottom: 1px solid var(--line); }
        .p3-tech-filters .row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr auto; gap: 12px; align-items: end; }
        .p3-tech-filters .field { margin: 0; }
        .p3-tech-filters .field label { font-size: 11px; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); }
        .p3-tech-filters .field input, .p3-tech-filters .field select { padding: 11px 14px; font-size: 13px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }
        .p3-tech-filters .search-field { position: relative; }
        .p3-tech-filters .search-field svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--ink-3); }
        .p3-tech-filters .search-field input { padding-left: 38px; }

.p3-tech-list { padding: 32px 0 90px; background: var(--paper); }
        .p3-tech-list .head-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
        .p3-tech-list .head-row .count { font-size: 13px; color: var(--ink-2); }
        .p3-tech-list .head-row .count strong { color: var(--forest); font-weight: 700; font-family: 'JetBrains Mono', monospace; }
        .p3-tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
        .p3-tech-card {
          background: var(--paper); border: 1px solid var(--line);
          border-radius: 16px; padding: 24px;
          display: flex; flex-direction: column; gap: 14px;
          transition: all 0.2s;
        }
        .p3-tech-card:hover {
          border-color: var(--forest);
          transform: translateY(-2px);
          box-shadow: 0 18px 38px -18px rgba(14,51,38,0.2);
        }
        .p3-tech-card .top { display: flex; gap: 14px; }
        .p3-tech-card .av {
          width: 60px; height: 60px;
          background: var(--forest-deep); color: var(--green);
          font-family: 'Fraunces', serif; font-weight: 500; font-size: 18px;
          flex-shrink: 0; display: flex; align-items: center; justify-content: center;
          clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
        }
        .p3-tech-card .top h4 { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 500; color: var(--forest-deep); letter-spacing: -0.02em; line-height: 1.1; }
        .p3-tech-card .top .city { font-size: 12px; color: var(--ink-3); margin-top: 4px; display: flex; align-items: center; gap: 4px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em; }
        .p3-tech-card .top .city svg { width: 12px; height: 12px; }
        .p3-tech-card .status-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
        .p3-tech-card .status-row .badge-avail { padding: 4px 10px; background: rgba(141, 193, 73, 0.15); color: var(--green-deep); font-size: 11px; font-weight: 600; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; }
        .p3-tech-card .status-row .badge-avail::before { content:""; width: 6px; height: 6px; background: var(--green-deep); border-radius: 50%; }
        .p3-tech-card .status-row .badge-busy { padding: 4px 10px; background: var(--cream); color: var(--ink-3); font-size: 11px; font-weight: 600; border-radius: 999px; }
        .p3-tech-card .stars { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-2); }
        .p3-tech-card .stars svg { color: var(--green-deep); width: 13px; height: 13px; }
        .p3-tech-card .specs { display: flex; gap: 6px; flex-wrap: wrap; }
        .p3-tech-card .specs span { font-size: 11px; padding: 4px 10px; background: var(--cream); border-radius: 999px; color: var(--ink-2); }
        .p3-tech-card .ctas { display: flex; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
        .p3-tech-card .ctas .btn { flex: 1; padding: 10px 12px; font-size: 12px; }

/* ========== LOGIN ========== */
        .p3-tech-auth { padding: 70px 0 90px; background: var(--paper); }
        .p3-tech-auth .frame {
          max-width: 480px; margin: 0 auto;
          background: var(--cream); border-radius: 18px; padding: 44px 48px;
        }
        .p3-tech-auth .ix-num { font-family: 'Fraunces', serif; font-style: italic; color: var(--ink-3); font-size: 14px; margin-bottom: 8px; display: block; }
        .p3-tech-auth h1 { font-family: 'Fraunces', serif; font-size: 30px; font-weight: 500; color: var(--forest-deep); margin-bottom: 6px; letter-spacing: -0.025em; }
        .p3-tech-auth h1 em { font-style: italic; color: var(--green-deep); }
        .p3-tech-auth .lede { font-size: 12px; color: var(--ink-3); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em; margin-bottom: 22px; }
        .p3-tech-auth .toggle { display: flex; background: var(--paper); border-radius: 999px; padding: 4px; margin-bottom: 24px; }
        .p3-tech-auth .toggle button { flex: 1; padding: 9px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
        .p3-tech-auth .toggle button.active { background: var(--forest-deep); color: var(--paper); }
        .p3-tech-auth .google-btn {
          display: inline-flex; align-items: center; justify-content: center; gap: 10px;
          padding: 12px 16px; width: 100%; background: var(--paper); border: 1px solid var(--line);
          border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; margin-bottom: 16px;
          white-space: nowrap;
        }
        .p3-tech-auth .google-btn:hover { border-color: var(--forest); }
        .p3-tech-auth .google-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
        .p3-tech-auth .divider { display: flex; align-items: center; gap: 14px; margin: 14px 0 20px; font-size: 10px; color: var(--ink-3); letter-spacing: 0.1em; font-family: 'JetBrains Mono', monospace; }
        .p3-tech-auth .divider::before, .p3-tech-auth .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
        .p3-tech-auth .options-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; margin-bottom: 22px; gap: 10px; flex-wrap: wrap; }
        .p3-tech-auth .options-row a { color: var(--forest); font-weight: 600; }
        .p3-tech-auth .check-line { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
        .p3-tech-auth .note { text-align: center; margin-top: 18px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; }

/* ========== PROFILE ========== */
        .p3-tech-prof-section { padding: 32px 0 90px; background: var(--paper); }
        .p3-tech-profile { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 40px; }
        .p3-tech-profile .top { display: flex; gap: 24px; padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--line); align-items: center; flex-wrap: wrap; }
        .p3-tech-profile .avatar { width: 96px; height: 96px; background: var(--cream); padding: 14px; border: 3px solid var(--forest-deep); flex-shrink: 0; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); display: flex; align-items: center; justify-content: center; }
        .p3-tech-profile .avatar img { width: 100%; height: 100%; object-fit: contain; color: var(--forest-deep); }
        .p3-tech-profile .top .ix-num { font-family: 'Fraunces', serif; font-style: italic; color: var(--ink-3); font-size: 13px; display: block; margin-bottom: 4px; }
        .p3-tech-profile .top h2 { font-family: 'Fraunces', serif; font-size: 36px; font-weight: 500; letter-spacing: -0.025em; margin-bottom: 6px; color: var(--forest-deep); }
        .p3-tech-profile .top h2 em { font-style: italic; color: var(--green-deep); }
        .p3-tech-profile .top .meta { font-size: 12px; color: var(--ink-3); display: flex; gap: 16px; flex-wrap: wrap; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em; }
        .p3-tech-profile .top .meta span { display: inline-flex; align-items: center; gap: 6px; }
        .p3-tech-profile .top .meta .verified { color: var(--green-deep); }
        .p3-tech-profile .top .meta svg { width: 13px; height: 13px; }

.p3-tech-avail-toggle {
          margin-left: auto;
          display: flex; align-items: center; gap: 12px;
          background: var(--cream); padding: 8px 14px; border-radius: 999px;
        }
        .p3-tech-avail-toggle .switch { width: 38px; height: 22px; background: var(--green-deep); border-radius: 999px; position: relative; cursor: pointer; }
        .p3-tech-avail-toggle .switch::after { content:""; position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; background: var(--paper); border-radius: 50%; transition: all 0.2s; }
        .p3-tech-avail-toggle.off .switch { background: var(--ink-4); }
        .p3-tech-avail-toggle.off .switch::after { left: 2px; right: auto; }
        .p3-tech-avail-toggle .lbl { font-size: 13px; font-weight: 600; color: var(--forest-deep); }

.p3-tech-approval {
          padding: 16px 20px;
          background: rgba(141, 193, 73, 0.12);
          border: 1px solid var(--line);
          border-left: 3px solid var(--green-deep);
          border-radius: 12px;
          display: flex; gap: 14px; align-items: center;
          margin-bottom: 28px;
        }
        .p3-tech-approval .ic { width: 36px; height: 36px; background: var(--forest-deep); color: var(--green); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .p3-tech-approval .ic svg { width: 18px; height: 18px; }
        .p3-tech-approval h4 { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 500; color: var(--forest-deep); letter-spacing: -0.01em; }
        .p3-tech-approval p { font-size: 12px; color: var(--ink-2); margin-top: 2px; }

.p3-tech-profile h3 { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 500; color: var(--forest-deep); margin-bottom: 16px; letter-spacing: -0.02em; }
        .p3-tech-profile .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; margin-bottom: 32px; }
        .p3-tech-profile .field { margin-bottom: 0; }
        .p3-tech-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
        .p3-tech-pills .chip { padding: 6px 14px; background: var(--forest-deep); color: var(--green); border-radius: 999px; font-size: 12px; font-weight: 600; }
        .p3-tech-pills .add { padding: 6px 14px; background: var(--paper); border: 1px dashed var(--line); border-radius: 999px; font-size: 12px; color: var(--ink-3); }
        .p3-tech-profile .actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); flex-wrap: wrap; }
      `}</style>

<header className="p3-tech-header">
        <div className="container">
          <div className="row">
            <div className="left">
              <a className="logo" onClick={()=>onNav('home')}><img src="assets/logos/horizontal-white.png" alt=""/></a>
              <span className="badge-sub">PORTAL TÉCNICOS</span>
            </div>
            <nav>
              <a className={view==='directory'?'active':''} onClick={()=>setView('directory')}>Directorio</a>
              <a className={view==='login'?'active':''} onClick={()=>setView('login')}>Acceso técnicos</a>
              <a className={view==='profile'?'active':''} onClick={()=>setView('profile')}>Mi perfil</a>
            </nav>
            <span className="domain">tecnicos.donjuansecurity.com</span>
          </div>
        </div>
      </header>

{/* === DIRECTORY === */}
      {view==='directory' && (
        <React.Fragment>
          <section className="p3-tech-dir-hero">
            <div className="container">
              <span className="ix-num">— Sección 07 / Directorio público</span>
              <h1>Encuentra al <em>técnico instalador</em> de tu ciudad.</h1>
              <p className="lede">Listado público de técnicos certificados Don Juan Security. Filtra por ciudad y especialidad, contáctalos directamente por WhatsApp y coordina tu instalación.</p>
              <div className="access">
                <button className="btn btn-primary" onClick={()=>setView('login')}>¿Eres técnico? Regístrate {Ic.arrow}</button>
                <button className="btn btn-outline" onClick={()=>setView('login')}>Iniciar sesión</button>
              </div>
            </div>
          </section>

<section className="p3-tech-filters">
            <div className="container">
              <div className="row">
                <div className="field search-field">
                  <label>Buscar</label>
                  <div style={{position:'relative'}}>{Ic.search}<input placeholder="Nombre, especialidad…"/></div>
                </div>
                <div className="field"><label>Ciudad</label><select><option>Todas las ciudades</option><option>Ciudad Bolívar</option><option>Puerto Ordaz</option><option>Caracas</option><option>Maracay</option><option>Valencia</option><option>Maracaibo</option><option>San Felipe</option></select></div>
                <div className="field"><label>Especialidad</label><select><option>Todas</option><option>CCTV</option><option>Motores</option><option>Alarmas</option><option>Accesos</option><option>Domótica</option></select></div>
                <div className="field"><label>Disponibilidad</label><select><option>Cualquiera</option><option>Disponibles ahora</option></select></div>
                <button className="btn btn-primary">Aplicar</button>
              </div>
            </div>
          </section>

<section className="container p3-tech-list">
            <div className="head-row">
              <div className="count">Mostrando <strong>1–9</strong> de <strong>34</strong> técnicos certificados</div>
              <select style={{padding:'9px 14px', background:'var(--paper)', border:'1px solid var(--line)', borderRadius:8, fontSize:12, color:'var(--ink)'}}>
                <option>Mejor calificados</option><option>Más cercanos</option><option>Más experiencia</option>
              </select>
            </div>
            <div className="p3-tech-grid">
              {[
                { name:'Carlos Méndez', city:'Ciudad Bolívar', rating:4.8, jobs:47, specs:['CCTV','Motores','Alarmas'], avail:true, initials:'CM' },
                { name:'María Rodríguez', city:'Caracas', rating:4.9, jobs:62, specs:['CCTV','Domótica','Accesos'], avail:true, initials:'MR' },
                { name:'José Hernández', city:'Maracay', rating:4.6, jobs:28, specs:['Motores','Alarmas'], avail:false, initials:'JH' },
                { name:'Andrés Pérez', city:'Valencia', rating:4.7, jobs:39, specs:['CCTV','Accesos'], avail:true, initials:'AP' },
                { name:'Luisa Suárez', city:'Maracaibo', rating:4.8, jobs:51, specs:['CCTV','Domótica'], avail:true, initials:'LS' },
                { name:'Roberto Salazar', city:'Barquisimeto', rating:4.5, jobs:22, specs:['Motores','CCTV'], avail:false, initials:'RS' },
                { name:'Francisco García', city:'Puerto La Cruz', rating:4.7, jobs:33, specs:['CCTV','Accesos'], avail:true, initials:'FG' },
                { name:'Patricia Núñez', city:'San Felipe', rating:4.9, jobs:44, specs:['CCTV','Domótica'], avail:true, initials:'PN' },
                { name:'Daniel Castro', city:'Ciudad Bolívar', rating:4.6, jobs:31, specs:['CCTV','Alarmas'], avail:true, initials:'DC' },
              ].map((t, i) => (
                <div className="p3-tech-card" key={i}>
                  <div className="top">
                    <div className="av">{t.initials}</div>
                    <div style={{flex:1}}>
                      <h4>{t.name}</h4>
                      <div className="city">{Ic.pin}{t.city}</div>
                      <div className="status-row">
                        {t.avail
                          ? <span className="badge-avail">Disponible</span>
                          : <span className="badge-busy">Ocupado</span>}
                      </div>
                    </div>
                  </div>
                  <div className="specs">{t.specs.map((s, j) => <span key={j}>{s}</span>)}</div>
                </div>
              ))}
            </div>
          </section>
        </React.Fragment>
      )}

{/* === LOGIN === */}
      {view==='login' && (
        <section className="p3-tech-auth">
          <div className="container">
            <div className="frame">
              <span className="ix-num">— Acceso técnicos</span>
              <h1>Portal de <em>técnicos.</em></h1>
              <p className="lede">// INICIA SESIÓN O REGÍSTRATE</p>

<div className="toggle">
                <button className="active">Iniciar sesión</button>
                <button>Crear cuenta</button>
              </div>

<button className="google-btn">{Ic.google}<span>Continuar con Google</span></button>

<div className="divider">O CON EMAIL</div>

<div className="field"><label>Email</label><input placeholder="tecnico@ejemplo.com"/></div>
              <div className="field"><label>Contraseña</label><input type="password" placeholder="••••••••"/></div>

<div className="options-row">
                <label className="check-line"><input type="checkbox" defaultChecked style={{accentColor:'var(--forest)'}}/>Recordarme</label>
                <a>¿Olvidaste tu clave?</a>
              </div>

<button className="btn btn-primary btn-block" style={{padding:'12px 22px'}} onClick={()=>setView('profile')}>Ingresar al portal</button>

<p className="note">// CUENTA DEBE ESTAR APROBADA POR ADMIN PARA APARECER EN EL DIRECTORIO</p>
            </div>
          </div>
        </section>
      )}

{/* === PROFILE === */}
      {view==='profile' && (
        <section className="container p3-tech-prof-section">
          <div className="p3-tech-profile">
            <div className="top">
              <div className="avatar"><img src="assets/product-camera.svg" alt=""/></div>
              <div>
                <span className="ix-num">— Perfil 0214</span>
                <h2>Carlos <em>Méndez.</em></h2>
                <div className="meta">
                  <span className="verified">{Ic.check}APROBADO · 12 MAR 2026</span>
                  <span>{Ic.pin}CIUDAD BOLÍVAR · PTO ORDAZ</span>
                </div>
              </div>
              <div className="p3-tech-avail-toggle">
                <span className="lbl">Disponible</span>
                <span className="switch"></span>
              </div>
            </div>

<div className="p3-tech-approval">
              <div className="ic">{Ic.check}</div>
              <div>
                <h4>Estado: Aprobado por administración</h4>
                <p>Apareces en el directorio público y los clientes te pueden contactar por WhatsApp.</p>
              </div>
            </div>

<h3>Información de contacto</h3>
            <div className="grid">
              <div className="field"><label>Nombre completo</label><input defaultValue="Carlos Antonio Méndez Pérez"/></div>
              <div className="field"><label>Documento de identidad</label><input defaultValue="V-15.234.788"/></div>
              <div className="field"><label>Teléfono / WhatsApp</label><input defaultValue="+58 414 555 7821"/></div>
              <div className="field"><label>Email</label><input defaultValue="carlos.mendez@gmail.com"/></div>
              <div className="field"><label>Ciudad principal</label><input defaultValue="Ciudad Bolívar"/></div>
              <div className="field"><label>Zona de cobertura</label><input defaultValue="Bolívar · Anzoátegui · Monagas"/></div>
              <div className="field"><label>Años de experiencia</label><input defaultValue="12 años"/></div>
              <div className="field"><label>Tarifa visita técnica (USD)</label><input defaultValue="$25"/></div>
            </div>

<h3>Especialidades</h3>
            <div className="p3-tech-pills">
              <span className="chip">Cámaras CCTV</span>
              <span className="chip">Motores y portones</span>
              <span className="chip">Alarmas e intrusión</span>
              <span className="chip">Control de accesos</span>
              <span className="add">+ Agregar especialidad</span>
            </div>

<h3>Documentación</h3>
            <div className="grid">
              <div className="field"><label>Foto de perfil</label><input value="foto-perfil.jpg" readOnly/></div>
              <div className="field"><label>Documento (frente y dorso)</label><input value="cedula.pdf · 2 archivos" readOnly/></div>
              <div className="field"><label>Certificaciones técnicas</label><input value="cert-cctv-2024.pdf, cert-motores.pdf" readOnly/></div>
              <div className="field"><label>RIF (si aplica)</label><input defaultValue=""/></div>
            </div>

<div className="actions">
              <button className="btn btn-outline" onClick={()=>setView('directory')}>Cerrar sesión</button>
              <button className="btn btn-primary" style={{padding:'11px 22px'}}>Guardar cambios</button>
            </div>
          </div>
        </section>
      )}

<Footer onNav={onNav}/>
      <WAFloat/>
    </React.Fragment>
  );
};

window.CheckoutScreen = CheckoutScreen;
window.AuthScreen = AuthScreen;
window.TechScreen = TechScreen;