/* ==========================================================================
   okusbot · Sistema visual v1 (congelado 22-oct-2026, Diseño)
   Fuente: prototipo/panel/index.html (aprobado por Cristian: negro, cristal,
   píldoras, acento lila). Backend lo copia tal cual a app/ en la Fase B.
   Fuente tipográfica: Outfit 300/400/500/600/800 (Google Fonts).
   ========================================================================== */

:root{
  /* Color base */
  --ok-bg:#000;
  --ok-txt:#f4f3f8;
  --ok-mute:#8b8a98;
  --ok-dim:#5d5c69;

  /* Acento único: lila sacado de la luz de Okus */
  --ok-acc:#c8c0ff;
  --ok-acc-grad:linear-gradient(160deg,rgba(214,207,255,.92),rgba(184,172,255,.78));
  --ok-acc-ink:#0b0b0f;

  /* Marca (solo en la mascota y la luz de fondo, nunca en botones) */
  --ok-vio:#8b7bff; --ok-ora:#ff8a4c;

  /* Estados */
  --ok-online:#3ddc84; --ok-paused:#8b8a98; --ok-alert:#ff6b6b; --ok-amber:#ffb547;

  /* Etiquetas por especialista: [texto, fondo] */
  --lab-ventas:#b4a9ff;  --lab-ventas-bg:rgba(139,123,255,.14);
  --lab-conf:#9cc6ff;    --lab-conf-bg:rgba(90,160,255,.14);
  --lab-env:#7fe6da;     --lab-env-bg:rgba(61,214,198,.13);
  --lab-resc:#ffd08a;    --lab-resc-bg:rgba(255,181,71,.13);
  --lab-hum:#0b0b0f;     --lab-hum-bg:var(--ok-acc);

  /* Cristal */
  --glass-bg:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.035));
  --glass-line:1px solid rgba(255,255,255,.12);
  --glass-shine:inset 0 1px 0 rgba(255,255,255,.12);
  --glass-shadow:0 8px 30px rgba(0,0,0,.25);
  --glass-blur:blur(22px) saturate(1.5);

  /* Forma */
  --r-card:32px; --r-item:28px; --r-pill:999px;
  --tap:44px;            /* mínimo táctil, Android e iPhone */
  --gutter:16px;
  --maxw:560px;

  /* Movimiento */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-pop:cubic-bezier(.34,1.3,.64,1);
}

/* Fondo con luz: sin esto el cristal no se nota */
.ok-body{background:#000;color:var(--ok-txt);font-family:Outfit,system-ui,sans-serif}
.ok-body::before{content:"";position:fixed;inset:-10%;z-index:-1;pointer-events:none;filter:blur(20px);
  background:
    radial-gradient(40% 30% at 85% 12%,rgba(139,123,255,.38),transparent 70%),
    radial-gradient(35% 28% at 8% 48%,rgba(199,125,255,.22),transparent 70%),
    radial-gradient(38% 30% at 90% 78%,rgba(255,138,76,.22),transparent 70%),#000}

/* Tipografía */
.ok-h1{font-weight:300;font-size:clamp(34px,10vw,44px);line-height:1.02;letter-spacing:-.035em;margin:0}
.ok-eyebrow{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.16em;color:var(--ok-mute)}
.ok-num{font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:-.04em}

/* Superficie de cristal (tarjetas, chats, buscador, filtros) */
.ok-glass{background:var(--glass-bg);border:var(--glass-line);box-shadow:var(--glass-shine),var(--glass-shadow);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.ok-card{border-radius:var(--r-card)}
.ok-item{border-radius:var(--r-item);min-height:80px;padding:14px 16px}

/* Tarjetas sólidas (números destacados) */
.ok-card--acc{background:var(--ok-acc-grad);color:var(--ok-acc-ink);border:1px solid rgba(255,255,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.ok-card--light{background:linear-gradient(160deg,rgba(255,255,255,.92),rgba(235,235,240,.8));color:#0b0b0f;border:1px solid rgba(255,255,255,.6)}

/* Píldoras y botones */
.ok-pill{height:52px;padding:0 22px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.18);background:transparent;color:var(--ok-txt)}
.ok-pill.is-on{background:rgba(242,242,247,.92);color:#000}
.ok-btn{min-height:56px;border-radius:var(--r-pill);font-weight:600}
.ok-btn--pri{background:var(--ok-acc);color:var(--ok-acc-ink)}
.ok-btn--sec{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}
.ok-btn--danger{background:transparent;color:#ffb3b3;border:1px solid rgba(255,107,107,.25)}
.ok-icon-btn{width:48px;height:48px;border-radius:50%;display:grid;place-items:center}

/* Etiqueta de especialista */
.ok-lab{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:var(--r-pill);font-size:12px;font-weight:500}
.ok-lab::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}

/* Navegación inferior flotante */
.ok-nav{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));max-width:536px;margin:0 auto;border-radius:var(--r-pill);
  background:linear-gradient(180deg,rgba(40,40,48,.55),rgba(20,20,26,.55));border:var(--glass-line);
  -webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6)}
.ok-nav button.is-on{background:var(--ok-acc-grad);color:var(--ok-acc-ink);border-radius:var(--r-pill)}

/* Respeto a quien pide menos movimiento */
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}