/* NOXIGY OS — estilos base compartidos. Requiere tokens.css. */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap');

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.01em; margin: 0; font-weight: 700; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; color: inherit; }
img { max-width: 100%; }
::selection { background: var(--accent); color: var(--accent-ink); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; } /* el atributo hidden siempre gana a cualquier clase */

/* ---------- Botones ----------
   Un solo sistema: principal (píldora lima) · secundario (rectangular «HABLEMOS») · texto (enlaces).
   Mismas alturas en los tres para que, juntos, queden alineados: sm 34 · normal 42 · lg 52. */
.btn, .btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 20px; box-sizing: border-box;
  font: 600 11px var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.btn { background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); border-radius: var(--radius-pill); }
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn:active, .btn-outline:active { transform: scale(.97); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #1a0606; }
.btn-outline { background: rgba(255, 255, 255, 0.02); color: #C7C7CC; border: 1px solid var(--border); border-radius: var(--radius-md); font-weight: 500; }
.btn-outline:hover { color: var(--accent); border-color: var(--accent); }
.btn-outline.danger:hover { color: var(--danger); border-color: var(--danger); }
.btn-outline:disabled { opacity: .4; cursor: not-allowed; }
.btn.sm, .btn-outline.sm { height: 34px; padding: 0 14px; font-size: 10px; gap: 7px; }
.btn.lg, .btn-outline.lg { height: 52px; padding: 0 28px; font-size: 12px; }

/* Texto: «Ver todos», «← Volver»… */
.btn-ghost {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; text-decoration: none;
  color: var(--text-dim); padding: 6px 8px; border-radius: var(--radius-sm);
  font: 600 12.5px var(--font-body); cursor: pointer;
}
.btn-ghost:hover { color: var(--text); background: var(--panel-2); }

.icon-btn {
  width: 40px; height: 40px; display: inline-grid; place-items: center;
  justify-content: center; align-items: center; /* centrado también si otra regla lo pasa a flex */
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 50%;
  color: var(--text-dim); cursor: pointer; font-size: 15px; position: relative; padding: 0;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.icon-btn > svg { display: block; flex: none; }
.icon-btn:hover { color: var(--accent); border-color: var(--accent); }

.chip-btn {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text-dim);
  border-radius: 9px; padding: 8px 12px; font: 600 12px var(--font-body); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.chip-btn:hover, .chip-btn.on { border-color: var(--accent); color: var(--accent); }

/* Segmented / tabs en píldora (como Día · Semana · Mes del Control Center) */
.seg { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.seg button {
  background: transparent; border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius-pill); padding: 9px 18px; font: 600 13px var(--font-display);
  cursor: pointer; transition: all var(--t-fast);
}
.seg button:hover { border-color: var(--text-faint); }
.seg button.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ---------- Formularios ---------- */
.field { margin-bottom: 14px; }
.field > label, .lbl {
  display: block; font: 500 10.5px var(--font-mono); color: var(--text-dim); margin-bottom: 7px;
  text-transform: uppercase; letter-spacing: .08em;
}
.input, .field input, .field textarea, .field select {
  width: 100%; background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 10px; padding: 11px 13px; font: 400 13.5px var(--font-body);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.input:focus, .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); }
.field textarea, textarea.input { resize: vertical; min-height: 70px; line-height: 1.5; }
.field-row { display: flex; gap: 12px; }
.field-row > .field { flex: 1; min-width: 0; }
.hint { font-size: 11.5px; color: var(--text-faint); margin-top: 6px; }
input[type=checkbox], input[type=radio], input[type=range] { accent-color: var(--accent); }
input[type=date], input[type=datetime-local], input[type=time] { color-scheme: dark; }
select { color-scheme: dark; }

/* ---------- Desplegables: UN solo diseño en todo NOXIGY OS ----------
   Flecha propia con aire a la derecha (nunca pegada al borde), texto que no se monta sobre la flecha,
   hover y foco en lima, y la lista abierta en oscuro. Vale para .input, .field, líneas de factura, etc. */
:root { --sel-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A1A1AA' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --sel-chev-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9F31D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
select:not([multiple]) {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: var(--sel-chev);
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px 16px;
  padding-right: 42px !important; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
  height: 40px; line-height: 1.3; padding-top: 0 !important; padding-bottom: 0 !important;
}
select:not([multiple]):hover:not(:disabled) { border-color: #3a3a42; }
select:not([multiple]):focus { background-image: var(--sel-chev-on); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(201,243,29,.12); outline: none; }
select:not([multiple]):disabled { cursor: default; opacity: .7; background-image: none; padding-right: 13px !important; }
select option, select optgroup { background: #141417; color: var(--text); }
select option:checked { background: #26262B; }
/* Pequeños (filtros de barra, versión…) */
select[style*="font-size:12px"]:not([multiple]) { height: 32px; background-position: right 10px center; background-size: 13px 13px; padding-right: 30px !important; }
.toolbar select:not([multiple]) { border-radius: 999px; padding-left: 16px !important; min-height: 38px; background-position: right 12px center; background-size: 14px 14px; padding-right: 36px !important; }
@media print { select { background-image: none !important; padding-right: 0 !important; } }
/* Fechas y horas: el icono del calendario con el mismo aire que la flecha de los desplegables. */
input[type=date], input[type=datetime-local], input[type=time], input[type=month] { padding-top: 0; padding-bottom: 0; padding-right: 12px; height: 40px; }
input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .55; margin-left: 8px; padding: 2px; border-radius: 6px; transition: opacity var(--t-fast), background var(--t-fast); }
input::-webkit-calendar-picker-indicator:hover { opacity: 1; background: rgba(255,255,255,.06); }

/* ---------- Superficies ---------- */
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.panel-pad { padding: 20px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--panel-2); color: var(--text-dim); font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.kicker { font: 500 10.5px var(--font-mono); color: var(--text-faint); text-transform: uppercase; letter-spacing: .12em; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.accent { color: var(--accent); }
.divider { height: 1px; background: var(--border); margin: 18px 0; }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }
.grid:not(.bi) { display: grid; gap: 14px; }
.stack > * + * { margin-top: 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Iconos de botón (mismo trazo que el menú; sustituyen a emojis y símbolos sueltos) ---------- */
/* Iconos: sus nombres (chat, list, grid, pin…) coinciden con clases de componentes; esos componentes llevan :not(.bi). */
.bi { width: 14px; height: 14px; flex-shrink: 0; display: inline-block; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.btn.sm .bi, .btn-outline.sm .bi { width: 13px; height: 13px; } .btn.lg .bi { width: 16px; height: 16px; } .btn-ghost .bi { width: 15px; height: 15px; } .chip-btn .bi { width: 14px; height: 14px; }
.bi.plus { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%205v14M5%2012h14%22/%3E%3C/svg%3E"); }
.bi.check { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m5%2012.5%204.5%204.5L19%207.5%22/%3E%3C/svg%3E"); }
.bi.play { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%205v14l12-7z%22/%3E%3C/svg%3E"); }
.bi.pause { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%205v14M16%205v14%22/%3E%3C/svg%3E"); }
.bi.download { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%204v11M7%2010.5l5%205%205-5M5%2020h14%22/%3E%3C/svg%3E"); }
.bi.upload { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2020V9M7%2013.5l5-5%205%205M5%204h14%22/%3E%3C/svg%3E"); }
.bi.left { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2012H5M11%206l-6%206%206%206%22/%3E%3C/svg%3E"); }
.bi.right { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14M13%206l6%206-6%206%22/%3E%3C/svg%3E"); }
.bi.chat { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2011.5a7.5%207.5%200%200%201-10.9%206.7L4.5%2019.5l1.3-4.3A7.5%207.5%200%201%201%2020%2011.5z%22/%3E%3C/svg%3E"); }
.bi.print { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%209V4h10v5M7%2017H5a1.5%201.5%200%200%201-1.5-1.5v-5A1.5%201.5%200%200%201%205%209h14a1.5%201.5%200%200%201%201.5%201.5v5A1.5%201.5%200%200%201%2019%2017h-2M7%2014h10v6H7z%22/%3E%3C/svg%3E"); }
.bi.link { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%2014a4.5%204.5%200%200%200%206.4%200l3-3a4.5%204.5%200%200%200-6.4-6.4l-1%201M14%2010a4.5%204.5%200%200%200-6.4%200l-3%203a4.5%204.5%200%200%200%206.4%206.4l1-1%22/%3E%3C/svg%3E"); }
.bi.mail { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225.5%22%20width%3D%2218%22%20height%3D%2213%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22m3.5%207%208.5%206%208.5-6%22/%3E%3C/svg%3E"); }
.bi.pin { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021s-6.5-5.8-6.5-11a6.5%206.5%200%200%201%2013%200C18.5%2015.2%2012%2021%2012%2021z%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%222.3%22/%3E%3C/svg%3E"); }
.bi.send { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%203%2010%2014M21%203l-7%2018-4-7-7-4z%22/%3E%3C/svg%3E"); }
.bi.edit { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020h4L19%209a2.8%202.8%200%200%200-4-4L4%2016z%22/%3E%3C/svg%3E"); }
.bi.grid { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221.5%22/%3E%3Crect%20x%3D%2213%22%20y%3D%224%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221.5%22/%3E%3Crect%20x%3D%224%22%20y%3D%2213%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221.5%22/%3E%3Crect%20x%3D%2213%22%20y%3D%2213%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221.5%22/%3E%3C/svg%3E"); }
.bi.key { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2215%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22m11%2012%208.5-8.5M16.5%206.5%2019%209M14%209l2%202%22/%3E%3C/svg%3E"); }
.bi.exit { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%204h3.5A1.5%201.5%200%200%201%2020%205.5v13a1.5%201.5%200%200%201-1.5%201.5H15M10%2016l4-4-4-4M14%2012H4%22/%3E%3C/svg%3E"); }
.bi.refresh { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2011a8%208%200%200%200-14.3-4.6L4%208M4%2013a8%208%200%200%200%2014.3%204.6L20%2016M4%204v4h4M20%2020v-4h-4%22/%3E%3C/svg%3E"); }
.bi.spark { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203c.6%204.3%202.7%206.4%207%207-4.3.6-6.4%202.7-7%207-.6-4.3-2.7-6.4-7-7%204.3-.6%206.4-2.7%207-7z%22/%3E%3C/svg%3E"); }
.bi.tag { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%2012.5V4.5a1%201%200%200%201%201-1h8l8%208-9%209z%22/%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%221.4%22/%3E%3C/svg%3E"); }
.bi.clip { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m20%2011.5-8%208a5%205%200%200%201-7-7l8.5-8.5a3.3%203.3%200%200%201%204.7%204.7L9.7%2017.2a1.7%201.7%200%200%201-2.4-2.4l7.5-7.5%22/%3E%3C/svg%3E"); }
.bi.external { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%204h6v6M20%204l-9%209M18%2014v4.5a1.5%201.5%200%200%201-1.5%201.5h-11A1.5%201.5%200%200%201%204%2018.5v-11A1.5%201.5%200%200%201%205.5%206H10%22/%3E%3C/svg%3E"); }
.bi.trash { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%207h16M10%2011v6M14%2011v6M6%207l1%2012.5A1.5%201.5%200%200%200%208.5%2021h7a1.5%201.5%200%200%200%201.5-1.5L18%207M9%207V4.5h6V7%22/%3E%3C/svg%3E"); }
.bi.clock { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228.5%22/%3E%3Cpath%20d%3D%22M12%207.5V12l3%202%22/%3E%3C/svg%3E"); }
.bi.list { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%206h11M9%2012h11M9%2018h11M4.5%206h.01M4.5%2012h.01M4.5%2018h.01%22/%3E%3C/svg%3E"); }
.bi.eye { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2.5%2012S6%205.5%2012%205.5%2021.5%2012%2021.5%2012%2018%2018.5%2012%2018.5%202.5%2012%202.5%2012z%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222.8%22/%3E%3C/svg%3E"); }
.bi.login { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%204H5.5A1.5%201.5%200%200%200%204%205.5v13A1.5%201.5%200%200%200%205.5%2020H9M14%2016l4-4-4-4M18%2012H8%22/%3E%3C/svg%3E"); }