// Rumbo — Icon Library · Lucide-style inline SVG
// Paths from lucide.dev (ISC license) · stroke 1.75 default

const Icon = ({ name, size = 20, color = 'currentColor', strokeWidth = 1.5 }) => {
  const p = { stroke: color, strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round', fill: 'none' };

  const ICONS = {
    /* ── Navigation ─────────────────────────── */
    home: <><path {...p} d="M3 9.5 12 3l9 6.5V20a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z"/><path {...p} d="M9 21V12h6v9"/></>,
    wallet: <><rect {...p} x="2" y="5" width="20" height="15" rx="2"/><path {...p} d="M2 10h20"/><circle fill={color} r="1" cx="16.5" cy="14.5"/></>,
    list: <><line {...p} x1="9" y1="6" x2="21" y2="6"/><line {...p} x1="9" y1="12" x2="21" y2="12"/><line {...p} x1="9" y1="18" x2="21" y2="18"/><circle fill={color} r="1.2" cx="3.5" cy="6"/><circle fill={color} r="1.2" cx="3.5" cy="12"/><circle fill={color} r="1.2" cx="3.5" cy="18"/></>,
    pieChart: <><path {...p} d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path {...p} d="M22 12A10 10 0 0 0 12 2v10z"/></>,
    chartBar: <><rect {...p} x="3" y="11" width="4" height="9" rx="1"/><rect {...p} x="10" y="5" width="4" height="15" rx="1"/><rect {...p} x="17" y="2" width="4" height="18" rx="1"/><line {...p} x1="1" y1="21" x2="23" y2="21"/></>,
    calendar: <><rect {...p} x="3" y="4" width="18" height="18" rx="2"/><line {...p} x1="16" y1="2" x2="16" y2="6"/><line {...p} x1="8" y1="2" x2="8" y2="6"/><line {...p} x1="3" y1="10" x2="21" y2="10"/></>,
    settings: <><path {...p} d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.38a2 2 0 0 0-.73-2.73l-.15-.09a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle {...p} cx="12" cy="12" r="3"/></>,
    compass: <><circle {...p} cx="12" cy="12" r="10"/><polygon {...p} points="16.24,7.76 14.12,14.12 7.76,16.24 9.88,9.88" fill={color}/></>,
    moreH:   <><circle {...p} cx="12" cy="12" r="1" fill={color}/><circle {...p} cx="19" cy="12" r="1" fill={color}/><circle {...p} cx="5" cy="12" r="1" fill={color}/></>,

    /* ── Actions ─────────────────────────────── */
    plus:      <><line {...p} x1="12" y1="5" x2="12" y2="19"/><line {...p} x1="5" y1="12" x2="19" y2="12"/></>,
    x:         <><line {...p} x1="18" y1="6" x2="6" y2="18"/><line {...p} x1="6" y1="6" x2="18" y2="18"/></>,
    edit:      <><path {...p} d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path {...p} d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4z"/></>,
    trash:     <><polyline {...p} points="3 6 5 6 21 6"/><path {...p} d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6m3 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/><line {...p} x1="10" y1="11" x2="10" y2="17"/><line {...p} x1="14" y1="11" x2="14" y2="17"/></>,
    download:  <><path {...p} d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline {...p} points="7 10 12 15 17 10"/><line {...p} x1="12" y1="15" x2="12" y2="3"/></>,
    upload:    <><path {...p} d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline {...p} points="17 8 12 3 7 8"/><line {...p} x1="12" y1="3" x2="12" y2="15"/></>,
    refresh:   <><path {...p} d="M3 12a9 9 0 0 1 15.9-5.7L21 8m-18 8 2.1-2.3A9 9 0 0 0 21 12"/><polyline {...p} points="21 3 21 8 16 8"/><polyline {...p} points="3 21 3 16 8 16"/></>,
    search:    <><circle {...p} cx="11" cy="11" r="8"/><line {...p} x1="21" y1="21" x2="16.65" y2="16.65"/></>,
    filter:    <><polygon {...p} points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></>,
    copy:      <><rect {...p} x="9" y="9" width="13" height="13" rx="2"/><path {...p} d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></>,

    /* ── Arrows & chevrons ───────────────────── */
    arrowUp:      <><line {...p} x1="12" y1="19" x2="12" y2="5"/><polyline {...p} points="5 12 12 5 19 12"/></>,
    arrowDown:    <><line {...p} x1="12" y1="5" x2="12" y2="19"/><polyline {...p} points="19 12 12 19 5 12"/></>,
    arrowLeft:    <><line {...p} x1="19" y1="12" x2="5" y2="12"/><polyline {...p} points="12 19 5 12 12 5"/></>,
    arrowRight:   <><line {...p} x1="5" y1="12" x2="19" y2="12"/><polyline {...p} points="12 5 19 12 12 19"/></>,
    chevronDown:  <polyline {...p} points="6 9 12 15 18 9"/>,
    chevronUp:    <polyline {...p} points="18 15 12 9 6 15"/>,
    chevronRight: <polyline {...p} points="9 6 15 12 9 18"/>,
    chevronLeft:  <polyline {...p} points="15 18 9 12 15 6"/>,

    /* ── Status & alerts ────────────────────── */
    checkCircle:    <><path {...p} d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline {...p} points="22 4 12 14.01 9 11.01"/></>,
    alertTriangle:  <><path {...p} d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line {...p} x1="12" y1="9" x2="12" y2="13"/><line {...p} x1="12" y1="17" x2="12.01" y2="17"/></>,
    alertCircle:    <><circle {...p} cx="12" cy="12" r="10"/><line {...p} x1="12" y1="8" x2="12" y2="12"/><line {...p} x1="12" y1="16" x2="12.01" y2="16"/></>,
    info:           <><circle {...p} cx="12" cy="12" r="10"/><line {...p} x1="12" y1="16" x2="12" y2="12"/><line {...p} x1="12" y1="8" x2="12.01" y2="8"/></>,
    bell:           <><path {...p} d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path {...p} d="M13.73 21a2 2 0 0 1-3.46 0"/></>,

    /* ── Finance ─────────────────────────────── */
    creditCard:   <><rect {...p} x="1" y="4" width="22" height="16" rx="2"/><line {...p} x1="1" y1="10" x2="23" y2="10"/></>,
    trending:     <><polyline {...p} points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline {...p} points="17 6 23 6 23 12"/></>,
    trendingDown: <><polyline {...p} points="23 18 13.5 8.5 8.5 13.5 1 6"/><polyline {...p} points="17 18 23 18 23 12"/></>,
    target:       <><circle {...p} cx="12" cy="12" r="10"/><circle {...p} cx="12" cy="12" r="6"/><circle {...p} cx="12" cy="12" r="2"/></>,
    dollarSign:   <><line {...p} x1="12" y1="1" x2="12" y2="23"/><path {...p} d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></>,
    shield:       <path {...p} d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>,
    piggyBank:    <><path {...p} d="M19 5c-1.5 0-2.8 1.4-3 2-3.5-1.5-11-.3-11 5 0 1.8 0 3 2 4.5V20h4v-2h3v2h4v-4c1-.5 1.7-1 2-2h2v-4h-2c0-1-.5-1.5-1-2z"/><path {...p} d="M2 9v1a2 2 0 0 0 2 2h1"/><circle fill={color} r="1" cx="16" cy="9"/></>,
    receipt:      <><polyline {...p} points="4 2 4 22 8 19 12 22 16 19 20 22 20 2"/><line {...p} x1="8" y1="10" x2="16" y2="10"/><line {...p} x1="8" y1="14" x2="12" y2="14"/></>,

    /* ── Media / Files ───────────────────────── */
    image:    <><rect {...p} x="3" y="3" width="18" height="18" rx="2"/><circle {...p} cx="8.5" cy="8.5" r="1.5"/><polyline {...p} points="21 15 16 10 5 21"/></>,
    camera:   <><path {...p} d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle {...p} cx="12" cy="13" r="4"/></>,
    fileText: <><path {...p} d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline {...p} points="14 2 14 8 20 8"/><line {...p} x1="16" y1="13" x2="8" y2="13"/><line {...p} x1="16" y1="17" x2="8" y2="17"/></>,
    scan:     <><path {...p} d="M3 7V5a2 2 0 0 1 2-2h2m10-2h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2"/><rect {...p} x="7" y="7" width="10" height="10" rx="1"/></>,
    paperclip: <path {...p} d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/>,

    /* ── Misc ────────────────────────────────── */
    users:    <><path {...p} d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle {...p} cx="9" cy="7" r="4"/><path {...p} d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></>,
    globe:    <><circle {...p} cx="12" cy="12" r="10"/><line {...p} x1="2" y1="12" x2="22" y2="12"/><path {...p} d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></>,
    sun:      <><circle {...p} cx="12" cy="12" r="5"/><line {...p} x1="12" y1="1" x2="12" y2="3"/><line {...p} x1="12" y1="21" x2="12" y2="23"/><line {...p} x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line {...p} x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line {...p} x1="1" y1="12" x2="3" y2="12"/><line {...p} x1="21" y1="12" x2="23" y2="12"/><line {...p} x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line {...p} x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></>,
    moon:     <path {...p} d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>,
    moonStar: <path {...p} d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>,
    clock:    <><circle {...p} cx="12" cy="12" r="10"/><polyline {...p} points="12 6 12 12 16 14"/></>,
    sparkles: <><path {...p} d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .962 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .963L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.962 0z"/><path {...p} d="M20 3v4m2-2h-4M4 17v2m1-1H3"/></>,
    zap:      <polygon {...p} points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>,
    eye:      <><path {...p} d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle {...p} cx="12" cy="12" r="3"/></>,
    lock:     <><rect {...p} x="3" y="11" width="18" height="11" rx="2"/><path {...p} d="M7 11V7a5 5 0 0 1 10 0v4"/></>,
    percent:  <><line {...p} x1="19" y1="5" x2="5" y2="19"/><circle {...p} cx="6.5" cy="6.5" r="2.5"/><circle {...p} cx="17.5" cy="17.5" r="2.5"/></>,
    tag:      <><path {...p} d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line {...p} x1="7" y1="7" x2="7.01" y2="7"/></>,
    layers:   <><polygon {...p} points="12 2 2 7 12 12 22 7 12 2"/><polyline {...p} points="2 17 12 22 22 17"/><polyline {...p} points="2 12 12 17 22 12"/></>,

    /* ── Identidad: Categorías de Transacción ───────────────── */
    shoppingCart: <><circle {...p} cx="9" cy="21" r="1"/><circle {...p} cx="20" cy="21" r="1"/><path {...p} d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></>,
    bus:          <><path {...p} d="M8 6v6m8-6v6M2 12h19.6M18 18h2a1 1 0 0 0 1-1v-6.8a4 4 0 0 0-4-4H7.2L4 12v5a1 1 0 0 0 1 1h2"/><circle {...p} cx="7" cy="18" r="2"/><circle {...p} cx="16" cy="18" r="2"/></>,
    car:          <><path {...p} d="M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2"/><circle {...p} cx="7" cy="17" r="2"/><path {...p} d="M9 17h6"/><circle {...p} cx="17" cy="17" r="2"/></>,
    heart:        <path {...p} d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>,
    film:         <><rect {...p} x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/><line {...p} x1="7" y1="2" x2="7" y2="22"/><line {...p} x1="17" y1="2" x2="17" y2="22"/><line {...p} x1="2" y1="12" x2="22" y2="12"/><line {...p} x1="2" y1="7" x2="7" y2="7"/><line {...p} x1="2" y1="17" x2="7" y2="17"/><line {...p} x1="17" y1="17" x2="22" y2="17"/><line {...p} x1="17" y1="7" x2="22" y2="7"/></>,
    music:        <><path {...p} d="M9 18V5l12-2v13"/><circle {...p} cx="6" cy="18" r="3"/><circle {...p} cx="18" cy="16" r="3"/></>,
    pill:         <><path {...p} d="m10.5 20.5 10-10a4.95 4.95 0 1 0-7-7l-10 10a4.95 4.95 0 1 0 7 7Z"/><path {...p} d="m8.5 8.5 7 7"/></>,
    shirt:        <path {...p} d="M20.38 3.46 16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23z"/>,
    bookOpen:     <><path {...p} d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path {...p} d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></>,
    briefcase:    <><rect {...p} x="2" y="7" width="20" height="14" rx="2" ry="2"/><path {...p} d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></>,
    code:         <><polyline {...p} points="16 18 22 12 16 6"/><polyline {...p} points="8 6 2 12 8 18"/></>,
    gift:         <><polyline {...p} points="20 12 20 22 4 22 4 12"/><rect {...p} x="2" y="7" width="20" height="5"/><line {...p} x1="12" y1="22" x2="12" y2="7"/><path {...p} d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"/><path {...p} d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"/></>,
    package:      <><line {...p} x1="16.5" y1="9.4" x2="7.5" y2="4.21"/><path {...p} d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline {...p} points="3.27 6.96 12 12.01 20.73 6.96"/><line {...p} x1="12" y1="22.08" x2="12" y2="12"/></>,

    /* ── Identidad: Tipos de Cuenta ─────────────────────────── */
    landmark:     <><line {...p} x1="3" y1="22" x2="21" y2="22"/><line {...p} x1="6" y1="18" x2="6" y2="11"/><line {...p} x1="10" y1="18" x2="10" y2="11"/><line {...p} x1="14" y1="18" x2="14" y2="11"/><line {...p} x1="18" y1="18" x2="18" y2="11"/><polygon {...p} points="12 2 20 7 4 7"/></>,
    smartphone:   <><rect {...p} x="5" y="2" width="14" height="20" rx="2" ry="2"/><line {...p} x1="12" y1="18" x2="12.01" y2="18"/></>,
    banknote:     <><rect {...p} x="2" y="6" width="20" height="12" rx="2"/><circle {...p} cx="12" cy="12" r="2"/><path {...p} d="M6 12h.01M18 12h.01"/></>,

    /* ── Identidad: Gastos Fijos ────────────────────────────── */
    wifi:         <><path {...p} d="M5 12.55a11 11 0 0 1 14.08 0"/><path {...p} d="M1.42 9a16 16 0 0 1 21.16 0"/><path {...p} d="M8.53 16.11a6 6 0 0 1 6.95 0"/><line {...p} x1="12" y1="20" x2="12.01" y2="20"/></>,
    building:     <><rect {...p} x="4" y="2" width="16" height="20" rx="2"/><path {...p} d="M9 22v-4h6v4M8 6h.01M16 6h.01M12 6h.01M12 10h.01M12 14h.01M16 10h.01M16 14h.01M8 10h.01M8 14h.01"/></>,
    cpu:          <><rect {...p} x="4" y="4" width="16" height="16" rx="2"/><rect {...p} x="9" y="9" width="6" height="6"/><line {...p} x1="9" y1="2" x2="9" y2="4"/><line {...p} x1="15" y1="2" x2="15" y2="4"/><line {...p} x1="9" y1="20" x2="9" y2="22"/><line {...p} x1="15" y1="20" x2="15" y2="22"/><line {...p} x1="20" y1="9" x2="22" y2="9"/><line {...p} x1="20" y1="15" x2="22" y2="15"/><line {...p} x1="2" y1="9" x2="4" y2="9"/><line {...p} x1="2" y1="15" x2="4" y2="15"/></>,
    plane:        <path {...p} d="M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z"/>,
    lightbulb:    <><path {...p} d="M9 18h6"/><path {...p} d="M10 22h4"/><path {...p} d="M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14"/></>,
    droplet:      <path {...p} d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"/>,
    flame:        <path {...p} d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/>,
    gamepad:      <><line {...p} x1="6" y1="12" x2="10" y2="12"/><line {...p} x1="8" y1="10" x2="8" y2="14"/><line {...p} x1="15" y1="13" x2="15.01" y2="13"/><line {...p} x1="18" y1="11" x2="18.01" y2="11"/><rect {...p} x="2" y="6" width="20" height="12" rx="2"/></>,
    coffee:       <><path {...p} d="M17 8h1a4 4 0 1 1 0 8h-1"/><path {...p} d="M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z"/><line {...p} x1="6" y1="2" x2="6" y2="4"/><line {...p} x1="10" y1="2" x2="10" y2="4"/><line {...p} x1="14" y1="2" x2="14" y2="4"/></>,
    gauge:        <><path {...p} d="m12 14 4-4"/><path {...p} d="M3.34 19a10 10 0 1 1 17.32 0"/></>,
    headphones:   <><path {...p} d="M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H4a1 1 0 0 1-1-1zM18 14h3a1 1 0 0 1 1 1v4a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2z"/><path {...p} d="M21 14a9 9 0 0 0-18 0"/></>,
    palette:      <><circle {...p} cx="13.5" cy="6.5" r=".5" fill={color}/><circle {...p} cx="17.5" cy="10.5" r=".5" fill={color}/><circle {...p} cx="8.5" cy="7.5" r=".5" fill={color}/><circle {...p} cx="6.5" cy="12.5" r=".5" fill={color}/><path {...p} d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"/></>,
  };

  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      aria-hidden="true"
      style={{ display: 'inline-block', flexShrink: 0, verticalAlign: 'middle' }}
    >
      {ICONS[name] ?? (
        <g stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" fill="none">
          <circle cx="12" cy="12" r="10"/>
          <line x1="12" y1="8" x2="12" y2="12"/>
          <line x1="12" y1="16" x2="12.01" y2="16"/>
        </g>
      )}
    </svg>
  );
};

