/* ============================================================
   SURFIA — Panel del negocio
   Estética: marino/océano/aqua, tipografía Sora + IBM Plex Mono.
   Claro y oscuro desde el día 1 (DASHBOARD-SPEC §6).
   ============================================================ */

:root {
  /* marca — mismos valores que el logo Flujo v2 */
  --marino: #0A1628;
  --brand: #0284C7;        /* océano */
  --brand-deep: #0E7490;   /* cian-marino */
  --aqua: #22D3EE;
  --aqua-soft: rgba(34, 211, 238, .12);
  --brand-grad: linear-gradient(135deg, #0284C7, #22D3EE);

  /* Las tres corrientes del logo. En claro NO pueden ser los colores de marca:
     el aqua da 1,7:1 contra el fondo y la corriente de arriba desaparece. Esta
     escala baja un paso y deja las tres sobre 3:1 sin perder la profundidad. */
  --logo-1: #0891B2;
  --logo-2: #0369A1;
  --logo-3: #0C4A6E;

  --bg: #F2F6FA;
  --bg-glow: radial-gradient(1200px 600px at 85% -10%, rgba(34, 211, 238, .14), transparent 60%),
             radial-gradient(900px 500px at -10% 110%, rgba(2, 132, 199, .10), transparent 55%);
  --card: #FFFFFF;
  --card-2: #F7FAFC;
  --ink: #0A1628;
  --ink-2: #3B4B61;
  --ink-3: #7C8BA1;
  --line: #E3EAF2;
  --line-2: #EDF2F7;

  /* semántico — independiente de la marca, a propósito */
  --ok: #0E9F6E;   --ok-soft: #E6F6F0;
  --warn: #C98A2B; --warn-soft: #FBF3E4;
  --bad: #D64545;  --bad-soft: #FBEAEA;
  /* tinta legible sobre los fondos suaves (el --warn puro da 2.66:1 en claro) */
  --warn-ink: #8A5A14;
  --hl-ink: #0E7490;

  /* canales */
  --wa: #1FAF5A;   --wa-soft: #E7F6EC;
  --ig: #DD2A7B;   --ig-soft: #FBE9F2;
  --ig-grad: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF);

  --shadow: 0 1px 2px rgba(10, 22, 40, .04), 0 8px 24px -12px rgba(2, 132, 199, .12);
  --shadow-lift: 0 2px 4px rgba(10, 22, 40, .05), 0 16px 40px -16px rgba(2, 132, 199, .22);
  --r: 16px;
  --r-sm: 11px;

  --font: Sora, "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* sobre el marino sí lucen los colores de marca */
    --logo-1: #22D3EE; --logo-2: #0284C7; --logo-3: #0E7490;
    --bg: #07101E;
    --bg-glow: radial-gradient(1200px 600px at 85% -10%, rgba(34, 211, 238, .08), transparent 60%),
               radial-gradient(900px 500px at -10% 110%, rgba(2, 132, 199, .07), transparent 55%);
    --card: #0C1930; --card-2: #0A1526;
    --ink: #E9F1F9; --ink-2: #B4C4D8; --ink-3: #6E819B;
    --line: #1A2C46; --line-2: #14243B;
    --aqua-soft: rgba(34, 211, 238, .10);
    --ok-soft: rgba(14, 159, 110, .14);
    --warn-soft: rgba(201, 138, 43, .14);
    --bad-soft: rgba(214, 69, 69, .14);
    --wa-soft: rgba(31, 175, 90, .13);
    --ig-soft: rgba(221, 42, 123, .13);
    --warn-ink: #DFAF63;
    --hl-ink: #22D3EE;
    --shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 8px 24px -12px rgba(0, 0, 0, .4);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, .25), 0 16px 40px -16px rgba(34, 211, 238, .15);
  }
}
:root[data-theme="dark"] {
  /* sobre el marino sí lucen los colores de marca */
  --logo-1: #22D3EE; --logo-2: #0284C7; --logo-3: #0E7490;
  --bg: #07101E;
  --bg-glow: radial-gradient(1200px 600px at 85% -10%, rgba(34, 211, 238, .08), transparent 60%),
             radial-gradient(900px 500px at -10% 110%, rgba(2, 132, 199, .07), transparent 55%);
  --card: #0C1930; --card-2: #0A1526;
  --ink: #E9F1F9; --ink-2: #B4C4D8; --ink-3: #6E819B;
  --line: #1A2C46; --line-2: #14243B;
  --aqua-soft: rgba(34, 211, 238, .10);
  --ok-soft: rgba(14, 159, 110, .14);
  --warn-soft: rgba(201, 138, 43, .14);
  --bad-soft: rgba(214, 69, 69, .14);
  --wa-soft: rgba(31, 175, 90, .13);
  --ig-soft: rgba(221, 42, 123, .13);
  --warn-ink: #DFAF63;
  --hl-ink: #22D3EE;
  --shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 8px 24px -12px rgba(0, 0, 0, .4);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, .25), 0 16px 40px -16px rgba(34, 211, 238, .15);
}

