/* ==========================================================================
   Marca Wise (Wise – Marketing Digital) sobre la base de estilos.css.
   Guía: /root/proyectos-web/marca-wise/MARCA.md. Fuentes locales (sin CDN):
   Mac Sans (títulos, licencia de Wise: solo proyectos de Wise), Kumbh Sans (interfaz y chats), Krona One (acentos).
   Paleta: azul eléctrico, naranja, verde lima, gris papel, negro/blanco. Contraste AA en textos.
   ========================================================================== */
@font-face { font-family: "Mac Sans"; src: url("../vendor/fonts/mac-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Kumbh Sans"; src: url("../vendor/fonts/kumbh-sans-variable.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Krona One"; src: url("../vendor/fonts/krona-one-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --wise-azul: #1E3BFF;
  --wise-naranja: #FF5B14;
  --wise-lima: #CDF23C;
  --wise-papel: #F1EFEA;
  --brand: var(--wise-azul);
  --brand-ink: #FFFFFF;
  --brand-text: #1A33D9;
  --canvas: var(--wise-papel);
  --canvas-2: #F6F5F1;
  --font: "Kumbh Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-titulo: "Mac Sans", "Kumbh Sans", ui-sans-serif, system-ui, sans-serif;
  --font-acento: "Krona One", "Kumbh Sans", ui-sans-serif, sans-serif;
  /* Tags: etapas en azul, caliente naranja, cliente/válido lima. */
  --st-prospecto-bg: #E3E8FF; --st-prospecto-tx: #1A2FB8; --st-prospecto-pt: var(--wise-azul);
  --st-caliente-bg: #FFE6DA; --st-caliente-tx: #A33500; --st-caliente-pt: var(--wise-naranja);
  --st-cliente-bg: #EEFBC4; --st-cliente-tx: #3B5200; --st-cliente-pt: #8DB300;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #6F86FF; --brand-ink: #0B0B0B; --brand-text: #A9B6FF;
    --st-prospecto-bg: #1A2150; --st-prospecto-tx: #B3BEFF; --st-prospecto-pt: #6F86FF;
    --st-caliente-bg: #3D1C0D; --st-caliente-tx: #FFB48F; --st-caliente-pt: #FF7A3D;
    --st-cliente-bg: #26300B; --st-cliente-tx: #DDF77E; --st-cliente-pt: var(--wise-lima);
  }
  :root:not([data-theme="light"]) .logo-wise { filter: invert(1); }
}
:root[data-theme="dark"] {
  --brand: #6F86FF; --brand-ink: #0B0B0B; --brand-text: #A9B6FF;
  --st-prospecto-bg: #1A2150; --st-prospecto-tx: #B3BEFF; --st-prospecto-pt: #6F86FF;
  --st-caliente-bg: #3D1C0D; --st-caliente-tx: #FFB48F; --st-caliente-pt: #FF7A3D;
  --st-cliente-bg: #26300B; --st-cliente-tx: #DDF77E; --st-cliente-pt: var(--wise-lima);
}
:root[data-theme="dark"] .logo-wise { filter: invert(1); }

body { font-family: var(--font); }
h1, h2, .topbar h1, .login__t, .brandmark span, .box__head h2, .box__head h3, .empty__t { font-family: var(--font-titulo); font-weight: 400; letter-spacing: 0; }
.inicial-wise { font-family: "Mac Sans"; font-feature-settings: 'ss01' 1; }
.chip, .btn, .kpi__value, .num-wise, .tabbar a, .filters button { font-family: var(--font-acento); font-weight: 400; letter-spacing: 0; }
.chip { font-size: 10.5px; }
.btn { font-size: .8125rem; }
.tabbar a { font-size: 9.5px; }
.filters button { font-size: 11px; }
.bubble, .contact__sum, .prose { font-family: var(--font); }

.logo-wise { display: block; height: 36px; width: auto; }
.logo-wise--lg { height: 56px; }
.brandmark { gap: 12px; }
.brandmark span { font-family: var(--font-titulo); font-size: 1.05rem; }

/* Clientes en la barra lateral */
.clientes { display: grid; gap: 6px; margin: 0 0 14px; padding: 10px 6px 14px; border-bottom: 1px solid var(--line); }
.clientes__t { margin: 0 4px; font: 400 10px/1 var(--font-acento); text-transform: uppercase; color: var(--ink-2); }
.clientes__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 40vh; overflow-y: auto; }
.cliente { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 8px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink); font: 500 var(--fs-sm)/1.2 var(--font); text-align: left; cursor: pointer; }
.cliente:hover { background: var(--surface-2); }
.cliente[aria-current="true"] { background: var(--surface); box-shadow: inset 3px 0 0 var(--wise-azul); font-weight: 650; }
.cliente__ini { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--wise-azul); color: #fff; font: 400 11px/1 var(--font-acento); }
.cliente__n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cliente__wa { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.cliente__wa[data-state="conectado"] { background: #2E9A55; }
.cliente__wa[data-state="esperando_qr"], .cliente__wa[data-state="conectando"] { background: var(--wise-naranja); }

/* Selector de cliente en el celular */
.cli-movil { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.cli-movil .logo-wise { height: 28px; }
.cli-movil__sel { flex: 1; min-width: 0; }
.cli-movil select { width: 100%; height: 40px; font: 600 var(--fs-sm)/1 var(--font); }
@media (min-width: 960px) { .cli-movil { display: none; } }

/* Filtros por tag y chips */
.filtros-tags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0 14px; }
@media (min-width: 640px) { .filtros-tags { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fsel select, .input--sm { height: 36px; font-size: var(--fs-xs); padding: 0 8px; }
.chip--camp { background: var(--wise-lima); color: #1B2400; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.chip--tag { background: var(--surface-2); color: var(--ink); }
.chip--man { height: 18px; font-size: 9px; padding: 0 6px; background: var(--wise-naranja); color: #fff; }
.tags-form { display: grid; gap: 12px; margin-top: 16px; }
@media (min-width: 640px) { .tags-form { grid-template-columns: 1fr 1fr; } }

/* Panel de campañas */
.main > .panel, .main > .topbar + .panel { overflow-y: auto; flex: 1; }
.panel { display: grid; gap: 16px; align-content: start; }
.panel__filtro { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.panel__filtro .field { min-width: 140px; }
.panel__duo { display: grid; gap: 16px; }
@media (min-width: 960px) { .panel { padding: 24px 32px 48px; } .panel__duo { grid-template-columns: 1fr 1fr; } }
.embudo { display: grid; gap: 10px; }
.embudo__paso { display: grid; grid-template-columns: minmax(110px, 180px) 1fr 56px; align-items: center; gap: 12px; font-size: var(--fs-sm); }
.embudo__barra { height: 22px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.embudo__barra i { display: block; height: 100%; background: var(--wise-azul); border-radius: inherit; }
.embudo__paso:last-child .embudo__barra i { background: var(--wise-lima); }
.embudo__v { text-align: right; font-size: .95rem; }
.tabla-scroll { overflow-x: auto; margin: 0 -4px; }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tabla th, .tabla td { padding: 8px 6px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tabla th[scope="row"], .tabla thead th:first-child { text-align: left; font-weight: 600; }
.tabla thead th { font: 400 10px/1.2 var(--font-acento); color: var(--ink-2); }
.tabla .gasto { width: 96px; text-align: right; }
.barras { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.barras li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }

/* Ajustes → Portal del cliente (accesos) */
#aj-accesos:empty { display: none; }
.liga { display: grid; gap: 8px; padding: 14px; border-radius: var(--r-md); background: var(--surface-2); min-width: 0; }
.liga__fila { display: flex; align-items: center; gap: 8px; min-width: 0; }
.liga__fila .input { flex: 1; min-width: 0; }
.liga__url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); color: var(--brand-text); }
.liga__slug { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 12px; margin-top: 6px; }
.liga__slug .field { flex: 1 1 220px; min-width: 0; }
.recien { align-items: flex-start; color: var(--ink); }
.recien .ico { color: var(--ok); }
.recien__txt { display: grid; gap: 10px; min-width: 0; flex: 1; }
.recien__msg { margin: 0; padding: 12px; border-radius: var(--r-sm); background: var(--surface); font-size: var(--fs-xs); white-space: pre-wrap; overflow-wrap: anywhere; }
.accesos__lista li.acceso { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.acceso__txt { display: grid; gap: 3px; min-width: 0; }
.acceso__txt .hist__t { justify-content: flex-start; flex-wrap: wrap; gap: 6px; }
.acceso__txt .hist__t > span:first-child { font-weight: 650; }
.acceso--off .acceso__txt { opacity: .6; }
.acceso__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.switch--mini { gap: 8px; margin-right: 6px; }
.accesos__nuevo { display: grid; gap: 14px; padding-top: 16px; border-top: 1px solid var(--line); }
section.accesos > .accesos__lista { margin-top: 20px; }
@media (max-width: 559.98px) { .accesos__nuevo .field-row { grid-template-columns: 1fr; } }
.recien__txt .row { justify-content: flex-start; flex-wrap: wrap; } .recien__txt .btn { margin-left: 0; }
/* Panel: que las tablas anchas se desplacen dentro de su caja y no ensanchen la página en el celular */
.panel > *, #panel { min-width: 0; }
#panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; }
.panel { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 559.98px) { #panel .kpi__value { font-size: 1.15rem; overflow-wrap: anywhere; } }
@media (max-width: 559.98px) {
  #panel .kpis { grid-template-columns: 1fr 1fr; }
  #panel .kpis > :last-child { grid-column: 1 / -1; }
  #panel .kpi__value { font-size: 1.35rem; overflow-wrap: normal; }
  .embudo__paso { grid-template-columns: minmax(0, 1fr) 40px; row-gap: 6px; }
  .embudo__barra { grid-column: 1 / -1; grid-row: 2; }
}


/* ===== Login con más naranja de Wise (10-nov-2026, pedido de Julio) ===== */
.login--wise { position: relative; overflow: hidden; }
.login__arte { display: none; }
.login #login-btn, .plogin #login-btn, .login--wise .btn--primary { background: var(--wise-naranja); color: #fff; }
.login #login-btn:hover, .plogin #login-btn:hover { background: #E24A06; }
.login .input:focus-visible { outline-color: var(--wise-naranja); border-color: var(--wise-naranja); }
.login__t .inicial-wise, .plogin .inicial-wise { color: var(--wise-naranja); }
/* celular: franja naranja arriba con estrella */
.login--wise::before, .plogin::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--wise-naranja); }
@media (min-width: 900px) {
  .login--wise { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 0; place-items: stretch; }
  .login--wise::before { display: none; }
  .login__arte { display: grid; place-items: center; position: relative; background: var(--wise-naranja); color: #fff; overflow: hidden; }
  .login__estrella { position: absolute; width: 440px; height: 440px; fill: var(--wise-azul); right: -120px; bottom: -110px; }
  .login__estrella--2 { width: 150px; height: 150px; fill: var(--wise-lima); left: 9%; top: 12%; right: auto; bottom: auto; }
  .login__lema { position: relative; font: 400 clamp(3rem, 6vw, 5.5rem)/0.95 var(--font-titulo); letter-spacing: -.02em; max-width: 6ch; margin: 0 0 0 -8%; color: #fff; }
  .login__lema .inicial-wise { color: #fff; }
  .login--wise .login__card { align-self: center; justify-self: center; padding: 48px 32px; }
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) { .login__estrella { animation: giro 40s linear infinite; } .login__estrella--2 { animation: giro 18s linear infinite reverse; } }
/* portal del cliente: panel naranja, estrella azul, etiqueta del cliente naranja */
.plogin .plogin__cliente { background: var(--wise-naranja); }
@media (min-width: 900px) {
  .plogin .plogin__arte { background: var(--wise-naranja); }
  .plogin .plogin__estrella { fill: var(--wise-azul); }
}

@keyframes giro { to { transform: rotate(360deg); } }

.plogin .plogin__lema .inicial-wise, .login__lema .inicial-wise { color: #fff; }