/* ============================================================
   m3-cargo — Design System
   Cobalto + Lima · Sora / Inter / JetBrains Mono
   Tono: moderno, confiable, datos protagonistas.
   ============================================================ */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;450;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* Brand — Cobalto */
  --brand-50:  #EFF4FF;
  --brand-100: #DBE6FE;
  --brand-200: #BFD3FE;
  --brand-300: #93B4FD;
  --brand-400: #6090FA;
  --brand-500: #3B6DF5;
  --brand-600: #1D4ED8;   /* PRIMARY */
  --brand-700: #1E40AF;
  --brand-800: #1E3A8A;
  --brand-900: #172F6E;

  /* Navy — superficies oscuras (hero, sidebar) */
  --navy-950: #07111F;
  --navy-900: #0A1A2F;
  --navy-800: #0F2440;
  --navy-700: #16335C;
  --navy-600: #1E4474;

  /* Lima — acento (avance / éxito / energía) */
  --lime-200: #D9F99D;
  --lime-300: #BEF264;
  --lime-400: #A3E635;
  --lime-500: #84CC16;    /* ACCENT */
  --lime-600: #65A30D;
  --lime-700: #4D7C0F;

  /* Neutrales — Slate */
  --bg:        #F6F8FC;
  --bg-deep:   #EEF2F9;
  --surface:   #FFFFFF;
  --surface-2: #FAFBFE;
  --muted:     #F1F5F9;
  --border:    #E5EAF1;
  --border-2:  #D5DDE8;
  --ink:       #0E1B2E;
  --ink-2:     #33425B;
  --ink-3:     #64748B;
  --ink-4:     #94A3B8;
  --ink-5:     #B8C2D1;

  /* Semánticos */
  --success:   #16A34A;
  --success-bg:#E7F6ED;
  --warning:   #D97706;
  --warning-bg:#FBF1E0;
  --danger:    #DC2626;
  --danger-bg: #FBEAEA;
  --info:      #0891B2;
  --info-bg:   #E2F4F8;

  /* Tipografía */
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Radios */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 13px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Sombras */
  --sh-xs: 0 1px 2px rgba(15,36,64,.06);
  --sh-sm: 0 1px 3px rgba(15,36,64,.08), 0 1px 2px rgba(15,36,64,.04);
  --sh-md: 0 4px 16px -4px rgba(15,36,64,.12), 0 2px 6px -2px rgba(15,36,64,.07);
  --sh-lg: 0 18px 44px -12px rgba(15,36,64,.22), 0 6px 14px -8px rgba(15,36,64,.12);
  --sh-brand: 0 10px 26px -8px rgba(29,78,216,.45);
  --sh-lime: 0 10px 24px -8px rgba(101,163,13,.42);

  /* Layout */
  --maxw: 1240px;
  --side-w: 256px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,h2,h3,h4,h5 { font-family: var(--font-display); margin: 0; color: var(--ink); letter-spacing: -.02em; font-weight: 700; line-height: 1.12; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--lime-300); color: var(--navy-900); }

.mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }
.tnum { font-variant-numeric: tabular-nums; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 14.5px;
  padding: 11px 18px; border-radius: var(--r-sm); border: 1px solid transparent;
  cursor: pointer; transition: all .16s cubic-bezier(.4,0,.2,1); white-space: nowrap;
  line-height: 1;
}
.btn:active { transform: translateY(1px); }
.btn-lg { padding: 14px 24px; font-size: 16px; border-radius: var(--r-md); }
.btn-sm { padding: 8px 13px; font-size: 13px; }
.btn-primary { background: var(--brand-600); color: #fff; box-shadow: var(--sh-brand); }
.btn-primary:hover { background: var(--brand-700); box-shadow: 0 14px 30px -8px rgba(29,78,216,.55); }
.btn-accent { background: var(--lime-500); color: var(--navy-900); box-shadow: var(--sh-lime); font-weight: 700; }
.btn-accent:hover { background: var(--lime-400); }
.btn-dark { background: var(--navy-900); color: #fff; }
.btn-dark:hover { background: var(--navy-800); }
.btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--border-2); }
.btn-ghost:hover { background: var(--muted); border-color: var(--ink-4); }
.btn-quiet { background: var(--muted); color: var(--ink-2); }
.btn-quiet:hover { background: var(--bg-deep); }
.btn-white { background: #fff; color: var(--navy-900); }
.btn-white:hover { background: var(--brand-50); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ============================================================
   Cards & surfaces
   ============================================================ */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-sm);
}
.card-pad { padding: 22px; }
.card-flush { overflow: hidden; }
.elevated { box-shadow: var(--sh-md); }

