/* ══════════════════════════════════════════════════════════════
   VITEL ENERGÍA — Agente IA CMO · Design System
   I2B Technologies · Dark Mode · v1.0
   ══════════════════════════════════════════════════════════════ */

/* ── Tipografía ──
   La CSP del backend bloquea fuentes externas (style-src 'self').
   Usamos system fonts: rendering instantáneo, sin red, sin CSP issues.
   Inter / Segoe UI / system-ui ofrecen una jerarquía visual moderna. */

/* ── Design Tokens ── */
:root {
  /* Brand I2B */
  --i2b-red:        #D43B3B;
  --i2b-red-dark:   #AA2222;
  --i2b-teal:       #17A8C2;
  --i2b-teal-light: #4DC4D8;
  --i2b-navy:       #1E2D4E;
  --i2b-navy-dark:  #141F38;

  /* Dark surfaces */
  --bg:       #0B0F1A;
  --surface:  #111827;
  --card:     #1A2235;
  --card2:    #1F2A3E;
  --border:   rgba(255,255,255,0.07);
  --border2:  rgba(23,168,194,0.2);

  /* Semáforo */
  --verde:    #22C55E;
  --amarillo: #F59E0B;
  --rojo-s:   #EF4444;
  --azul:     #3B82F6;

  /* Text */
  --t1: #F1F5FF;
  --t2: #8A9BBB;
  --t3: #4A5A78;

  /* Layout */
  --sidebar-w: 200px;
  --sidebar-collapsed: 52px;
  --header-h: 54px;
  --r:    10px;
  --r-sm: 6px;
  --r-lg: 14px;
  --tr:   .18s ease;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,.4);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.5);
}

/* ── Reset ── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 13px; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--t1);
  min-height: 100vh;
  overflow: hidden;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
input, select { font-family: inherit; }

/* Scrollbar */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: rgba(23,168,194,.3); border-radius: 2px; }

/* ══════════════════════════════════════════════════════════════
   UTILITIES
   ══════════════════════════════════════════════════════════════ */