* { box-sizing: border-box; margin: 0; padding: 0 }

/* `hidden` tiene que ganarle a cualquier `display` que declaremos después: si
   no, una regla como `.side .foot button { display:block }` revive un botón ya
   marcado como oculto. Pasó con "Salir" y con el banner de negocio pendiente. */
[hidden] { display: none !important }
html, body { height: 100% }
body {
  font-family: var(--font);
  background: var(--bg); color: var(--ink); line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
body::before { content: ""; position: fixed; inset: 0; background: var(--bg-glow); pointer-events: none; z-index: 0 }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer }
input { font: inherit }

.app { position: relative; z-index: 1; display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh }
.main { min-width: 0; padding: 20px 26px 90px; max-width: 1060px; width: 100%; margin: 0 auto }

/* ---------- logo (Flujo v2) ---------- */
.logo { display: flex; align-items: center; gap: 10px; padding: 0 8px }
.logo .mark { width: 34px; height: 30px; display: grid; place-items: center }
.logo .mark svg { width: 32px; height: 28px }
.logo .word { font-size: 20px; font-weight: 700; letter-spacing: -.03em }

/* ---------- sidebar ---------- */
.side {
  padding: 22px 14px; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 26px; position: sticky; top: 0; height: 100vh;
}
.nav { display: flex; flex-direction: column; gap: 2px }
.nav button {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px;
  font-size: 14.5px; font-weight: 500; color: var(--ink-2); text-align: left; transition: all .15s;
}
.nav button svg { width: 18px; height: 18px; opacity: .75; flex: none }
.nav button:hover { background: var(--card-2); color: var(--ink) }
.nav button.on { background: var(--aqua-soft); color: var(--brand); font-weight: 600 }
.nav button.on svg { opacity: 1 }
.nav .badge {
  margin-left: auto; background: var(--bad); color: #fff; font-size: 10.5px; font-weight: 700;
  min-width: 17px; height: 17px; border-radius: 9px; display: grid; place-items: center; padding: 0 5px;
}
.side .foot {
  margin-top: auto; padding: 12px; border-radius: var(--r-sm); background: var(--card-2);
  border: 1px solid var(--line-2); font-size: 12px; color: var(--ink-3);
}
.side .foot b { color: var(--ink-2); display: block; font-size: 12.5px; margin-bottom: 2px }
.side .foot .dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
  margin-right: 5px; animation: pulse 2.2s infinite;
}
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(14, 159, 110, .35) } 50% { box-shadow: 0 0 0 5px rgba(14, 159, 110, 0) } }
.side .foot button { display: block; font-size: 11.5px; color: var(--brand); font-weight: 600; margin-top: 9px; font-family: var(--mono) }

/* ---------- barra de estado de datos ---------- */
.databar {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: var(--r-sm);
  font-size: 12.5px; margin-bottom: 16px; border: 1px solid;
}
.databar.demo { background: var(--aqua-soft); border-color: rgba(34, 211, 238, .3); color: var(--ink-2) }
.databar.live { background: var(--ok-soft); border-color: rgba(14, 159, 110, .3); color: var(--ink-2) }
.databar.err  { background: var(--bad-soft); border-color: rgba(214, 69, 69, .3); color: var(--ink-2) }
.databar b { color: var(--ink) }
.databar button { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--brand); white-space: nowrap }

/* ---------- topbar ---------- */
.top { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap }
.top .biz { display: flex; align-items: center; gap: 10px }
.top .biz .av {
  width: 38px; height: 38px; border-radius: 12px; background: var(--brand-grad); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 15px;
}
.top .biz .nm { font-weight: 700; font-size: 16px; letter-spacing: -.01em }
.top .biz .sub { font-size: 11.5px; color: var(--ink-3); font-family: var(--mono) }
.top .sp { flex: 1 }
.seg { display: flex; background: var(--card); border: 1px solid var(--line); border-radius: 11px; padding: 3px; box-shadow: var(--shadow) }
.seg button { padding: 6px 13px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); transition: all .15s }
.seg button.on { background: var(--aqua-soft); color: var(--brand) }

.chips { display: flex; gap: 8px; margin-bottom: 20px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none }
.chips::-webkit-scrollbar { display: none }
.chip {
  display: flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; white-space: nowrap;
  background: var(--card); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink-2);
  transition: all .15s; box-shadow: var(--shadow);
}
.chip svg { width: 14px; height: 14px }
.chip.on { border-color: var(--brand); color: var(--brand); background: var(--aqua-soft) }
.chip .n { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3) }
.chip.on .n { color: var(--brand) }

h1 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 4px }
.sub-h { color: var(--ink-3); font-size: 14px; margin-bottom: 20px }
.sub-h b { color: var(--brand); font-weight: 600 }
h2 { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 26px 0 12px }