.stat {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 18px 20px; box-shadow: var(--sh-xs);
}
.stat-label { font-size: 12.5px; color: var(--ink-3); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.stat-value { font-family: var(--font-display); font-weight: 700; font-size: 28px; letter-spacing: -.03em; margin-top: 6px; }
.stat-delta { font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; }
.delta-up { color: var(--success); }
.delta-down { color: var(--danger); }

/* ============================================================
   Badges & pills
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill);
  line-height: 1.2; white-space: nowrap;
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge-brand { background: var(--brand-50); color: var(--brand-700); }
.badge-lime { background: var(--lime-200); color: var(--lime-700); }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-info { background: var(--info-bg); color: var(--info); }
.badge-neutral { background: var(--muted); color: var(--ink-3); }
.badge-navy { background: var(--navy-900); color: #fff; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500;
  padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--border-2);
  background: var(--surface); color: var(--ink-2); cursor: pointer; transition: all .14s;
}
.chip:hover { border-color: var(--brand-400); color: var(--brand-700); }
.chip.active { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }

/* ============================================================
   Forms
   ============================================================ */
.field { display: flex; flex-direction: column; gap: 7px; }
.label { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.hint { font-size: 12.5px; color: var(--ink-3); }
.input, .select, .textarea {
  width: 100%; font-family: var(--font-body); font-size: 15px; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--border-2); border-radius: var(--r-sm);
  padding: 11px 13px; transition: all .15s; outline: none;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3.5px var(--brand-100); }
.input.error, .select.error { border-color: var(--danger); box-shadow: 0 0 0 3.5px var(--danger-bg); }
.input::placeholder { color: var(--ink-4); }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 38px; cursor: pointer; }
.input-err-msg { font-size: 12.5px; color: var(--danger); font-weight: 500; }

/* toggle */
.toggle { position: relative; width: 44px; height: 25px; border-radius: 999px; background: var(--ink-4); border: none; padding: 0; transition: background .18s; flex: none; }
.toggle.on { background: var(--brand-600); }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; transition: transform .18s; box-shadow: var(--sh-xs); }
.toggle.on::after { transform: translateX(19px); }

/* ============================================================
   Tables
   ============================================================ */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table thead th { text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); padding: 12px 16px; border-bottom: 1px solid var(--border); }
.table tbody td { padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--ink-2); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background .12s; }
.table tbody tr:hover { background: var(--surface-2); cursor: pointer; }
.table .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ============================================================
   Layout shell (apps)
   ============================================================ */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--side-w); flex: none; background: var(--navy-900); color: #fff;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.sidebar .brand-row { padding: 22px 22px 18px; display: flex; align-items: center; gap: 10px; }
.nav-group { padding: 8px 12px; }
.nav-group-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.38); padding: 14px 12px 8px; }
.nav-item {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: var(--r-sm);
  color: rgba(255,255,255,.72); font-size: 14px; font-weight: 500; cursor: pointer; transition: all .14s; margin-bottom: 2px;
}
.nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-item.active { background: var(--brand-600); color: #fff; font-weight: 600; }
.nav-item .ico { width: 18px; height: 18px; flex: none; opacity: .9; }
.nav-item .nav-badge { margin-left: auto; background: var(--lime-500); color: var(--navy-900); font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: 64px; flex: none; background: rgba(255,255,255,.85); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 16px;
  padding: 0 28px; position: sticky; top: 0; z-index: 20;
}
.content { padding: 28px; max-width: 1280px; width: 100%; margin: 0 auto; }
.page-title { font-size: 24px; font-weight: 700; letter-spacing: -.03em; }
.page-sub { color: var(--ink-3); font-size: 14px; margin-top: 3px; }

/* ============================================================
   Timeline
   ============================================================ */
.timeline { position: relative; padding-left: 8px; }
.tl-item { position: relative; padding-left: 34px; padding-bottom: 24px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before { content: ""; position: absolute; left: 9px; top: 22px; bottom: -4px; width: 2px; background: var(--border-2); }
.tl-item:last-child::before { display: none; }
.tl-dot { position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--surface); box-shadow: 0 0 0 2px var(--border-2); background: var(--ink-4); }
.tl-item.done .tl-dot { background: var(--success); box-shadow: 0 0 0 2px var(--success); }
.tl-item.current .tl-dot { background: var(--brand-600); box-shadow: 0 0 0 2px var(--brand-600); animation: pulse 2s infinite; }
.tl-item.current::before, .tl-item.done::before { background: var(--success); }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 2px var(--brand-600); } 50% { box-shadow: 0 0 0 6px var(--brand-200); } }
.tl-title { font-weight: 600; font-size: 14.5px; }
.tl-time { font-size: 12.5px; color: var(--ink-3); font-family: var(--font-mono); }

