/* Generado por tools/fusionar.py — no editar a mano. */


/* ================= publico ================= */

:root .v-publico{
    --marino:#1A2D66; --marino-2:#243C7D; --marino-3:#3C58A6;
    --acento:#2F62EE; --acento-soft:#E8EEFC; --acento-glow:rgba(47,98,238,.26);
    --fondo:#FAF9F6; --card:#FFFFFF; --surface-2:#F3F2ED;
    --linea:rgba(26,45,102,.09); --linea-2:rgba(26,45,102,.14); --celda:#C6CEE2;
    --txt:#1A2D66; --txt-2:#5D6786; --sobre-marino:#B4C2E4;
    --verde:#1B7A4C; --verde-soft:#E6F2EB;
    --rojo:#C2412D;
    --sans:"Poppins",-apple-system,"Segoe UI",sans-serif;
    --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  }
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .v-publico{
      --marino:#101C3E; --marino-2:#1C2E5E; --marino-3:#33509A;
      --acento:#5B86FF; --acento-soft:#182A54; --acento-glow:rgba(91,134,255,.28);
      --fondo:#0A1122; --card:#131E38; --surface-2:#18243F;
      --linea:rgba(180,194,228,.14); --linea-2:rgba(180,194,228,.2); --celda:#3C4E77;
      --txt:#EAEFFA; --txt-2:#9AA8CB; --sobre-marino:#B4C2E4;
      --verde:#3DA875; --verde-soft:#132C22;
      --rojo:#F07A63;
    }

  }
:root[data-theme="dark"] .v-publico{
    --marino:#101C3E; --marino-2:#1C2E5E; --marino-3:#33509A;
    --acento:#5B86FF; --acento-soft:#182A54; --acento-glow:rgba(91,134,255,.28);
    --fondo:#0A1122; --card:#131E38; --surface-2:#18243F;
    --linea:rgba(180,194,228,.14); --linea-2:rgba(180,194,228,.2); --celda:#3C4E77;
    --txt:#EAEFFA; --txt-2:#9AA8CB; --sobre-marino:#B4C2E4;
    --verde:#3DA875; --verde-soft:#132C22;
    --rojo:#F07A63;
  }
*{box-sizing:border-box}
.v-publico{margin:0;background:var(--fondo);color:var(--txt);font-family:var(--sans);font-size:16.5px;line-height:1.55;letter-spacing:-.015em;-webkit-font-smoothing:antialiased}
.v-publico h1, .v-publico h2, .v-publico h3, .v-publico h4, .v-publico p, .v-publico ul, .v-publico li{margin:0}
.v-publico a{color:inherit}
.v-publico button{font-family:inherit}
.v-publico .num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.v-publico .wrap{max-width:1120px;margin:0 auto;padding-inline:24px}
.v-publico section{padding-block:clamp(64px,8vw,104px)}
.v-publico .page{display:none}
.v-publico .page.on{display:block}
.v-publico .eyebrow{font-size:14px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--acento)}
.v-publico h2.t{font-size:clamp(30px,4.4vw,44px);font-weight:700;letter-spacing:-.035em;line-height:1.08;text-wrap:balance;margin-top:12px}
.v-publico p.lead{font-size:17.5px;color:var(--txt-2);line-height:1.62;max-width:56ch;margin-top:16px}
.v-publico .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--acento);color:#fff;border:0;border-radius:9999px;padding:16px 34px;font-size:16px;font-weight:600;letter-spacing:-.015em;min-height:54px;cursor:pointer;text-decoration:none;box-shadow:0 4px 24px var(--acento-glow);transition:box-shadow .2s,transform .2s}
.v-publico .btn:hover{box-shadow:0 8px 32px var(--acento-glow);transform:translateY(-1px)}
.v-publico .btn.light{background:#fff;color:var(--marino);box-shadow:0 4px 24px rgba(0,0,0,.18)}
.v-publico .btn.ghost{background:transparent;border:1.5px solid var(--marino-3);color:#fff;box-shadow:none}
.v-publico .btn.ghost:hover{background:rgba(255,255,255,.07);box-shadow:none;transform:none}
.v-publico .btn.outline{background:transparent;border:1.5px solid var(--linea-2);color:var(--txt);box-shadow:none}
.v-publico .btn.outline:hover{border-color:var(--acento);box-shadow:none;transform:none}
.v-publico .btn.sm{padding:13px 26px;min-height:50px;font-size:16px}
.v-publico .btn:focus-visible, .v-publico select:focus-visible, .v-publico .chipr:focus-visible, .v-publico .faq-q:focus-visible, .v-publico .navlnk:focus-visible, .v-publico .niv button:focus-visible{outline:2px solid var(--acento);outline-offset:3px}
/* nav clara translúcida */
.v-publico .nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb, var(--fondo) 78%, transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid transparent;transition:border-color .2s}
.v-publico .nav.scrolled{border-bottom-color:var(--linea)}
.v-publico .nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px}
.v-publico .logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.v-publico .logo b{font-size:25px;font-weight:800;letter-spacing:-.045em;color:var(--txt)}
.v-publico .logo i.sq{aspect-ratio:1/1;border-radius:3px;background:var(--marino);display:block}
.v-publico .logo i.sq.o{background:transparent;border:1.5px solid var(--celda)}
.v-publico .nav .grp{display:flex;align-items:center;gap:4px}
.v-publico .navlnk{color:var(--txt-2);text-decoration:none;font-size:16.5px;font-weight:500;padding:11px 17px;border-radius:9999px}
.v-publico .navlnk:hover{color:var(--txt);background:var(--surface-2)}
.v-publico .navlnk.on{color:var(--txt);background:var(--surface-2);font-weight:600}
@media(max-width:820px){.v-publico .navlnk{padding:10px 12px;font-size:15px}
 }
@media(max-width:620px){.v-publico .nav .wrap{flex-wrap:wrap;gap:10px}
.v-publico .nav .grp{width:100%;justify-content:space-between}
 }
/* hero */
.v-publico .hero{background:var(--marino);color:#fff;border-radius:0 0 34px 34px;padding-block:clamp(60px,8vw,104px) clamp(66px,9vw,110px)}
.v-publico .hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:52px;align-items:center}
@media(max-width:880px){.v-publico .hero-grid{grid-template-columns:1fr;gap:40px}
 }
