@font-face{font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:400 800; font-display:swap; src:url(fuentes/plus-jakarta-sans.woff2) format('woff2')}
/* Panel de Riffle con el molde de Ezra Ventas (lateral oscuro, barra blanca, tarjeta grande,
   cifras en tarjetitas, cajas blancas) pero en azules de jean. Los locales van como remaches cobre. */
:root{
  --f:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --marca:#2856a6; --marca2:#1e4486; --marca-suave:#eaf0fa; --marca-linea:#cbd8ee; --cielo:#6f95d6;
  --tinta:#121a2e; --gris:#56607a; --gris2:#8690a8;
  --fondo:#f4f6fa; --blanco:#ffffff; --linea:#e2e7f0; --linea2:#eef1f6;
  --lateral:#12203d; --lateral-2:#1d3160; --lateral-txt:#b1c0de; --lateral-fuerte:#ffffff;
  --verde:#0f8a5a; --verde-f:#e3f5ec; --ambar:#a8620a; --ambar-f:#fcf1df; --rojo:#c8382f; --rojo-f:#fcebe9;
  --wa:#eef1f5; --wa-yo:#d9fdd3; --wa-otro:#ffffff; --wa-tinta:#111b21; --wa-meta:#667781;
  --tierra:#dde5f1; --tierra-hi:#cbd8ec; --tierra-sel:#b6c8e6; --limite:#ffffff; --partido:#c2cfe3; --costura:#cfd9ea;
  --cobre:#a4531c; --cobre-2:#d6803f; --cobre-suave:rgba(164,83,28,.15); --sobre-cobre:#ffffff; --hilo:#c08a3e;
  --cliente:#2856a6; --cliente-suave:rgba(40,86,166,.10);
  --sombra:0 1px 2px rgba(18,26,46,.05),0 8px 24px rgba(18,26,46,.07);
  --sombra-alta:0 12px 32px rgba(18,26,46,.18);
  color-scheme:light;
}
:root[data-tema="noche"]{
  color-scheme:dark;
  --marca:#5b8de0; --marca2:#82a9ec; --marca-suave:#16264a; --marca-linea:#25396a; --cielo:#9dbcf0;
  --tinta:#eef2fa; --gris:#aab5cd; --gris2:#7f8aa4;
  --fondo:#0a101d; --blanco:#111a2c; --linea:#22304d; --linea2:#18233b;
  --lateral:#070c18; --lateral-2:#15223f; --lateral-txt:#a9b6d3;
  --verde:#34d399; --verde-f:#0e2c22; --ambar:#f4b740; --ambar-f:#33260b; --rojo:#f87171; --rojo-f:#3a1616;
  --wa:#0b141a; --wa-yo:#005c4b; --wa-otro:#202c33; --wa-tinta:#e9edef; --wa-meta:#8696a0;
  --tierra:#1a2741; --tierra-hi:#22345a; --tierra-sel:#2b4170; --limite:#0a101d; --partido:#2a3a5c; --costura:#24345a;
  --cobre:#e08a4c; --cobre-2:#f6b07a; --cobre-suave:rgba(224,138,76,.2); --sobre-cobre:#1d1108; --hilo:#d4a058;
  --cliente:#82a9ec; --cliente-suave:rgba(130,169,236,.13);
  --sombra:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
  --sombra-alta:0 12px 32px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
body{margin:0; font-family:var(--f); background:var(--fondo); color:var(--tinta); font-size:14.5px; line-height:1.45; -webkit-font-smoothing:antialiased}
button{font:inherit; color:inherit; cursor:pointer}
.num{font-variant-numeric:tabular-nums}
button:focus-visible,input:focus-visible,a:focus-visible,tr:focus-visible{outline:2px solid var(--marca); outline-offset:2px}
svg.ico{width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* ── Marco ─────────────────────────────────────────── */
.app{display:grid; grid-template-columns:236px minmax(0,1fr); min-height:100vh}
.lateral{background:var(--lateral); color:var(--lateral-txt); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; padding:18px 12px; overflow-y:auto}
.logo{display:flex; align-items:center; gap:10px; padding:4px 8px 18px; color:var(--lateral-fuerte)}
.logo .ic{width:34px; height:34px; border-radius:9px; background:var(--marca); color:#fff; display:grid; place-items:center; font-weight:800; position:relative}
.logo .ic::after{content:""; position:absolute; inset:3px; border:1px dashed rgba(255,255,255,.45); border-radius:6px}
.logo b{display:block; font-size:15.5px}
.logo span{font-size:11px; color:var(--lateral-txt); letter-spacing:.06em; text-transform:uppercase}
.nav-sec{font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; opacity:.7; padding:14px 10px 5px}
.nav a, .nav span.pronto-item{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; color:var(--lateral-txt); text-decoration:none; font-weight:500; font-size:14px}
.nav a.on{background:var(--marca); color:#fff}
.nav span.pronto-item{opacity:.55; cursor:default; white-space:nowrap}
.nav .pronto{margin-left:auto; font-style:normal; font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; border:1px solid rgba(255,255,255,.22); border-radius:99px; padding:1px 7px}
.nav .n{margin-left:auto; font-size:11.5px; background:rgba(255,255,255,.18); padding:1px 8px; border-radius:99px}
.lateral-pie{margin-top:auto; padding:12px; border-radius:12px; background:var(--lateral-2); font-size:12.5px; line-height:1.4}
.lateral-pie b{color:var(--lateral-fuerte); display:block}

.principal{min-width:0; display:flex; flex-direction:column}
.barra{height:60px; display:flex; align-items:center; gap:10px; padding-inline:24px; background:var(--blanco); border-bottom:1px solid var(--linea); position:sticky; top:env(safe-area-inset-top,0px); z-index:20}
.barra .esp{flex:1}
.barra .logo-mini{display:none; align-items:center; gap:8px; font-weight:800}
.barra .logo-mini i{width:28px; height:28px; border-radius:8px; background:var(--marca); color:#fff; display:grid; place-items:center; font-style:normal; font-size:13px}
.chip{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:4px 10px; border-radius:99px; white-space:nowrap}
.btn-tema{width:38px; height:38px; border:1px solid var(--linea); background:var(--blanco); border-radius:10px; display:grid; place-items:center; color:var(--gris)}
.btn-tema:hover{color:var(--tinta); background:var(--fondo)}
.btn-tema .sol{display:none}
:root[data-tema="noche"] .btn-tema .sol{display:block}
:root[data-tema="noche"] .btn-tema .luna{display:none}
.chip.prueba{background:var(--ambar-f); color:var(--ambar)}
.chip.lista{background:var(--marca-suave); color:var(--marca)}
.chip.lista::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.contenido{padding:26px 28px 60px; min-width:0; max-width:1320px; width:100%}
.saludo{color:var(--gris); font-size:13px; margin:0}
h1{font-size:26px; margin:2px 0 18px; letter-spacing:-.02em; text-wrap:balance}
h2{font-size:17px; margin:0; letter-spacing:-.01em}

/* ── Tarjeta grande (jean) ─────────────────────────── */
.hoy{position:relative; color:#fff; border-radius:18px; padding:26px 28px; display:flex; gap:24px 32px; align-items:flex-end; flex-wrap:wrap;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 2px, transparent 2px 6px),
    linear-gradient(120deg,#163670 0%,#2856a6 55%,#4f80cc 100%);
  box-shadow:0 10px 30px rgba(22,54,112,.28)}
.hoy::after{content:""; position:absolute; inset:9px; border:1.5px dashed rgba(255,214,160,.45); border-radius:12px; pointer-events:none}
.hoy .izq{flex:1 1 420px; position:relative; z-index:1}
.hoy .ceja{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; opacity:.85; margin:0 0 4px; font-weight:700}
.hoy h2{font-size:22px; margin:0 0 4px; letter-spacing:-.015em}
.hoy p.bajada{margin:0 0 16px; opacity:.92; max-width:56ch}
.combo{position:relative; max-width:520px}
.combo svg.ico{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--gris2); pointer-events:none}
.campo{width:100%; font:inherit; font-size:15px; color:var(--tinta); background:var(--blanco); border:1px solid transparent; border-radius:12px; padding:12px 14px 12px 42px; box-shadow:0 2px 10px rgba(0,0,0,.12)}
.campo::placeholder{color:var(--gris2)}
.opciones{position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:30; list-style:none; margin:0; padding:5px; background:var(--blanco); color:var(--tinta);
  border:1px solid var(--linea); border-radius:12px; box-shadow:var(--sombra-alta); max-height:320px; overflow:auto}
.opciones li{padding:9px 10px; border-radius:8px; cursor:pointer; display:flex; justify-content:space-between; gap:10px; align-items:baseline}
.opciones li[aria-selected="true"], .opciones li:hover{background:var(--marca-suave)}
.opciones b{font-weight:600}
.opciones span{color:var(--gris2); font-size:12.5px; text-align:right}
.opciones .vacio{color:var(--gris2); cursor:default}
.distancia{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px; font-size:13px}
.distancia > span{opacity:.9}
.seg-hoy{display:inline-flex; gap:4px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); padding:3px; border-radius:11px}
.seg-hoy button{border:0; background:none; color:#fff; padding:5px 11px; border-radius:8px; font-weight:600; font-size:13px}
.seg-hoy button[aria-pressed="true"]{background:#fff; color:#1e4486}
.hoy .der{position:relative; z-index:1; text-align:right}
.hoy .der small{font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; opacity:.85; font-weight:700}
.hoy .der b{display:block; font-size:44px; letter-spacing:-.03em; line-height:1.05; font-variant-numeric:tabular-nums}
.hoy .der span{font-size:13px; opacity:.9}

/* ── Cifras ─────────────────────────────────────────── */
.tiles{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:16px 0 18px}
.tile{background:var(--blanco); border:1px solid var(--linea); border-radius:14px; padding:16px; text-align:left; box-shadow:var(--sombra)}
.tile:hover{border-color:var(--marca-linea)}
.tile[aria-pressed="true"]{border-color:var(--marca); box-shadow:0 0 0 3px var(--marca-suave)}
.tile .ic{width:30px; height:30px; border-radius:9px; display:grid; place-items:center; margin-bottom:10px}
.tile .ic svg{width:17px; height:17px}
.tile small{color:var(--gris); font-weight:600; font-size:12.5px; display:block}
.tile b{display:block; font-size:26px; letter-spacing:-.02em; margin:2px 0; font-variant-numeric:tabular-nums}
.tile span{color:var(--gris2); font-size:12px}
.t-exacta .ic{background:var(--verde-f); color:var(--verde)}
.t-aprox .ic{background:var(--ambar-f); color:var(--ambar)}
.t-revisar .ic{background:var(--rojo-f); color:var(--rojo)}
.t-todas .ic{background:var(--marca-suave); color:var(--marca)}

/* ── Cajas ─────────────────────────────────────────── */
.caja{background:var(--blanco); border:1px solid var(--linea); border-radius:14px; box-shadow:var(--sombra)}
.caja-cab{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:14px 16px; border-bottom:1px solid var(--linea2)}
.caja-cab .esp{flex:1}
.caja-cab .cuenta{color:var(--gris2); font-size:13px; font-weight:600}
.doble{display:grid; grid-template-columns:minmax(0,1.65fr) minmax(320px,1fr); gap:16px; margin-bottom:16px}
.seg{display:inline-flex; gap:4px; background:var(--linea2); padding:4px; border-radius:11px}
.seg button{border:0; background:none; padding:5px 11px; border-radius:8px; font-weight:600; font-size:13px; color:var(--gris)}
.seg button:hover{color:var(--tinta); background:var(--blanco)}
.seg button.ico-btn{width:30px; padding:5px 0; font-size:16px; line-height:1}

/* mapa */
.doble > .caja{display:flex; flex-direction:column; min-width:0}
.mapa{position:relative; flex:1; min-height:580px; overflow:hidden; border-radius:0 0 14px 14px;
  background:var(--fondo); background-image:radial-gradient(var(--linea) 1px, transparent 1px); background-size:18px 18px}
#svg{display:block; width:100%; height:100%; touch-action:none; user-select:none}
.prov{fill:var(--tierra); cursor:pointer; transition:fill .15s}
.prov:hover{fill:var(--tierra-hi)}
.prov.sel{fill:var(--tierra-sel)}
.provb{fill:none; stroke:var(--limite); stroke-width:1.3}
.deps{fill:none; stroke:var(--partido); stroke-width:.7; opacity:0; transition:opacity .25s}
svg.cerca .deps{opacity:1}
.costura{fill:none; stroke:var(--costura); stroke-width:5; stroke-linejoin:round}
.puntada{fill:none; stroke:var(--hilo); stroke-width:1.2; stroke-dasharray:3 3; stroke-linejoin:round}
.radio{fill:var(--cliente-suave); stroke:var(--cliente); stroke-width:1.3; stroke-dasharray:6 4}
.etq{font:600 10.5px var(--f); letter-spacing:.08em; text-transform:uppercase; fill:var(--gris2); text-anchor:middle; pointer-events:none;
  paint-order:stroke; stroke:var(--tierra); stroke-width:3px; stroke-linejoin:round}
.etq.dep{font-size:11px; letter-spacing:0; text-transform:none; font-weight:500}
.m{cursor:pointer}
.m .rv{fill:var(--cobre); stroke:var(--blanco); stroke-width:2}
.m .rv-c{fill:var(--cobre-2)}
.m.aprox .rv{fill:var(--blanco); stroke:var(--cobre); stroke-width:2.2}
.m.aprox .rv-c{fill:var(--cobre)}
.m .halo{fill:var(--cobre-suave)}
.m text{fill:var(--sobre-cobre); font:700 12.5px var(--f); text-anchor:middle; dominant-baseline:central; pointer-events:none; font-variant-numeric:tabular-nums}
.m.elegido .rv{stroke:var(--tinta); stroke-width:2.5}
.hilo{stroke:var(--hilo); stroke-width:2; stroke-dasharray:6 4; fill:none}
.hilo.lejos{stroke:var(--gris2)}
.km-etq rect{fill:var(--blanco); stroke:var(--linea)}
.km-etq text{font:700 11.5px var(--f); fill:var(--tinta); text-anchor:middle; dominant-baseline:central; font-variant-numeric:tabular-nums}
.cli .pin{fill:var(--cliente); stroke:var(--blanco); stroke-width:3}
.cli .pulso{fill:none; stroke:var(--cliente); stroke-width:2; opacity:.5; animation:pulso 2.2s ease-out infinite; transform-box:fill-box; transform-origin:center}
.cli rect{fill:var(--cliente)}
.cli text{fill:var(--blanco); font:700 12px var(--f); dominant-baseline:central}
@keyframes pulso{from{transform:scale(.6); opacity:.6} to{transform:scale(2.2); opacity:0}}
.escala{position:absolute; left:14px; bottom:12px; font-size:11.5px; font-weight:700; color:var(--gris); font-variant-numeric:tabular-nums; pointer-events:none}
.escala i{display:block; height:6px; border:2px solid var(--gris); border-top:0; margin-top:2px}
.leyenda{position:absolute; right:12px; bottom:12px; display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end;
  background:color-mix(in srgb, var(--blanco) 90%, transparent); border:1px solid var(--linea); border-radius:10px; padding:6px 10px; font-size:12px; color:var(--gris)}
.leyenda span{display:inline-flex; align-items:center; gap:6px}
.tip{position:absolute; pointer-events:none; background:var(--tinta); color:var(--blanco); font-size:12.5px; font-weight:700;
  padding:5px 9px; border-radius:7px; white-space:nowrap; transform:translate(-50%,calc(-100% - 12px)); z-index:6}

/* ficha del local */
.ficha{position:absolute; width:290px; max-width:calc(100% - 24px); background:var(--blanco); border:1px solid var(--linea); border-radius:14px;
  box-shadow:var(--sombra-alta); padding:14px 16px; z-index:8}
.ficha h3{margin:0 28px 3px 0; font-size:16px; letter-spacing:-.01em}
.ficha .dir{margin:0}
.ficha .loc{margin:2px 0 10px; color:var(--gris); font-size:13px}
.ficha dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:5px 12px; font-size:13.5px}
.ficha dt{color:var(--gris2); font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding-top:2px}
.ficha dd{margin:0; min-width:0; overflow-wrap:anywhere}
.ficha a{color:var(--marca); font-weight:600}
.ficha .cerrar{position:absolute; top:8px; right:8px; border:0; background:none; color:var(--gris2); width:30px; height:30px; border-radius:8px; display:grid; place-items:center}
.ficha .cerrar:hover{background:var(--linea2); color:var(--tinta)}
.copiar{border:1px solid var(--linea); background:var(--fondo); color:var(--gris); font-size:11px; font-weight:700; border-radius:6px; padding:1px 7px; margin-left:6px}
.nota{margin:10px 0 0; font-size:12.5px; color:var(--gris); border-top:1px dashed var(--linea); padding-top:8px}
.nota.aviso{color:var(--rojo)}
.ficha .varios{list-style:none; margin:6px 0 0; padding:0; display:grid; gap:2px; max-height:260px; overflow:auto}
.ficha .varios button{width:100%; text-align:left; border:0; background:none; padding:7px 8px; border-radius:8px}
.ficha .varios button:hover{background:var(--marca-suave)}
.ficha .varios b{display:block; font-size:13.5px}
.ficha .varios span{font-size:12.5px; color:var(--gris)}

/* charla de WhatsApp */
.charla{display:flex; flex-direction:column; min-height:0}
.wa-cab{display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--linea2)}
.wa-cab .av{width:34px; height:34px; border-radius:50%; background:var(--marca); color:#fff; display:grid; place-items:center; font-weight:800; font-size:14px; flex:none}
.wa-cab b{display:block; font-size:14px}
.wa-cab span{font-size:12px; color:var(--verde); font-weight:600}
.wa-cab .esp{flex:1}
.etiqueta{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--gris2); border:1px solid var(--linea); border-radius:99px; padding:2px 8px}
.wa{flex:1; background:var(--wa); padding:14px; display:flex; flex-direction:column; gap:8px}
.gl{max-width:88%; padding:8px 11px 6px; border-radius:10px; font-size:13.5px; line-height:1.45; color:var(--wa-tinta); box-shadow:0 1px 1px rgba(0,0,0,.08)}
.gl.yo{align-self:flex-end; background:var(--wa-yo); border-top-right-radius:3px}
.gl.otro{align-self:flex-start; background:var(--wa-otro); border-top-left-radius:3px}
.gl p{margin:0 0 6px}
.gl ol{margin:0 0 4px; padding-left:18px; display:grid; gap:6px}
.gl .hora{display:block; text-align:right; font-size:11px; color:var(--wa-meta); margin-top:2px}
.wa-pie{padding:12px 16px; display:grid; gap:10px; border-top:1px solid var(--linea2)}
.wa-pie p{margin:0; font-size:13px; color:var(--gris)}
.btn{display:inline-flex; align-items:center; gap:8px; justify-self:start; border:1px solid var(--linea); background:var(--blanco); padding:8px 14px; border-radius:10px; font-weight:600; font-size:13.5px}
.btn:hover{background:var(--fondo)}
.btn.prim{background:var(--marca); border-color:var(--marca); color:#fff}
.btn.prim:hover{background:var(--marca2)}
.btn svg{width:16px; height:16px}

/* tabla */
.filtros{display:flex; gap:8px; flex-wrap:wrap; padding:12px 16px 0}
.filtros button{border:1px solid var(--linea); background:var(--blanco); border-radius:99px; padding:5px 12px; font-weight:600; font-size:12.5px; color:var(--gris)}
.filtros button .n{color:var(--gris2); font-weight:700; margin-left:5px}
.filtros button[aria-pressed="true"]{background:var(--marca); border-color:var(--marca); color:#fff}
.filtros button[aria-pressed="true"] .n{color:rgba(255,255,255,.75)}
.buscador{position:relative; flex:0 1 320px; min-width:200px}
.buscador svg.ico{position:absolute; left:11px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--gris2)}
.buscador input{width:100%; font:inherit; font-size:13.5px; color:var(--tinta); background:var(--fondo); border:1px solid var(--linea); border-radius:10px; padding:8px 12px 8px 34px}
.tabla-scroll{overflow-x:auto; padding:6px 0 4px}
table{width:100%; border-collapse:collapse}
th{font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--gris2); text-align:left; padding:10px 16px; border-bottom:1px solid var(--linea)}
td{padding:11px 16px; border-bottom:1px solid var(--linea2); vertical-align:top}
tbody tr{cursor:pointer}
tbody tr:hover{background:var(--fondo)}
tbody tr.elegida{background:var(--marca-suave)}
td b{font-weight:700; display:block}
td .ig{font-size:12.5px; color:var(--gris2)}
td.dir{color:var(--gris)}
td.c-prov{white-space:nowrap}
.badge{display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:700; white-space:nowrap}
.badge .d{width:6px; height:6px; border-radius:50%; background:currentColor}
.b-verde{background:var(--verde-f); color:var(--verde)}
.b-amb{background:var(--ambar-f); color:var(--ambar)}
.b-rojo{background:var(--rojo-f); color:var(--rojo)}
.vacio{text-align:center; padding:30px; color:var(--gris2)}
.fuente{margin:14px 2px 0; font-size:12.5px; color:var(--gris2); max-width:90ch}

@media (max-width:1180px){
  .doble{grid-template-columns:1fr}
}
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .lateral{display:none}
  .barra{padding-inline:16px}
  .barra .logo-mini{display:inline-flex}
  .barra .chip.lista{display:none}
  .contenido{padding:18px 16px 40px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hoy{padding:22px 20px}
  .hoy .der{text-align:left}
  .mapa{min-height:440px}
  table.resp thead{display:none}
  table.resp tr{display:grid; grid-template-columns:1fr auto; gap:2px 10px; padding:12px 16px; border-bottom:1px solid var(--linea2)}
  table.resp td{padding:0; border:0}
  table.resp td.c-loc{grid-column:1}
  table.resp td.c-ubi{grid-column:2; grid-row:1}
  table.resp td.c-prov{display:none}
}
@media (max-width:560px){
  .leyenda{display:none}
  .ficha{left:12px !important; right:12px; width:auto; top:auto !important; bottom:12px}
  h1{font-size:23px}
  .hoy .der b{font-size:36px}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
}

/* ── Vistas, usuario y equipo (sólo en la web) ─────────────────── */
.vista[hidden]{display:none}
.cargando{color:var(--gris); padding:40px 0}
.nav a{cursor:pointer}
.nav a[hidden]{display:none}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.usuario{display:flex; align-items:center; gap:8px; border:1px solid var(--linea); border-radius:99px; padding:4px 12px 4px 4px; color:inherit; text-decoration:none}
.usuario:hover{border-color:var(--marca)}
.usuario .av{width:28px; height:28px; border-radius:50%; background:var(--marca); color:#fff; display:grid; place-items:center; font-weight:800; font-size:13px}
.usuario b{font-size:13px; display:block; line-height:1.1}
.usuario small{font-size:11px; color:var(--gris2)}
a.btn{text-decoration:none; color:inherit}
.btn.chico{padding:5px 10px; font-size:12.5px; border-radius:8px}
.btn.peligro{color:var(--rojo)}
.btn.peligro.prim{background:var(--rojo); border-color:var(--rojo); color:#fff}
.btn[disabled]{opacity:.55; cursor:default}
.caja-ayuda{margin:0; padding:12px 16px; color:var(--gris); font-size:13px; border-bottom:1px solid var(--linea2)}
.caja-ayuda.sin-borde{border:0; padding:12px 0 0}
.caja.pad{padding:18px 20px}
.caja.pad h2{margin-bottom:14px}
.aviso-clave{display:flex; align-items:center; gap:10px; background:var(--ambar-f); color:var(--ambar); border-radius:12px; padding:11px 14px; margin-bottom:16px; font-weight:600; font-size:13.5px}
.aviso-clave a{color:inherit}
.tabla-us td{vertical-align:middle}
.tabla-us .acciones{display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap}
.tag-vos{font-size:11px; font-weight:700; color:var(--marca); background:var(--marca-suave); border-radius:99px; padding:2px 8px; margin-left:6px}
.b-azul{background:var(--marca-suave); color:var(--marca)}
.b-gris{background:var(--linea2); color:var(--gris)}
.cuenta-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:16px; align-items:start; max-width:980px}
.datos{display:grid; grid-template-columns:auto 1fr; gap:8px 18px; margin:0}
.datos dt{color:var(--gris2); font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding-top:2px}
.datos dd{margin:0; font-weight:600}
.fld{display:grid; gap:5px; margin-bottom:14px}
.fld label{font-weight:600; font-size:13.5px}
.fld input{font:inherit; font-size:15px; color:var(--tinta); background:var(--blanco); border:1px solid var(--linea); border-radius:10px; padding:10px 12px; width:100%}
.fld input:focus{border-color:var(--marca); outline:none; box-shadow:0 0 0 3px var(--marca-suave)}
.fld input[aria-invalid="true"]{border-color:var(--rojo)}
.fld-ayuda{margin:0; font-size:12.5px; color:var(--gris2)}
.fld-error{margin:0; font-size:12.5px; color:var(--rojo); font-weight:600}
.seg-rol{display:inline-flex; gap:4px; background:var(--linea2); padding:4px; border-radius:11px}
.seg-rol button{border:0; background:none; padding:7px 14px; border-radius:8px; font-weight:600; font-size:13.5px; color:var(--gris)}
.seg-rol button[aria-pressed="true"]{background:var(--blanco); color:var(--tinta); box-shadow:0 1px 3px rgba(18,26,46,.12)}
.velo{position:fixed; inset:0; background:rgba(10,16,29,.45); display:grid; place-items:center; padding:16px; z-index:50}
.velo[hidden]{display:none}
.modal{background:var(--blanco); color:var(--tinta); border-radius:16px; box-shadow:var(--sombra-alta); width:min(460px,100%); max-height:calc(100vh - 32px); overflow:auto; padding:22px 22px 18px}
.modal h2{font-size:18px; margin:0 0 6px}
.modal .bajada{margin:0 0 16px; color:var(--gris)}
.modal .pie{display:flex; gap:8px; justify-content:flex-end; margin-top:18px; flex-wrap:wrap}
.credenciales{display:grid; gap:8px; background:var(--fondo); border:1px dashed var(--marca-linea); border-radius:12px; padding:12px 14px}
.credenciales div{display:flex; align-items:center; gap:10px; justify-content:space-between}
.credenciales span{color:var(--gris); font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; min-width:64px}
.credenciales code{font:600 16px ui-monospace,'SF Mono',Menlo,Consolas,monospace; flex:1; user-select:all}
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--tinta); color:var(--blanco); padding:10px 16px; border-radius:10px; font-weight:600; font-size:13.5px; z-index:60; box-shadow:var(--sombra-alta)}
.toast[hidden]{display:none}
@media (max-width:860px){
  .usuario span{display:none}
  .usuario{padding:3px}
  .cuenta-grid{grid-template-columns:1fr}
  .tabla-us.resp tr{grid-template-columns:1fr}
  .tabla-us.resp td{grid-column:1 !important; grid-row:auto !important}
  .tabla-us .acciones{justify-content:flex-start; margin-top:6px}
}

/* ── Entrada ───────────────────────────────────────── */
.puerta{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); min-height:100vh}
.vitrina{position:relative; color:#fff; padding:40px 44px; display:flex; flex-direction:column; justify-content:space-between; gap:28px;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 2px, transparent 2px 6px), linear-gradient(150deg,#12203d 0%,#1e4486 55%,#2856a6 100%)}
.vitrina::after{content:""; position:absolute; inset:14px; border:1.5px dashed rgba(255,214,160,.4); border-radius:14px; pointer-events:none}
.vitrina .marca{display:flex; align-items:center; gap:10px; font-weight:800; font-size:16px; position:relative; z-index:1}
.vitrina .marca i{width:34px; height:34px; border-radius:9px; background:#fff; color:#1e4486; display:grid; place-items:center; font-style:normal}
.vitrina .centro{position:relative; z-index:1; max-width:440px}
.vitrina .sobre{font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; opacity:.85; margin:0 0 6px}
.vitrina .titulo{font-size:32px; line-height:1.15; letter-spacing:-.02em; font-weight:800; margin:0 0 10px; text-wrap:balance}
.vitrina .bajada{margin:0 0 24px; opacity:.9}
.beneficios{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.beneficios li{display:flex; gap:12px; align-items:flex-start}
.beneficios .ic{width:34px; height:34px; border-radius:10px; background:rgba(255,255,255,.14); display:grid; place-items:center; flex:none}
.beneficios b{display:block}
.beneficios span{opacity:.85; font-size:13.5px}
.vitrina .pie{position:relative; z-index:1; font-size:12.5px; opacity:.8; margin:0}
.lado-form{display:grid; place-items:center; padding:40px 24px; background:var(--fondo)}
.form-entrar{width:min(400px,100%); background:var(--blanco); border:1px solid var(--linea); border-radius:18px; box-shadow:var(--sombra); padding:28px 26px}
.form-entrar h1{font-size:24px; margin:0 0 4px}
.form-entrar .bajada{margin:0 0 20px; color:var(--gris)}
.con-ojo{position:relative}
.con-ojo input{padding-right:44px}
.ojo{position:absolute; right:6px; top:50%; transform:translateY(-50%); border:0; background:none; width:34px; height:34px; border-radius:8px; color:var(--gris2); display:grid; place-items:center}
.ojo:hover{background:var(--linea2); color:var(--tinta)}
.ojo .tachado{display:none}
.ojo[aria-pressed="true"] .abierto{display:none}
.ojo[aria-pressed="true"] .tachado{display:block}
.mal{display:flex; gap:8px; align-items:flex-start; background:var(--rojo-f); color:var(--rojo); border-radius:10px; padding:10px 12px; margin-bottom:14px; font-weight:600; font-size:13.5px}
.mal[hidden]{display:none}
.entrar-btn{width:100%; justify-content:center; padding:12px; font-size:15px}
.nota-entrar{margin:16px 0 0; font-size:12.5px; color:var(--gris); display:flex; gap:8px; align-items:flex-start}
.seguro-linea{margin:14px 0 0; font-size:12px; color:var(--gris2); display:flex; gap:8px; align-items:flex-start; border-top:1px dashed var(--linea); padding-top:12px}
@media (max-width:860px){
  .puerta{grid-template-columns:1fr}
  .vitrina{padding:28px 24px}
  .vitrina .titulo{font-size:24px}
  .beneficios{display:none}
  .lado-form{padding:24px 16px 40px; place-items:start center}
}

/* ── Contactos, análisis, probar, textos, conexión ─────────────── */
.nav .aviso-n{background:rgba(244,183,64,.18); color:#f4c26a; font-size:10px; letter-spacing:.04em}
a.lateral-pie{color:var(--lateral-txt); text-decoration:none; display:block}
a.lateral-pie:hover{background:#24396f}
a.chip{text-decoration:none}
.filtros.sin-pad{padding:0 0 14px}
.tabla-ct td{vertical-align:middle}
.tabla-ct .quien b{display:inline}
.canal-tag{font-size:11px; font-weight:700; border-radius:99px; padding:1px 7px; margin-left:6px; vertical-align:1px}
.canal-tag.whatsapp{background:var(--verde-f); color:var(--verde)}
.canal-tag.instagram{background:#fbe7f3; color:#b4236f}
.canal-tag.prueba{background:var(--linea2); color:var(--gris)}
.vacio-grande{padding:36px 20px; text-align:center; color:var(--gris)}
.vacio-grande b{display:block; color:var(--tinta); font-size:16px; margin-bottom:6px}
.vacio-grande .btn{margin-top:14px}
.grilla-an{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.barras{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.barras li{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; font-size:13.5px}
.barras .b{grid-column:1 / -1; height:8px; border-radius:99px; background:var(--linea2); overflow:hidden}
.barras .b i{display:block; height:100%; border-radius:99px; background:var(--marca)}
.barras.cobre .b i{background:var(--cobre)}
.barras b{font-variant-numeric:tabular-nums}
.caja.pad h2 + .ayuda-an{margin:-8px 0 14px; color:var(--gris); font-size:12.5px}
.sin-datos{color:var(--gris2); font-size:13px; margin:0}
.wa-probar{min-height:420px; max-height:560px; overflow:auto}
.gl .opciones-wa{display:flex; flex-direction:column; gap:4px; margin-top:8px}
.gl .opciones-wa button{background:var(--wa-otro); color:#027eb5; border:0; border-radius:8px; padding:7px 10px; font-weight:600; font-size:13.5px; box-shadow:0 1px 1px rgba(0,0,0,.08)}
.gl .opciones-wa button:hover{filter:brightness(.97)}
.gl .opciones-wa button[disabled]{color:var(--wa-meta); cursor:default}
.gl.nota-bot{align-self:center; background:var(--ambar-f); color:var(--ambar); font-size:12.5px; max-width:95%; text-align:center; box-shadow:none}
.pr-form{display:flex; gap:8px; padding:12px; border-top:1px solid var(--linea2)}
.pr-form input{flex:1; font:inherit; font-size:14.5px; color:var(--tinta); background:var(--fondo); border:1px solid var(--linea); border-radius:99px; padding:10px 16px}
.pr-form input:focus{outline:none; border-color:var(--marca)}
.ficha-datos{display:grid; grid-template-columns:auto 1fr; gap:7px 16px; margin:0 0 6px}
.ficha-datos dt{color:var(--gris2); font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding-top:2px}
.ficha-datos dd{margin:0; font-weight:600; overflow-wrap:anywhere}
.ficha-datos dd small{font-weight:500; color:var(--gris)}
.modal.ancho{width:min(760px,100%)}
.ficha-ct{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:18px}
.ficha-ct .wa{max-height:420px; overflow:auto; border-radius:12px; min-height:0}
.ficha-ct h3{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--gris2); margin:14px 0 8px}
.vend-lista{display:flex; flex-wrap:wrap; gap:6px}
.vend-lista button{border:1px solid var(--linea); background:var(--blanco); border-radius:99px; padding:5px 11px; font-weight:600; font-size:12.5px; color:var(--gris)}
.vend-lista button[aria-pressed="true"]{background:var(--marca); border-color:var(--marca); color:#fff}
.form-textos{max-width:860px; display:grid; gap:4px}
.form-textos textarea{font:inherit; font-size:14.5px; line-height:1.5; color:var(--tinta); background:var(--blanco); border:1px solid var(--linea); border-radius:10px; padding:10px 12px; width:100%; resize:vertical; min-height:84px}
.form-textos textarea:focus{border-color:var(--marca); outline:none; box-shadow:0 0 0 3px var(--marca-suave)}
.form-textos .fld label{display:flex; justify-content:space-between; gap:10px; align-items:baseline}
.form-textos .original{border:0; background:none; color:var(--marca); font-size:12.5px; font-weight:600; padding:0}
.form-textos .fila-km{display:flex; align-items:center; gap:10px}
.form-textos .fila-km input{width:110px}
.conexion-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; max-width:1100px}
.conexion-grid .estado-meta{grid-column:1 / -1}
.canal p{margin:0 0 10px; color:var(--gris)}
.canal p b{color:var(--tinta)}
.canal h3{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--gris2); margin:16px 0 8px}
.canal-cab{display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap}
.canal-cab h2{margin:0 !important; flex:1}
.canal-ic{width:38px; height:38px; border-radius:11px; display:grid; place-items:center}
.wa-ic{background:var(--verde-f); color:var(--verde)}
.ig-ic{background:#fbe7f3; color:#b4236f}
.lista-check{margin:0; padding-left:20px; display:grid; gap:6px; color:var(--gris)}
.estado-meta p{margin:0 0 8px; color:var(--gris)}
.estado-meta a{color:var(--marca); font-weight:600}
@media (max-width:1180px){ .grilla-an, .conexion-grid{grid-template-columns:1fr} }
@media (max-width:860px){
  .ficha-ct{grid-template-columns:1fr}
  .tabla-ct.resp tr{grid-template-columns:1fr auto}
}

.nav .punto-aviso{margin-left:auto; width:9px; height:9px; border-radius:50%; background:#f4b740; box-shadow:0 0 0 3px rgba(244,183,64,.2)}
.tabla-ct td:first-child{white-space:nowrap}