/* ============================================================
   Progress
   ============================================================ */
.progress { height: 9px; background: var(--muted); border-radius: 999px; overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--lime-500), var(--lime-400)); transition: width .5s cubic-bezier(.4,0,.2,1); }
.progress.brand > span { background: linear-gradient(90deg, var(--brand-600), var(--brand-400)); }

/* ============================================================
   Utilities
   ============================================================ */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-4{gap:4px}.gap-6{gap:6px}.gap-8{gap:8px}.gap-10{gap:10px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-20{gap:20px}.gap-24{gap:24px}
.wrap{flex-wrap:wrap}.center{align-items:center;justify-content:center}.between{justify-content:space-between}.aic{align-items:center}.ais{align-items:flex-start}.jc{justify-content:center}
.grow{flex:1}.mlauto{margin-left:auto}
.muted-txt{color:var(--ink-3)}.ink2{color:var(--ink-2)}
.fz12{font-size:12px}.fz13{font-size:13px}.fz14{font-size:14px}.fz18{font-size:18px}.fz20{font-size:20px}
.fw500{font-weight:500}.fw600{font-weight:600}.fw700{font-weight:700}
.divider{height:1px;background:var(--border);border:none;margin:0}
.grid{display:grid;gap:18px}
.skel{background:linear-gradient(90deg,var(--muted) 25%,var(--bg-deep) 37%,var(--muted) 63%);background-size:400% 100%;animation:skel 1.4s infinite;border-radius:6px}
@keyframes skel{0%{background-position:100% 0}100%{background-position:-100% 0}}

.fade-in { animation: fadeIn .4s cubic-bezier(.4,0,.2,1); }
@keyframes fadeIn { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform:none; } }

@keyframes fadeUp { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform:none; } }
.stagger > * { opacity:0; animation: fadeUp .45s cubic-bezier(.4,0,.2,1) forwards; }
.stagger > *:nth-child(1) { animation-delay:.02s; } .stagger > *:nth-child(2) { animation-delay:.07s; }
.stagger > *:nth-child(3) { animation-delay:.12s; } .stagger > *:nth-child(4) { animation-delay:.17s; }
.stagger > *:nth-child(5) { animation-delay:.22s; } .stagger > *:nth-child(6) { animation-delay:.27s; }
.stagger > *:nth-child(7) { animation-delay:.32s; } .stagger > *:nth-child(8) { animation-delay:.37s; }
.stagger > *:nth-child(9) { animation-delay:.42s; } .stagger > *:nth-child(n+10) { animation-delay:.46s; }