.hidden   { display: none !important; }
.flex     { display: flex; }
.flex-col { flex-direction: column; }
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.items-end      { align-items: flex-end; }
.justify-between{ justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end    { justify-content: flex-end; }
.flex-1  { flex: 1; }
.flex-wrap { flex-wrap: wrap; }
.w-full  { width: 100%; }
.h-full  { height: 100%; }
.gap-1   { gap: 4px; }
.gap-2   { gap: 8px; }
.gap-3   { gap: 12px; }
.gap-4   { gap: 16px; }
.gap-6   { gap: 24px; }
.gap-8   { gap: 32px; }
.grid-2  { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.grid-3  { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.grid-4  { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.font-bold    { font-weight: 700; }
.font-semibold{ font-weight: 600; }
.font-medium  { font-weight: 500; }
.text-sm  { font-size: 11px; }
.text-xs  { font-size: 10px; }
.text-lg  { font-size: 16px; }
.text-xl  { font-size: 20px; }
.text-2xl { font-size: 24px; }
.text-teal   { color: var(--i2b-teal); }
.text-red    { color: var(--i2b-red); }
.text-muted  { color: var(--t2); }
.text-green  { color: var(--verde); }
.text-yellow { color: var(--amarillo); }
.text-blue   { color: var(--azul); }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.p-3  { padding: 12px; }
.p-4  { padding: 16px; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uppercase { text-transform: uppercase; letter-spacing: .06em; }
.cursor-pointer { cursor: pointer; }
.relative { position: relative; }
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }

/* ══════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--r-sm); border: none; cursor: pointer;
  font-size: 12px; font-weight: 600; transition: all var(--tr); white-space: nowrap;
  line-height: 1;
}
.btn-primary  { background: linear-gradient(135deg,var(--i2b-teal),#0E8099); color:#fff; }
.btn-primary:hover { filter: brightness(1.12); }
.btn-approve  { background: linear-gradient(135deg,#16A34A,#14532D); color:#fff; }
.btn-approve:hover { filter: brightness(1.1); }
.btn-danger   { background: linear-gradient(135deg,var(--i2b-red),var(--i2b-red-dark)); color:#fff; }
.btn-danger:hover { filter: brightness(1.1); }
.btn-ghost    { background: transparent; color: var(--t2); border: 1px solid var(--border); }
.btn-ghost:hover { border-color: var(--border2); color: var(--t1); }

/* "Asignar productos sin match" — destacado cuando hay sin_match en la cot */
.btn-asignar-sinmatch[data-active="1"] {
  border-color: var(--rojo-s);
  color: var(--rojo-s);
  background: rgba(239, 68, 68, 0.08);
  font-weight: 600;
}
.btn-asignar-sinmatch[data-active="1"]:hover {
  background: rgba(239, 68, 68, 0.18);
  color: #fff;
}
.btn-asignar-sinmatch .btn-badge {
  display: inline-block; margin-left: 4px;
  background: var(--rojo-s); color: #fff;
  border-radius: 10px; padding: 0 6px;
  font-size: 10px; font-weight: 700;
  min-width: 16px; text-align: center;
}
.btn-asignar-sinmatch .btn-badge[hidden] { display: none; }
.btn-navy     { background: var(--i2b-navy); color:#fff; border: 1px solid rgba(255,255,255,.1); }
.btn-navy:hover { background: var(--i2b-navy-dark); }
.btn-sm  { padding: 5px 10px; font-size: 11px; }
.btn-xs  { padding: 3px 8px; font-size: 10px; }
.btn-icon{ padding: 7px; }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* ══════════════════════════════════════════════════════════════
   CARDS
   ══════════════════════════════════════════════════════════════ */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px;
}
.card-sm {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px;
}
.card-teal {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  padding: 16px;
}
.card-hover { transition: all var(--tr); cursor: pointer; }
.card-hover:hover { border-color: var(--border2); transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* KPI Card */
.kpi-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kpi-card .kpi-label {
  font-size: 10px; font-weight: 700; color: var(--t2);
  text-transform: uppercase; letter-spacing: .07em;
}
.kpi-card .kpi-value {
  font-size: 26px; font-weight: 800; color: var(--t1); line-height: 1;
}
.kpi-card .kpi-sub {
  font-size: 11px; color: var(--t2);
}
.kpi-card .kpi-delta {
  font-size: 11px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 3px;
}
.kpi-card .kpi-delta.up   { color: var(--verde); }
.kpi-card .kpi-delta.down { color: var(--rojo-s); }

/* ══════════════════════════════════════════════════════════════
   BADGES & SEMÁFORO
   ══════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 20px;
  font-size: 10px; font-weight: 700; white-space: nowrap;
}
.badge-verde    { background:rgba(34,197,94,.15);  color:var(--verde);    border:1px solid rgba(34,197,94,.3); }
.badge-amarillo { background:rgba(245,158,11,.15); color:var(--amarillo); border:1px solid rgba(245,158,11,.3); }
.badge-rojo     { background:rgba(239,68,68,.15);  color:var(--rojo-s);   border:1px solid rgba(239,68,68,.3); }
.badge-teal     { background:rgba(23,168,194,.15); color:var(--i2b-teal); border:1px solid rgba(23,168,194,.3); }
.badge-azul     { background:rgba(59,130,246,.15); color:var(--azul);     border:1px solid rgba(59,130,246,.3); }
.badge-gray     { background:rgba(255,255,255,.07);color:var(--t2);       border:1px solid var(--border); }

/* Semáforo dot */
.dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.dot-verde    { background:var(--verde);    box-shadow:0 0 6px var(--verde); }
.dot-amarillo { background:var(--amarillo); box-shadow:0 0 6px var(--amarillo); }
.dot-rojo     { background:var(--rojo-s);   box-shadow:0 0 6px var(--rojo-s); }
.dot-teal     { background:var(--i2b-teal); box-shadow:0 0 6px var(--i2b-teal); }
.dot-gray     { background:var(--t3); }

/* Agent status pill */
.agent-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600;
  background: rgba(23,168,194,.1); border: 1px solid var(--border2);
  color: var(--i2b-teal);
}
.agent-pill.offline {
  background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.25); color: var(--rojo-s);
}

/* ══════════════════════════════════════════════════════════════
   PROGRESS BARS
   ══════════════════════════════════════════════════════════════ */
.bar-wrap { height:5px; background:rgba(255,255,255,.08); border-radius:3px; overflow:hidden; }
.bar-fill { height:100%; border-radius:3px; transition:width .5s ease; }
.bar-teal   { background:linear-gradient(90deg,var(--i2b-teal),var(--i2b-teal-light)); }
.bar-red    { background:var(--i2b-red); }
.bar-green  { background:var(--verde); }
.bar-yellow { background:var(--amarillo); }
.bar-blue   { background:var(--azul); }

/* Conf bar inline */
.conf-bar { display:flex; align-items:center; gap:6px; }
.conf-bar-track { width:60px; height:5px; background:rgba(255,255,255,.08); border-radius:3px; overflow:hidden; }
.conf-bar-fill  { height:100%; border-radius:3px; }

/* ══════════════════════════════════════════════════════════════
   TABLE
   ══════════════════════════════════════════════════════════════ */
.tbl-wrap { border:1px solid var(--border); border-radius:var(--r); overflow:hidden; }
table { width:100%; border-collapse:collapse; }
thead { background:rgba(23,168,194,.07); }
thead th {
  padding:10px 12px; text-align:left;
  font-size:10px; font-weight:700; color:var(--t2);
  text-transform:uppercase; letter-spacing:.07em;
  border-bottom:1px solid var(--border); white-space:nowrap;
}
tbody td {
  padding:10px 12px; font-size:12px;
  border-bottom:1px solid var(--border);
  color:var(--t1); vertical-align:middle;
}
tbody tr:last-child td { border-bottom:none; }
tbody tr:hover { background:rgba(23,168,194,.04); }
tbody tr.row-selected { background:rgba(23,168,194,.08); }

/* ══════════════════════════════════════════════════════════════
   FORMS
   ══════════════════════════════════════════════════════════════ */
.label {
  display:block; font-size:10px; font-weight:700; color:var(--t2);
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:5px;
}
.input {
  width:100%; padding:8px 12px;
  background:rgba(255,255,255,.04); border:1px solid var(--border);
  border-radius:var(--r-sm); color:var(--t1);
  font-size:12px; outline:none; transition:all var(--tr);
}
.input:focus { border-color:var(--i2b-teal); box-shadow:0 0 0 3px rgba(23,168,194,.15); }
.input::placeholder { color:var(--t3); }
.input-icon { position:relative; }
.input-icon .input { padding-left:34px; }
.input-icon .icon { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--t3); font-size:14px; }
select.input { cursor:pointer; }
select.input option { background:var(--card); }

/* ══════════════════════════════════════════════════════════════
   SECTION HEADER
   ══════════════════════════════════════════════════════════════ */
.section-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 14px;
}
.section-title {
  font-size: 13px; font-weight: 700; color: var(--t1);
  display: flex; align-items: center; gap: 8px;
}
.section-title .section-icon {
  width: 28px; height: 28px; border-radius: var(--r-sm);
  background: rgba(23,168,194,.12); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}

/* ══════════════════════════════════════════════════════════════
   FILTER BAR
   ══════════════════════════════════════════════════════════════ */
.filter-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 0; flex-wrap: wrap;
}
.filter-btn {
  padding: 5px 12px; border-radius: 20px;
  font-size: 11px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--border); background: transparent;
  color: var(--t2); transition: all var(--tr);
}
.filter-btn:hover  { border-color: var(--border2); color: var(--t1); }
.filter-btn.active { background: rgba(23,168,194,.15); border-color: var(--border2); color: var(--i2b-teal); }

