/* ═══════════════════════════════════════════════
   SOTTCOR CRM v2 — Design System
   Estructura: Icon Rail + Top Bar + Status Bar
═══════════════════════════════════════════════ */
:root {
  --c-bg:     #f1f5f9;
  --c-bg2:    #e2e8f0;
  --c-surf:   #ffffff;
  --c-surf2:  #f8fafc;
  --c-rail:   #0f172a;
  --c-rail2:  #1e293b;
  --c-top:    #ffffff;
  --c-status: #1e293b;
  --c-primary:#2563eb;
  --c-primaryh:#1d4ed8;
  --c-pl:     #eff6ff;
  --c-pb:     #bfdbfe;
  --c-green:  #16a34a;
  --c-gl:     #f0fdf4;
  --c-yellow: #d97706;
  --c-yl:     #fffbeb;
  --c-red:    #dc2626;
  --c-rl:     #fef2f2;
  --c-purple: #7c3aed;
  --c-purpl:  #f5f3ff;
  --c-slate:  #64748b;
  --c-text:   #0f172a;
  --c-text2:  #475569;
  --c-text3:  #94a3b8;
  --c-border: #e2e8f0;
  --c-border2:#cbd5e1;
  --sh:  0 1px 3px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.04);
  --shm: 0 4px 6px -1px rgba(0,0,0,.08);
  --shl: 0 10px 25px rgba(0,0,0,.12);
  --r:   10px;
  --rs:  6px;
  --rl:  16px;
  --rail-w: 56px;
  --top-h:  56px;
  --status-h: 28px;
  --transit: .22s cubic-bezier(.4,0,.2,1);
}

[data-theme="dark"] {
  --c-bg:    #0d1117;
  --c-bg2:   #161b22;
  --c-surf:  #161b22;
  --c-surf2: #1c2333;
  --c-top:   #161b22;
  --c-text:  #f0f6fc;
  --c-text2: #8b949e;
  --c-text3: #484f58;
  --c-border:#30363d;
  --c-border2:#21262d;
}

* { margin:0; padding:0; box-sizing:border-box }
html { height:100% }
body {
  font-family:'Inter',sans-serif;
  background: var(--c-bg);
  color: var(--c-text);
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 13.5px;
}

/* ─ SCROLLBAR ─ */
::-webkit-scrollbar { width:5px; height:5px }
::-webkit-scrollbar-track { background:transparent }
::-webkit-scrollbar-thumb { background:var(--c-border2); border-radius:10px }

/* ══════════════════════════════════
   TOP BAR
══════════════════════════════════ */
#topbar {
  height: var(--top-h);
  background: var(--c-top);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  padding: 0 14px 0 0;
  gap: 0;
  flex-shrink: 0;
  box-shadow: var(--sh);
  z-index: 100;
}

.tb-brand {
  width: var(--rail-w);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-right: 1px solid var(--c-border);
}
.tb-brand-icon {
  width: 32px; height: 32px;
  background: var(--c-primary);
  border-radius: 8px;
  display: flex; align-items:center; justify-content:center;
  font-weight: 900; font-size: .82rem; color: #fff;
  letter-spacing: .05em;
}

.tb-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  font-size: .82rem;
  color: var(--c-text3);
  border-right: 1px solid var(--c-border);
  height: 100%;
}
.tb-breadcrumb .current {
  color: var(--c-text);
  font-weight: 700;
}
.tb-breadcrumb i { font-size: .7rem }

.tb-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  flex: 1;
}

.tb-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--rs);
  padding: 6px 12px;
  cursor: pointer;
  transition: var(--transit);
  font-size: .8rem;
  color: var(--c-text3);
  min-width: 200px;
}
.tb-search:hover { border-color: var(--c-primary); background: var(--c-surf) }
.tb-search kbd {
  background: var(--c-bg2);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: .62rem;
  color: var(--c-text3);
  margin-left: auto;
  font-family: 'Inter', sans-serif;
}

.ml { margin-left: auto }