.screen { display: none; animation: in .3s ease }
.screen.on { display: block }
@keyframes in { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }

.empty { text-align: center; color: var(--ink-3); font-size: 13.5px; padding: 26px 16px }

/* ---------- alertas ---------- */
.alerts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px }
.alert { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 500; border: 1px solid }
.alert.warning  { background: var(--warn-soft); border-color: rgba(201, 138, 43, .25); color: var(--ink) }
.alert.critical { background: var(--bad-soft); border-color: rgba(214, 69, 69, .25); color: var(--ink) }
.alert .ico { font-size: 15px }
.alert .go { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--brand); white-space: nowrap }

/* ---------- KPIs ---------- */
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
.kpi {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 15px 16px 13px;
  box-shadow: var(--shadow); transition: transform .18s, box-shadow .18s; position: relative; overflow: hidden; min-width: 0;
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift) }
.kpi .lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding-right: 52px }
.kpi .val { font-size: 26px; font-weight: 700; letter-spacing: -.03em; margin: 5px 0 8px; font-variant-numeric: tabular-nums }
.kpi .val small { font-size: 14px; color: var(--ink-3); font-weight: 600 }
.kpi .split { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 11.5px; font-family: var(--mono); color: var(--ink-3) }
.kpi .split span { display: flex; align-items: center; gap: 5px }
.kpi .split i { width: 8px; height: 8px; border-radius: 3px; flex: none }
.kpi .split .whatsapp i { background: var(--wa) }
.kpi .split .instagram i { background: var(--ig-grad) }
.kpi .trend { position: absolute; top: 14px; right: 14px; font-size: 11px; font-weight: 700; font-family: var(--mono); padding: 3px 7px; border-radius: 7px }
.kpi .trend.up { color: var(--ok); background: var(--ok-soft) }
.kpi .trend.dn { color: var(--bad); background: var(--bad-soft) }

/* la tarjeta de ventas es la que el dueño busca primero (mockup de Luis) */
.kpi.hero { background: var(--brand-grad); border: none; color: #fff }
.kpi.hero .lbl, .kpi.hero .split { color: rgba(255, 255, 255, .82) }
.kpi.hero .trend { background: rgba(255, 255, 255, .2); color: #fff }

/* ---------- gráfico ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; box-shadow: var(--shadow) }
.chart { display: flex; align-items: flex-end; gap: 10px; height: 130px; margin-top: 14px }
.chart .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; height: 100%; min-width: 0 }
.chart .b { border-radius: 6px 6px 3px 3px; min-height: 3px; transition: height .5s cubic-bezier(.2, .8, .2, 1) }
.chart .b.whatsapp { background: var(--wa); opacity: .9 }
.chart .b.instagram { background: linear-gradient(180deg, #F58529, #DD2A7B); opacity: .85; border-radius: 3px }
.chart .d { font-family: var(--mono); font-size: 10px; color: var(--ink-3); text-align: center; margin-top: 7px }
.legend { display: flex; gap: 16px; font-size: 12px; color: var(--ink-2); margin-top: 4px; flex-wrap: wrap }
.legend span { display: flex; align-items: center; gap: 6px }
.legend i { width: 9px; height: 9px; border-radius: 3px }
.legend .whatsapp i { background: var(--wa) }
.legend .instagram i { background: var(--ig-grad) }

/* ---------- feed ---------- */
.feed { display: flex; flex-direction: column }
.ev { display: flex; gap: 12px; padding: 13px 4px; border-bottom: 1px solid var(--line-2); align-items: flex-start }
.ev:last-child { border: none }
.ev .ch { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none }
.ev .ch.whatsapp { background: var(--wa-soft) }
.ev .ch.instagram { background: var(--ig-soft) }
.ev .ch svg { width: 16px; height: 16px }
.ev .tx { font-size: 13.5px; color: var(--ink-2); flex: 1; min-width: 0 }
.ev .tag { font-size: 10.5px; font-weight: 700; font-family: var(--mono); padding: 2px 8px; border-radius: 6px; margin-left: 6px; white-space: nowrap }
.tag.cita { background: var(--aqua-soft); color: var(--brand) }
.tag.venta { background: var(--ok-soft); color: var(--ok) }
.tag.esc { background: var(--warn-soft); color: var(--warn) }
.ev .t { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); white-space: nowrap; padding-top: 2px }

/* ---------- conversaciones ---------- */
.convs { display: flex; flex-direction: column; gap: 9px }
.conv {
  display: flex; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 13px 15px; box-shadow: var(--shadow); cursor: pointer;
  transition: all .15s; text-align: left; width: 100%;
}
.conv:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); border-color: var(--brand) }
.conv .av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; color: #fff; flex: none; position: relative }
.conv .av .mini { position: absolute; bottom: -3px; right: -3px; width: 17px; height: 17px; border-radius: 6px; background: var(--card); display: grid; place-items: center; border: 1px solid var(--line) }
.conv .av .mini svg { width: 10px; height: 10px }
.conv .bd { flex: 1; min-width: 0 }
.conv .nm { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px }
.conv .sn { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px }
.conv .mt { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none }
.conv .tm { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3) }