/* Search input */
.search-wrap { position:relative; }
.search-wrap input {
  padding-left: 30px; width: 220px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border); border-radius:20px;
  color:var(--t1); font-size:11px; outline:none; transition:all var(--tr);
  padding-top: 6px; padding-bottom: 6px; padding-right: 12px;
}
.search-wrap input:focus { border-color:var(--border2); width:260px; }
.search-wrap input::placeholder { color:var(--t3); }
.search-wrap .search-icon { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--t3); font-size:12px; }

/* ══════════════════════════════════════════════════════════════
   TABS
   ══════════════════════════════════════════════════════════════ */
.tabs { display:flex; gap:2px; border-bottom:1px solid var(--border); margin-bottom:16px; }
.tab-btn {
  padding:8px 16px; font-size:12px; font-weight:600; cursor:pointer;
  color:var(--t2); border:none; background:transparent;
  border-bottom:2px solid transparent; transition:all var(--tr); margin-bottom:-1px;
}
.tab-btn:hover { color:var(--t1); }
.tab-btn.active { color:var(--i2b-teal); border-bottom-color:var(--i2b-teal); }
.tab-content { display:none; }
.tab-content.active { display:block; }

/* ══════════════════════════════════════════════════════════════
   TIMELINE
   ══════════════════════════════════════════════════════════════ */
.timeline { display:flex; flex-direction:column; gap:0; }
.timeline-item { display:flex; gap:12px; position:relative; }
.timeline-item:not(:last-child) .tl-line { position:absolute; left:11px; top:22px; bottom:-12px; width:2px; background:var(--border); }
.tl-dot { width:22px; height:22px; border-radius:50%; border:2px solid var(--border2); background:var(--card2); display:flex; align-items:center; justify-content:center; font-size:10px; flex-shrink:0; margin-top:2px; }
.tl-dot.done { background:rgba(34,197,94,.15); border-color:rgba(34,197,94,.4); }
.tl-dot.active { background:rgba(23,168,194,.15); border-color:var(--i2b-teal); box-shadow:0 0 0 4px rgba(23,168,194,.1); }
.tl-dot.pending { background:var(--card2); border-color:var(--border); }
.tl-content { flex:1; padding-bottom:16px; }
.tl-title { font-size:12px; font-weight:600; color:var(--t1); }
.tl-meta  { font-size:10px; color:var(--t2); margin-top:2px; }

/* ══════════════════════════════════════════════════════════════
   APP SHELL — LAYOUT
   ══════════════════════════════════════════════════════════════ */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-collapsed) 1fr;
  grid-template-rows: var(--header-h) 1fr;
  height: 100vh;
  overflow: hidden;
}

/* ── SIDEBAR ── */
.sidebar {
  grid-row: 1 / 3;
  background: var(--i2b-navy-dark);
  border-right: 1px solid rgba(255,255,255,.06);
  display: flex; flex-direction: column;
  width: var(--sidebar-collapsed);
  overflow: hidden;
  transition: width var(--tr);
  position: relative; z-index: 100;
}
.sidebar:hover, .sidebar.expanded {
  width: var(--sidebar-w);
  box-shadow: 4px 0 24px rgba(0,0,0,.4);
}
.sidebar-logo {
  height: var(--header-h);
  display: flex; align-items: center;
  padding: 0 14px; gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
  overflow: hidden;
}
.sidebar-logo-icon {
  width: 26px; height: 26px; border-radius: 6px;
  background: linear-gradient(135deg,var(--i2b-teal),#0E8099);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: #fff;
  flex-shrink: 0; letter-spacing: -.5px;
}
.sidebar-logo-text { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; }
.sidebar-logo-text span { color: var(--i2b-teal); }

.sidebar-nav { flex:1; padding: 8px 0; overflow: hidden; }
.nav-section-label {
  font-size: 9px; font-weight: 700; color: var(--t3);
  text-transform: uppercase; letter-spacing: .1em;
  padding: 12px 16px 4px;
  white-space: nowrap; overflow: hidden;
  opacity: 0; transition: opacity var(--tr);
}
.sidebar:hover .nav-section-label,
.sidebar.expanded .nav-section-label { opacity: 1; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; cursor: pointer;
  color: var(--t2); font-size: 12px; font-weight: 500;
  transition: all var(--tr); white-space: nowrap; overflow: hidden;
  position: relative; border: none; background: none; width: 100%;
  text-align: left;
}
.nav-item:hover { color: var(--t1); background: rgba(255,255,255,.04); }
.nav-item.active {
  color: var(--i2b-teal); background: rgba(23,168,194,.1);
  border-right: 2px solid var(--i2b-teal);
}
.nav-item .nav-icon { font-size: 16px; flex-shrink: 0; width: 24px; text-align: center; }
.nav-item .nav-label { opacity:0; transition:opacity var(--tr); }
.sidebar:hover .nav-label,
.sidebar.expanded .nav-label { opacity:1; }
.nav-badge {
  margin-left: auto; background: var(--i2b-red);
  color: #fff; font-size: 9px; font-weight: 700;
  padding: 1px 5px; border-radius: 10px; min-width: 16px; text-align: center;
  flex-shrink: 0;
}
.nav-item.active .nav-badge { background: var(--i2b-teal); }

.sidebar-footer {
  padding: 8px 0; border-top: 1px solid rgba(255,255,255,.06); flex-shrink: 0;
}

/* ── HEADER ── */
.app-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
  height: var(--header-h);
}
.header-left { display:flex; align-items:center; gap:12px; }
.header-page-title { font-size:14px; font-weight:700; }
.header-breadcrumb { font-size:11px; color:var(--t2); display:flex; align-items:center; gap:6px; }
.header-right { display:flex; align-items:center; gap:10px; }
.header-clock {
  font-size:11px; color:var(--t2); font-variant-numeric:tabular-nums;
  background: rgba(255,255,255,.04); padding:5px 10px;
  border-radius:var(--r-sm); border:1px solid var(--border);
  display:inline-flex; align-items:center; min-height:26px;
  white-space:nowrap;
}
.header-avatar {
  width:30px; height:30px; border-radius:50%;
  background:linear-gradient(135deg,var(--i2b-teal),var(--i2b-navy));
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:#fff; cursor:pointer;
  border:2px solid rgba(23,168,194,.3);
}
.header-user { font-size:11px; color:var(--t2); }
.header-user strong { color:var(--t1); display:block; font-size:12px; }