/* Sidebar colapsable — solo íconos */
:root { --side-w-collapsed: 76px; }
.sidebar { transition: width .22s cubic-bezier(.4,0,.2,1); }
.sidebar.collapsed { width: var(--side-w-collapsed); }
.brand-row-wrap { display:flex; align-items:center; justify-content:space-between; padding-right:14px; }
.sidebar.collapsed .brand-row-wrap { flex-direction:column-reverse; gap:8px; padding:16px 0 6px; }
.sidebar.collapsed .brand-row-wrap .brand-row { padding:0; }
.sidebar.collapsed .brand-row > span { display:none !important; }
.sidebar-toggle { display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:7px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); color:rgba(255,255,255,.55); cursor:pointer; transition:all .14s; flex:none; }
.sidebar-toggle:hover { background:rgba(255,255,255,.14); color:#fff; }
.sidebar-toggle svg { transition:transform .22s; display:block; transform:rotate(180deg); }
.sidebar.collapsed .sidebar-toggle svg { transform:rotate(0deg); }
.sidebar.collapsed .nav-group-label { display:none; }
.sidebar.collapsed .nav-item { justify-content:center; padding:10px; position:relative; }
.sidebar.collapsed .nav-item > span:not(.ico) { display:none; }
.sidebar.collapsed .nav-item .nav-badge { position:absolute; top:6px; right:14px; min-width:8px; width:8px; height:8px; padding:0; font-size:0; }
.sidebar.collapsed .nav-item:hover::after { content:attr(data-label); position:absolute; left:calc(100% + 10px); top:50%; transform:translateY(-50%); background:var(--navy-900); color:#fff; font-size:12.5px; font-weight:600; padding:6px 11px; border-radius:var(--r-sm); white-space:nowrap; box-shadow:var(--sh-lg); z-index:60; pointer-events:none; }
.sidebar.collapsed .cosw-trigger { justify-content:center; padding:9px; gap:0; }
.sidebar.collapsed .cosw-trigger-txt, .sidebar.collapsed .cosw-chev { display:none; }
.sidebar.collapsed .cosw-pop { left:12px; right:auto; width:280px; }
.route-dot { transition: background .3s, box-shadow .3s; }

/* ============================================================
   Cubi — chatbot flotante
   ============================================================ */
.cubi-root { position: fixed; right: 22px; bottom: 22px; z-index: 120; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; font-family: var(--font-body); }

.cubi-fab {
  position: relative; width: 62px; height: 62px; border-radius: 20px; border: none;
  background: linear-gradient(150deg, var(--navy-800), var(--navy-950));
  box-shadow: 0 14px 30px -8px rgba(10,26,47,.55), 0 0 0 1px rgba(255,255,255,.06) inset;
  display: grid; place-items: center; cursor: pointer; transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s;
}
.cubi-fab:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 20px 40px -10px rgba(10,26,47,.6); }
.cubi-fab.open { background: var(--navy-900); border-radius: 50%; }
.cubi-fab-art { display: grid; place-items: center; animation: cubiBob 3.2s ease-in-out infinite; }
@keyframes cubiBob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-3px) rotate(2deg); } }
.cubi-fab-badge {
  position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px;
  background: var(--lime-500); color: var(--navy-900); border: 2.5px solid var(--bg);
  border-radius: 999px; font-size: 11px; font-weight: 800; display: grid; place-items: center; line-height: 1;
}

.cubi-win {
  width: 384px; max-width: calc(100vw - 32px); height: 588px; max-height: calc(100vh - 120px);
  background: var(--surface); border-radius: var(--r-xl); overflow: hidden;
  box-shadow: 0 30px 70px -18px rgba(10,26,47,.45), 0 8px 24px -10px rgba(10,26,47,.25), 0 0 0 1px var(--border);
  display: flex; flex-direction: column; animation: cubiPop .22s cubic-bezier(.34,1.4,.5,1); transform-origin: bottom right;
}
@keyframes cubiPop { from { opacity: 0; transform: translateY(16px) scale(.94); } to { opacity: 1; transform: none; } }

.cubi-head {
  display: flex; align-items: center; gap: 12px; padding: 15px 16px;
  background: radial-gradient(120% 140% at 90% -20%, var(--navy-700), var(--navy-950) 70%); color: #fff; position: relative;
}
.cubi-head::after { content:""; position:absolute; inset:0; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0); background-size: 18px 18px; pointer-events:none; }
.cubi-head-ava { width: 44px; height: 44px; border-radius: 13px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); display: grid; place-items: center; flex: none; z-index: 1; }
.cubi-head-name { font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: -.02em; z-index: 1; }
.cubi-head-sub { font-size: 12px; color: rgba(255,255,255,.62); display: flex; align-items: center; gap: 6px; z-index: 1; }
.cubi-online { width: 8px; height: 8px; border-radius: 50%; background: var(--lime-400); box-shadow: 0 0 0 0 var(--lime-400); animation: cubiPulse 2s infinite; }
@keyframes cubiPulse { 0% { box-shadow: 0 0 0 0 rgba(163,230,53,.6); } 70% { box-shadow: 0 0 0 6px rgba(163,230,53,0); } 100% { box-shadow: 0 0 0 0 rgba(163,230,53,0); } }
.cubi-x { margin-left: auto; background: rgba(255,255,255,.08); border: none; color: rgba(255,255,255,.8); width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; cursor: pointer; transition: background .14s; z-index: 1; }
.cubi-x:hover { background: rgba(255,255,255,.18); color: #fff; }

.cubi-body { flex: 1; overflow-y: auto; padding: 18px 16px; background: var(--bg); display: flex; flex-direction: column; gap: 14px; }
.cubi-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 88%; }
.cubi-msg.bot { align-self: flex-start; }
.cubi-msg.me { align-self: flex-end; }
.cubi-bubble { font-size: 14px; line-height: 1.5; padding: 11px 14px; border-radius: 16px; }
.cubi-bubble.bot { background: var(--surface); color: var(--ink-2); border: 1px solid var(--border); border-bottom-left-radius: 5px; box-shadow: var(--sh-xs); }
.cubi-bubble.me { background: var(--brand-600); color: #fff; border-bottom-right-radius: 5px; box-shadow: var(--sh-brand); }
.cubi-action { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; font-size: 13px; font-weight: 700; color: var(--navy-900); background: var(--lime-400); padding: 7px 12px; border-radius: var(--r-pill); transition: background .14s; }
.cubi-action:hover { background: var(--lime-300); }
.cubi-typing { display: flex; gap: 4px; align-items: center; padding: 14px; }
.cubi-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); animation: cubiDot 1.2s infinite; }
.cubi-typing span:nth-child(2) { animation-delay: .2s; } .cubi-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes cubiDot { 0%,60%,100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }

