/* =========================================================
   olaventas · Diseño «Liquid Glass»
   Paneles de vidrio translúcido sobre esferas de color.
   Cada negocio tiene sus propios colores:
   restaurante = ámbar y brasa · discoteca = neón violeta y cian · moda = rosa y lila
   ========================================================= */
:root {
  --o1: #f59e0b; --o1b: #92400e;   /* esfera grande (arriba a la derecha) */
  --o2: #ea580c;                    /* mancha izquierda */
  --o3: #14b8a6;                    /* mancha abajo a la derecha */
  --o4: #84cc16;                    /* brillo central */
  --glass: linear-gradient(160deg, rgba(255,255,255,.085), rgba(255,255,255,.025) 60%);
  --glass-b: rgba(255,255,255,.10);
  --glass-hi: inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 0 1px rgba(255,255,255,.02);
  --glass-sh: 0 24px 50px -24px rgba(0,0,0,.75);
  --blur: blur(26px) saturate(170%);
  --r: 22px;
}
body[data-industry="restaurante"] { --accent: #f97316; --accent2: #fbbf24; --o1: #fbbf24; --o1b: #b45309; --o2: #ea580c; --o3: #0d9488; --o4: #65a30d; }
body[data-industry="discoteca"] { --accent: #a855f7; --accent2: #22d3ee; --o1: #c084fc; --o1b: #581c87; --o2: #2563eb; --o3: #06b6d4; --o4: #ec4899; }
body[data-industry="moda"]       { --accent: #ec4899; --accent2: #f9a8d4; --o1: #f9a8d4; --o1b: #9d174d; --o2: #8b5cf6; --o3: #fb7185; --o4: #f0abfc; }
html, body { background: #05060a; }

/* ---------- Esferas de fondo ---------- */
.orbs { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.orbs i { position: absolute; border-radius: 50%; transition: background 1s ease; }
.orbs .o1 { width: 34vw; height: 34vw; min-width: 260px; min-height: 260px; right: 6vw; top: -12vw;
  background: radial-gradient(circle at 32% 30%, color-mix(in srgb, var(--o1) 70%, #fff), var(--o1) 32%, var(--o1b) 78%, #000 110%);
  box-shadow: inset -30px -40px 80px rgba(0,0,0,.45), 0 0 120px -20px var(--o1); animation: orbFloat 18s ease-in-out infinite alternate; }
.orbs .o2 { width: 40vw; height: 60vh; left: -14vw; top: 30vh; background: radial-gradient(circle at 60% 40%, var(--o2), transparent 68%); filter: blur(30px); opacity: .85; animation: orbDrift 22s ease-in-out infinite alternate; }
.orbs .o3 { width: 30vw; height: 30vw; min-width: 220px; min-height: 220px; right: -6vw; bottom: -10vw; background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--o3) 65%, #fff), var(--o3) 40%, transparent 72%); filter: blur(6px); opacity: .9; animation: orbFloat 24s ease-in-out infinite alternate-reverse; }
.orbs .o4 { width: 26vw; height: 26vw; left: 42vw; top: 62vh; background: radial-gradient(circle, var(--o4), transparent 65%); filter: blur(50px); opacity: .55; animation: orbDrift 26s ease-in-out infinite alternate-reverse; }
@keyframes orbFloat { to { transform: translate(-3vw, 4vh) scale(1.05); } }
@keyframes orbDrift { to { transform: translate(4vw, -6vh) scale(1.12); } }

/* ---------- Estructura sobre las esferas ---------- */
.app { position: relative; z-index: 1; background: transparent; }
.main { background: transparent; }

/* Receta de vidrio */
.card, .sidebar, .ai-banner, .ar-banner, .ar-hero, .kcol, .switch, .tabbar, .sheet, .phone-wrap .channel-tabs button, .round-btn, .icon-btn, .prod-tabs button, .u-tabs, .kcard, .connected .conn, .chat {
  background: var(--glass), rgba(14,16,22,.38) !important;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-b) !important;
  box-shadow: var(--glass-hi), var(--glass-sh);
}
.card, .ai-banner, .ar-banner, .ar-hero, .chat { border-radius: var(--r) !important; }

/* Barra lateral flotante */
@media (min-width: 861px) {
  .app { padding: 14px 0 14px 14px; gap: 0; }
  .sidebar { height: calc(100dvh - 28px); border-radius: 26px; margin-right: 6px; position: sticky; top: 14px; }
  .main { border-radius: 26px; }
}
.sidebar .nav-item { border-radius: 12px; color: rgba(255,255,255,.62); }
.sidebar .nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar .nav-item.active { color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 95%, #fff 5%), color-mix(in srgb, var(--accent) 80%, #000 20%)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 24px -10px var(--accent); }
.sidebar .nav-item.nav-ar.active { border-color: transparent; }
.nav-g { color: rgba(255,255,255,.42); }
.nav-g.excl { color: var(--accent); }
.biz-card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); }

/* Encabezado: saludo grande, fecha y sección */
.topbar { background: transparent !important; border: 0 !important; -webkit-backdrop-filter: none; backdrop-filter: none; padding-top: 18px; }
.title-wrap h1 { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.title-wrap p { color: rgba(255,255,255,.62); font-size: 12.5px; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.title-wrap p b { color: #fff; font-weight: 500; }
.hdot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px #22c55e; flex-shrink: 0; }
.round-btn { position: relative; width: 42px; height: 42px; border-radius: 50% !important; display: grid; place-items: center; font-size: 16px; flex-shrink: 0; }
.rb-badge { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; color: #fff;
  background: linear-gradient(180deg, #3b82f6, #1d4ed8); border: 2px solid #05060a; }
.switch { border-radius: 9999px !important; padding: 4px; background: rgba(10,11,15,.62) !important; }
.switch button { border-radius: 9999px; color: rgba(255,255,255,.82); }
.conn-note { color: rgba(255,255,255,.7); text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.switch button.active { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 95%, #fff 5%), color-mix(in srgb, var(--accent) 78%, #000 22%)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }

/* Botones en píldora con brillo */
.btn:not(.ghost) { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, #fff 8%), color-mix(in srgb, var(--accent) 78%, #000 22%)) !important; color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 22px -10px var(--accent); }
.btn:not(.ghost):hover { filter: brightness(1.08); }
.btn.ghost { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.12) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* Tarjetas e indicadores */
.kpi .label { color: rgba(255,255,255,.6); }
.kpi .value { font-weight: 600; letter-spacing: -.025em; }
.delta.up { color: #4ade80; }
.tag.good { background: rgba(34,197,94,.16); color: #4ade80; border: 1px solid rgba(74,222,128,.25); }
.tag.neutral { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); }
.ai-badge { box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.table-wrap td, .table-wrap th { border-color: rgba(255,255,255,.06); }
.connected .conn { border-radius: 9999px; }
.prod-tabs button.active, .u-tabs button.active { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, #fff 8%), color-mix(in srgb, var(--accent) 78%, #000 22%)) !important; color: #fff; border-color: transparent !important; }

/* Celular: barra inferior y hoja de vidrio */
.tabbar { border-radius: 26px 26px 0 0; border-bottom: 0 !important; }
.sheet { border-radius: 28px 28px 0 0 !important; }

/* ---------- Tablero de pedidos (Kanban) ---------- */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 4px 0 16px; }
.page-head h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 600; letter-spacing: -.03em; }
.page-head p { margin-top: 4px; }
.page-actions { display: flex; gap: 10px; }
.u-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 9999px !important; margin-bottom: 16px; }
.u-tabs button { border: 0; background: none; color: rgba(255,255,255,.7); padding: 8px 14px; border-radius: 9999px; font-size: 13.5px; font-weight: 500; }
.u-tabs button span { font-size: 11px; background: rgba(255,255,255,.12); border-radius: 9px; padding: 1px 7px; margin-left: 4px; }
.kanban { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.kcol { border-radius: 24px !important; padding: 14px 12px; min-height: 420px; display: flex; flex-direction: column; gap: 4px; scroll-snap-align: start; transition: background .2s, border-color .2s; }
.kcol.kover { border-color: color-mix(in srgb, var(--accent) 70%, transparent) !important; background: color-mix(in srgb, var(--accent) 12%, rgba(14,16,22,.4)) !important; }
.kcol-h { display: flex; align-items: center; gap: 8px; padding: 0 4px; }
.kcol-h b { font-size: 15px; font-weight: 600; }
.kdot { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 10px currentColor; }
.kcount { font-size: 11.5px; background: rgba(255,255,255,.1); border-radius: 9px; padding: 1px 8px; }
.kcol > small { padding: 0 4px 8px; font-size: 12.5px; }
.klist { display: grid; gap: 10px; }
.kcard { border-radius: 18px !important; padding: 12px; display: grid; gap: 8px; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; transition: transform .2s, opacity .2s; }
.kcard:hover { transform: translateY(-2px); }
.kcard.kplace { opacity: .25; transform: none; }
.kghost { position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none; margin: 0; cursor: grabbing; opacity: .97;
  box-shadow: 0 30px 60px -10px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.15) !important; }
.kc-top { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.kc-top small { color: rgba(255,255,255,.5); font-size: 11.5px; }
.kc-who { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; color: #1f2937; flex-shrink: 0; }
.kc-items { display: grid; gap: 5px; }
.kc-items div { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(255,255,255,.75); }
.kthumb { width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; background: #1b1d22 center / cover no-repeat; border: 1px solid rgba(255,255,255,.1); }
.kc-foot { display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.07); }
.kc-foot b { font-size: 14px; }
.kc-foot .tag { font-size: 11px; }
.kc-go, .kc-ok { margin-left: auto; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: #fff; }
.kc-go:hover { background: var(--accent); }
.kc-ok { color: #4ade80; }
.kempty { border: 1.5px dashed rgba(255,255,255,.14); border-radius: 16px; padding: 40px 10px; text-align: center; font-size: 12.5px; color: rgba(255,255,255,.45); }
.kan-hint { font-size: 12.5px; margin-top: 10px; }

/* ---------- Celular ---------- */
@media (max-width: 860px) {
  :root { --blur: blur(20px) saturate(160%); --r: 20px; }
  .orbs .o1 { right: -20vw; top: -18vw; width: 70vw; height: 70vw; }
  .orbs .o2 { width: 80vw; left: -30vw; }
  .orbs .o3 { width: 60vw; height: 60vw; right: -24vw; bottom: 8vh; }
  .title-wrap h1 { font-size: 19px; }
  .round-btn { width: 38px; height: 38px; font-size: 15px; }
  .kanban { grid-template-columns: repeat(4, 82vw); margin: 0 -14px; padding: 0 14px 8px; scrollbar-width: none; }
  .kanban::-webkit-scrollbar { display: none; }
  .page-head h2 { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) { .orbs i { animation: none !important; } }