.st { font-size: 10.5px; font-weight: 700; font-family: var(--mono); padding: 3px 9px; border-radius: 7px; white-space: nowrap }
.st.resolved { background: var(--ok-soft); color: var(--ok) }
.st.waiting_owner { background: var(--warn-soft); color: var(--warn) }
.st.booked { background: var(--aqua-soft); color: var(--brand) }

/* hilo */
.thread .backbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap }
.thread .backbar button.back { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--brand); padding: 8px 12px; border-radius: 9px; background: var(--aqua-soft) }
.thread .who { font-weight: 700; font-size: 15px }
.thread .who small { display: block; font-weight: 500; font-size: 11.5px; color: var(--ink-3); font-family: var(--mono) }
.bubbles { display: flex; flex-direction: column; gap: 10px; max-width: 640px }
.bub { max-width: 78%; padding: 10px 14px; border-radius: 16px; font-size: 13.5px; line-height: 1.5; animation: in .3s ease both }
.bub.customer { align-self: flex-start; background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 5px }
.bub.agent { align-self: flex-end; background: var(--brand-grad); color: #fff; border-bottom-right-radius: 5px; box-shadow: 0 6px 18px -8px rgba(2, 132, 199, .55) }
.bub .who-s { font-size: 10px; font-family: var(--mono); opacity: .75; display: block; margin-bottom: 3px; letter-spacing: .05em }
.bub.note { align-self: center; background: var(--card-2); border: 1px dashed var(--line); color: var(--ink-3); font-size: 12px; padding: 7px 14px; border-radius: 999px; max-width: 92% }
.bub .tm { display: block; font-size: 9.5px; font-family: var(--mono); opacity: .6; margin-top: 4px; text-align: right }

.thread-actions { display: flex; gap: 10px; margin-top: 18px; max-width: 640px; flex-wrap: wrap }
.btn { padding: 12px 18px; border-radius: 12px; font-size: 13.5px; font-weight: 700; transition: all .15s }
.btn.primary { background: var(--brand-grad); color: #fff; box-shadow: 0 8px 20px -10px rgba(2, 132, 199, .7) }
.btn.primary:hover { transform: translateY(-1px) }
.btn.ghost { background: var(--aqua-soft); color: var(--brand) }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none }
.thread-note { font-size: 12px; color: var(--ink-3); margin-top: 10px; max-width: 640px }

/* ---------- ventas ---------- */
.totals { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-bottom: 16px }
.tot { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 15px 16px; box-shadow: var(--shadow); min-width: 0 }
.tot .lbl { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); display: flex; align-items: center; gap: 6px }
.tot .lbl svg { width: 13px; height: 13px }
.tot .val { font-size: 24px; font-weight: 700; letter-spacing: -.03em; margin-top: 5px; font-variant-numeric: tabular-nums }
.tot.hero { background: var(--brand-grad); border: none; color: #fff }
.tot.hero .lbl { color: rgba(255, 255, 255, .8) }
.rows { display: flex; flex-direction: column }
.row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line-2); font-size: 13.5px }
.row:last-child { border: none }
.row .ch-i { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; flex: none }
.row .ch-i.whatsapp { background: var(--wa-soft) }
.row .ch-i.instagram { background: var(--ig-soft) }
.row .ch-i svg { width: 14px; height: 14px }
.row .what { flex: 1; min-width: 0 }
.row .what b { font-weight: 600; display: block }
.row .what span { font-size: 12px; color: var(--ink-3) }
.row .by { font-size: 10.5px; font-weight: 700; font-family: var(--mono); padding: 3px 9px; border-radius: 7px; white-space: nowrap }
.row .by.agent { background: var(--aqua-soft); color: var(--brand) }
.row .by.owner { background: var(--card-2); color: var(--ink-3); border: 1px solid var(--line) }
.row .amt { font-family: var(--mono); font-weight: 700; font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums }
.row.summary { border-top: 1px solid var(--line); margin-top: 4px }
.row.summary b { font-family: var(--mono); font-size: 12px; color: var(--ink-3); font-weight: 600 }

/* ---------- agenda ---------- */
.day-h { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 18px 0 10px }
.apts { display: flex; flex-direction: column; gap: 9px }
.apt { display: flex; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 13px 15px; box-shadow: var(--shadow); align-items: center }
.apt .hr { font-family: var(--mono); font-weight: 700; font-size: 14px; color: var(--brand); min-width: 76px; flex: none }
.apt .bd { flex: 1; min-width: 0 }
.apt .bd b { font-weight: 600; font-size: 14px; display: block }
.apt .bd span { font-size: 12px; color: var(--ink-3) }
.apt .rt { display: flex; flex-direction: column; align-items: flex-end; gap: 5px }
.apt .src { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--ink-3); font-family: var(--mono) }
.apt .src svg { width: 12px; height: 12px }
.st.confirmed { background: var(--ok-soft); color: var(--ok) }
.st.reminded { background: var(--aqua-soft); color: var(--brand) }
.st.new { background: var(--warn-soft); color: var(--warn) }