/* ── MAIN CONTENT ── */
.app-main {
  overflow: auto;
  padding: 20px;
  background: var(--bg);
}

/* ── AGENT BADGE ── */
.agent-badge {
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(23,168,194,.08); border:1px solid var(--border2);
  padding:2px 8px; border-radius:20px; font-size:10px; font-weight:700;
  color:var(--i2b-teal);
}

/* ── STAT ROW ── */
.stat-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 0; border-bottom:1px solid var(--border);
}
.stat-row:last-child { border-bottom:none; }
.stat-label { font-size:11px; color:var(--t2); }
.stat-value { font-size:12px; font-weight:600; color:var(--t1); }

/* ══════════════════════════════════════════════════════════════
   AUTH SCREEN
   ══════════════════════════════════════════════════════════════ */
#auth-screen {
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--i2b-navy-dark); z-index:1000;
}
.auth-bg {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(23,168,194,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(23,168,194,.05) 1px,transparent 1px);
  background-size:40px 40px;
}
.auth-glow-r {
  position:absolute; width:500px; height:500px; border-radius:50%;
  background:radial-gradient(circle,rgba(212,59,59,.18) 0%,transparent 70%);
  top:-150px; right:-100px; pointer-events:none;
}
.auth-glow-t {
  position:absolute; width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle,rgba(23,168,194,.12) 0%,transparent 70%);
  bottom:-100px; left:-100px; pointer-events:none;
}
.auth-card {
  position:relative; z-index:10; width:420px; max-width:95vw;
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:36px;
  box-shadow:var(--shadow-lg);
}
.auth-logo {
  display:flex; align-items:center; gap:10px;
  margin-bottom:24px;
}
.auth-logo-icon {
  width:36px; height:36px; border-radius:8px;
  background:linear-gradient(135deg,var(--i2b-teal),#0E8099);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:800; color:#fff;
}
.auth-logo-text { font-size:14px; }
.auth-logo-text .brand { font-weight:800; color:var(--t1); }
.auth-logo-text .sub   { font-size:10px; color:var(--t2); }
.auth-title { font-size:18px; font-weight:800; margin-bottom:4px; }
.auth-subtitle { font-size:12px; color:var(--t2); margin-bottom:28px; }
.auth-divider {
  text-align:center; font-size:10px; font-weight:700; color:var(--t3);
  text-transform:uppercase; letter-spacing:.08em;
  margin:16px 0; position:relative;
}
.auth-divider::before {
  content:''; position:absolute; left:0; top:50%;
  width:calc(50% - 20px); height:1px; background:var(--border);
}
.auth-divider::after {
  content:''; position:absolute; right:0; top:50%;
  width:calc(50% - 20px); height:1px; background:var(--border);
}

/* Profile picker */
.profile-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:20px; }
.profile-card {
  padding:12px; border-radius:var(--r-sm); border:1px solid var(--border);
  cursor:pointer; transition:all var(--tr); background:var(--card2);
  display:flex; flex-direction:column; gap:4px;
}
.profile-card:hover { border-color:var(--border2); background:rgba(23,168,194,.06); }
.profile-card.selected { border-color:var(--i2b-teal); background:rgba(23,168,194,.1); }
.profile-card .pc-icon { font-size:20px; }
.profile-card .pc-name { font-size:11px; font-weight:700; color:var(--t1); }
.profile-card .pc-desc { font-size:10px; color:var(--t2); }
.profile-card-full {
  padding:10px 12px; border-radius:var(--r-sm); border:1px solid var(--border);
  cursor:pointer; transition:all var(--tr); background:var(--card2);
  display:flex; align-items:center; gap:10px; margin-bottom:6px;
}
.profile-card-full:hover { border-color:var(--border2); background:rgba(23,168,194,.06); }
.profile-card-full.selected { border-color:var(--i2b-teal); background:rgba(23,168,194,.1); }
.profile-card-full .pc-icon { font-size:18px; }
.profile-card-full .pc-name { font-size:12px; font-weight:700; color:var(--t1); }
.profile-card-full .pc-desc { font-size:10px; color:var(--t2); }
.profile-card-full .pc-check {
  margin-left:auto; width:16px; height:16px; border-radius:50%;
  border:1px solid var(--border); background:transparent;
  display:flex; align-items:center; justify-content:center;
  font-size:9px; color:#fff; flex-shrink:0;
}
.profile-card-full.selected .pc-check {
  background:var(--i2b-teal); border-color:var(--i2b-teal);
}

/* ══════════════════════════════════════════════════════════════
   TOOLTIPS
   ══════════════════════════════════════════════════════════════ */
[data-tooltip] { position:relative; }
[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position:absolute; left:calc(100% + 8px); top:50%; transform:translateY(-50%);
  background:var(--card); border:1px solid var(--border2);
  color:var(--t1); font-size:11px; font-weight:500; white-space:nowrap;
  padding:4px 10px; border-radius:var(--r-sm); pointer-events:none; z-index:999;
  box-shadow:var(--shadow-md);
}

/* ══════════════════════════════════════════════════════════════
   CHAT PANEL (Vendedor)
   ══════════════════════════════════════════════════════════════ */