.tb-btn {
  width: 34px; height: 34px;
  border-radius: var(--rs);
  border: none;
  background: transparent;
  color: var(--c-text3);
  cursor: pointer;
  display: flex; align-items:center; justify-content:center;
  font-size: .88rem;
  transition: var(--transit);
  position: relative;
}
.tb-btn:hover { background: var(--c-bg); color: var(--c-text) }
.tb-notif {
  position: absolute; top: 4px; right: 4px;
  width: 8px; height: 8px;
  background: var(--c-red);
  border-radius: 50%;
  border: 2px solid var(--c-top);
}

.tb-divider { width: 1px; height: 22px; background: var(--c-border); margin: 0 4px }

.tb-user {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px;
  border-radius: var(--rs);
  cursor: pointer;
  transition: var(--transit);
}
.tb-user:hover { background: var(--c-bg) }
.tb-avatar {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--c-primary);
  color: #fff;
  font-weight: 800;
  font-size: .78rem;
  display: flex; align-items:center; justify-content:center;
}
.tb-uname { font-size: .8rem; font-weight: 600; color: var(--c-text) }
.tb-urole { font-size: .67rem; color: var(--c-text3) }

/* ══════════════════════════════════
   BODY LAYOUT (rail + content)
══════════════════════════════════ */
#body {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* ══════════════════════════════════
   ICON RAIL
══════════════════════════════════ */
#rail {
  width: var(--rail-w);
  background: var(--c-rail);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
  gap: 2px;
  overflow: hidden;
  flex-shrink: 0;
  z-index: 50;
  position: relative;
}

.rail-item {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex; align-items:center; justify-content:center;
  cursor: pointer;
  color: rgba(255,255,255,.45);
  font-size: .88rem;
  transition: var(--transit);
  position: relative;
  flex-shrink: 0;
}
.rail-item:hover {
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.9);
}
.rail-item.on {
  background: var(--c-primary);
  color: #fff;
}
.rail-item .tooltip {
  position: absolute;
  left: calc(var(--rail-w) - 4px);
  background: var(--c-rail2);
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(4px);
  transition: var(--transit);
  z-index: 200;
  box-shadow: var(--shm);
}
.rail-item:hover .tooltip {
  opacity: 1;
  transform: translateX(8px);
}
.rail-item .rb {
  position: absolute;
  top: 5px; right: 5px;
  width: 7px; height: 7px;
  background: var(--c-red);
  border-radius: 50%;
  border: 2px solid var(--c-rail);
}

.rail-sep {
  width: 28px;
  height: 1px;
  background: rgba(255,255,255,.08);
  margin: 4px 0;
}

.rail-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.08);
  width: 100%;
}

/* ══════════════════════════════════
   CONTENT AREA
══════════════════════════════════ */
#content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.view { display:none; flex:1; flex-direction:column; overflow:hidden }
.view.on { display:flex }

/* ── Content header ── */
.view-header {
  background: var(--c-surf);
  border-bottom: 1px solid var(--c-border);
  padding: 0 20px;
  height: 50px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.vh-title { font-size: .95rem; font-weight: 800; color: var(--c-text) }
.vh-title span { color: var(--c-primary) }
.vh-sub { font-size: .7rem; color: var(--c-text3) }
.vh-sep { width: 1px; height: 18px; background: var(--c-border); margin: 0 4px }

/* ── Scrollable body ── */
.view-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
}