/* ---------- inventario ---------- */
.invs { display: flex; flex-direction: column; gap: 9px }
.inv { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 13px 15px; box-shadow: var(--shadow) }
.inv .r1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.inv .r1 b { font-weight: 600; font-size: 14px; flex: 1; min-width: 120px }
.inv .r1 .qty { font-family: var(--mono); font-size: 12.5px; font-weight: 700 }
.inv .bar { height: 6px; border-radius: 3px; background: var(--line-2); margin-top: 10px; overflow: hidden }
.inv .bar i { display: block; height: 100%; border-radius: 3px; transition: width .6s ease }
.inv .r2 { display: flex; gap: 8px; margin-top: 8px; font-size: 11px; color: var(--ink-3); align-items: center }
.pill { font-size: 10px; font-weight: 700; font-family: var(--mono); padding: 2px 8px; border-radius: 6px; white-space: nowrap }
.pill.critical { background: var(--bad-soft); color: var(--bad) }
.pill.warning { background: var(--warn-soft); color: var(--warn) }
.pill.hot { background: var(--aqua-soft); color: var(--brand) }

/* ---------- canales ---------- */
.duel { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px }
.side-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 17px; box-shadow: var(--shadow); min-width: 0 }
.side-card .hd { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; margin-bottom: 14px }
.side-card .hd .ch { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center }
.side-card .hd .ch.whatsapp { background: var(--wa-soft) }
.side-card .hd .ch.instagram { background: var(--ig-soft) }
.side-card .hd .ch svg { width: 15px; height: 15px }
.mrow { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-2); font-size: 13px; color: var(--ink-2) }
.mrow:last-child { border: none }
.mrow b { font-family: var(--mono); font-size: 14px; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums }
.vs-bars { margin-top: 12px }
.vs { margin-bottom: 14px }
.vs .lbl { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--ink-2); margin-bottom: 6px }
.vs .lbl b { font-family: var(--mono) }
.vs .track { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--line-2) }
.vs .track .whatsapp { background: var(--wa) }
.vs .track .instagram { background: linear-gradient(90deg, #F58529, #DD2A7B) }
.insight { margin-top: 16px; padding: 14px 16px; border-radius: var(--r-sm); background: var(--aqua-soft); border: 1px solid rgba(34, 211, 238, .3); font-size: 13.5px; color: var(--ink-2) }
.insight .k { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); display: block; margin-bottom: 4px }

/* ---------- barra de instalación (PWA) ---------- */
/* Arranca DESPUÉS de la barra lateral (232px): a todo lo ancho tapaba el pie de
   la lateral, y con él el botón "Salir" — quien tuviera el aviso de instalar no
   podía cerrar sesión. Lo encontró una prueba automatizada al no poder hacer
   clic en Salir. */
.install-bar {
  position: fixed; left: calc(232px + 12px); right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: var(--r); background: var(--card);
  border: 1px solid var(--line); box-shadow: var(--shadow-lift); font-size: 13.5px;
  animation: in .3s ease;
}
.install-bar[hidden] { display: none }
.install-bar > span { flex: 1 1 200px }
.install-bar .btn { padding: 9px 16px; font-size: 13px }
.install-x { font-size: 15px; color: var(--ink-3); padding: 4px 8px; border-radius: 8px }
.install-x:hover { background: var(--card-2); color: var(--ink) }
/* En móvil no hay barra lateral: vuelve a todo lo ancho, pero por encima de la
   navegación inferior para no tapar los íconos. */
@media (max-width: 820px) {
  .install-bar { left: 12px; bottom: calc(72px + env(safe-area-inset-bottom)) }
}

/* ---------- diálogo de conexión ---------- */
dialog { border: none; padding: 0; background: transparent }
dialog::backdrop { background: rgba(10, 22, 40, .55); backdrop-filter: blur(2px) }
.sheet { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; width: min(440px, calc(100vw - 32px)); box-shadow: var(--shadow-lift) }
.sheet h3 { font-size: 17px; margin-bottom: 6px }
.sheet p { font-size: 13px; color: var(--ink-3); margin-bottom: 16px }
.field { margin-bottom: 12px }
.field label { display: block; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin-bottom: 5px }
.field input { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card-2); color: var(--ink); font-size: 13.5px; font-family: var(--mono) }
.field input:focus { outline: 2px solid var(--aqua-soft); border-color: var(--brand) }
.sheet .msg { font-size: 12.5px; margin-bottom: 12px; min-height: 18px }
.sheet .msg.ok { color: var(--ok) }
.sheet .msg.err { color: var(--bad) }
.sheet .actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap }

