// ─── THEME PICKER ───
function ThemePicker({tema,setTema,onClose}){
  return(
    <div style={{position:"fixed",inset:0,zIndex:500,display:"flex",alignItems:"flex-start",justifyContent:"flex-end",padding:"60px 16px 0"}} onClick={onClose}>
      <div onClick={e=>e.stopPropagation()} style={{background:tema.card,border:`1px solid ${tema.border}`,borderRadius:16,padding:16,width:260,boxShadow:"0 8px 32px rgba(0,0,0,.6)",animation:"fadeIn .15s",maxHeight:"80vh",overflowY:"auto"}}>
        <div style={{fontWeight:800,fontSize:13,color:tema.text,marginBottom:12}}>🎨 Elegir tema</div>
        {Object.values(THEMES).map(t=>(
          <button key={t.id} onClick={()=>{setTema(t.id);onClose();}}
            style={{width:"100%",display:"flex",alignItems:"center",gap:10,padding:"10px 12px",borderRadius:10,marginBottom:6,cursor:"pointer",
              border:`2px solid ${tema.id===t.id?t.accent:tema.border}`,
              background:tema.id===t.id?`${t.accent}22`:tema.inp}}>
            <div style={{width:44,height:28,borderRadius:6,background:t.bg,border:`1px solid ${t.border}`,flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",gap:3,padding:"0 4px"}}>
              <div style={{width:10,height:10,borderRadius:"50%",background:t.accent}}></div>
              <div style={{width:10,height:10,borderRadius:"50%",background:t.accent2||t.blue}}></div>
              <div style={{width:10,height:10,borderRadius:"50%",background:t.green}}></div>
            </div>
            <div style={{flex:1,textAlign:"left"}}>
              <div style={{fontSize:12,fontWeight:700,color:tema.id===t.id?t.accent:tema.text,lineHeight:1.2}}>{t.nombre}</div>
              <div style={{fontSize:10,color:tema.muted,marginTop:2}}>{t.bg.startsWith("#f")||t.bg.startsWith("#e")?"Tema claro":"Tema oscuro"}</div>
            </div>
            {tema.id===t.id&&<span style={{fontSize:14,color:t.accent}}>✓</span>}
          </button>
        ))}
        <div style={{marginTop:8,paddingTop:8,borderTop:`1px solid ${tema.border}`,fontSize:10,color:tema.muted,textAlign:"center"}}>
          El tema se guarda por dispositivo
        </div>
      </div>
    </div>
  );
}