.cubi-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 14px 4px; background: var(--bg); }
.cubi-chip { font-size: 12.5px; font-weight: 600; color: var(--brand-700); background: var(--surface); border: 1px solid var(--brand-200); padding: 7px 12px; border-radius: var(--r-pill); cursor: pointer; transition: all .14s; }
.cubi-chip:hover { background: var(--brand-50); border-color: var(--brand-400); }

.cubi-input { display: flex; align-items: center; gap: 9px; padding: 12px 14px; background: var(--surface); border-top: 1px solid var(--border); }
.cubi-input input { flex: 1; border: 1.5px solid var(--border-2); border-radius: var(--r-pill); padding: 11px 16px; font-family: var(--font-body); font-size: 14px; color: var(--ink); outline: none; transition: all .15s; }
.cubi-input input:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100); }
.cubi-send { width: 42px; height: 42px; flex: none; border-radius: 50%; border: none; background: var(--brand-600); color: #fff; display: grid; place-items: center; cursor: pointer; transition: all .15s; box-shadow: var(--sh-brand); }
.cubi-send:hover:not(:disabled) { background: var(--brand-700); }
.cubi-send:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }

@media (max-width: 480px) {
  .cubi-root { right: 16px; bottom: 16px; }
  .cubi-win { width: calc(100vw - 24px); height: calc(100vh - 110px); }
}

/* Cubi · Conversational Agents (Dialogflow CES) — lanzador flotante de marca */
#cubi-launcher {
  position: fixed; right: 22px; bottom: 22px; z-index: 201;
  width: 62px; height: 62px; border-radius: 20px; border: none;
  background: linear-gradient(150deg, var(--navy-800), var(--navy-950));
  box-shadow: 0 14px 30px -8px rgba(10,26,47,.55), 0 0 0 1px rgba(255,255,255,.06) inset;
  display: grid; place-items: center; cursor: pointer; transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s;
}
#cubi-launcher:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 20px 40px -10px rgba(10,26,47,.6); }
#cubi-launcher.open { border-radius: 50%; }
#cubi-launcher svg { animation: cubiBob 3.2s ease-in-out infinite; }
#cubi-launcher.open svg { animation: none; }
#cubi-chat-wrap {
  position: fixed; right: 22px; bottom: 96px; z-index: 200;
  width: 388px; max-width: calc(100vw - 32px); height: 600px; max-height: calc(100vh - 150px);
  display: none; border-radius: var(--r-xl); overflow: hidden;
  background: var(--surface); box-shadow: 0 30px 70px -18px rgba(10,26,47,.45), 0 0 0 1px var(--border);
  animation: cubiPop .22s cubic-bezier(.34,1.4,.5,1); transform-origin: bottom right;
}
#cubi-chat-wrap.open { display: block; }
#cubi-chat-wrap chat-messenger,
#cubi-chat-wrap chat-messenger-container { display: block !important; position: static !important; width: 100%; height: 100%; }
@media (max-width: 480px) {
  #cubi-launcher { right: 16px; bottom: 16px; }
  #cubi-chat-wrap { right: 12px; left: 12px; width: auto; bottom: 88px; height: calc(100vh - 110px); }
}

/* scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:999px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--ink-4)}