/* ---------- entrar / crear cuenta ---------- */
.auth-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px }
.auth-head .mark { width: 30px; height: 26px; display: grid; place-items: center; flex: none }
.auth-head .mark svg { width: 28px; height: 24px }
.auth-head h3 { margin: 0 }

.auth-tabs { display: flex; gap: 6px; background: var(--card-2); border: 1px solid var(--line); border-radius: 11px; padding: 3px; margin: 14px 0 16px }
.auth-tabs button { flex: 1; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); transition: all .15s }
.auth-tabs button.on { background: var(--card); color: var(--brand); box-shadow: var(--shadow) }

.auth-view { display: none }
.auth-view.on { display: block }

/* Un formulario SIN botón de envío dentro no se envía al pulsar Enter: el
   navegador simplemente no hace nada. Como el botón visible ("Entrar") vive
   fuera de los formularios —es compartido por las tres vías— cada uno lleva su
   propio submit fuera de pantalla. Sin esto, escribir la contraseña y pulsar
   Enter no entra, que es lo que hace todo el mundo. */
.submit-oculto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}
.auth-note { font-size: 12.5px; color: var(--ink-3); margin-bottom: 14px }
.field .hint { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink-3) }

.linkish { font-size: 12.5px; font-weight: 600; color: var(--brand); padding: 2px 0 }
.linkish:hover { text-decoration: underline }
.linkish.alt { display: block; width: 100%; text-align: center; margin-top: 14px; font-size: 12px; color: var(--ink-3) }

#turnstile-slot:empty { display: none }

.pending-banner {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 20px;
  border-radius: var(--r-sm); background: var(--warn-soft); border: 1px solid rgba(201, 138, 43, .3);
  font-size: 13.5px; color: var(--ink);
}
.pending-banner .ico { font-size: 16px }

/* ============================================================
   Ronda de mejoras de Luis (29-jul): encabezado vivo, KPIs que
   entran a su data, gráfico con glow, ventas→conversación,
   inventario editable, demanda perdida y horas pico.
   Lenguaje: "bioluminiscencia" — el brillo aqua de la marca
   emergiendo del marino profundo. IA de vanguardia, sin ruido.
   ============================================================ */

/* ---------- encabezado del negocio ---------- */
.top .biz .av-ring {
  padding: 2.5px; border-radius: 14px; position: relative;
  background: conic-gradient(from var(--ring-a, 0deg), #22D3EE, #0284C7, #0E7490, #22D3EE);
  animation: ring-spin 6s linear infinite;
}
@property --ring-a { syntax: "<angle>"; initial-value: 0deg; inherits: false }
@keyframes ring-spin { to { --ring-a: 360deg } }
.top .biz .av-ring::after {
  content: ""; position: absolute; inset: -5px; border-radius: 18px; z-index: -1;
  background: conic-gradient(from var(--ring-a, 0deg), #22D3EE, #0284C7, #0E7490, #22D3EE);
  filter: blur(10px); opacity: .35;
}
.top .biz .nm { font-size: 17px; font-weight: 800; letter-spacing: -.02em }
.biz-live { display: flex; align-items: center; gap: 6px }
.ia-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--aqua); flex: none;
  box-shadow: 0 0 6px 1px rgba(34, 211, 238, .8); animation: ia-breathe 2.4s ease-in-out infinite;
}
@keyframes ia-breathe {
  0%, 100% { box-shadow: 0 0 4px 0 rgba(34, 211, 238, .5) }
  50% { box-shadow: 0 0 10px 3px rgba(34, 211, 238, .85) }
}

/* ---------- KPIs clicables ---------- */
button.kpi { display: block; width: 100%; text-align: left; cursor: pointer; font: inherit }
.kpi .peek {
  position: absolute; right: 14px; bottom: 11px; font-size: 11px; font-weight: 700;
  font-family: var(--mono); color: var(--brand); opacity: 0; transform: translateX(-6px);
  transition: opacity .18s, transform .18s; white-space: nowrap;
}
.kpi.hero .peek { color: #fff }
.kpi:hover .peek, .kpi:focus-visible .peek { opacity: 1; transform: none }
.kpi:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(34, 211, 238, .35) }
.kpi:active { transform: translateY(0) scale(.99) }