Object.assign(window, { Icon });

/* ── Brand Logo ─────────────────────────────────────────────
   Logo brújula inline. Todos los colores derivan de var(--accent)
   con stopOpacity para el gradient. Si Ro cambia --accent a otro
   color (naranja, verde, lo que sea), el logo entero acompaña sin
   tocar SVGs en assets/. */
const BrandLogo = ({ size = 32, strokeWidth = 1.8, tone = 'accent' }) => {
  // tone='accent' → logo azul sobre fondo claro (sidebar desktop)
  // tone='white'  → logo blanco sobre chip de color (brand header mobile)
  const fg    = tone === 'white' ? '#fff' : 'var(--accent)';
  const inner = tone === 'white' ? 'var(--accent)' : 'var(--surface)';
  return (
    <svg width={size} height={size} viewBox="0 0 44 44" style={{ display:'block', flexShrink:0 }} aria-label="Rumbo">
      {/* Aro */}
      <circle cx="22" cy="22" r="18" fill="none" stroke={fg} strokeWidth={strokeWidth}/>
      {/* Tick Norte (más prominente) */}
      <line x1="22" y1="4.4" x2="22" y2="8" stroke={fg} strokeWidth="1.8" strokeLinecap="round" opacity="0.9"/>
      {/* Ticks E/S/O (sutiles) */}
      <line x1="39.6" y1="22" x2="36" y2="22" stroke={fg} strokeWidth="1.4" strokeLinecap="round" opacity="0.45"/>
      <line x1="22" y1="39.6" x2="22" y2="36" stroke={fg} strokeWidth="1.4" strokeLinecap="round" opacity="0.45"/>
      <line x1="4.4" y1="22"  x2="8"  y2="22" stroke={fg} strokeWidth="1.4" strokeLinecap="round" opacity="0.45"/>
      {/* Aguja sólida + sombra trasera (cola sur) */}
      <g transform="rotate(15 22 22)">
        <polygon points="22,22 19.8,28 22,5 24.2,28" fill={fg}/>
        <polygon points="22,22 24.2,16 22,39 19.8,16" fill={fg} opacity="0.22"/>
      </g>
      {/* Pivote central */}
      <circle cx="22" cy="22" r="3" fill={fg}/>
      <circle cx="22" cy="22" r="1.2" fill={inner}/>
    </svg>
  );
};

Object.assign(window, { BrandLogo });