.chat-panel {
  display:flex; flex-direction:column; height:100%;
  border-left:1px solid var(--border);
}
.chat-panel-header {
  position:relative; /* anchor para el popover de perfil */
}
.persona-id {
  display:flex; align-items:center; gap:10px; flex:1;
}
.persona-photo {
  width:34px; height:34px; border-radius:50%;
  object-fit:cover; border:2px solid var(--border2);
  background:var(--card2);
  flex-shrink:0;
}
.persona-meta {
  display:flex; flex-direction:column; gap:2px; line-height:1.2;
}
.persona-name {
  font-size:13px; font-weight:700; color:var(--t1);
}
.persona-profile-btn {
  background:none; border:none; padding:0; cursor:pointer;
  font-size:10px; color:var(--i2b-teal); text-align:left;
  text-decoration:underline; text-underline-offset:2px;
  font-family:inherit;
}
.persona-profile-btn:hover { color:var(--t1); }
.persona-profile {
  /* position:fixed para no quedar clippeado por el overflow:hidden del
     .workspace. Las coords (top/left) se calculan en JS al abrir. */
  position:fixed;
  width:340px; max-width:calc(100vw - 24px);
  background:var(--card); border:1px solid var(--border2);
  border-radius:var(--r-md); box-shadow:0 12px 32px rgba(0,0,0,.55);
  padding:16px; z-index:2100;
  font-size:11px; line-height:1.5;
}
.persona-profile[hidden] { display:none; }
.persona-profile-head {
  display:flex; gap:10px; align-items:center; margin-bottom:10px;
}
.persona-profile-photo {
  width:56px; height:56px; border-radius:50%;
  object-fit:cover; border:2px solid var(--i2b-teal);
}
.persona-profile-name {
  font-size:14px; font-weight:700; color:var(--t1);
}
.persona-profile-role {
  font-size:10px; color:var(--t2);
}
.persona-profile-bio {
  color:var(--t2); margin-bottom:10px;
}
.persona-profile-skills-intro {
  font-size:11px; color:var(--t2); font-weight:600;
  margin-bottom:6px;
}
.persona-profile-skills {
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:4px;
}
.persona-profile-skills li {
  position:relative; padding-left:14px; color:var(--t1);
  font-size:11px;
}
.persona-profile-skills li::before {
  content:'✓'; position:absolute; left:0; color:var(--verde);
  font-weight:700;
}
.persona-profile-memory-note,
.persona-profile-team-note {
  display:flex; gap:8px; align-items:flex-start;
  margin-top:10px; padding:10px 12px;
  border-radius:var(--r-sm); font-size:11px;
  color:var(--t1); line-height:1.55;
}
.persona-profile-memory-note {
  background:linear-gradient(135deg, rgba(23,168,194,.10), rgba(23,168,194,.03));
  border:1px solid rgba(23,168,194,.30);
}
/* Team note (🤝 PM Área Técnica): ámbar cálido para diferenciar del
   memory-note (teal) y sugerir "respaldo experto" sin competir
   visualmente con el callout principal de memoria de cliente. */
.persona-profile-team-note {
  background:linear-gradient(135deg, rgba(217,164,52,.12), rgba(217,164,52,.03));
  border:1px solid rgba(217,164,52,.32);
}
.persona-profile-memory-note .ppm-icon,
.persona-profile-team-note .ppm-icon {
  font-size:16px; flex:none; padding-top:1px;
}
.persona-profile-memory-note strong { color:var(--i2b-teal); }
.persona-profile-team-note strong { color:#e0a83a; }
.persona-profile-close {
  position:absolute; top:6px; right:8px;
  background:none; border:none; cursor:pointer;
  color:var(--t3); font-size:16px; line-height:1; padding:2px 6px;
}
.persona-profile-close:hover { color:var(--t1); }
.motor-pill {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 8px; border-radius:10px;
  background:rgba(255,255,255,.04); border:1px solid var(--border);
  font-size:10px; color:var(--t2); font-family:ui-monospace,Menlo,monospace;
}

/* ══════════════════════════════════════════════════════════════
   Descuentos — botones por línea + modales
   ══════════════════════════════════════════════════════════════ */
/* Pill de alternativa equivalente — línea con SKU que sustituye lo solicitado
   por el cliente cuando Vitel no comercializa la marca/producto pedido. */
/* Badge "L1, L2, L3…" — número de línea visible en cada producto.
   Permite al vendedor referenciar la línea con el asistente IA del chat
   ("Domi, en la línea 3 cámbiame el SKU…"). */
.line-num-badge {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:30px; padding:3px 8px;
  font-size:11px; font-weight:700; font-family:ui-monospace,Menlo,monospace;
  color:var(--t1); background:rgba(255,255,255,.06);
  border:1px solid var(--border); border-radius:6px;
  letter-spacing:.04em;
}

/* Reloj header "Cliente espera tu respuesta hace …" — único reloj
   universal, tiempo hábil desde que llegó el correo del cliente
   (q.created_at). Texto en una línea: label + tiempo lado a lado.
   Umbrales:
     🟢 verde   <30m   sin animación
     🟡 amarillo 31-90m  parpadeo cada 10s (atención periódica)
     🔴 rojo    >90m    parpadeo continuo cada 1s (urgencia) */
.header-clock {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px; border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border2);
  font-family:inherit;
  transition:border-color var(--tr), background var(--tr);
}
.header-clock .clock-lbl {
  font-size:10px; color:var(--t3); font-weight:600;
  white-space:nowrap; line-height:1;
}
.header-clock .clock-val {
  font-size:15px; font-weight:800;
  font-family:ui-monospace,Menlo,monospace;
  letter-spacing:.02em; line-height:1;
}
.header-clock.clock-warn {
  border-color:rgba(245,158,11,.55);
  background:rgba(245,158,11,.07);
  animation:clock-attention-warn 10s ease-in-out infinite;
}
.header-clock.clock-danger {
  border-color:rgba(239,68,68,.65);
  background:rgba(239,68,68,.10);
  animation:clock-pulse-danger 1s ease-in-out infinite;
}
/* Amarillo: parpadeo periódico cada 10s — 9s normal, 1s flash. */
@keyframes clock-attention-warn {
  0%, 88%, 100% {
    box-shadow:0 0 0 0 rgba(245,158,11,0);
    background:rgba(245,158,11,.07);
  }
  92% {
    box-shadow:0 0 0 6px rgba(245,158,11,.30);
    background:rgba(245,158,11,.20);
  }
  96% {
    box-shadow:0 0 0 0 rgba(245,158,11,0);
    background:rgba(245,158,11,.07);
  }
}
/* Rojo: pulso continuo cada 1s — urgencia visual constante. */
@keyframes clock-pulse-danger {
  0%, 100% {
    box-shadow:0 0 0 0 rgba(239,68,68,0);
    background:rgba(239,68,68,.10);
    transform:scale(1);
  }
  50% {
    box-shadow:0 0 0 6px rgba(239,68,68,.40);
    background:rgba(239,68,68,.22);
    transform:scale(1.03);
  }
}
/* Mismas reglas para el reloj del banner de escalación */
#escalation-clock-wrap.clock-warn {
  border-color:rgba(245,158,11,.55) !important;
  animation:clock-attention-warn 10s ease-in-out infinite;
}
#escalation-clock-wrap.clock-danger {
  border-color:rgba(239,68,68,.70) !important;
  animation:clock-pulse-danger 1s ease-in-out infinite;
}