/* ══════════════════════════════════
   STATUS BAR
══════════════════════════════════ */
#statusbar {
  height: var(--status-h);
  background: var(--c-status);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 0;
  flex-shrink: 0;
}
.sb-item-s {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  font-size: .67rem;
  color: rgba(255,255,255,.5);
  border-right: 1px solid rgba(255,255,255,.08);
  height: 100%;
  cursor: default;
  transition: var(--transit);
}
.sb-item-s:hover { color: rgba(255,255,255,.85) }
.sb-item-s i { font-size: .65rem }
.sb-dot-g { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; animation: blink 2s infinite }
.sb-dot-y { width: 6px; height: 6px; border-radius: 50%; background: #f59e0b }
.sb-dot-r { width: 6px; height: 6px; border-radius: 50%; background: #ef4444}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ══════════════════════════════════
   KPI CARDS
══════════════════════════════════ */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.kc {
  background: var(--c-surf);
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  padding: 15px 16px;
  box-shadow: var(--sh);
  position: relative;
  overflow: hidden;
  transition: var(--transit);
}
.kc:hover { box-shadow: var(--shm); transform: translateY(-1px) }
.kc::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--r) var(--r) 0 0;
}
.kc.kblue::before  { background: var(--c-primary) }
.kc.kgreen::before { background: var(--c-green) }
.kc.kyellow::before{ background: var(--c-yellow) }
.kc.kred::before   { background: var(--c-red) }
.kc.kpurple::before{ background: var(--c-purple) }
.kc-icon { position: absolute; top: 13px; right: 13px; font-size: 1rem; opacity: .12 }
.kc-label { font-size: .67rem; font-weight: 700; color: var(--c-text3); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 6px }
.kc-val   { font-size: 1.8rem; font-weight: 900; color: var(--c-text); line-height: 1 }
.kc-sub   { font-size: .7rem; color: var(--c-text3); margin-top: 4px }

/* ══════════════════════════════════
   CARDS
══════════════════════════════════ */
.card {
  background: var(--c-surf);
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  box-shadow: var(--sh);
}
.card-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-title { font-size: .83rem; font-weight: 700; color: var(--c-text) }
.card-body  { padding: 14px 16px }

/* ══════════════════════════════════
   CHAT LAYOUT (3 cols)
══════════════════════════════════ */
#view-chat { flex-direction: row !important }

.chat-col-leads {
  width: 295px;
  min-width: 295px;
  border-right: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  background: var(--c-surf);
}

.chat-col-msgs {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--c-bg2);
}

.chat-col-panel {
  width: 268px;
  min-width: 268px;
  border-left: 1px solid var(--c-border);
  overflow-y: auto;
  background: var(--c-surf);
}

/* Lead list item */
.litem {
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--c-border);
  display: flex;
  gap: 9px;
  transition: var(--transit);
  border-left: 3px solid transparent;
}
.litem:hover { background: var(--c-bg) }
.litem.on    { background: var(--c-pl); border-left-color: var(--c-primary) }