/* ---------- gráfico (SVG con glow) ---------- */
.chartwrap { position: relative; margin-top: 14px }
.chart { height: 150px; display: block; margin: 0 }
.chart svg { width: 100%; height: 150px; display: block; overflow: visible }
.chart .grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 7; vector-effect: non-scaling-stroke }
.chart .stroke { vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.1s cubic-bezier(.4, 0, .2, 1) forwards }
@keyframes draw { to { stroke-dashoffset: 0 } }
.chart .area { opacity: 0; animation: fadein .9s ease .25s forwards }
@keyframes fadein { to { opacity: 1 } }
.chart .dot-last { vector-effect: non-scaling-stroke }
.chart .dot-pulse { transform-origin: center; transform-box: fill-box; animation: dot-pulse 2.2s ease-out infinite; opacity: .5 }
@keyframes dot-pulse { 0% { transform: scale(1); opacity: .55 } 70%, 100% { transform: scale(3.2); opacity: 0 } }
.chart-labels { display: flex; justify-content: space-between; margin-top: 8px }
.chart-labels span { font-family: var(--mono); font-size: 10px; color: var(--ink-3); flex: 1; text-align: center }
.chart-labels span:first-child { text-align: left }
.chart-labels span:last-child { text-align: right }
.chart-tip {
  position: absolute; top: -6px; z-index: 5; pointer-events: none;
  background: var(--marino); color: #E9F1F9; border: 1px solid rgba(34, 211, 238, .35);
  border-radius: 10px; padding: 8px 11px; font-size: 11.5px; line-height: 1.6;
  box-shadow: 0 8px 24px -8px rgba(10, 22, 40, .5), 0 0 12px rgba(34, 211, 238, .18);
  display: flex; flex-direction: column; min-width: 118px;
}
.chart-tip b { font-family: var(--mono) }
.chart-tip span { display: flex; align-items: center; gap: 6px }
.chart-tip span i { width: 8px; height: 8px; border-radius: 3px; flex: none }

/* ---------- ventas → conversación ---------- */
button.row.link { width: 100%; text-align: left; cursor: pointer; font: inherit; border-radius: 10px; transition: background .15s }
button.row.link:hover { background: var(--aqua-soft) }
button.row.link:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; box-shadow: inset 0 0 0 4px rgba(34, 211, 238, .3) }
.row .chev { font-size: 18px; color: var(--ink-3); font-weight: 700; padding-left: 2px }
button.row.link:hover .chev { color: var(--brand) }

/* ---------- inventario editable ---------- */
.inv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap }
.inv-head .btn { flex: none; white-space: nowrap }
.stepper { display: flex; align-items: center; gap: 2px; margin-left: auto }
.stp {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--brand);
  background: var(--aqua-soft); border: 1px solid rgba(34, 211, 238, .3); transition: all .12s;
}
.stp:hover:not([disabled]) { background: var(--brand); color: #fff }
.stp[disabled] { opacity: .35; cursor: not-allowed }
.stepper .qty { min-width: 52px; text-align: center; font-family: var(--mono); font-size: 14px; font-weight: 700 }
.stepper .qty small { font-size: 9.5px; margin-left: 3px; opacity: .7; font-weight: 600 }
.inv .r2 { justify-content: space-between; flex-wrap: wrap }
.avail { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; font-family: var(--mono); color: var(--ink-3); padding: 8px 10px; margin: -8px -10px; min-height: 32px; border-radius: 9px }
.avail i { width: 26px; height: 15px; border-radius: 999px; background: var(--line); position: relative; transition: background .18s; flex: none }
.avail i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; transition: transform .18s; box-shadow: 0 1px 3px rgba(0, 0, 0, .25) }
.avail.on { color: var(--brand) }
.avail.on i { background: var(--brand) }
.avail.on i::after { transform: translateX(11px) }
.inv.off { opacity: .6 }
.pill.mute { background: var(--card-2); color: var(--ink-3); border: 1px solid var(--line) }

/* ---------- lo más pedido + demanda perdida ---------- */
.demand .dr { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) 34px; gap: 12px; align-items: center; padding: 7px 0; animation: in .4s ease both }
.demand .dl { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.demand .db { height: 10px; border-radius: 5px; background: var(--line-2); overflow: hidden }
.demand .db i { display: block; height: 100%; border-radius: 5px; background: var(--brand-grad); box-shadow: 0 0 8px rgba(34, 211, 238, .5); transition: width .7s cubic-bezier(.2, .8, .2, 1) }
.demand .dc { font-family: var(--mono); font-size: 13px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums }
.unmet { margin-top: 14px; border: 1px solid rgba(201, 138, 43, .3); background: var(--warn-soft); border-radius: var(--r-sm); padding: 12px 14px }
.unmet .uh { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--warn-ink); margin-bottom: 8px }
.unmet .ur { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 5px 0; border-bottom: 1px dashed rgba(201, 138, 43, .25) }
.unmet .ur:last-of-type { border: none }
.unmet .ur b { font-size: 12px; color: var(--warn-ink); font-weight: 700; white-space: nowrap }
.unmet .un { font-size: 11.5px; color: var(--ink-2); margin-top: 8px }