/* Fila contenedora: filtros + contador, debajo del semáforo global */
.prod-filter-row {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:8px 16px; flex-wrap:wrap;
  border-bottom:1px solid var(--border);
}

/* Filtros por color del semáforo (panel productos) */
.filter-pills {
  display:inline-flex; gap:4px; align-items:center;
  background:rgba(255,255,255,.03); border:1px solid var(--border);
  padding:3px; border-radius:14px;
}
.filter-pill {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:10px;
  font-size:10px; font-weight:700; color:var(--t2);
  background:transparent; border:none; cursor:pointer;
  font-family:inherit; transition:background var(--tr), color var(--tr);
}
.filter-pill:hover { color:var(--t1); }
.filter-pill .fp-dot {
  width:6px; height:6px; border-radius:50%;
  display:inline-block;
}
.filter-pill.fp-all .fp-dot { background:var(--t3); }
.filter-pill.fp-verde .fp-dot { background:var(--verde, #22C55E); }
.filter-pill.fp-amarillo .fp-dot { background:var(--amarillo, #F59E0B); }
.filter-pill.fp-rojo .fp-dot { background:var(--rojo-s, #EF4444); }
.filter-pill.active {
  background:rgba(255,255,255,.06); color:var(--t1);
  box-shadow:inset 0 0 0 1px var(--border2);
}
.filter-pill.fp-verde.active { background:rgba(34,197,94,.10); color:var(--verde, #22C55E); }
.filter-pill.fp-amarillo.active { background:rgba(245,158,11,.10); color:var(--amarillo, #F59E0B); }
.filter-pill.fp-rojo.active { background:rgba(239,68,68,.10); color:var(--rojo-s, #EF4444); }
.filter-pill .fp-count { opacity:.7; font-weight:600; }

.alt-pill {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:10px;
  background:rgba(23,168,194,.14); border:1px solid rgba(23,168,194,.45);
  color:var(--i2b-teal); font-size:9px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
}

/* Línea marcada como no comercializada — visualmente atenuada pero visible.
   Va con la cotización al cliente con una nota; no suma al total. */
.prod-row.no-comerc {
  border-left:3px solid var(--rojo-s, #EF4444);
  background:repeating-linear-gradient(
    -45deg,
    rgba(239,68,68,.02) 0 8px,
    rgba(239,68,68,.05) 8px 16px
  );
}
.prod-row.no-comerc .prod-pedido-text { opacity:.85; }
.prod-row.no-comerc .sem-pill { background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.4); color:var(--rojo-s); }

.btn-line-discount {
  background:transparent;
  border:1px solid rgba(245,158,11,.4);
  color:var(--amarillo, #F59E0B);
  font-size:11px; font-weight:600; padding:5px 10px;
  border-radius:6px; cursor:pointer; transition:all var(--tr);
  font-family:inherit;
}
.btn-line-discount:hover {
  background:rgba(245,158,11,.08); border-color:rgba(245,158,11,.7);
}
.btn-total-discount {
  background:transparent;
  border:1px solid rgba(245,158,11,.4);
  color:var(--amarillo, #F59E0B);
  font-size:11px; font-weight:700; padding:6px 12px;
  border-radius:8px; cursor:pointer; transition:all var(--tr);
  font-family:inherit;
}
.btn-total-discount:hover {
  background:rgba(245,158,11,.10); border-color:rgba(245,158,11,.8);
}
.discount-grid {
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px;
  margin-bottom:14px;
}
.dgrid-cell {
  background:var(--card2); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:8px 10px;
}
.dgrid-lbl {
  font-size:9px; color:var(--t3); text-transform:uppercase;
  letter-spacing:.04em; font-weight:700; margin-bottom:3px;
  display:flex; align-items:center; gap:6px;
}
.dgrid-val {
  font-size:13px; font-weight:700; color:var(--t1);
  font-family:ui-monospace,Menlo,monospace;
}
.dgrid-tag {
  font-size:8px; padding:1px 5px; border-radius:8px;
  background:rgba(23,168,194,.12); color:var(--i2b-teal);
  font-family:inherit; font-weight:600; letter-spacing:0;
  text-transform:none;
}
.dgrid-tag.tag-default { background:rgba(245,158,11,.12); color:var(--amarillo); }
.discount-mode-tabs {
  display:flex; gap:0; margin-bottom:10px;
  border-bottom:1px solid var(--border);
}
.dmode {
  background:none; border:none; color:var(--t3);
  padding:8px 16px; cursor:pointer; font-size:12px; font-weight:600;
  border-bottom:2px solid transparent; margin-bottom:-1px;
  font-family:inherit; transition:color var(--tr), border-color var(--tr);
}
.dmode:hover { color:var(--t1); }
.dmode.active {
  color:var(--i2b-teal); border-bottom-color:var(--i2b-teal);
}
.discount-input-row {
  display:flex; align-items:flex-end; gap:8px; margin-bottom:8px;
}
.discount-input-row label {
  flex:1; font-size:10px; color:var(--t2); font-weight:700;
  text-transform:uppercase; letter-spacing:.04em;
  display:flex; flex-direction:column; gap:4px;
}
.discount-input-row input {
  flex:0 0 130px; padding:8px 10px; font-size:13px;
  background:var(--card2); border:1px solid var(--border);
  border-radius:var(--r-sm); color:var(--t1); outline:none;
  font-family:ui-monospace,Menlo,monospace; font-weight:700;
  text-align:right;
}
.discount-input-row input:focus { border-color:var(--i2b-teal); }
.dl-suffix {
  font-size:11px; color:var(--t3); padding-bottom:10px;
  font-family:ui-monospace,Menlo,monospace;
}
.discount-preview {
  background:linear-gradient(180deg, rgba(23,168,194,.06), rgba(23,168,194,.02));
  border:1px solid rgba(23,168,194,.25); border-radius:var(--r-sm);
  padding:12px 14px; margin-top:10px; font-size:12px;
  color:var(--t1); line-height:1.6;
}
.discount-preview.warn {
  background:linear-gradient(180deg, rgba(245,158,11,.10), rgba(245,158,11,.03));
  border-color:rgba(245,158,11,.40);
}
.discount-preview.danger {
  background:linear-gradient(180deg, rgba(239,68,68,.10), rgba(239,68,68,.03));
  border-color:rgba(239,68,68,.40);
}
.dprev-row {
  display:flex; justify-content:space-between; gap:12px;
  padding:2px 0;
}
.dprev-row strong { font-family:ui-monospace,Menlo,monospace; }
.dprev-delta-pos { color:var(--verde, #22C55E); }
.dprev-delta-neg { color:var(--rojo-s, #EF4444); }
.chat-messages {
  flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px;
}
.chat-msg { max-width:85%; }
.chat-msg-ia {
  background:var(--card2); border:1px solid var(--border);
  padding:10px 12px; border-radius:0 10px 10px 10px; font-size:12px; line-height:1.6;
  align-self:flex-start;
}
.chat-msg-user {
  background:rgba(23,168,194,.12); border:1px solid var(--border2);
  padding:10px 12px; border-radius:10px 0 10px 10px; font-size:12px; line-height:1.6;
  align-self:flex-end;
}
.chat-msg-meta { font-size:10px; color:var(--t3); margin-top:3px; }
.chat-input-wrap {
  padding:12px 16px; border-top:1px solid var(--border);
  display:flex; gap:8px; align-items:flex-end;
}
.chat-input {
  flex:1; padding:10px 14px;
  background:rgba(255,255,255,.04); border:1px solid var(--border);
  border-radius:14px; color:var(--t1); font-size:12px; line-height:1.5;
  outline:none; transition:border-color var(--tr);
  font-family:inherit; resize:none;
  /* Multi-línea: arranca grande y crece hasta un máximo razonable. */
  min-height:120px; max-height:260px; overflow-y:auto;
}
.chat-input:focus { border-color:var(--border2); }
.chat-input::placeholder { color:var(--t3); }
.chat-input-hint {
  font-size:9px; color:var(--t3); padding:0 16px 6px;
  display:flex; justify-content:flex-end; gap:6px;
}
.chat-input-hint kbd {
  font-family:ui-monospace,Menlo,monospace; font-size:9px;
  padding:1px 4px; border:1px solid var(--border); border-radius:3px;
  background:rgba(255,255,255,.04); color:var(--t2);
}

/* ══════════════════════════════════════════════════════════════
   PICKING / GPP
   ══════════════════════════════════════════════════════════════ */
.picking-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); padding:14px 16px;
  transition:all var(--tr);
}
.picking-card:hover { border-color:var(--border2); }
.picking-card.urgente { border-left:3px solid var(--rojo-s); }
.picking-card.normal  { border-left:3px solid var(--azul); }
.picking-card.listo   { border-left:3px solid var(--verde); opacity:.7; }
.picking-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.picking-id { font-size:13px; font-weight:700; }
.picking-meta { font-size:11px; color:var(--t2); margin-bottom:10px; }
.picking-steps { display:flex; gap:4px; margin-bottom:10px; }
.picking-step {
  flex:1; height:4px; border-radius:2px; background:rgba(255,255,255,.08); overflow:hidden;
}
.picking-step.done    { background:var(--verde); }
.picking-step.active  { background:var(--i2b-teal); }
.picking-step.pending { background:rgba(255,255,255,.08); }

/* ══════════════════════════════════════════════════════════════
   BODEGA / STOCK GRID
   ══════════════════════════════════════════════════════════════ */
.stock-cat {
  background:var(--card2); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:12px; cursor:pointer;
  transition:all var(--tr);
}
.stock-cat:hover { border-color:var(--border2); }
.stock-cat .cat-name { font-size:11px; font-weight:600; margin:6px 0 4px; }
.stock-cat .cat-stock { font-size:18px; font-weight:800; }
.stock-cat .cat-unit  { font-size:10px; color:var(--t2); }
.stock-status-ok   { color:var(--verde); }
.stock-status-low  { color:var(--amarillo); }
.stock-status-out  { color:var(--rojo-s); }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE SCROLL
   ══════════════════════════════════════════════════════════════ */
.scroll-x { overflow-x:auto; }

/* ══════════════════════════════════════════════════════════════
   PANEL SPLIT (3-col vendedor)
   ══════════════════════════════════════════════════════════════ */
.panel-3 {
  display:grid;
  grid-template-columns:1fr 1fr 340px;
  height:100%;
  gap:0;
}
.panel { height:calc(100vh - var(--header-h)); overflow:hidden; display:flex; flex-direction:column; }
.panel-header {
  padding:12px 16px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  flex-shrink:0; background:var(--surface);
}
.panel-header-title { font-size:12px; font-weight:700; }
.panel-body { flex:1; overflow-y:auto; padding:16px; }

/* ══════════════════════════════════════════════════════════════
   MISC
   ══════════════════════════════════════════════════════════════ */
.divider { height:1px; background:var(--border); margin:16px 0; }
.empty-state {
  text-align:center; padding:40px 20px; color:var(--t2);
}
.empty-state .empty-icon { font-size:32px; margin-bottom:8px; }
.empty-state .empty-msg  { font-size:12px; }
.tag {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 7px; background:rgba(255,255,255,.06);
  border:1px solid var(--border); border-radius:var(--r-sm);
  font-size:10px; color:var(--t2);
}
.motor-chip {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:20px; font-size:9px; font-weight:700;
  background:rgba(23,168,194,.1); border:1px solid var(--border2); color:var(--i2b-teal);
}

/* ══════════════════════════════════════════════════════════════
   ACCESSIBILITY — FOCUS STATES
   ══════════════════════════════════════════════════════════════ */
:focus-visible { outline: 2px solid var(--i2b-teal); outline-offset: 2px; border-radius: 4px; }
button:focus-visible, .filter-btn:focus-visible, .nav-item:focus-visible,
.tab-btn:focus-visible, .profile-card-full:focus-visible {
  outline: 2px solid var(--i2b-teal); outline-offset: 2px;
}
.input:focus-visible { outline: none; /* already uses box-shadow */ }

/* Scroll lock (drawer/modal open) */
body.scroll-lock { overflow: hidden; }

/* ══════════════════════════════════════════════════════════════
   HU — HISTORIAS DE USUARIO (por agente)
   ══════════════════════════════════════════════════════════════ */
.hu-agent-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--agent-color, var(--i2b-teal));
  border-radius: var(--r);
  padding: 16px 18px;
  margin-bottom: 14px;
}
.hu-agent-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 12px;
}
.hu-agent-title { display: flex; align-items: center; gap: 12px; }
.hu-agent-icon {
  width: 36px; height: 36px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.04); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  flex-shrink: 0;
}
.hu-agent-name { font-size: 14px; font-weight: 800; color: var(--t1); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hu-fase-badge {
  font-size: 9px; font-weight: 700; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 20px; text-transform: uppercase;
}
.hu-fase-activa { background: rgba(34,197,94,.15); color: var(--verde); border: 1px solid rgba(34,197,94,.3); }
.hu-fase-futura { background: rgba(255,255,255,.05); color: var(--t2); border: 1px solid var(--border); }
.hu-agent-card[data-fase="futura"] { opacity: .75; }
.hu-agent-sub  { font-size: 11px; color: var(--t2); margin-top: 2px; }
.hu-agent-kpis { display: flex; gap: 10px; flex-wrap: wrap; }
.hu-agent-kpis > div {
  background: var(--card2); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 6px 12px;
  display: flex; flex-direction: column; align-items: flex-start;
  min-width: 64px;
}
.hu-agent-kpis strong { font-size: 13px; font-weight: 800; color: var(--t1); line-height: 1.1; }
.hu-agent-kpis .hu-roi-val { color: var(--verde); }
.hu-agent-kpis span  { font-size: 9px; color: var(--t3); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; margin-top: 2px; }
.hu-sync-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 14px; margin-bottom: 14px;
  background: rgba(23,168,194,.06); border: 1px solid var(--border2);
  border-radius: var(--r-sm); flex-wrap: wrap;
}
.hu-sync-info { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--t2); flex-wrap: wrap; }
.hu-sync-info a { color: var(--i2b-teal); text-decoration: underline; text-underline-offset: 2px; }
.hu-sync-info a:hover { color: var(--i2b-teal-light); }
.hu-sync-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--verde);
  box-shadow: 0 0 6px var(--verde); flex-shrink: 0;
}
.hu-sync-stamp {
  font-size: 10px; color: var(--t3); padding-left: 10px; border-left: 1px solid var(--border);
}
.hu-source-hint {
  font-size: 10px; color: var(--t3); padding: 6px 10px;
  background: rgba(23,168,194,.05); border: 1px dashed var(--border2);
  border-radius: var(--r-sm); margin-bottom: 10px;
}
.hu-source-hint strong { color: var(--i2b-teal); font-weight: 700; }
.hu-source-hint code {
  background: rgba(255,255,255,.05); padding: 1px 6px; border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px;
}
.hu-modulos { display: flex; flex-direction: column; gap: 6px; }
.hu-modulo {
  background: var(--card2); border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.hu-modulo[open] { border-color: var(--border2); }
.hu-modulo > summary {
  list-style: none; cursor: pointer;
  padding: 10px 14px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; gap: 10px;
}
.hu-modulo > summary::-webkit-details-marker { display: none; }
.hu-modulo > summary::before {
  content: '▸'; font-size: 10px; color: var(--t2); margin-right: 8px;
  display: inline-block; width: 10px;
}
.hu-modulo[open] > summary::before { content: '▾'; color: var(--i2b-teal); }
.hu-mod-name { font-weight: 700; color: var(--t1); flex: 1; }
.hu-mod-meta { font-size: 10px; color: var(--t2); font-weight: 600; white-space: nowrap; }
.hu-table-wrap { overflow-x: auto; border-top: 1px solid var(--border); }
.hu-table { width: 100%; border-collapse: collapse; font-size: 11px; min-width: 640px; }
.hu-table thead th {
  padding: 8px 10px; text-align: left;
  font-size: 9px; font-weight: 700; color: var(--t3);
  text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px solid var(--border); background: rgba(23,168,194,.04);
}
.hu-table tbody td {
  padding: 9px 10px; border-bottom: 1px solid rgba(255,255,255,.03);
  vertical-align: top;
}
.hu-table tbody tr:last-child td { border-bottom: none; }
.hu-table tbody tr:hover { background: rgba(23,168,194,.04); }
.hu-pill {
  font-size: 10px; font-weight: 800; letter-spacing: .04em;
  background: rgba(255,255,255,.04); padding: 2px 6px; border-radius: 4px;
  white-space: nowrap;
}
.hu-dep { font-size: 10px; color: var(--t2); max-width: 260px; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — tighter breakpoints for demo laptops
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  .grid-4 { gap: 10px; }
  .kpi-card { padding: 14px 14px; }
  .kpi-card .kpi-value { font-size: 22px; }
  .hu-agent-kpis { gap: 6px; }
  .hu-agent-kpis > div { min-width: 54px; padding: 5px 9px; }
}
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr; }
  #detail-drawer { width: 100% !important; right: -100% !important; }
  #detail-drawer.open { right: 0 !important; }
}