.li-av {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items:center; justify-content:center;
  font-weight: 800; color: #fff;
  font-size: .85rem;
  flex-shrink: 0;
}
.li-info { flex: 1; min-width: 0 }
.li-name { font-size: .8rem; font-weight: 700; color: var(--c-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.li-prev { font-size: .7rem; color: var(--c-text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top: 1px }
.li-canal{ font-size: .6rem; font-weight: 700; padding: 2px 6px; border-radius: 20px; margin-top: 3px; display:inline-block }
.li-meta { display:flex; flex-direction:column; align-items:flex-end; gap:3px; flex-shrink:0 }
.li-t    { font-size: .62rem; color: var(--c-text3) }
.li-b    { font-size: .6rem; font-weight: 800; padding: 2px 6px; border-radius: 20px; color: #fff; background: var(--c-red) }

/* Messages */
.msgs { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:8px }
.msg { max-width: 68%; display:flex; flex-direction:column; gap:2px }
.msg.in  { align-self: flex-start }
.msg.out { align-self: flex-end }
.msg.sys { align-self: center; max-width: 86% }
.bub { padding: 9px 13px; font-size: .81rem; line-height: 1.5; border-radius: 14px }
.msg.in  .bub { background:#fff; color:#1a1a2e; border-radius:0 14px 14px 14px; box-shadow:var(--sh); border:1px solid var(--c-border) }
.msg.out .bub { background:var(--c-primary); color:#fff; border-radius:14px 14px 0 14px }
.msg.sys .bub { background:var(--c-bg2); color:var(--c-text3); border-radius:20px; font-size:.7rem; text-align:center; border:1px solid var(--c-border); padding:4px 12px }
.mt { font-size:.62rem; color:var(--c-text3); padding:0 4px }
.msg.out .mt { text-align:right; color:rgba(255,255,255,.55) }

/* Chat input */
.chat-inp {
  background: var(--c-surf);
  border-top: 1px solid var(--c-border);
  padding: 10px 13px;
  flex-shrink: 0;
}
.macro-row { display:flex; gap:5px; overflow-x:auto; padding-bottom:8px }
.macro-row::-webkit-scrollbar { height:3px }
.mc { background:var(--c-bg); border:1px solid var(--c-border); border-radius:20px; padding:3px 9px; font-size:.67rem; font-weight:600; color:var(--c-text2); cursor:pointer; white-space:nowrap; flex-shrink:0; transition:.13s }
.mc:hover { background:var(--c-pl); border-color:var(--c-pb); color:var(--c-primary) }
.inp-row { display:flex; gap:7px; align-items:flex-end }
.minput { flex:1; background:var(--c-bg); border:1.5px solid var(--c-border); border-radius:var(--rs); padding:9px 12px; color:var(--c-text); font-size:.83rem; font-family:'Inter',sans-serif; outline:none; resize:none; min-height:40px; max-height:110px; transition:.14s }
.minput:focus { border-color:var(--c-primary); background:var(--c-surf) }
.minput::placeholder { color:var(--c-text3) }
.bsend { width:40px; height:40px; border-radius:var(--rs); background:var(--c-primary); border:none; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:.82rem; transition:.14s; flex-shrink:0 }
.bsend:hover { background:var(--c-primaryh); box-shadow:0 4px 12px rgba(37,99,235,.28) }

/* Copilot */
.copilot { background:var(--c-gl); border-top:1px solid #bbf7d0; padding:7px 13px; display:none; align-items:center; gap:8px }
.copilot.on { display:flex }
.cop-ic { width:20px; height:20px; border-radius:6px; background:linear-gradient(135deg,var(--c-primary),var(--c-purple)); display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.cop-ic i { font-size:.6rem; color:#fff }
.cop-txt { font-size:.74rem; color:#166534; flex:1; font-style:italic }
.cop-btn { background:#fff; border:1px solid #bbf7d0; border-radius:5px; padding:3px 8px; font-size:.67rem; font-weight:700; color:var(--c-green); cursor:pointer }

/* Right panel */
.rp-sec { padding: 12px 14px; border-bottom: 1px solid var(--c-border) }
.rp-title { font-size:.64rem; font-weight:800; color:var(--c-text3); text-transform:uppercase; letter-spacing:.1em; margin-bottom:8px; display:flex; align-items:center; gap:5px }
.rp-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:5px }
.rp-l { font-size:.75rem; color:var(--c-text3) }
.rp-v { font-size:.75rem; font-weight:600; color:var(--c-text2) }

/* ══════════════════════════════════
   RADAR
══════════════════════════════════ */
.radar-wrap { padding:9px 11px; background:var(--c-surf2); border-bottom:1px solid var(--c-border) }
.radar-title { font-size:.65rem; font-weight:800; color:var(--c-text3); text-transform:uppercase; letter-spacing:.1em; margin-bottom:6px; display:flex; align-items:center; gap:5px }
.radar-cells { display:flex; gap:5px }
.r-cell { flex:1; background:var(--c-surf); border:1px solid var(--c-border); border-radius:var(--rs); padding:6px 8px; text-align:center; cursor:pointer; transition:.14s }
.r-cell.rc { border-color:#fecaca; background:var(--c-rl) }
.r-cell.ry { border-color:#fde68a; background:var(--c-yl) }
.r-cell.rg { border-color:#bbf7d0; background:var(--c-gl) }
.r-n { font-size:1.1rem; font-weight:900; line-height:1 }
.r-n.rc { color:var(--c-red) }
.r-n.ry { color:var(--c-yellow) }
.r-n.rg { color:var(--c-green) }
.r-l { font-size:.59rem; font-weight:700; color:var(--c-text3); margin-top:2px }

/* ══════════════════════════════════
   KANBAN
══════════════════════════════════ */
.kanban { display:flex; gap:10px; padding:14px 18px; overflow-x:auto; flex:1; align-items:flex-start }
.kcol { min-width:188px; width:188px; background:var(--c-surf); border:1px solid var(--c-border); border-radius:var(--r); box-shadow:var(--sh); display:flex; flex-direction:column; max-height:calc(100vh - 170px) }
.kcol.dov { background:var(--c-pl); border-color:var(--c-primary) }
.kch { padding:10px 11px; border-bottom:1px solid var(--c-border); display:flex; align-items:center; justify-content:space-between; flex-shrink:0 }
.kct { font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em }
.kcc { background:var(--c-bg2); border:1px solid var(--c-border); border-radius:20px; padding:2px 7px; font-size:.66rem; font-weight:700; color:var(--c-text3) }
.kcb { flex:1; overflow-y:auto; padding:6px; display:flex; flex-direction:column; gap:5px }
.kcard { background:var(--c-bg); border:1px solid var(--c-border); border-radius:var(--rs); padding:8px 10px; cursor:grab; transition:.14s }
.kcard:hover { box-shadow:var(--shm); border-color:var(--c-border2); transform:translateY(-1px) }
.kcard:active { cursor:grabbing }
.kc-n { font-size:.78rem; font-weight:700; color:var(--c-text); margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.kc-p { font-size:.69rem; color:var(--c-green); display:flex; align-items:center; gap:3px }

/* ══════════════════════════════════
   TABLE
══════════════════════════════════ */
.dtable { width:100%; border-collapse:collapse }
.dtable th { padding:8px 12px; text-align:left; font-size:.66rem; font-weight:700; color:var(--c-text3); text-transform:uppercase; letter-spacing:.07em; background:var(--c-bg); border-bottom:2px solid var(--c-border); position:sticky; top:0 }
.dtable td { padding:8px 12px; border-bottom:1px solid var(--c-border); font-size:.79rem; color:var(--c-text2); vertical-align:middle }
.dtable tr:hover td { background:var(--c-bg) }
.td-name { font-weight:700; color:var(--c-text) }

/* ══════════════════════════════════
   PILLS
══════════════════════════════════ */
.pill { display:inline-flex; align-items:center; padding:2px 8px; border-radius:20px; font-size:.65rem; font-weight:700 }
.pb { background:var(--c-pl); color:var(--c-primary) }
.pg { background:var(--c-gl); color:var(--c-green) }
.py { background:var(--c-yl); color:var(--c-yellow) }
.pr { background:var(--c-rl); color:var(--c-red) }
.pp { background:var(--c-purpl); color:var(--c-purple) }
.ps { background:var(--c-bg2); color:var(--c-slate) }

/* ══════════════════════════════════
   FORMS
══════════════════════════════════ */
.finput { width:100%; background:var(--c-bg); border:1.5px solid var(--c-border); border-radius:var(--rs); padding:7px 10px; color:var(--c-text); font-size:.8rem; font-family:'Inter',sans-serif; outline:none; transition:.14s }
.finput:focus { border-color:var(--c-primary); background:var(--c-surf) }
.finput::placeholder { color:var(--c-text3) }
.fselect { width:100%; background:var(--c-bg); border:1.5px solid var(--c-border); border-radius:var(--rs); padding:7px 10px; color:var(--c-text); font-size:.8rem; font-family:'Inter',sans-serif; outline:none; cursor:pointer; transition:.14s }
.fselect:focus { border-color:var(--c-primary) }
.ftarea { width:100%; background:var(--c-bg); border:1.5px solid var(--c-border); border-radius:var(--rs); padding:7px 10px; color:var(--c-text); font-size:.79rem; font-family:'Inter',sans-serif; outline:none; resize:none; min-height:65px; transition:.14s }
.ftarea:focus { border-color:var(--c-primary) }
.ftarea::placeholder { color:var(--c-text3) }

/* ══════════════════════════════════
   TAGS
══════════════════════════════════ */
.tag-wrap { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:7px }
.tag-pill { background:var(--c-pl); color:var(--c-primary); border:1px solid var(--c-pb); border-radius:20px; padding:3px 8px; font-size:.68rem; font-weight:600; display:inline-flex; align-items:center; gap:3px }
.tag-pill .x { cursor:pointer; opacity:.6; font-size:.62rem }
.tag-pill .x:hover { opacity:1 }

/* ══════════════════════════════════
   MACROS MANAGER
══════════════════════════════════ */
.macro-item { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--c-border) }
.macro-item:last-child { border:none }
.macro-key { background:var(--c-bg2); border:1px solid var(--c-border); border-radius:5px; padding:3px 8px; font-size:.72rem; font-weight:700; color:var(--c-primary); min-width:80px }
.macro-content { flex:1; font-size:.78rem; color:var(--c-text2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* ══════════════════════════════════
   BÓVEDA
══════════════════════════════════ */
.boveda-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px }
.boveda-folder { background:var(--c-surf); border:1px solid var(--c-border); border-radius:var(--r); padding:16px; box-shadow:var(--sh); cursor:pointer; transition:.14s; text-align:center }
.boveda-folder:hover { box-shadow:var(--shm); border-color:var(--c-primary) }
.boveda-folder i { font-size:2rem; margin-bottom:8px; display:block }
.boveda-folder-name { font-size:.82rem; font-weight:700; color:var(--c-text) }
.boveda-folder-count { font-size:.72rem; color:var(--c-text3); margin-top:3px }
.boveda-file { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--c-border) }
.boveda-file:last-child { border:none }
.boveda-file i { font-size:1.1rem; color:var(--c-primary) }
.boveda-file-name { flex:1; font-size:.79rem; font-weight:600; color:var(--c-text) }
.boveda-file-size { font-size:.7rem; color:var(--c-text3) }

/* ══════════════════════════════════
   BUTTONS
══════════════════════════════════ */
.btn { padding:7px 14px; border-radius:var(--rs); font-size:.78rem; font-weight:600; cursor:pointer; border:none; transition:.14s; font-family:'Inter',sans-serif; display:inline-flex; align-items:center; gap:5px }
.btn-p { background:var(--c-primary); color:#fff }
.btn-p:hover { background:var(--c-primaryh); box-shadow:0 4px 12px rgba(37,99,235,.28) }
.btn-w { background:var(--c-surf); color:var(--c-text2); border:1px solid var(--c-border); box-shadow:var(--sh) }
.btn-w:hover { border-color:var(--c-border2); color:var(--c-text) }
.btn-g { background:var(--c-gl); color:var(--c-green); border:1px solid #bbf7d0 }
.btn-r { background:var(--c-rl); color:var(--c-red); border:1px solid #fecaca }
.btn-sm { padding:5px 10px; font-size:.73rem }
.btn-icon { width:32px; height:32px; padding:0; justify-content:center }

/* ══════════════════════════════════
   COMMAND PALETTE
══════════════════════════════════ */
#cmd { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:9999; display:none; align-items:flex-start; justify-content:center; padding-top:72px; backdrop-filter:blur(3px) }
#cmd.on { display:flex }
#cmd-box { background:var(--c-surf); border-radius:var(--rl); width:580px; max-width:92vw; box-shadow:0 25px 60px rgba(0,0,0,.22); overflow:hidden; animation:cin .16s ease }
@keyframes cin { from{transform:translateY(-18px) scale(.97);opacity:0} to{transform:none;opacity:1} }
.cmd-top { padding:12px 14px; border-bottom:1px solid var(--c-border); display:flex; align-items:center; gap:9px }
.cmd-top i { color:var(--c-text3) }
#cmd-inp { flex:1; border:none; outline:none; font-size:.92rem; font-family:'Inter',sans-serif; color:var(--c-text); background:transparent }
#cmd-inp::placeholder { color:var(--c-text3) }
.cmd-res { max-height:360px; overflow-y:auto }
.cmd-sec { padding:8px 14px 4px; font-size:.63rem; font-weight:800; color:var(--c-text3); text-transform:uppercase; letter-spacing:.1em }
.cmd-it { padding:9px 14px; display:flex; align-items:center; gap:10px; cursor:pointer; transition:.12s }
.cmd-it:hover,.cmd-it.foc { background:var(--c-pl) }
.cmd-it:hover i,.cmd-it.foc i { color:var(--c-primary) }
.cmd-it i { width:16px; text-align:center; color:var(--c-text3); font-size:.83rem }
.cmd-it-n { font-size:.82rem; font-weight:600; color:var(--c-text) }
.cmd-it-s { font-size:.7rem; color:var(--c-text3) }
.cmd-it-av { width:24px; height:24px; border-radius:6px; color:#fff; font-weight:800; font-size:.68rem; display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.cmd-foot { padding:8px 14px; border-top:1px solid var(--c-border); display:flex; gap:12px }
.cmd-hint { font-size:.67rem; color:var(--c-text3); display:flex; align-items:center; gap:4px }
.cmd-hint kbd { background:var(--c-bg2); border:1px solid var(--c-border); border-radius:4px; padding:1px 5px; font-size:.63rem; font-family:'Inter',sans-serif }

/* ══════════════════════════════════
   TOAST
══════════════════════════════════ */
#toast { position:fixed; bottom:36px; right:18px; z-index:9998; display:flex; flex-direction:column; gap:6px }
.ti { background:var(--c-surf); border:1px solid var(--c-border); border-radius:var(--r); padding:10px 14px; font-size:.79rem; font-weight:500; color:var(--c-text); display:flex; align-items:center; gap:8px; min-width:230px; animation:su .2s ease; box-shadow:var(--shl) }
.ti.ok   { border-left:3px solid var(--c-green) }
.ti.err  { border-left:3px solid var(--c-red) }
.ti.info { border-left:3px solid var(--c-primary) }
.ti.star { border-left:3px solid #f59e0b; background:var(--c-yl) }
@keyframes su { from{transform:translateY(8px);opacity:0} to{transform:none;opacity:1} }

/* ══════════════════════════════════
   MISC
══════════════════════════════════ */
.ml { margin-left:auto }
.loader { display:flex; align-items:center; justify-content:center; gap:8px; padding:32px; color:var(--c-text3); font-size:.79rem }
.spinner { width:16px; height:16px; border:2px solid var(--c-border2); border-top-color:var(--c-primary); border-radius:50%; animation:spin .6s linear infinite }
@keyframes spin { to{transform:rotate(360deg)} }
.empty { text-align:center; padding:40px 16px; color:var(--c-text3) }
.empty i { font-size:2.2rem; display:block; margin-bottom:10px; opacity:.22 }
.empty p { font-size:.8rem }
.ph { flex:1; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; color:var(--c-text3) }
.ph i { font-size:2.8rem; opacity:.18 }
.ph h3 { font-size:.92rem; font-weight:700; color:var(--c-text2) }
.ph p  { font-size:.79rem }
select option { background:var(--c-surf) }
@media(max-width:768px){
  #rail { display:none }
  .kpi-grid { grid-template-columns:repeat(2,1fr) }
  .chat-col-panel { display:none }
}

/* Custom status and ticks styling */
.wa-msg-time-in {
  font-size: .7rem;
  color: rgba(0, 0, 0, 0.55);
  margin-top: 3px;
  padding-left: 2px;
}
[data-theme="dark"] .wa-msg-time-in {
  color: rgba(255, 255, 255, 0.55);
}

.wa-msg-time-out {
  font-size: .7rem;
  color: #000000 !important; /* pure black, more noticeable */
  font-weight: 600;
  margin-top: 3px;
  text-align: right;
  padding-right: 2px;
}
[data-theme="dark"] .wa-msg-time-out {
  color: #ffffff !important; /* pure white in dark mode */
}

.wa-tick-read {
  color: #0b2c8a !important; /* dark blue */
  font-weight: bold;
}
.wa-tick-delivered {
  color: rgba(0, 0, 0, 0.45);
}
.wa-tick-sent {
  color: rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .wa-tick-delivered {
  color: rgba(255, 255, 255, 0.45);
}
[data-theme="dark"] .wa-tick-sent {
  color: rgba(255, 255, 255, 0.35);
}