.v-publico .hero h1{font-size:clamp(38px,6vw,62px);font-weight:700;letter-spacing:-.045em;line-height:1.02;text-wrap:balance;margin-top:16px}
.v-publico .hero p{font-size:18px;color:var(--sobre-marino);line-height:1.6;margin-top:22px;max-width:44ch}
.v-publico .hero .cta{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
.v-publico .hero .eyebrow{color:#9FB6F5}
.v-publico .hero.sm{padding-block:clamp(48px,6vw,76px) clamp(54px,7vw,84px)}
.v-publico .hero.sm h1{font-size:clamp(32px,5vw,48px)}
.v-publico .phone{width:252px;height:508px;margin:0 auto;background:#0B1430;border-radius:36px;padding:9px;box-shadow:0 30px 70px rgba(0,0,0,.4)}
.v-publico .phone .scr{height:100%;background:var(--fondo);border-radius:28px;overflow:hidden;display:flex;flex-direction:column}
.v-publico .phone .top{background:var(--marino);padding:20px 18px 22px;border-radius:0 0 24px 24px;display:flex;flex-direction:column;gap:14px}
.v-publico .phone .bd{padding:14px;display:flex;flex-direction:column;gap:10px}
.v-publico .phone .c{background:#fff;border:1px solid rgba(26,45,102,.08);border-radius:16px;padding:12px}
.v-publico .phone .g{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.v-publico .phone .g i{aspect-ratio:1/1;border-radius:4px;border:1.5px solid #C6CEE2}
.v-publico .phone .g i.on{background:#1B7A4C;border-color:#1B7A4C}
.v-publico .phone .band{background:var(--acento);border-radius:16px;padding:13px;color:#fff}
.v-publico .pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:18px;margin-top:40px}
.v-publico .paso{background:var(--card);border:1px solid var(--linea);border-radius:24px;padding:32px 28px}
.v-publico .paso .n{width:42px;height:42px;border-radius:9999px;background:var(--acento);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:17px;font-weight:600;margin-bottom:18px;box-shadow:0 4px 18px var(--acento-glow)}
.v-publico .paso h3{font-size:18px;font-weight:600;letter-spacing:-.03em;margin-bottom:9px}
.v-publico .paso p{font-size:15px;color:var(--txt-2);line-height:1.58}
/* simulador */
.v-publico .sim{background:var(--card);border:1px solid var(--linea);border-radius:28px;padding:30px;margin-top:34px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:start}
@media(max-width:820px){.v-publico .sim{grid-template-columns:1fr;gap:24px;padding:22px}
 }
.v-publico .lb{display:block;font-size:13.5px;font-weight:600;margin-bottom:11px}
.v-publico .sel{position:relative;max-width:400px}
.v-publico select{width:100%;background:var(--surface-2);border:1px solid var(--linea);border-radius:9999px;padding:16px 46px 16px 22px;font-family:var(--sans);font-size:15.5px;color:var(--txt);min-height:54px;outline:none;appearance:none;-webkit-appearance:none;cursor:pointer}
.v-publico .sel svg{position:absolute;right:20px;top:19px;pointer-events:none;color:var(--txt-2)}
.v-publico .chipr{background:var(--surface-2);color:var(--txt-2);border:1px solid var(--linea);border-radius:9999px;padding:12px 20px;font-size:14.5px;font-weight:500;min-height:48px;cursor:pointer}
.v-publico .chipr.on{background:var(--marino);color:#fff;border-color:var(--marino);font-weight:600}
/* tarjetas de nivel */
.v-publico .nivs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;align-items:stretch}
@media(max-width:1020px){.v-publico .nivs{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
 }
.v-publico .nv{background:var(--card);border:1px solid var(--linea);border-radius:22px;padding:22px 20px;display:flex;flex-direction:column}
.v-publico .nv.top{background:var(--marino);border-color:var(--marino)}
.v-publico .nv .cab{display:flex;align-items:center;gap:9px}
.v-publico .nv .pt{width:11px;height:11px;border-radius:9999px;flex-shrink:0}
.v-publico .nv h3{font-size:17px;font-weight:700;letter-spacing:-.03em;margin:0}
.v-publico .nv.top h3{color:#fff}
.v-publico .nv .rng{display:inline-block;font-family:var(--mono);font-size:11.5px;font-weight:600;background:var(--acento-soft);color:var(--acento);border-radius:9999px;padding:4px 11px;margin-top:10px;align-self:flex-start}
.v-publico .nv.top .rng{background:rgba(255,255,255,.14);color:#C9D8FF}
.v-publico .nv .desc{font-size:13.5px;color:var(--txt-2);line-height:1.55;margin:14px 0 0}
.v-publico .nv.top .desc{color:var(--sobre-marino)}
.v-publico .nv ul{list-style:none;margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--linea);display:flex;flex-direction:column;gap:11px}
.v-publico .nv.top ul{border-top-color:var(--marino-3)}
.v-publico .nv li{display:flex;gap:9px;font-size:13.5px;line-height:1.5;color:var(--txt)}
.v-publico .nv.top li{color:#fff}
.v-publico .nv li svg{flex-shrink:0;margin-top:3px;color:var(--acento)}
.v-publico .nv.top li svg{color:#7FA6FF}
.v-publico .nv .cifra{margin-top:auto;padding-top:18px;display:flex;gap:18px}
.v-publico .nv .cifra div span{display:block;font-size:11.5px;color:var(--txt-2)}
.v-publico .nv.top .cifra div span{color:var(--sobre-marino)}
.v-publico .nv .cifra div b{display:block;font-family:var(--mono);font-size:20px;font-weight:600;letter-spacing:-.03em}
.v-publico .nv.top .cifra div b{color:#fff}
/* puntos */
.v-publico .pts{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:760px){.v-publico .pts{grid-template-columns:1fr}
 }
.v-publico .pts .caja{background:var(--card);border:1px solid var(--linea);border-radius:22px;padding:22px}
.v-publico .pts h3{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700;letter-spacing:-.025em;margin:0 0 4px}
.v-publico .pts .row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:13px 0;border-bottom:1px solid var(--linea)}
.v-publico .pts .row:last-child{border-bottom:0}
.v-publico .pts .row span{font-size:14px;line-height:1.45}
.v-publico .pts .row b{font-family:var(--mono);font-size:14.5px;font-weight:600;white-space:nowrap}
.v-publico .pts .mas b{color:var(--verde)}
.v-publico .pts .menos b{color:var(--rojo)}
.v-publico .niv{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
@media(max-width:760px){.v-publico .niv{grid-template-columns:repeat(auto-fit,minmax(88px,1fr))}
 }
.v-publico .niv button{background:var(--surface-2);border:1px solid var(--linea);border-radius:18px;padding:14px 6px;cursor:pointer;text-align:center;min-height:94px}
.v-publico .niv button.on{border-color:var(--acento);background:var(--acento-soft);box-shadow:0 4px 18px var(--acento-glow)}
.v-publico .niv .g{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;width:34px;margin:0 auto 10px}
.v-publico .niv .g i{aspect-ratio:1/1;border-radius:3px;border:1.5px solid var(--celda)}
.v-publico .niv .g i.on{background:var(--verde);border-color:var(--verde)}
.v-publico .niv .nm{display:block;font-size:13px;font-weight:600}
.v-publico .niv .pc{display:block;font-family:var(--mono);font-size:18px;font-weight:600;margin-top:3px}
.v-publico .out{background:var(--marino);border-radius:24px;padding:26px 24px;color:#fff;text-align:center}
.v-publico .out .l{font-size:13px;color:var(--sobre-marino)}
.v-publico .out .v{font-family:var(--mono);font-size:44px;font-weight:600;letter-spacing:-.045em;line-height:1;display:block;margin-top:6px}
.v-publico .out .rw{display:flex;justify-content:space-between;font-size:14px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.13);text-align:left}
.v-publico .out .rw:last-child{border-bottom:0}
/* faq: filas limpias, sin tarjeta */
.v-publico .faq{margin-top:20px;border-top:1px solid var(--linea)}
.v-publico .faq-i{border-bottom:1px solid var(--linea)}
.v-publico .faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;background:none;border:0;padding:22px 2px;cursor:pointer;text-align:left;font-size:17px;font-weight:600;letter-spacing:-.03em;color:var(--txt);min-height:58px}
.v-publico .faq-q:hover{color:var(--acento)}
.v-publico .faq-q .ic{font-family:var(--mono);font-size:24px;color:var(--acento);flex-shrink:0;line-height:1}
.v-publico .faq-a{display:none;padding:0 2px 24px;font-size:16px;color:var(--txt-2);line-height:1.65;max-width:74ch}
.v-publico .faq-i.on .faq-a{display:block}
.v-publico h3.cat{font-size:21px;font-weight:700;letter-spacing:-.035em;margin-top:44px}
.v-publico .cierre{background:var(--marino);color:#fff;text-align:center;border-radius:34px;margin-block:0 clamp(28px,4vw,48px)}
.v-publico .cierre h2{font-size:clamp(30px,4.6vw,46px);font-weight:700;letter-spacing:-.042em;line-height:1.06;text-wrap:balance}
.v-publico .cierre p{color:var(--sobre-marino);font-size:17.5px;line-height:1.6;margin:16px auto 0;max-width:46ch}
.v-publico .cierre .cta{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap;justify-content:center}
.v-publico footer{background:var(--fondo);border-top:1px solid var(--linea);padding-block:48px 34px;font-size:14.5px;line-height:1.7;color:var(--txt-2)}
.v-publico .fcols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
@media(max-width:760px){.v-publico .fcols{grid-template-columns:1fr 1fr;gap:26px}
 }
.v-publico footer h4{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--txt);margin-bottom:13px;font-weight:600}
.v-publico footer a{display:block;text-decoration:none;padding:4px 0}
.v-publico footer a:hover{color:var(--acento)}
.v-publico .legal{margin-top:34px;padding-top:22px;border-top:1px solid var(--linea);font-size:12.5px;line-height:1.65;opacity:.85}
/* vitrina de equipos */
.v-publico .vitrina{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px;margin-top:38px}
.v-publico .eqcard{display:flex;flex-direction:column;gap:18px;background:var(--card);border:1px solid var(--linea);border-radius:26px;padding:26px 22px 22px;cursor:pointer;text-align:left;transition:border-color .18s,transform .18s,box-shadow .18s}
.v-publico .eqcard:hover{border-color:var(--acento);transform:translateY(-3px);box-shadow:0 12px 34px rgba(26,45,102,.10)}
.v-publico .eqcard.on{border-color:var(--acento);box-shadow:0 0 0 1px var(--acento) inset}
.v-publico .eqcard .ph{display:flex;justify-content:center;padding:4px 0 6px}
.v-publico .eqcard .ph svg{filter:drop-shadow(0 10px 20px rgba(26,45,102,.22))}
.v-publico .eqcard .tx{display:block}
.v-publico .eqcard .nm{display:block;font-size:16px;font-weight:600;letter-spacing:-.032em;line-height:1.25}
.v-publico .eqcard .sp{display:block;font-family:var(--mono);font-size:12px;color:var(--txt-2);margin-top:4px}
.v-publico .eqcard .specs{display:flex;flex-wrap:wrap;gap:5px;margin-top:11px}
.v-publico .eqcard .specs span{font-size:11px;font-weight:500;color:var(--txt-2);background:var(--surface-2);border-radius:9999px;padding:4px 9px;white-space:nowrap}
.v-publico .eqcard .ft{border-top:1px solid var(--linea);padding-top:14px;margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;color:var(--acento)}
.v-publico .eqcard .ct{display:block;font-family:var(--mono);font-size:23px;font-weight:600;letter-spacing:-.04em;color:var(--txt);line-height:1}
.v-publico .eqcard .qc{display:block;font-size:11px;color:var(--txt-2);margin-top:3px}
/* directorio de tiendas */
.v-publico .buscar{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:12px;margin-top:30px}
@media(max-width:700px){.v-publico .buscar{grid-template-columns:1fr}
 }
.v-publico .campo{position:relative}
.v-publico .campo input{width:100%;background:var(--card);border:1px solid var(--linea);border-radius:9999px;padding:16px 22px 16px 52px;font-family:var(--sans);font-size:15.5px;color:var(--txt);min-height:56px;outline:none}
.v-publico .campo input:focus{border-color:var(--acento)}
.v-publico .campo>svg{position:absolute;left:22px;top:19px;pointer-events:none;color:var(--txt-2)}
.v-publico .conteo{font-size:14px;color:var(--txt-2);margin-top:22px}
.v-publico .tiendas{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.v-publico .tienda{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;background:var(--card);border:1px solid var(--linea);border-radius:22px;padding:22px 24px}
@media(max-width:620px){.v-publico .tienda{grid-template-columns:1fr;gap:14px}
 }
.v-publico .tienda h3{font-size:18px;font-weight:600;letter-spacing:-.03em}
.v-publico .tienda .zona{font-size:14px;color:var(--txt-2);margin-top:3px}
.v-publico .tienda .meta{display:flex;gap:9px;flex-wrap:wrap;margin-top:11px}
.v-publico .tienda .chip{font-size:11.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;border-radius:9999px;padding:4px 11px}
.v-publico .tienda .chip.ab{background:var(--verde-soft);color:var(--verde)}
.v-publico .tienda .chip.ce{background:var(--acento-soft);color:var(--acento)}
.v-publico .tienda .chip.eq{background:var(--surface-2);color:var(--txt-2)}
.v-publico .tienda .dist{text-align:right}
@media(max-width:620px){.v-publico .tienda .dist{text-align:left}
 }
.v-publico .tienda .dist .n{font-family:var(--mono);font-size:24px;font-weight:600;letter-spacing:-.04em;display:block;line-height:1}
.v-publico .tienda .dist .u{font-size:12px;color:var(--txt-2)}
.v-publico .vacio{background:var(--surface-2);border-radius:22px;padding:34px 26px;text-align:center;color:var(--txt-2);font-size:15px;margin-top:14px}
/* ventana de acceso */
.v-publico .modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:20px}
.v-publico .modal-bg{position:absolute;inset:0;background:rgba(10,17,34,.52);backdrop-filter:blur(3px)}
.v-publico .modal-c{position:relative;width:min(460px,100%);max-height:calc(100% - 24px);overflow-y:auto;background:var(--card);border-radius:28px;padding:30px 28px 26px;box-shadow:0 30px 80px rgba(10,17,34,.34)}
.v-publico .modal-x{position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:9999px;background:var(--surface-2);border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--txt-2)}
.v-publico .modal-x:hover{color:var(--txt)}
.v-publico .modal-c h2{font-size:25px;font-weight:700;letter-spacing:-.035em;line-height:1.15;padding-right:44px}
.v-publico .modal-c .m-sub{font-size:15px;color:var(--txt-2);line-height:1.55;margin-top:9px}
.v-publico .m-tipo{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.v-publico .m-tipo button{display:flex;flex-direction:column;align-items:center;gap:9px;background:var(--surface-2);border:1.5px solid var(--linea);border-radius:20px;padding:18px 12px;cursor:pointer;color:var(--txt-2);font-size:15px;font-weight:600;min-height:100px;transition:border-color .15s,background .15s,color .15s}
.v-publico .m-tipo button:hover{border-color:var(--celda);color:var(--txt)}
.v-publico .m-tipo button.on{border-color:var(--acento);background:var(--acento-soft);color:var(--txt);box-shadow:0 0 0 1px var(--acento) inset}
.v-publico .m-tipo button svg{opacity:.7}
.v-publico .m-tipo button.on svg{opacity:1;color:var(--acento)}
.v-publico .m-cond{display:flex;flex-direction:column;gap:9px;background:var(--surface-2);border-radius:18px;padding:16px 18px;margin-top:18px}
.v-publico .m-cond div{display:flex;align-items:baseline;gap:11px;font-size:14px;line-height:1.5}
.v-publico .m-cond b{font-family:var(--mono);font-size:16px;font-weight:600;color:var(--acento);flex-shrink:0;min-width:42px}
.v-publico .m-o{display:flex;align-items:center;gap:14px;margin:24px 0 20px;color:var(--txt-2);font-size:13px}
.v-publico .m-o::before, .v-publico .m-o::after{content:"";flex:1;height:1px;background:var(--linea)}
.v-publico .m-qr{display:flex;gap:18px;align-items:center;background:var(--surface-2);border-radius:20px;padding:16px}
.v-publico .m-qr .caja{width:104px;height:104px;background:#fff;border-radius:14px;padding:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.v-publico .m-qr .caja img, .v-publico .m-qr .caja canvas{width:100%!important;height:100%!important;display:block}
.v-publico .m-qr b{display:block;font-size:15px;font-weight:600;letter-spacing:-.025em}
.v-publico .m-qr p{font-size:13.5px;color:var(--txt-2);line-height:1.5;margin-top:5px}
.v-publico .m-play{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;margin-top:12px;background:var(--marino);color:#fff;border:0;border-radius:9999px;padding:14px;font-size:15px;font-weight:600;min-height:52px;cursor:pointer}
.v-publico .m-play .pr{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.18);border-radius:9999px;padding:3px 9px}
/* cuentas de prueba: el prototipo no tiene autenticación real */
.v-publico .m-pie{text-align:center;font-size:14px;color:var(--txt-2);margin-top:20px}
.v-publico .eq-paso{margin-top:18px;padding-top:18px;border-top:1px solid var(--linea)}
.v-publico .eq-paso h3{font-size:16px;font-weight:600;letter-spacing:-.02em;margin:0 0 6px}
.v-publico .eq-paso p{font-size:13.5px;color:var(--txt-2);line-height:1.55;margin:0 0 12px}
.v-publico .eq-paso input{width:100%;background:var(--surface-2);border:1px solid var(--linea);border-radius:9999px;padding:15px 20px;font-family:var(--sans);font-size:15.5px;color:var(--txt);min-height:54px;outline:none;margin-bottom:10px}
.v-publico .eq-paso input:focus{border-color:var(--acento)}
.v-publico .eq-err{color:var(--rojo);font-size:13.5px;line-height:1.5;margin-top:10px;text-align:center}
.v-publico .m-pie button{background:none;border:0;color:var(--acento);font-weight:600;font-size:14px;cursor:pointer;padding:6px;text-decoration:underline}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}



/* ================= cliente ================= */

:root .v-cliente{
    --marino:#1A2D66; --marino-2:#243C7D; --marino-3:#29406E;
    --acento:#2F62EE; --acento-soft:#E8EEFC;
    --fondo:#FAF9F6; --card:#FFFFFF; --linea:#E7E4DC; --celda:#C6CEE2;
    --txt:#1A2D66; --txt-2:#5D6786; --sobre-marino:#B4C2E4;
    --verde:#1B7A4C; --marco:#E7EAF1; --verde-soft:#E3F1EA; --naranja:#F04E17; --rojo:#A8362B;
    --sans:"Poppins",-apple-system,"Segoe UI",sans-serif;
    --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  }
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .v-cliente{
      --marino:#101C3E; --marino-2:#1C2E5E; --marino-3:#3C58A6;
      --acento:#4C7BFF; --acento-soft:#182A54;
      --fondo:#0A1122; --card:#131E38; --linea:#243358; --celda:#33456B;
      --txt:#EAEFFA; --txt-2:#9AA8CB; --sobre-marino:#B4C2E4;
      --verde:#3DA875; --verde-soft:#122A20; --naranja:#FF6B35; --rojo:#D97A6D;
    }

  }
:root[data-theme="dark"] .v-cliente{
    --marino:#101C3E; --marino-2:#1C2E5E; --marino-3:#3C58A6;
    --acento:#4C7BFF; --acento-soft:#182A54;
    --fondo:#0A1122; --card:#131E38; --linea:#243358; --celda:#33456B;
    --txt:#EAEFFA; --txt-2:#9AA8CB; --sobre-marino:#B4C2E4;
    --verde:#3DA875; --verde-soft:#122A20; --naranja:#FF6B35; --rojo:#D97A6D;
  }
*{box-sizing:border-box}
html, .v-cliente{height:100%}
.v-cliente{margin:0;background:var(--fondo);color:var(--txt);font-family:var(--sans);font-size:16px;letter-spacing:-.014em;-webkit-font-smoothing:antialiased}
.v-cliente button{font-family:inherit}
.v-cliente h1, .v-cliente h2, .v-cliente p{margin:0}
.v-cliente .shell{height:100%;display:flex;flex-direction:column;background:var(--fondo);position:relative;overflow:hidden}
.v-cliente .screen{flex:1;min-height:0;display:none;flex-direction:column}
.v-cliente .screen.on{display:flex}
.v-cliente #s-bienvenida{background:var(--marino);padding-block:44px calc(28px + env(safe-area-inset-bottom,0px));padding-inline:24px;justify-content:space-between;overflow-y:auto}
/* header */
.v-cliente .hd{background:var(--marino);border-radius:0 0 28px 28px;padding:20px 20px 24px;display:flex;flex-direction:column;gap:18px;flex-shrink:0}
.v-cliente .hd-row{display:flex;align-items:center;gap:12px}
.v-cliente .hd-t{font-size:15px;font-weight:600;color:#fff}
.v-cliente .back{display:flex;align-items:center;justify-content:center;width:46px;height:46px;margin:-12px 0 -12px -13px;background:none;border:0;cursor:pointer;border-radius:100px}
.v-cliente .back:focus-visible, .v-cliente .pill:focus-visible, .v-cliente .ghost:focus-visible, .v-cliente .chip:focus-visible, .v-cliente input:focus-visible, .v-cliente select:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.v-cliente .steps{display:flex;gap:5px}
.v-cliente .steps i{flex:1;height:4px;border-radius:100px;background:var(--marino-3)}
.v-cliente .steps i.on{background:var(--acento)}
.v-cliente .body{flex:1;min-height:0;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:14px}
.v-cliente .foot{flex-shrink:0;padding:13px 20px calc(20px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:10px}
.v-cliente .h1{font-size:27px;font-weight:700;letter-spacing:-.035em;line-height:1.15}
.v-cliente .sub{font-size:14px;color:var(--txt-2);line-height:1.5}
.v-cliente .lbl{font-size:12.5px;font-weight:600}
.v-cliente .fine{font-size:11px;color:var(--txt-2);text-align:center;line-height:1.5}
.v-cliente .pill{display:flex;align-items:center;justify-content:center;gap:9px;background:var(--acento);color:#fff;border:0;border-radius:9999px;padding:17px;font-size:16.5px;font-weight:600;letter-spacing:-.02em;min-height:54px;cursor:pointer;width:100%;text-decoration:none;box-shadow:0 4px 22px var(--glow)}
.v-cliente .pill[disabled]{opacity:.45;cursor:not-allowed}
.v-cliente .ghost{display:flex;align-items:center;justify-content:center;gap:9px;background:transparent;color:var(--txt);border:1.5px solid var(--linea-2);border-radius:9999px;padding:16px;font-size:16px;font-weight:600;min-height:54px;cursor:pointer;width:100%}
.v-cliente .ghost.on-dark{border-color:var(--marino-3);color:#fff}
.v-cliente .pill-inst{display:flex;align-items:center;justify-content:center;gap:9px;background:transparent;color:#fff;border:1.5px solid var(--marino-3);border-radius:9999px;padding:15px;font-family:inherit;font-size:15px;font-weight:600;min-height:50px;cursor:pointer;width:100%}
.v-cliente .pill-inst:hover{border-color:var(--acento)}
.v-cliente .aviso-cuota{background:var(--naranja);color:#fff;border-radius:14px;padding:13px 15px;font-size:12.5px;line-height:1.55}
.v-cliente .tienda-op{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--card);border:1.5px solid var(--linea);border-radius:16px;padding:12px 14px;cursor:pointer;font-family:inherit;min-height:62px}
.v-cliente .tienda-op.on{border-color:var(--acento);background:var(--acento-soft)}
.v-cliente .tienda-op b{display:block;font-size:14px;font-weight:600;color:var(--txt)}
.v-cliente .tienda-op span{display:block;font-size:12px;color:var(--txt-2)}
.v-cliente .tienda-op .dist{margin-left:auto;text-align:right;flex-shrink:0}
.v-cliente .tienda-op .dist b{font-family:var(--mono);font-size:13px}
.v-cliente .pill[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
.v-cliente .linkdemo{background:none;border:0;color:var(--sobre-marino);font-family:inherit;font-size:14px;font-weight:500;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:10px;min-height:44px;width:100%}
.v-cliente .linkdemo:hover{color:#fff}
.v-cliente .pts-card{background:var(--card);border-radius:18px;padding:16px}
.v-cliente .pts-card .top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.v-cliente .pts-card .val{display:flex;align-items:baseline;gap:5px}
.v-cliente .pts-card .val b{font-family:var(--mono);font-size:30px;font-weight:600;letter-spacing:-.035em;line-height:1}
.v-cliente .pts-card .val i{font-style:normal;font-size:13px;color:var(--txt-2)}
.v-cliente .pts-card .meta{font-size:12px;color:var(--txt-2);text-align:right;line-height:1.4}
.v-cliente .pts-bar{height:8px;border-radius:9999px;background:var(--celda);overflow:hidden;margin-top:12px}
.v-cliente .pts-bar i{display:block;height:100%;border-radius:9999px;background:var(--verde);transition:width .35s}
.v-cliente .pts-card .pie{font-size:12.5px;color:var(--txt-2);line-height:1.45;margin-top:10px}
.v-cliente .c-lista{display:flex;flex-direction:column;gap:10px}
.v-cliente .chip-demo{font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;background:#9A6410;color:#fff;border-radius:100px;padding:3px 7px;margin-left:6px}
.v-cliente .card{background:var(--card);border:1px solid var(--linea);border-radius:22px;padding:18px}
.v-cliente .row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--linea)}
.v-cliente .row:last-child{border-bottom:0}
.v-cliente .num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.v-cliente .grid12{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.v-cliente .grid12 i{aspect-ratio:1/1;border-radius:5px;border:1.5px solid var(--celda);display:block}
.v-cliente .grid12 i.pag{background:var(--verde);border-color:var(--verde)}
.v-cliente .grid12 i.act{background:var(--naranja);border-color:var(--naranja)}
.v-cliente input[type=text], .v-cliente input[type=tel], .v-cliente input[type=email], .v-cliente input[type=password], .v-cliente select{width:100%;background:var(--card);border:1.5px solid var(--linea);border-radius:100px;padding:15px 18px;font-family:var(--sans);font-size:14.5px;color:var(--txt);min-height:50px;outline:none}
.v-cliente input:focus, .v-cliente select:focus{border-color:var(--acento)}
.v-cliente select{appearance:none;-webkit-appearance:none;padding-right:42px}
.v-cliente .sel{position:relative}
.v-cliente .sel svg{position:absolute;right:18px;top:17px;pointer-events:none}
/* cámara dentro del app: video en vivo con su guía encima */
.v-cliente .cam{position:relative;overflow:hidden;background:var(--marino);width:100%;flex-shrink:0}
/* en la columna con scroll, sin esto se aplasta a 0 */
.v-cliente .cam video, .v-cliente .cam img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.v-cliente .cam.doc{border-radius:20px;aspect-ratio:4/3}
.v-cliente .cam.doc img{object-fit:contain;background:#0A1122}
.v-cliente .guia{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:84%;aspect-ratio:1.585;border:2px dashed #7FA6FF;border-radius:14px;
        box-shadow:0 0 0 999px rgba(10,17,34,.5);display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;transition:border-color .2s}
.v-cliente .guia span{font-size:12px;color:#fff;background:rgba(10,17,34,.55);border-radius:100px;padding:4px 10px}
.v-cliente .cam.cara{width:220px;aspect-ratio:3/4;border-radius:50%;border:2.5px dashed #7FA6FF;margin:0 auto;display:flex;align-items:center;justify-content:center}
.v-cliente .cam.cara video, .v-cliente .cam.cara img{transform:scaleX(-1)}
/* como un espejo: así se acomoda uno solo */
.v-cliente .cam.viva{border-style:solid}
.v-cliente .link-foto{background:none;border:0;color:var(--acento);font-size:12.5px;font-weight:500;text-decoration:underline;cursor:pointer;padding:6px;font-family:inherit}
.v-cliente .otp{display:flex;gap:8px}
.v-cliente .otp input{text-align:center;border-radius:14px;padding:16px 0;font-family:var(--mono);font-size:22px;font-weight:600;flex:1;width:0;min-width:0}
.v-cliente .chip{background:var(--card);color:var(--txt-2);border:1.5px solid var(--linea);border-radius:100px;padding:12px 18px;font-size:13.5px;font-weight:500;min-height:46px;cursor:pointer}
.v-cliente .chip.on{background:var(--marino);color:#fff;border-color:var(--marino);font-weight:600}
.v-cliente .chips{display:flex;flex-wrap:wrap;gap:8px}
.v-cliente .tabs{display:flex;background:var(--card);border-top:1px solid var(--linea);flex-shrink:0;padding-bottom:env(safe-area-inset-bottom,0px)}
.v-cliente .tabs button{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:11px 4px 14px;min-height:58px;background:none;border:0;cursor:pointer;color:var(--txt-2);font-size:11.5px}
.v-cliente .tabs button .ico{display:flex;align-items:center;justify-content:center;width:46px;height:28px;border-radius:9999px;transition:background .15s}
.v-cliente .tabs button.on{color:var(--txt);font-weight:600}
.v-cliente .tabs button.on .ico{background:var(--acento-soft)}
.v-cliente .dev{background:var(--marino);border-radius:9px;padding:3px;display:flex;flex-direction:column;gap:3px;flex-shrink:0}
.v-cliente .dev .cam{height:3px;display:flex;align-items:center;justify-content:center}
.v-cliente .dev .cam span{width:9px;height:2px;background:var(--marino-3);display:block}
.v-cliente .dev .scr{flex:1;border-radius:6px}
.v-cliente input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;cursor:pointer;margin:0;padding:0;border:0;min-height:0}
.v-cliente input[type=range]::-webkit-slider-runnable-track{height:5px;background:var(--linea);border-radius:100px}
.v-cliente input[type=range]::-moz-range-track{height:5px;background:var(--linea);border-radius:100px}
.v-cliente input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--acento);border:3px solid var(--card);margin-top:-10px;box-shadow:0 0 0 1px var(--acento)}
.v-cliente input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--acento);border:3px solid var(--card)}
/* hoja de pago */
.v-cliente .hoja{position:absolute;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center}
.v-cliente .hoja-bg{position:absolute;inset:0;background:rgba(6,14,36,.55)}
.v-cliente .hoja-c{position:relative;width:100%;max-width:440px;background:var(--card);border-radius:26px 26px 0 0;padding:22px 20px 20px;max-height:92%;overflow-y:auto}
.v-cliente .hoja-c h2{font-size:19px;font-weight:700;letter-spacing:-.03em;margin:0}
.v-cliente .hoja-c .sub{font-size:13.5px;color:var(--txt-2);margin:4px 0 16px}
.v-cliente .met{display:flex;flex-direction:column;gap:9px}
.v-cliente .met button{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:var(--surface-2);border:1.5px solid var(--linea);border-radius:18px;padding:14px 15px;cursor:pointer;min-height:66px;font-family:inherit}
.v-cliente .met button.on{border-color:var(--acento);background:var(--acento-soft)}
.v-cliente .met button b{display:block;font-size:15px;font-weight:600;color:var(--txt)}
.v-cliente .met button span{display:block;font-size:12.5px;color:var(--txt-2)}
.v-cliente .met .sig{width:38px;height:38px;border-radius:9999px;background:var(--marino);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--mono);font-size:12px;font-weight:600}
.v-cliente .enbs{background:var(--acento);color:#fff;border-radius:16px;padding:14px 15px;margin-top:14px;text-align:center}
.v-cliente .enbs span{display:block;font-size:12px;color:#C9D8FF}
.v-cliente .enbs b{display:block;font-size:26px;font-weight:600;letter-spacing:-.03em;line-height:1.1;margin:3px 0}
.v-cliente .enbs em{display:block;font-style:normal;font-size:11.5px;color:#C9D8FF}
.v-cliente .enbs.falla{background:var(--naranja)}
.v-cliente .enbs.falla span, .v-cliente .enbs.falla em{color:rgba(255,255,255,.85)}
.v-cliente .dest{background:var(--surface-2);border-radius:16px;padding:14px 15px;margin-top:14px}
.v-cliente .dest div{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:13px}
.v-cliente .dest div span:first-child{color:var(--txt-2)}
.v-cliente .dest div span:last-child{font-family:var(--mono);font-weight:600;text-align:right;word-break:break-all}
.v-cliente .hoja-c input{width:100%;background:var(--card);border:1.5px solid var(--linea);border-radius:100px;padding:14px 18px;font-family:var(--sans);font-size:15px;color:var(--txt);min-height:52px;outline:none;margin-top:14px}
.v-cliente .hoja-c input:focus{border-color:var(--acento)}
.v-cliente .hoja-c .pill{margin-top:14px}
.v-cliente .hoja-c .pill[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
.v-cliente .hoja-c .ghost{margin-top:9px;min-height:48px;font-size:15px}
@media(min-width:900px){.v-cliente .hoja{align-items:center}
.v-cliente .hoja-c{border-radius:26px;max-width:460px}
 }
.v-cliente .toast{position:absolute;left:20px;right:20px;bottom:88px;background:var(--marino);color:#fff;border-radius:14px;padding:14px 16px;font-size:13.5px;line-height:1.45;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;pointer-events:none;z-index:5}
.v-cliente .toast.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* ---------- versión web ---------- */
.v-cliente .nav{display:none;flex-direction:column;gap:2px;background:var(--marino);padding:26px 16px calc(20px + env(safe-area-inset-bottom,0px));min-height:100%}
.v-cliente .nav .brand{display:flex;align-items:center;gap:10px;padding:0 10px 26px}
.v-cliente .nav .brand span{font-size:21px;font-weight:800;letter-spacing:-.045em;color:#fff}
.v-cliente .nav button{display:flex;align-items:center;gap:12px;background:none;border:0;border-radius:100px;padding:13px 16px;cursor:pointer;color:var(--sobre-marino);font-size:14.5px;font-weight:500;text-align:left;min-height:48px}
.v-cliente .nav button:hover{color:#fff;background:var(--marino-2)}
.v-cliente .nav button.on{background:var(--acento);color:#fff;font-weight:600}
.v-cliente .nav .foot-note{margin-top:auto;padding:16px 12px 0;font-size:11.5px;color:var(--sobre-marino);line-height:1.5;border-top:1px solid var(--marino-3)}
/* ---------- dos entradas, un solo código ----------
     El cliente entra por el navegador o por el app instalado, y no tiene que
     ver lo mismo en los dos: en una computadora, una página ancha; en el
     teléfono y en la tablet, el app.

     Hubo un tiempo en que en pantallas medianas se dibujaba un teléfono de
     430 px flotando en el centro. Servía para previsualizar y estorbaba a
     quien de verdad usa una tablet: media pantalla vacía y el contenido
     apretado. Ahora las barras van de borde a borde, como en cualquier app, y
     lo que se centra es la columna de lectura.

     El corte a escritorio usa display-mode y no una clase: si el navegador no
     lo entiende, cae en escritorio, que para un navegador es lo correcto. */
@media (min-width:560px){.v-cliente .hd, .v-cliente .body, .v-cliente .foot, .v-cliente .tabs{padding-inline:max(20px,calc((100% - 600px) / 2))}

  }
/* De 700 en adelante hay sitio para dos columnas, y el fondo vacío a los
     lados deja de serlo. Vale para tablet y para escritorio: no depende de
     que haya barra lateral. */
@media (min-width:700px){.v-cliente .hd, .v-cliente .body, .v-cliente .foot, .v-cliente .tabs{padding-inline:max(24px,calc((100% - 760px) / 2))}
.v-cliente #in-body{display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:14px}
.v-cliente #in-body > *{margin:0}
.v-cliente .c-pago{grid-column:1;grid-row:1}
.v-cliente .pts-card{grid-column:2;grid-row:1}
.v-cliente .c-equipo{grid-column:1;grid-row:2}
.v-cliente .c-cuotas{grid-column:2;grid-row:2}
.v-cliente .c-cta{grid-column:1 / -1;justify-self:center;width:auto;padding-inline:40px}
.v-cliente .c-lista, .v-cliente .c-res{grid-column:1 / -1}
.v-cliente #eq-list, .v-cliente #ti-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}

  }
@media (min-width:900px) and (display-mode:browser){.v-cliente{display:block;background:var(--fondo);padding:0}
.v-cliente .shell{width:auto;max-width:none;height:100%;border-radius:0;box-shadow:none;
           display:grid;grid-template-columns:264px minmax(0,1fr)}
.v-cliente .nav{display:flex;grid-column:1;grid-row:1}
.v-cliente .screen{grid-column:2;grid-row:1;min-width:0}
.v-cliente .tabs{display:none}
.v-cliente .hd{border-radius:0}
.v-cliente .hd, .v-cliente .body, .v-cliente .foot{padding-inline:max(32px,calc((100% - 720px) / 2))}
.v-cliente .toast{left:auto;right:28px;bottom:28px;max-width:360px}
.v-cliente .hoja{align-items:center}
.v-cliente .hoja-c{border-radius:26px;max-width:460px}

  }
@media (min-width:1280px) and (display-mode:browser){.v-cliente .hd, .v-cliente .body, .v-cliente .foot{padding-inline:max(48px,calc((100% - 1040px) / 2))}

  }
/* ---------- el tablero en escritorio ----------
     En el teléfono las tarjetas van una debajo de otra porque no hay otra
     forma. En una pantalla ancha eso deja media pantalla vacía y obliga a
     bajar para ver lo que cabía de un vistazo. Aquí se colocan: la cuota por
     pagar y los puntos arriba, el equipo y el cronograma debajo. */
@media (min-width:900px) and (display-mode:browser){/* la cabecera deja de ser un bloque de teléfono y se vuelve una franja */
.v-cliente .hd{flex-direction:row;align-items:center;justify-content:space-between;
        gap:32px;padding-block:22px}
/* el logotipo deja de repartirse el ancho: se junta con su distintivo */
.v-cliente #s-inicio .hd > div:first-child{justify-content:flex-start;gap:14px;flex-shrink:0}
.v-cliente #s-inicio .hd > div:last-child{align-items:flex-end;text-align:right}
.v-cliente #in-linea{font-size:38px}
.v-cliente #in-body{gap:16px}
.v-cliente .c-pago{padding:22px 24px}

  }




/* ================= comercio ================= */

:root .v-comercio{
    --marino:#1A2D66; --marino-2:#243C7D; --marino-3:#3C58A6;
    --acento:#2F62EE; --acento-soft:#E8EEFC; --glow:rgba(47,98,238,.26);
    --fondo:#FAF9F6; --card:#FFFFFF; --surface-2:#F3F2ED;
    --linea:rgba(26,45,102,.10); --linea-2:rgba(26,45,102,.06);
    --txt:#1A2D66; --txt-2:#5D6786; --sobre-marino:#B4C2E4;
    --verde:#1B7A4C; --verde-soft:#E3F1EA; --ambar:#9A6410; --ambar-soft:#FBF0DC; --rojo:#A8362B;
    --sans:"Poppins",-apple-system,"Segoe UI",sans-serif;
    --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  }
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .v-comercio{
      --marino:#101C3E; --marino-2:#1C2E5E; --marino-3:#3C58A6;
      --acento:#5B86FF; --acento-soft:#182A54; --glow:rgba(91,134,255,.28);
      --fondo:#0A1122; --card:#131E38; --surface-2:#18243F;
      --linea:rgba(180,194,228,.14); --linea-2:rgba(180,194,228,.08);
      --txt:#EAEFFA; --txt-2:#9AA8CB;
      --verde:#3DA875; --verde-soft:#122A20; --ambar:#D9A441; --ambar-soft:#2E2515; --rojo:#D97A6D;
    }

  }
:root[data-theme="dark"] .v-comercio{
    --marino:#101C3E; --marino-2:#1C2E5E; --marino-3:#3C58A6;
    --acento:#5B86FF; --acento-soft:#182A54; --glow:rgba(91,134,255,.28);
    --fondo:#0A1122; --card:#131E38; --surface-2:#18243F;
    --linea:rgba(180,194,228,.14); --linea-2:rgba(180,194,228,.08);
    --txt:#EAEFFA; --txt-2:#9AA8CB;
    --verde:#3DA875; --verde-soft:#122A20; --ambar:#D9A441; --ambar-soft:#2E2515; --rojo:#D97A6D;
  }
*{box-sizing:border-box}
html, .v-comercio{height:100%}
.v-comercio{margin:0;background:var(--fondo);color:var(--txt);font-family:var(--sans);font-size:16px;line-height:1.5;letter-spacing:-.014em;-webkit-font-smoothing:antialiased}
.v-comercio button{font-family:inherit}
.v-comercio h1, .v-comercio h2, .v-comercio h3, .v-comercio p{margin:0}
.v-comercio .num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.v-comercio .app{height:100%;display:flex;flex-direction:column}
@media(min-width:900px){.v-comercio .app{display:grid;grid-template-columns:252px minmax(0,1fr)}
 }
/* nav */
.v-comercio .nav{background:var(--marino);display:flex;flex-direction:column;padding:22px 16px 18px;gap:2px}
.v-comercio .nav .brand{display:flex;align-items:center;gap:10px;padding:0 10px 6px}
.v-comercio .nav .brand b{font-size:20px;font-weight:800;letter-spacing:-.045em;color:#fff}
.v-comercio .nav .tienda{padding:0 10px 22px;font-size:12.5px;color:var(--sobre-marino);line-height:1.45}
.v-comercio .nav button{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;border-radius:12px;padding:11px 14px;cursor:pointer;color:var(--sobre-marino);font-size:14.5px;font-weight:500;text-align:left;min-height:46px;transition:background .14s,color .14s}
.v-comercio .nav button:hover{color:#fff;background:rgba(255,255,255,.07)}
.v-comercio .nav button.on{background:var(--acento);color:#fff;font-weight:600;box-shadow:0 4px 16px rgba(47,98,238,.34)}
.v-comercio .nav button svg{opacity:.8}
.v-comercio .nav button.on svg, .v-comercio .nav button:hover svg{opacity:1}
.v-comercio .nav .cta{background:var(--acento);color:#fff;font-weight:600;justify-content:center;border-radius:9999px;margin-bottom:6px;box-shadow:0 4px 18px rgba(47,98,238,.4)}
.v-comercio .nav .cta:hover{background:#2757d8;color:#fff}
.v-comercio .nav .grupo{font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:rgba(180,194,228,.62);padding:18px 14px 7px}
.v-comercio .nav .pill{margin-left:auto;font-family:var(--mono);font-size:11px;font-weight:600;background:rgba(255,255,255,.13);color:var(--sobre-marino);border-radius:9999px;padding:2px 8px;min-width:24px;text-align:center}
.v-comercio .nav .pill.alerta{background:var(--ambar);color:#fff}
.v-comercio .nav button.on .pill{background:rgba(255,255,255,.22);color:#fff}
.v-comercio .nav .pie{position:relative;margin-top:auto;padding-top:14px;border-top:1px solid var(--marino-3)}
.v-comercio .nav .yo{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;border-radius:14px;padding:9px 11px;cursor:pointer;text-align:left;min-height:48px;position:relative}
.v-comercio .nav .yo:hover{background:var(--marino-2)}
.v-comercio .nav .yo .av{width:32px;height:32px;border-radius:9999px;background:var(--acento);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;flex-shrink:0}
.v-comercio .nav .yo .nm{display:block;font-size:13.5px;font-weight:600;color:#fff;line-height:1.2}
.v-comercio .nav .yo .zn{display:block;font-size:11.5px;color:var(--sobre-marino)}
.v-comercio .menu-yo{position:absolute;bottom:calc(100% + 8px);left:14px;right:14px;background:var(--card);border:1px solid var(--linea);border-radius:16px;padding:14px;box-shadow:0 14px 40px rgba(10,17,34,.24);z-index:25}
.v-comercio .menu-yo b{display:block;font-size:14px;font-weight:600}
.v-comercio .menu-yo p{font-size:12.5px;color:var(--txt-2);line-height:1.45;margin-top:3px}
@media(max-width:899px){.v-comercio .nav{flex-direction:row;align-items:center;gap:6px;padding:12px;overflow-x:auto;flex-shrink:0}
.v-comercio .nav .brand, .v-comercio .nav .tienda, .v-comercio .nav .grupo{display:none}
.v-comercio .nav #nav-items{display:contents}
/* la barra desplaza horizontal: el avatar se queda pegado a la derecha */
.v-comercio .nav .pie{margin-top:0;padding-top:0;border-top:0;margin-left:auto;position:sticky;right:0;background:var(--marino);padding-left:8px;z-index:3}
.v-comercio .nav .yo .nm, .v-comercio .nav .yo .zn{display:none}
.v-comercio .nav .yo{padding:6px}
/* fija a la ventana: dentro de la barra la recortaría el overflow */
.v-comercio .menu-yo{position:fixed;inset:auto 12px 12px auto;width:min(280px,calc(100vw - 24px))}
.v-comercio .nav button{white-space:nowrap;padding:10px 14px;min-height:44px;font-size:13.5px}

  }
.v-comercio .main{min-width:0;display:flex;flex-direction:column;overflow:hidden}
.v-comercio .top{background:var(--card);border-bottom:1px solid var(--linea);padding:18px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-shrink:0;flex-wrap:wrap}
.v-comercio .top h1{font-size:21px;font-weight:700;letter-spacing:-.03em}
.v-comercio .top p{font-size:13px;color:var(--txt-2);margin-top:2px}
.v-comercio .content{flex:1;min-height:0;overflow-y:auto;padding:24px 28px 40px}
.v-comercio .inner{max-width:1040px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
@media(max-width:620px){.v-comercio .top{padding:14px 18px}
.v-comercio .content{padding:18px 18px 32px}
 }
.v-comercio .card{background:var(--card);border:1px solid var(--linea);border-radius:22px;padding:22px}
.v-comercio .card h2{font-size:15.5px;font-weight:600;letter-spacing:-.02em;margin-bottom:4px}
.v-comercio .card .sub{font-size:12.5px;color:var(--txt-2);line-height:1.5}
.v-comercio .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:14px}
.v-comercio .kpi{background:var(--card);border:1px solid var(--linea);border-radius:22px;padding:18px 20px}
.v-comercio .kpi .l{font-size:12px;color:var(--txt-2);margin-bottom:7px}
.v-comercio .kpi .v{font-family:var(--mono);font-size:27px;font-weight:600;letter-spacing:-.035em;line-height:1}
.v-comercio .kpi .f{font-size:11.5px;color:var(--txt-2);margin-top:6px}
.v-comercio .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--acento);color:#fff;border:0;border-radius:9999px;padding:13px 24px;font-size:15px;font-weight:600;min-height:48px;cursor:pointer;box-shadow:0 4px 20px var(--glow);transition:box-shadow .16s,transform .16s}
.v-comercio .btn:hover{box-shadow:0 7px 26px var(--glow);transform:translateY(-1px)}
.v-comercio .btn[disabled]{opacity:.42;cursor:not-allowed}
.v-comercio .btn.ghost{background:transparent;color:var(--txt);border:1.5px solid var(--linea);box-shadow:none}
.v-comercio .btn.ghost:hover{border-color:var(--acento);box-shadow:none;transform:none}
.v-comercio .btn:focus-visible, .v-comercio .nav button:focus-visible, .v-comercio input:focus-visible, .v-comercio select:focus-visible, .v-comercio .pick:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.v-comercio table{width:100%;border-collapse:collapse}
.v-comercio th, .v-comercio td{text-align:left;padding:11px 12px;font-size:13.5px;border-bottom:1px solid var(--linea-2)}
.v-comercio th{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--txt-2);font-weight:600}
.v-comercio td.r, .v-comercio th.r{text-align:right}
.v-comercio tbody tr:last-child td{border-bottom:0}
.v-comercio .scroll{overflow-x:auto}
/* Interruptor de catálogo: dice sí o no, no cuántos. */
.v-comercio .tog{appearance:none;-webkit-appearance:none;border:0;padding:0;cursor:pointer;
       width:42px;height:24px;border-radius:9999px;background:var(--linea-2);
       display:inline-flex;align-items:center;transition:background .15s}
.v-comercio .tog.on{background:var(--acento)}
.v-comercio .tog span{display:block;width:18px;height:18px;border-radius:9999px;background:#fff;
            margin-left:3px;transition:transform .15s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.v-comercio .tog.on span{transform:translateX(18px)}
.v-comercio .tog:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.v-comercio .tag{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;border-radius:100px;padding:4px 10px}
.v-comercio .tag.ok{background:var(--verde-soft);color:var(--verde)}
.v-comercio .tag.wait{background:var(--ambar-soft);color:var(--ambar)}
.v-comercio .tag.blue{background:var(--acento-soft);color:var(--acento)}
.v-comercio .tag.off{background:var(--surface-2);color:var(--rojo)}
.v-comercio .alta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto;gap:10px;align-items:end;margin-top:14px}
@media(max-width:760px){.v-comercio .alta{grid-template-columns:1fr}
 }
.v-comercio .err{color:var(--rojo);font-size:13px;line-height:1.5;margin-top:10px}
/* stepper */
.v-comercio .steps{display:flex;gap:0;align-items:center;flex-wrap:wrap}
.v-comercio .steps .s{display:flex;align-items:center;gap:9px;padding-right:14px}
.v-comercio .steps .s .n{width:30px;height:30px;border-radius:9999px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12.5px;font-weight:600;background:var(--surface-2);color:var(--txt-2);flex-shrink:0;border:1px solid var(--linea)}
.v-comercio .steps .s.on .n{background:var(--acento);color:#fff;border-color:var(--acento);box-shadow:0 3px 12px var(--glow)}
.v-comercio .steps .s.done .n{background:var(--verde);color:#fff;border-color:var(--verde)}
.v-comercio .steps .s span{font-size:12.5px;color:var(--txt-2)}
.v-comercio .steps .s.on span{color:var(--txt);font-weight:600}
.v-comercio .steps .bar{flex:1;min-width:16px;height:1.5px;background:var(--linea);margin-right:14px}
.v-comercio label.lb{display:block;font-size:12.5px;font-weight:600;margin-bottom:7px}
.v-comercio input[type=text], .v-comercio input[type=email], .v-comercio input[type=password], .v-comercio select{width:100%;background:var(--card);border:1.5px solid var(--linea);border-radius:100px;padding:13px 18px;font-family:var(--sans);font-size:14.5px;color:var(--txt);min-height:48px;outline:none}
.v-comercio input:focus, .v-comercio select:focus{border-color:var(--acento)}
.v-comercio select{appearance:none;-webkit-appearance:none;padding-right:42px}
.v-comercio .sel{position:relative}
.v-comercio .sel svg{position:absolute;right:18px;top:16px;pointer-events:none;color:var(--txt-2)}
.v-comercio .pick{display:flex;align-items:center;gap:15px;width:100%;text-align:left;background:var(--card);border:1.5px solid var(--linea);border-radius:20px;padding:15px 17px;cursor:pointer;min-height:86px;transition:border-color .15s,transform .15s}
.v-comercio .pick:hover{border-color:var(--acento);transform:translateY(-1px)}
.v-comercio .pick.on{border-color:var(--acento);background:var(--acento-soft);box-shadow:0 0 0 1px var(--acento) inset}
.v-comercio .pick[disabled]{opacity:.42;cursor:not-allowed;transform:none}
.v-comercio .pick .esp{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.v-comercio .pick .esp span{font-size:10.5px;color:var(--txt-2);background:var(--surface-2);border-radius:9999px;padding:3px 8px;white-space:nowrap}
.v-comercio .dev{background:var(--marino);border-radius:8px;padding:3px;display:flex;flex-direction:column;gap:3px;flex-shrink:0}
.v-comercio .dev .cam{height:3px;display:flex;align-items:center;justify-content:center}
.v-comercio .dev .cam i{width:8px;height:2px;background:var(--marino-3);display:block}
.v-comercio .dev .scr{flex:1;border-radius:5px}
.v-comercio .split{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
@media(max-width:860px){.v-comercio .split{grid-template-columns:1fr}
 }
/* La tabla de ventas pide ~560px sin partir cédulas ni montos; con la barra
     lateral y la columna de 300px eso no cabe por debajo de 1200 de ancho. */
@media(max-width:1199px){.v-comercio .split.con-tabla{grid-template-columns:1fr}
 }
.v-comercio .ventas td.num, .v-comercio .ventas .tag{white-space:nowrap}
/* En el teléfono seis columnas no caben: cada venta pasa a ser un bloque. */
@media(max-width:620px){.v-comercio .ventas thead{display:none}
.v-comercio .ventas tr{display:grid;grid-template-columns:1fr auto;grid-template-areas:"eq est" "cli fin" "hora ini";gap:4px 12px;padding:13px 20px;border-bottom:1px solid var(--linea-2)}
.v-comercio .ventas tbody tr:last-child{border-bottom:0}
.v-comercio .ventas td{padding:0;border:0}
.v-comercio .ventas td:nth-child(1){grid-area:hora;color:var(--txt-2);font-size:12.5px}
.v-comercio .ventas td:nth-child(2){grid-area:cli;color:var(--txt-2);font-size:12.5px}
.v-comercio .ventas td:nth-child(3){grid-area:eq;font-weight:600}
.v-comercio .ventas td:nth-child(4){grid-area:ini;font-size:12.5px;color:var(--txt-2)}
.v-comercio .ventas td:nth-child(5){grid-area:fin;font-size:12.5px}
.v-comercio .ventas td:nth-child(6){grid-area:est}
.v-comercio .ventas td[data-l]::before{content:attr(data-l) " ";font-family:inherit}

  }
.v-comercio .liq{background:var(--marino);color:#fff;border-radius:22px;padding:22px}
.v-comercio .liq .l{font-size:12px;color:var(--sobre-marino);margin-bottom:6px}
.v-comercio .liq .v{font-family:var(--mono);font-size:30px;font-weight:600;letter-spacing:-.035em;line-height:1}
.v-comercio .liq .row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--marino-3);font-size:13.5px}
.v-comercio .liq .row:last-child{border-bottom:0}
.v-comercio .qr{width:196px;height:196px;background:var(--marino);border-radius:20px;padding:16px;box-shadow:0 12px 30px rgba(26,45,102,.24)}
.v-comercio .qr svg{display:block;width:100%;height:100%}
/* confirmación de adelanto */
.v-comercio .conf{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:20px}
.v-comercio .conf-bg{position:absolute;inset:0;background:rgba(10,17,34,.55)}
.v-comercio .conf-c{position:relative;width:100%;max-width:420px;background:var(--card);border-radius:22px;padding:24px;box-shadow:0 24px 60px rgba(10,17,34,.3);max-height:90vh;overflow-y:auto}
.v-comercio .conf-c h2{font-size:19px;font-weight:700;letter-spacing:-.03em;margin:0 0 4px}
.v-comercio .conf-c .sub{font-size:13px;color:var(--txt-2);line-height:1.5}
.v-comercio .conf-c .det{margin-top:18px;border-top:1px solid var(--linea);padding-top:4px}
.v-comercio .conf-c .gran{background:var(--acento);color:#fff;border-radius:16px;padding:16px;text-align:center;margin-top:16px}
.v-comercio .conf-c .gran span{display:block;font-size:12px;color:#C9D8FF}
.v-comercio .conf-c .gran b{display:block;font-family:var(--mono);font-size:30px;font-weight:600;letter-spacing:-.035em;line-height:1.1;margin-top:3px}
.v-comercio .conf-c .tea{margin-top:14px;background:var(--surface-2);border-radius:12px;padding:12px 14px;font-size:12.5px;line-height:1.55;color:var(--txt-2)}
.v-comercio .conf-c .acc{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.v-comercio .conf-c .acc .btn{flex:1;min-width:132px}
.v-comercio .toast{position:fixed;right:20px;bottom:20px;background:var(--marino);color:#fff;border-radius:14px;padding:14px 18px;font-size:13.5px;max-width:340px;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;pointer-events:none;z-index:9}
.v-comercio .toast.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}



/* ================= operaciones ================= */

:root .v-operaciones{
    --marino:#1A2D66; --marino-2:#243C7D; --marino-3:#3C58A6;
    --acento:#2F62EE; --acento-soft:#E8EEFC;
    --fondo:#FAF9F6; --card:#FFFFFF; --surface-2:#F3F2ED;
    --linea:rgba(26,45,102,.10); --linea-2:rgba(26,45,102,.16);
    --txt:#1A2D66; --txt-2:#5D6786; --txt-3:#8C96B0; --sobre-marino:#B4C2E4;
    --ok:#1B7A4C; --ok-soft:#E6F2EB;
    --warn:#9A6410; --warn-soft:#FBF1DD;
    --bad:#A8362B; --bad-soft:#FAE8E5;
    /* rampa ordinal de mora, validada: un solo tono, saltos visibles,
       y el extremo claro despega de la superficie */
    --m1:#D99A8E; --m2:#CA7A6C; --m3:#BB5C4C; --m4:#AC4034; --m5:#8E2A20;
    --grid:rgba(26,45,102,.08);
    --sans:"Poppins",-apple-system,"Segoe UI",sans-serif;
    --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  }
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .v-operaciones{
      --marino:#101C3E; --marino-2:#1C2E5E; --marino-3:#33509A;
      --acento:#5B86FF; --acento-soft:#182A54;
      --fondo:#0A1122; --card:#131E38; --surface-2:#18243F;
      --linea:rgba(180,194,228,.14); --linea-2:rgba(180,194,228,.22);
      --txt:#EAEFFA; --txt-2:#9AA8CB; --txt-3:#6F7E9F;
      --ok:#3DA875; --ok-soft:#132C22; --warn:#D9A441; --warn-soft:#2E2515;
      --bad:#D97A6D; --bad-soft:#341A17; --grid:rgba(180,194,228,.12);
      --m1:#8A4133; --m2:#A25343; --m3:#B96956; --m4:#CE826D; --m5:#E09F8C;
    }

  }
:root[data-theme="dark"] .v-operaciones{
    --marino:#101C3E; --marino-2:#1C2E5E; --marino-3:#33509A;
    --acento:#5B86FF; --acento-soft:#182A54;
    --fondo:#0A1122; --card:#131E38; --surface-2:#18243F;
    --linea:rgba(180,194,228,.14); --linea-2:rgba(180,194,228,.22);
    --txt:#EAEFFA; --txt-2:#9AA8CB; --txt-3:#6F7E9F;
    --ok:#3DA875; --ok-soft:#132C22; --warn:#D9A441; --warn-soft:#2E2515;
    --bad:#D97A6D; --bad-soft:#341A17; --grid:rgba(180,194,228,.12);
    --m1:#8A4133; --m2:#A25343; --m3:#B96956; --m4:#CE826D; --m5:#E09F8C;
  }
*{box-sizing:border-box}
html, .v-operaciones{height:100%}
.v-operaciones{margin:0;background:var(--fondo);color:var(--txt);font-family:var(--sans);font-size:14.5px;line-height:1.5;letter-spacing:-.012em;-webkit-font-smoothing:antialiased}
.v-operaciones button{font-family:inherit}
.v-operaciones h1, .v-operaciones h2, .v-operaciones h3, .v-operaciones p{margin:0}
.v-operaciones .num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.v-operaciones .app{height:100%;display:flex;flex-direction:column}
@media(min-width:960px){.v-operaciones .app{display:grid;grid-template-columns:242px minmax(0,1fr)}
 }
.v-operaciones .nav{background:var(--marino);display:flex;flex-direction:column;padding:20px 14px 16px;gap:2px}
.v-operaciones .nav .brand{display:flex;align-items:center;gap:10px;padding:0 10px 4px}
.v-operaciones .nav .brand b{font-size:21px;font-weight:700;letter-spacing:-.045em;color:#fff}
.v-operaciones .nav .rol{padding:0 10px 20px;font-size:12px;color:var(--sobre-marino)}
.v-operaciones .nav button{display:flex;align-items:center;gap:11px;width:100%;background:none;border:0;border-radius:12px;padding:10px 13px;cursor:pointer;color:var(--sobre-marino);font-size:14.5px;font-weight:500;text-align:left;min-height:44px;position:relative;transition:background .14s,color .14s}
.v-operaciones .nav button:hover{color:#fff;background:rgba(255,255,255,.07)}
.v-operaciones .nav button.on{background:var(--acento);color:#fff;font-weight:600;box-shadow:0 4px 16px rgba(47,98,238,.34)}
.v-operaciones .nav button svg{opacity:.8}
.v-operaciones .nav button.on svg, .v-operaciones .nav button:hover svg{opacity:1}
.v-operaciones .nav .grupo{font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:rgba(180,194,228,.62);padding:18px 13px 7px}
.v-operaciones .nav .grupo:first-child{padding-top:4px}
.v-operaciones .nav .pill{margin-left:auto;font-family:var(--mono);font-size:11px;font-weight:600;background:rgba(255,255,255,.13);color:var(--sobre-marino);border-radius:9999px;padding:2px 8px;min-width:24px;text-align:center}
.v-operaciones .nav .pill.alerta{background:var(--bad);color:#fff}
.v-operaciones .nav button.on .pill{background:rgba(255,255,255,.22);color:#fff}
.v-operaciones .nav button.on .pill.alerta{background:#fff;color:var(--bad)}
.v-operaciones .nav .note{margin-top:auto;padding:14px 12px 0;border-top:1px solid var(--marino-3);font-size:11px;color:var(--sobre-marino);line-height:1.5}
@media(max-width:959px){.v-operaciones .nav{flex-direction:row;align-items:center;gap:5px;padding:10px;overflow-x:auto;flex-shrink:0}
.v-operaciones .nav .brand, .v-operaciones .nav .rol, .v-operaciones .nav .note, .v-operaciones .nav .grupo{display:none}
.v-operaciones .nav #nav-items{display:contents}
.v-operaciones .nav button{white-space:nowrap;padding:9px 13px;min-height:42px;font-size:13px}

  }
.v-operaciones .main{min-width:0;display:flex;flex-direction:column;overflow:hidden}
.v-operaciones .top{background:var(--card);border-bottom:1px solid var(--linea);padding:16px 26px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-shrink:0;flex-wrap:wrap}
.v-operaciones .top h1{font-size:21px;font-weight:700;letter-spacing:-.035em}
.v-operaciones .top p{font-size:13px;color:var(--txt-2);margin-top:1px}
.v-operaciones .content{flex:1;min-height:0;overflow-y:auto;padding:22px 26px 40px}
.v-operaciones .inner{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
@media(max-width:620px){.v-operaciones .top{padding:13px 16px}
.v-operaciones .content{padding:16px 16px 30px}
 }
.v-operaciones .card{background:var(--card);border:1px solid var(--linea);border-radius:18px;padding:20px}
.v-operaciones .card h2{font-size:15.5px;font-weight:600;letter-spacing:-.025em}
.v-operaciones .card .sub{font-size:12.5px;color:var(--txt-2);line-height:1.5;margin-top:3px}
.v-operaciones .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(186px,1fr));gap:13px}
.v-operaciones .kpi{background:var(--card);border:1px solid var(--linea);border-radius:18px;padding:16px 18px}
.v-operaciones .kpi .l{font-size:11.5px;color:var(--txt-2);margin-bottom:6px}
.v-operaciones .kpi .v{font-family:var(--mono);font-size:26px;font-weight:600;letter-spacing:-.04em;line-height:1}
.v-operaciones .kpi .f{font-size:11px;color:var(--txt-2);margin-top:6px}
.v-operaciones .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--acento);color:#fff;border:0;border-radius:9999px;padding:10px 18px;font-size:13.5px;font-weight:600;min-height:40px;cursor:pointer}
.v-operaciones .btn.sm{padding:7px 14px;min-height:34px;font-size:12.5px}
.v-operaciones .btn.gh{background:transparent;color:var(--txt);border:1.5px solid var(--linea-2)}
.v-operaciones .btn.gh:hover{border-color:var(--acento)}
.v-operaciones .btn.bad{background:var(--bad)}
.v-operaciones .btn.ok{background:var(--ok)}
.v-operaciones .btn[disabled]{opacity:.4;cursor:not-allowed}
.v-operaciones .btn:focus-visible, .v-operaciones .nav button:focus-visible, .v-operaciones .tab:focus-visible, .v-operaciones input:focus-visible, .v-operaciones select:focus-visible, .v-operaciones th.s:focus-visible, .v-operaciones tbody tr:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.v-operaciones .tabs{display:flex;gap:6px;flex-wrap:wrap}
.v-operaciones .tab{background:var(--surface-2);border:1px solid var(--linea);border-radius:9999px;padding:8px 16px;font-size:13px;font-weight:500;color:var(--txt-2);cursor:pointer;min-height:38px}
.v-operaciones .tab.on{background:var(--marino);color:#fff;border-color:var(--marino);font-weight:600}
.v-operaciones .buscar{position:relative;flex:1;min-width:200px;max-width:340px}
.v-operaciones .buscar input{width:100%;background:var(--surface-2);border:1px solid var(--linea);border-radius:9999px;padding:10px 16px 10px 40px;font-family:var(--sans);font-size:13.5px;color:var(--txt);min-height:40px;outline:none}
.v-operaciones .buscar input:focus{border-color:var(--acento)}
.v-operaciones .buscar svg{position:absolute;left:15px;top:11px;pointer-events:none;color:var(--txt-2)}
.v-operaciones .scroll{overflow-x:auto}
.v-operaciones table{width:100%;border-collapse:collapse;min-width:720px}
.v-operaciones th, .v-operaciones td{text-align:left;padding:11px 12px;font-size:13px;border-bottom:1px solid var(--linea)}
.v-operaciones th{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--txt-2);font-weight:600;white-space:nowrap}
.v-operaciones th.s{cursor:pointer;user-select:none}
.v-operaciones th.s:hover{color:var(--txt)}
.v-operaciones th .ar{opacity:.45;font-size:9px;margin-left:3px}
.v-operaciones th.act .ar{opacity:1;color:var(--acento)}
.v-operaciones td.r, .v-operaciones th.r{text-align:right}
.v-operaciones tbody tr:last-child td{border-bottom:0}
.v-operaciones tbody tr.cl{cursor:pointer}
.v-operaciones tbody tr.cl:hover{background:var(--surface-2)}
.v-operaciones .tag{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;border-radius:9999px;padding:3px 9px;white-space:nowrap}
.v-operaciones .tag.ok{background:var(--ok-soft);color:var(--ok)}
.v-operaciones .tag.warn{background:var(--warn-soft);color:var(--warn)}
.v-operaciones .tag.bad{background:var(--bad-soft);color:var(--bad)}
.v-operaciones .tag.blue{background:var(--acento-soft);color:var(--acento)}
.v-operaciones .bar{height:9px;border-radius:9999px;background:var(--surface-2);overflow:hidden;display:flex}
.v-operaciones .bar i{display:block;height:100%}
.v-operaciones .split{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
@media(max-width:900px){.v-operaciones .split{grid-template-columns:1fr}
 }
.v-operaciones .log{display:flex;flex-direction:column}
.v-operaciones .log div{display:flex;gap:11px;padding:10px 0;border-bottom:1px solid var(--linea);font-size:12.5px;line-height:1.45}
.v-operaciones .log div:last-child{border-bottom:0}
.v-operaciones .log .h{font-family:var(--mono);font-size:11.5px;color:var(--txt-2);flex-shrink:0}
.v-operaciones .rw{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--linea);font-size:13.5px;gap:14px}
.v-operaciones .rw:last-child{border-bottom:0}
.v-operaciones input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:20px;background:transparent;cursor:pointer;margin:0}
.v-operaciones input[type=range]::-webkit-slider-runnable-track{height:4px;background:var(--linea-2);border-radius:9999px}
.v-operaciones input[type=range]::-moz-range-track{height:4px;background:var(--linea-2);border-radius:9999px}
.v-operaciones input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--acento);border:3px solid var(--card);margin-top:-7px;box-shadow:0 0 0 1px var(--acento)}
.v-operaciones input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--acento);border:3px solid var(--card)}
/* gráfico */
.v-operaciones .chart{position:relative}
.v-operaciones .chart svg{display:block;width:100%;height:auto;overflow:visible}
.v-operaciones .ttip{position:absolute;pointer-events:none;background:var(--marino);color:#fff;border-radius:10px;padding:8px 11px;font-size:12px;line-height:1.35;white-space:nowrap;opacity:0;transform:translate(-50%,-115%);transition:opacity .12s;z-index:4}
.v-operaciones .ttip.on{opacity:1}
.v-operaciones .ttip b{font-family:var(--mono);font-size:14px;font-weight:600;display:block}
/* panel de detalle */
.v-operaciones .dk{position:fixed;inset:0;z-index:30;display:flex;justify-content:flex-end}
.v-operaciones .dk-bg{position:absolute;inset:0;background:rgba(10,17,34,.44)}
.v-operaciones .dk-p{position:relative;width:min(520px,100%);background:var(--fondo);height:100%;display:flex;flex-direction:column;box-shadow:-16px 0 50px rgba(10,17,34,.22)}
.v-operaciones .dk-h{background:var(--marino);color:#fff;padding:20px 22px;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-shrink:0}
.v-operaciones .dk-h h2{font-size:19px;font-weight:700;letter-spacing:-.035em}
.v-operaciones .dk-h p{font-size:12.5px;color:var(--sobre-marino);margin-top:3px}
.v-operaciones .dk-x{background:rgba(255,255,255,.12);border:0;border-radius:9999px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.v-operaciones .dk-b{flex:1;min-height:0;overflow-y:auto;padding:18px 22px 30px;display:flex;flex-direction:column;gap:14px}
.v-operaciones .crono{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.v-operaciones .crono i{aspect-ratio:1/1;border-radius:7px;border:1.5px solid var(--linea-2);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;font-weight:600;color:var(--txt-2)}
.v-operaciones .crono i.p{background:var(--ok);border-color:var(--ok);color:#fff}
.v-operaciones .crono i.a{background:var(--warn);border-color:var(--warn);color:#fff}
.v-operaciones .acc{display:flex;gap:8px;flex-wrap:wrap}
.v-operaciones .toast{position:fixed;right:20px;bottom:20px;background:var(--marino);color:#fff;border-radius:14px;padding:13px 18px;font-size:13px;max-width:340px;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;pointer-events:none;z-index:40;line-height:1.45}
.v-operaciones .toast.on{opacity:1;transform:none}
/* pie de la barra: accesos y usuario */
.v-operaciones .nav-pie{margin-top:auto;padding-top:12px;border-top:1px solid var(--marino-3);display:flex;flex-direction:column;gap:4px}
.v-operaciones .usuario{position:relative}
.v-operaciones .usuario .chip{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;border-radius:14px;padding:9px 11px;cursor:pointer;text-align:left;min-height:48px}
.v-operaciones .usuario .chip:hover{background:var(--marino-2)}
.v-operaciones .usuario .av{width:32px;height:32px;border-radius:9999px;background:var(--acento);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;flex-shrink:0}
.v-operaciones .usuario .nm{display:block;font-size:13.5px;font-weight:600;color:#fff;line-height:1.2}
.v-operaciones .usuario .rl{display:block;font-size:11.5px;color:var(--sobre-marino)}
.v-operaciones .usuario .menu{position:absolute;bottom:calc(100% + 8px);left:0;right:0;background:var(--card);border:1px solid var(--linea);border-radius:16px;padding:14px;box-shadow:0 14px 40px rgba(10,17,34,.24);z-index:25}
.v-operaciones .usuario .menu p{font-size:12.5px;color:var(--txt-2);line-height:1.45}
.v-operaciones .usuario .menu b{display:block;font-size:14px;color:var(--txt);font-weight:600}
@media(max-width:959px){/* la barra desplaza horizontal: el pie se queda pegado a la derecha */
.v-operaciones .nav-pie{margin-top:0;padding-top:0;border-top:0;flex-direction:row;align-items:center;gap:5px;margin-left:auto;position:sticky;right:0;background:var(--marino);padding-left:8px;z-index:3}
.v-operaciones .usuario .nm, .v-operaciones .usuario .rl{display:none}
.v-operaciones .usuario .chip{padding:6px}
/* fija a la ventana: dentro de la barra la recortaría el overflow */
.v-operaciones .usuario .menu{position:fixed;inset:auto 12px 12px auto;width:min(280px,calc(100vw - 24px))}

  }
/* ficha del cliente */
.v-operaciones .ficha{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:2px 18px;margin-top:8px}
.v-operaciones .ficha div{padding:8px 0;border-bottom:1px solid var(--linea-2);min-width:0}
.v-operaciones .ficha span{display:block;font-size:11.5px;color:var(--txt-2);margin-bottom:2px}
.v-operaciones .ficha b{display:block;font-size:13.5px;font-weight:600;word-break:break-word}
.v-operaciones .ficha a{color:var(--acento);text-decoration:none;font-size:13.5px;font-weight:600;word-break:break-word}
.v-operaciones .ficha a:hover{text-decoration:underline}
/* documentos aceptados */
.v-operaciones .doc{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--linea-2)}
.v-operaciones .doc:last-of-type{border-bottom:0}
.v-operaciones .doc .sello{width:30px;height:30px;border-radius:9999px;background:var(--verde-soft);color:var(--verde);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.v-operaciones .doc b{display:block;font-size:13.5px;font-weight:600}
.v-operaciones .doc em{display:block;font-style:normal;font-size:12px;color:var(--txt-2);margin-top:2px}
.v-operaciones .reg{margin-top:12px;border:1px solid var(--linea);border-radius:12px;overflow:hidden}
.v-operaciones .reg summary{cursor:pointer;padding:11px 14px;font-size:12.5px;font-weight:600;background:var(--surface-2);list-style:none}
.v-operaciones .reg summary::-webkit-details-marker{display:none}
.v-operaciones .reg summary::after{content:'▾';float:right;color:var(--txt-2)}
.v-operaciones .reg[open] summary::after{content:'▴'}
.v-operaciones .reg table{width:100%;border-collapse:collapse}
.v-operaciones .reg td{padding:7px 14px;font-size:12px;border-bottom:1px solid var(--linea-2);vertical-align:top}
.v-operaciones .reg td:first-child{color:var(--txt-2);width:44%}
.v-operaciones .reg tr:last-child td{border-bottom:0}
/* ---------- tablero ----------
     Menos caja y más contenido: el borde se apaga, el número manda, y la
     etiqueta se hace pequeña porque se lee una vez y el número mil. */
.v-operaciones .snaps{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px}
.v-operaciones .snap{background:var(--card);border:1px solid var(--linea-2);border-radius:18px;
        padding:16px 18px 14px;display:flex;flex-direction:column;gap:4px;
        transition:border-color .15s}
.v-operaciones .snap:hover{border-color:var(--linea)}
.v-operaciones .snap .l{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--txt-3)}
.v-operaciones .snap .v{font-family:var(--mono);font-size:28px;font-weight:600;letter-spacing:-.04em;line-height:1.05;margin-top:2px}
.v-operaciones .snap .d{margin-top:2px}
.v-operaciones .snap .f{font-size:11.5px;color:var(--txt-2);line-height:1.4;margin-top:auto;padding-top:6px}
.v-operaciones .snap .med{height:5px;border-radius:9999px;background:var(--surface-2);overflow:hidden;margin-top:8px}
.v-operaciones .snap .med i{display:block;height:100%;border-radius:9999px}
/* la variación se colorea por lo que significa, no por su signo */
.v-operaciones .pil{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:11px;
       font-weight:600;border-radius:9999px;padding:3px 8px}
.v-operaciones .pil.sube{background:var(--ok-soft);color:var(--ok)}
.v-operaciones .pil.baja{background:var(--bad-soft);color:var(--bad)}
.v-operaciones .pil.neutra{background:var(--surface-2);color:var(--txt-2)}
.v-operaciones .chispa{display:block;width:100%;height:26px;margin-top:10px;overflow:visible}
/* ventas por tienda: una serie, un solo color. Colorear cada barra según
     su valor doblaría lo que la longitud ya dice y gastaría el único canal
     libre que queda. */
.v-operaciones .barras{display:flex;flex-direction:column;gap:2px;margin-top:18px}
.v-operaciones .barra{display:grid;grid-template-columns:minmax(120px,148px) minmax(0,1fr) 86px 40px;
         align-items:center;gap:14px;padding:9px 0;border-bottom:1px solid var(--linea-2)}
.v-operaciones .barra:last-child{border-bottom:0}
.v-operaciones .barra .nm{font-size:13.5px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v-operaciones .barra .pista{display:block;height:11px;background:var(--surface-2);border-radius:4px;overflow:hidden}
.v-operaciones .barra .pista i{display:block;height:100%;background:var(--acento);border-radius:0 4px 4px 0}
.v-operaciones .barra .val{text-align:right;font-size:13.5px;font-weight:600}
.v-operaciones .barra .ops{text-align:right;font-size:12px;color:var(--txt-2)}
@media(max-width:700px){.v-operaciones .barra{grid-template-columns:minmax(0,1fr) 78px 34px;gap:10px}
.v-operaciones .barra .pista{grid-column:1 / -1;order:3}

  }
.v-operaciones .enlace{background:none;border:0;padding:0;font:inherit;color:var(--acento);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
/* tramos de antigüedad */
.v-operaciones .tramos{display:flex;height:16px;border-radius:9999px;overflow:hidden;gap:2px;background:var(--surface-2)}
.v-operaciones .tramos i{display:block;height:100%}
.v-operaciones .tramos .aldia{background:var(--ok)}
.v-operaciones .tramos-leg{margin-top:14px;display:flex;flex-direction:column;gap:1px}
.v-operaciones .tramos-leg div{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--linea-2);font-size:13px}
.v-operaciones .tramos-leg div:last-child{border-bottom:0}
.v-operaciones .tramos-leg .pt{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.v-operaciones .tramos-leg .pt.aldia{background:var(--ok)}
.v-operaciones .tramos-leg .nm{flex:1;min-width:0}
.v-operaciones .tramos-leg .mt{font-weight:600}
.v-operaciones .tramos-leg .ct{width:34px;text-align:right;color:var(--txt-2);font-size:12px}
/* mensaje de cobranza */
.v-operaciones .plt{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.v-operaciones .plt .tab{padding:6px 12px;min-height:32px;font-size:12px}
.v-operaciones .msg{background:var(--surface-2);border-radius:14px;padding:14px 16px;font-size:13.5px;line-height:1.6;white-space:pre-wrap;color:var(--txt)}
.v-operaciones textarea{width:100%;background:var(--card);border:1.5px solid var(--linea);border-radius:14px;padding:13px 15px;font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--txt);outline:none;resize:vertical;min-height:110px}
.v-operaciones textarea:focus{border-color:var(--acento)}
.v-operaciones .marcas{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}
.v-operaciones .marcas button{background:var(--surface-2);border:1px solid var(--linea);border-radius:8px;padding:4px 9px;font-family:var(--mono);font-size:11.5px;color:var(--txt-2);cursor:pointer}
.v-operaciones .marcas button:hover{border-color:var(--acento);color:var(--acento)}
.v-operaciones .roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-top:6px}
.v-operaciones .rol-c{background:var(--surface-2);border-radius:14px;padding:14px 16px}
.v-operaciones .rol-c b{display:block;font-size:13.5px;margin-bottom:5px}
.v-operaciones .rol-c span{font-size:12.5px;color:var(--txt-2);line-height:1.5}
.v-operaciones .form{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:10px;align-items:end;margin-top:6px}
@media(max-width:760px){.v-operaciones .form{grid-template-columns:1fr}
 }
.v-operaciones .form.movreg{grid-template-columns:1fr 1fr;align-items:start;gap:12px}
.v-operaciones .form.alta{grid-template-columns:minmax(0,1.1fr) minmax(0,1.2fr) minmax(0,.8fr) auto}
.v-operaciones .form.alta.tienda{grid-template-columns:repeat(5,minmax(0,1fr)) auto}
@media(max-width:1300px){.v-operaciones .form.alta.tienda{grid-template-columns:1fr 1fr}
.v-operaciones .form.alta.tienda .btn{grid-column:1 / -1}
 }
@media(max-width:760px){.v-operaciones .form.alta, .v-operaciones .form.alta.tienda{grid-template-columns:1fr}
 }
.v-operaciones .sel-rol{background:var(--card);border:1px solid var(--linea);border-radius:9999px;padding:6px 12px;font-family:var(--sans);font-size:13px;color:var(--txt)}
@media(max-width:520px){.v-operaciones .form.movreg{grid-template-columns:1fr}
 }
.v-operaciones .form label{display:block;font-size:12px;font-weight:600;margin-bottom:6px}
.v-operaciones .form input, .v-operaciones .form select{width:100%;background:var(--card);border:1px solid var(--linea);border-radius:9999px;padding:11px 16px;font-family:var(--sans);font-size:13.5px;color:var(--txt);min-height:44px;outline:none}
.v-operaciones .form select{appearance:none;-webkit-appearance:none;padding-right:34px}
.v-operaciones .form input:focus, .v-operaciones .form select:focus{border-color:var(--acento)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}