/* ---------- horas pico ---------- */
.hours { overflow-x: auto }
.hm { display: grid; grid-template-columns: 38px repeat(var(--cols, 7), minmax(28px, 1fr)); gap: 4px; align-items: center; min-width: 300px }
.hm .hh { font-family: var(--mono); font-size: 9.5px; color: var(--ink-3); text-align: center }
.hm .hd { font-family: var(--mono); font-size: 10px; color: var(--ink-2); font-weight: 600 }
.hm .hc {
  display: block; height: 26px; border-radius: 7px;
  background: var(--line-2); /* fallback: Safari iOS < 16.2 no trae color-mix */
  background: color-mix(in srgb, var(--aqua) calc(var(--t) * 82%), var(--line-2));
  transition: transform .12s;
}
.hm .hc:hover { transform: scale(1.12) }
.hm .hc.hot { box-shadow: 0 0 10px 1px rgba(34, 211, 238, .55); background: var(--brand-grad) }
.hlegend { display: flex; align-items: center; gap: 5px; margin-top: 12px; font-size: 10.5px; font-family: var(--mono); color: var(--ink-3) }
.hlegend .sw { width: 18px; height: 10px; border-radius: 4px; background: var(--line-2); background: color-mix(in srgb, var(--aqua) calc(var(--t) * 82%), var(--line-2)) }
.hlegend .sw.hot { background: var(--brand-grad) }
.hinsight { margin-top: 12px; padding: 11px 14px; border-radius: var(--r-sm); background: var(--aqua-soft); border: 1px solid rgba(34, 211, 238, .3); font-size: 13px; color: var(--ink-2) }
.hinsight b { color: var(--hl-ink) }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 90;
  background: var(--marino); color: #E9F1F9; border: 1px solid rgba(34, 211, 238, .35);
  padding: 11px 18px; border-radius: 999px; font-size: 13px; font-weight: 600;
  box-shadow: 0 12px 32px -8px rgba(10, 22, 40, .55), 0 0 14px rgba(34, 211, 238, .2);
  animation: toast-in .25s cubic-bezier(.2, .9, .3, 1.2); max-width: min(92vw, 480px); text-align: center;
}
.toast.err { border-color: rgba(214, 69, 69, .55) }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px) } to { opacity: 1; transform: translate(-50%, 0) } }

/* ---------- modal de producto ---------- */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .top .biz .av-ring, .ia-dot, .chart .dot-pulse { animation: none }
  .chart .stroke { animation: none; stroke-dashoffset: 0 }
  .chart .area { animation: none; opacity: 1 }
  .demand .dr { animation: none }
}

/* ---------- móvil ---------- */
.bnav { display: none }
.mob-logo { display: none }
@media (max-width: 820px) {
  .app { grid-template-columns: minmax(0, 1fr) }
  .side { display: none }
  .main { padding: 16px 14px 96px }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .totals { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .tot.hero { grid-column: 1 / -1 }
  .duel { grid-template-columns: minmax(0, 1fr) }
  .mob-logo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px }
  /* en móvil el botón baja a su propia línea en vez de estrujar el texto */
  .databar { flex-wrap: wrap; font-size: 12px; padding: 10px 12px; row-gap: 6px }
  .databar > span:nth-child(2) { flex: 1 1 200px }
  .bnav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    background: var(--card); border-top: 1px solid var(--line);
    padding: 7px 4px calc(7px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 24px -12px rgba(10, 22, 40, .15);
  }
  .bnav button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 9.5px; font-weight: 600; color: var(--ink-3); padding: 4px 0; border-radius: 9px; position: relative }
  .bnav button svg { width: 19px; height: 19px }
  .bnav button.on { color: var(--brand) }
  .bnav .badge { position: absolute; top: 0; right: 22%; background: var(--bad); color: #fff; font-size: 9px; font-weight: 700; min-width: 15px; height: 15px; border-radius: 8px; display: grid; place-items: center; padding: 0 4px }
  .field-row { grid-template-columns: minmax(0, 1fr) }
  .toast { bottom: calc(76px + env(safe-area-inset-bottom)) }
  .demand .dr { grid-template-columns: minmax(90px, 130px) minmax(0, 1fr) 30px; gap: 8px }
  .stp { width: 36px; height: 36px }
}

/* ===== catálogo B2B (nicho inventory, Issue #30 + primer tenant real) ===== */
/* Barra de herramientas del catálogo: solo aparece con >12 productos. */
.inv-tools { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px }
.inv-tools:empty { display: none }
.inv-tools input[type="search"] {
  width: 100%; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink-1); font: inherit; font-size: 13.5px;
}
.inv-tools input[type="search"]:focus { outline: 2px solid var(--brand); outline-offset: 1px }
.inv .r1 .sku { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: .02em }
.inv .r1 .price { font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--brand) }
#inv-more { width: 100%; margin-top: 10px }
/* "Cliente desistió" / "Cancelar cita": acción secundaria, no debe gritar. */
.cancel-apt {
  font-size: 11px; padding: 4px 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--ink-3);
}
.cancel-apt:hover { color: var(--bad); border-color: var(--bad) }