/* =====================================================================
   Viajes Jr. — Diseño v2 (Fase 2 del plan maestro, decisión del dueño del 8 oct 2026)
   Dos temas: Claro (blanco con botones negros) y Oscuro (negro grafito con acentos blancos).
   Solo aplica con <html class="v2">; data-theme="light" | "dark" lo pone js/tema.js (Claro, Oscuro o Automático).
   Referencia: prototipo/rediseno-v2/ y docs/sistema-de-diseno.md. No cambia funciones ni datos.
   Orden: 1 colores · 2 base y componentes de siempre (todas las pantallas) · 3 marco nuevo del cliente
          · 4 Inicio · 5 hojas y resultados · 6 marco de Administración (provisional).
   ===================================================================== */

/* ---------- 1. Colores (tokens) ---------- */
html.v2{
  --bg:#FFFFFF;--sup:#F3F3F4;--sup2:#E9E9EC;--campo:#FFFFFF;--linea:rgba(0,0,0,.08);--linea2:rgba(0,0,0,.14);
  --tx:#0A0A0B;--tx2:#5B5B62;--tx3:#8B8B92;
  --acento:#0A0A0B;--btn:#0A0A0B;--btn-tx:#FFFFFF;
  --cristal:rgba(255,255,255,.66);--cristal-borde:rgba(0,0,0,.07);--cristal-brillo:inset 0 1px 0 rgba(255,255,255,.95);
  --burbuja-bg:rgba(0,0,0,.07);--oro:#F5B000;--oro-tx:#8A5A00;
  --ok:#15803D;--ok-soft:rgba(21,128,61,.12);--warn:#B45309;--warn-soft:rgba(217,119,6,.13);--bad:#DC2626;--bad-soft:rgba(220,38,38,.1);
  --sombra:0 16px 36px -18px rgba(0,0,0,.28);
  --r-s:12px;--r-m:16px;--r-l:22px;--r-xl:28px;
  /* Las variables del diseño anterior apuntan a las nuevas: así todas las pantallas cambian de golpe */
  --card:var(--sup);--card2:var(--sup);--stroke:transparent;--line:var(--linea);--line2:var(--linea2);
  --ink:var(--tx);--ink2:var(--tx2);--ink3:var(--tx3);--blue:var(--acento);--blue2:var(--acento);--blue-soft:var(--sup);--blue-soft2:var(--sup2);
  --sun:var(--oro);--shadow:none;
  --f:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color-scheme:light;background:var(--bg);
}
html.v2[data-theme="dark"]{
  --bg:#09090B;--sup:#151518;--sup2:#1F1F24;--campo:#1D1D22;--linea:rgba(255,255,255,.08);--linea2:rgba(255,255,255,.14);
  --tx:#F4F4F5;--tx2:#A1A1AA;--tx3:#71717A;
  --acento:#FFFFFF;--btn:#FFFFFF;--btn-tx:#09090B;
  --cristal:rgba(30,30,36,.55);--cristal-borde:rgba(255,255,255,.11);--cristal-brillo:inset 0 1px 0 rgba(255,255,255,.1);
  --burbuja-bg:rgba(255,255,255,.13);--oro-tx:#FCD34D;
  --ok:#4ADE80;--ok-soft:rgba(74,222,128,.13);--warn:#FBBF24;--warn-soft:rgba(251,191,36,.13);--bad:#F87171;--bad-soft:rgba(248,113,113,.13);
  --sombra:0 18px 40px -18px rgba(0,0,0,.85);
  color-scheme:dark;
}

/* ---------- 2. Base y componentes de siempre (todas las pantallas) ---------- */
html.v2 body{background:var(--bg);color:var(--tx);font-size:15px;overflow-x:clip}
html.v2 :focus-visible{outline:2px solid var(--acento);outline-offset:2px}
html.v2 h1,html.v2 h2,html.v2 h3{color:var(--tx);letter-spacing:-.02em}
html.v2 .card,html.v2 .card.solid{background:var(--sup);border:0;border-radius:var(--r-l);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
html.v2 .note{color:var(--tx3);font-size:13px}
html.v2 .lbl{color:var(--tx2);font-size:13px}
html.v2 .sec-h{align-items:center}
html.v2 .sec-h h2{font-size:19px;font-weight:800}
html.v2 .sec-h a{color:var(--tx);font-weight:700;font-size:14px;text-decoration:underline;text-underline-offset:3px}
html.v2 .empty{color:var(--tx3);font-size:14px}
html.v2 .kv{border-color:var(--linea)}
html.v2 .kv span{color:var(--tx2)}
html.v2 .info{background:var(--sup);border:0;color:var(--tx2);border-radius:var(--r-m);font-size:13.5px}
html.v2 .card .info{background:var(--campo)}
html.v2 .info.warn{background:var(--warn-soft);color:var(--tx)}
html.v2 .err{color:var(--bad)}
/* Botones */
html.v2 .btn{min-height:46px;border-radius:999px;font-weight:700;font-size:14.5px;padding:0 20px}
html.v2 .btn.p,html.v2 .btn.p:hover{background:var(--btn);color:var(--btn-tx);box-shadow:none;filter:none}
html.v2 .btn.s{background:var(--sup2);border:0;color:var(--tx)}
html.v2 .card .btn.s{background:var(--campo);box-shadow:inset 0 0 0 1px var(--linea)}
html.v2 .btn.s:hover{background:var(--sup2);filter:brightness(.97)}
html.v2 .btn.sm{min-height:36px;padding:0 14px;font-size:13px;border-radius:999px}
html.v2 .btn.lg{min-height:54px;font-size:15.5px;border-radius:999px}
html.v2 .btn[disabled]{opacity:1;background:var(--sup2);color:var(--tx3);filter:none}
html.v2 .icbtn{color:var(--tx2);border-radius:50%}
html.v2 .icbtn:hover{background:var(--sup)}
/* Campos */
html.v2 .in,html.v2 select.in,html.v2 .ctrl,html.v2 .precio-in{background-color:var(--campo);border:0;box-shadow:inset 0 0 0 1px var(--linea2);border-radius:var(--r-m);color:var(--tx);min-height:48px;font-size:15px}
html.v2 .ctrl select,html.v2 .ctrl input{background-color:transparent;color:var(--tx)}
html.v2 .in:focus,html.v2 .ctrl:focus-within{box-shadow:inset 0 0 0 2px var(--acento)}
html.v2 .ctrl :focus-visible{outline:none!important}
@media (max-width:820px){html.v2 .in,html.v2 .ctrl input,html.v2 .ctrl select,html.v2 textarea{font-size:16px}}
/* Superficies que en el diseño anterior eran blancas fijas */
html.v2 .trip,html.v2 .ritem,html.v2 .rrow,html.v2 .box,html.v2 .pax,html.v2 .wx3>div,html.v2 .contact .call,html.v2 .tile,html.v2 .vrow,html.v2 .gbtn,
html.v2 .legalbox,html.v2 .avopt,html.v2 .wxnext>div,html.v2 .ticket,html.v2 .canalsel button,html.v2 .tw-foto{background:var(--campo);border-color:var(--linea);box-shadow:none}
html.v2 .tile{border-radius:var(--r-l)}
html.v2 .rutabox,html.v2 .rutabox.falta{background:var(--sup);border:0}
/* Lo "elegido": siempre fondo del botón principal y su texto (nunca blanco sobre blanco) */
html.v2 .seg{background:var(--sup2);border:0;border-radius:999px;padding:4px}
html.v2 .seg button{border-radius:999px;color:var(--tx2);font-weight:600}
html.v2 .seg button.on,html.v2 .chip.on,html.v2 .seat.on,html.v2 .seatic.on,html.v2 .canalsel button.on .ci,html.v2 .nitem.nueva .nic,html.v2 .rutabox .num{background:var(--btn)!important;color:var(--btn-tx)!important;border-color:transparent;box-shadow:none}
html.v2 .chip{background:var(--sup);color:var(--tx2);border:0;border-radius:999px;font-weight:600}
html.v2 .chip .chip-n{background:var(--sup2);color:var(--tx2)}
html.v2 .chip.on .chip-n{background:rgba(127,127,127,.35);color:inherit}
html.v2 .canalsel button.on{box-shadow:inset 0 0 0 2px var(--acento)}
html.v2 .tk-top{background:var(--btn);color:var(--btn-tx)}
html.v2 .avatar{background:var(--sup2);color:var(--tx)}
html.v2 .stepper button{background:var(--sup2);color:var(--tx);box-shadow:none;border-radius:50%}
html.v2 .switch{background:var(--sup2)}
html.v2 .switch.on{background:#22C55E}
html.v2 .seatic{background:var(--campo);border-color:var(--linea2);color:var(--tx2)}
html.v2 .seatic .ck{background:#22C55E;box-shadow:0 0 0 2px var(--btn)}
/* Estados */
html.v2 .pill{background:var(--sup2);color:var(--tx2);font-size:12px;padding:4px 10px}
html.v2 .pill.ok{background:var(--ok-soft);color:var(--ok)}
html.v2 .pill.warn{background:var(--warn-soft);color:var(--warn)}
html.v2 .pill.bad{background:var(--bad-soft);color:var(--bad)}
html.v2 .pill.blue{background:var(--sup2);color:var(--tx)}
/* Tablas, indicadores, menús desplegables */
html.v2 .tbl th{color:var(--tx3)}
html.v2 .tbl th,html.v2 .tbl td{border-color:var(--linea)}
html.v2 .kpi b{color:var(--tx);font-weight:800}
html.v2 .dd{background:var(--bg);border:0;border-radius:var(--r-m);box-shadow:0 0 0 1px var(--linea),var(--sombra);backdrop-filter:none}
html.v2 .dd a,html.v2 .dd button{color:var(--tx2);border-radius:12px}
html.v2 .dd a:hover,html.v2 .dd button:hover{background:var(--sup);color:var(--tx)}
html.v2 .dot{background:#EF4444;box-shadow:0 0 0 2px var(--bg)}
html.v2 .nt-todas{color:var(--tx)!important}
/* Ventanas propias, avisos y listas desplegables (ya existían) */
html.v2 .dlg{background:var(--bg);color:var(--tx);border-radius:var(--r-xl)}
html.v2 .toast-aviso,html.v2 .sel-lista{background:var(--bg);color:var(--tx)}
html.v2 .sel-op[aria-selected="true"]{background:var(--btn);color:var(--btn-tx)}
html.v2 .sel-lista.hoja .sel-op{background:var(--sup)}
html.v2 .sel-lista.hoja .sel-op[aria-selected="true"]{background:var(--btn);color:var(--btn-tx)}
html.v2 .selb{color:var(--tx)}
html.v2 .toast-aviso .ta-ic{background:var(--sup);color:var(--tx)}
html.v2 .xp-chip{background:rgba(245,176,0,.16);color:var(--oro-tx)}
html.v2 .xp-chip.espera{background:var(--sup2);color:var(--tx2)}
html.v2 .xp-gana{color:var(--oro-tx)}
html.v2 .lg-xp,html.v2 .lg-xpdes .lg-pend{background:rgba(245,176,0,.16);color:var(--oro-tx)}
html.v2 .xp-gana svg{color:var(--oro)}

/* ---------- 3. Marco nuevo del cliente ---------- */
html.v2 .v2app{min-height:100dvh;max-width:1180px;margin:0 auto;padding:calc(12px + env(safe-area-inset-top)) 18px 128px}
html.v2 .v2-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px}
html.v2 .v2-logo .tile-logo{width:auto;height:auto;background:transparent!important;box-shadow:none!important;border:0!important;padding:0!important;overflow:visible;border-radius:0}
html.v2 .v2-logo .logo-v1{display:none}
html.v2 .v2-logo .logo-v2{display:block;height:34px;width:auto;object-fit:contain}
html.v2:not([data-theme="dark"]) .v2-logo .tile-logo{background:#0A0A0B!important;border-radius:999px;padding:6px 14px 6px 12px!important}
html.v2:not([data-theme="dark"]) .v2-logo .logo-v2{height:26px}
html.v2 .v2-nav,html.v2 .v2-btn-res{display:none}
html.v2 .v2-acc{display:flex;align-items:center;gap:10px}
html.v2 .v2-acc .campana-b{width:42px;height:42px;border-radius:50%;background:var(--sup);box-shadow:none}
html.v2 .v2-av{width:42px;height:42px;border-radius:50%;overflow:hidden;background:var(--sup);display:block;flex:none}
html.v2 .v2-av img{width:100%;height:100%;object-fit:cover}
html.v2 .v2-main{display:block}
/* Barra inferior: píldora de cristal con burbuja + círculo aparte con la acción principal */
html.v2 .v2-barra{position:fixed;left:14px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:70;display:flex;gap:10px;align-items:center;max-width:560px;margin:0 auto;transition:transform .3s ease}
html.v2 .v2-barra.oculta{transform:translateY(140%)}
html.v2 .v2-pastilla,html.v2 .v2-reservar{background:var(--cristal);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  box-shadow:var(--cristal-brillo),0 0 0 1px var(--cristal-borde),0 16px 40px -14px rgba(0,0,0,.45)}
html.v2 .v2-pastilla{position:relative;flex:1;display:flex;height:68px;padding:6px;border-radius:999px}
html.v2 .v2-pastilla a{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:999px;font-size:11.5px;font-weight:600;color:var(--tx2);transition:color .25s}
html.v2 .v2-pastilla a svg{width:22px;height:22px}
html.v2 .v2-pastilla a.on{color:var(--tx)}
html.v2 .v2-pastilla .punto-am{position:absolute;top:8px;left:calc(50% + 8px);margin:0}
html.v2 .v2-reservar{flex:none;width:68px;height:68px;border-radius:50%;display:grid;place-items:center;border:0;color:var(--btn-tx);background:var(--btn)}
html.v2:not([data-theme="dark"]) .v2-reservar{background:rgba(10,10,11,.9)}
html.v2 .v2-reservar svg{width:27px;height:27px}
/* Burbuja de cristal (js/burbuja.js) */
html.v2 .con-burbuja{isolation:isolate}
html.v2 .con-burbuja:not(.v2-pastilla){position:relative}
html.v2 .con-burbuja > :not(.burbuja){position:relative;z-index:1;touch-action:pan-y}
html.v2 .burbuja{position:absolute;top:0;left:0;z-index:0;pointer-events:none;border-radius:999px;will-change:transform;background:var(--burbuja-bg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);transition:transform .5s cubic-bezier(.34,1.45,.64,1),width .35s cubic-bezier(.34,1.4,.64,1),top .35s,opacity .2s}
html.v2 .seg .burbuja,html.v2 .chips .burbuja{background:var(--btn);box-shadow:none}
html.v2 .seg.con-burbuja button.on,html.v2 .chips.con-burbuja .chip.on{background:transparent!important}
html.v2 .burbuja.arrastrando{background:var(--burbuja-bg)}
@media (prefers-reduced-motion:reduce){html.v2 .burbuja{transition:opacity .2s}}
/* Computadora: menú arriba de cristal; sin barra inferior */
@media (min-width:960px){
  html.v2 .v2app{padding:20px 32px 48px}
  html.v2 .v2-top{position:sticky;top:16px;z-index:60;padding:10px 12px 10px 20px;border-radius:999px;background:var(--cristal);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
    box-shadow:var(--cristal-brillo),0 0 0 1px var(--cristal-borde),0 16px 40px -18px rgba(0,0,0,.4)}
  html.v2 .v2-nav{display:flex;gap:4px;margin:0 auto 0 24px}
  html.v2 .v2-nav a{padding:10px 16px;border-radius:999px;font-size:14.5px;font-weight:600;color:var(--tx2)}
  html.v2 .v2-nav a.on{background:var(--burbuja-bg);color:var(--tx)}
  html.v2 .v2-btn-res{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;border:0;background:var(--btn);color:var(--btn-tx);font-size:14.5px;font-weight:700}
  html.v2 .v2-btn-res svg{width:18px;height:18px}
  html.v2 .v2-barra{display:none}
  html.v2 .v2-main{margin-top:28px}
}

/* ---------- 4. Inicio ---------- */
html.v2 .v2-hola h1{margin:20px 2px 14px;font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
html.v2 .v2-hola h1 span{display:block;margin-top:6px;font-size:15px;font-weight:500;letter-spacing:0;color:var(--tx2)}
html.v2 .v2-buscar{display:flex;align-items:center;gap:8px;min-height:64px;padding:8px 8px 8px 20px;border-radius:999px;background:var(--sup)}
html.v2 .v2-buscar-ir{flex:1;min-width:0;display:flex;align-items:center;gap:12px;min-height:48px;border:0;background:none;text-align:left;color:var(--tx)}
html.v2 .v2-buscar-ir svg{width:22px;height:22px;flex:none}
html.v2 .v2-buscar-ir b{font-size:18px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.v2 .v2-chipf{position:relative;display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:999px;background:var(--campo);font-size:14px;font-weight:700;white-space:nowrap;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.08)}
html.v2 .v2-chipf svg{width:17px;height:17px}
html.v2 .v2-chipf input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0}
html.v2 .v2-habitual{display:flex;align-items:center;gap:14px;width:100%;margin-top:12px;padding:12px 16px 12px 12px;border:0;border-radius:var(--r-l);background:none;box-shadow:inset 0 0 0 1px var(--linea);text-align:left;color:var(--tx)}
html.v2 .v2-habitual .bola{width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--sup)}
html.v2 .v2-habitual .bola svg{width:20px;height:20px}
html.v2 .v2-habitual div{flex:1;min-width:0}
html.v2 .v2-habitual b{display:block;font-size:15.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.v2 .v2-habitual small{display:block;margin-top:2px;font-size:13px;color:var(--tx2)}
html.v2 .v2-habitual > svg{width:20px;height:20px;color:var(--tx3);flex:none}
html.v2 .v2-clima{display:flex;align-items:center;gap:8px;margin:12px 4px 0;font-size:13px;color:var(--tx2)}
html.v2 .v2-clima svg{width:20px;height:20px;flex:none}
html.v2 .v2-sec{margin-top:28px}
html.v2 .v2-sec > .sec-h{margin:0 2px 12px}
/* Tu próximo viaje: boleto con muescas */
html.v2 .v2-boleto{--corte:86px;display:grid;grid-template-columns:var(--corte) 1fr auto;align-items:center;min-height:108px;margin-bottom:10px;border-radius:var(--r-l);color:#fff;background:#0A0A0B;
  -webkit-mask:radial-gradient(circle 10px at var(--corte) 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle 10px at var(--corte) 100%,#0000 97%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle 10px at var(--corte) 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle 10px at var(--corte) 100%,#0000 97%,#000) bottom/100% 51% no-repeat}
html.v2[data-theme="dark"] .v2-boleto{background:linear-gradient(135deg,#2A2A30,#141418 70%)}
html.v2 .v2-boleto .bf{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;border-right:2px dashed rgba(255,255,255,.28);padding:10px 0}
html.v2 .v2-boleto .bf small{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
html.v2 .v2-boleto .bf b{font-size:32px;font-weight:800;line-height:1;margin:2px 0}
html.v2 .v2-boleto .bi{min-width:0;padding:14px 8px 14px 18px}
html.v2 .v2-boleto .bi .est{font-size:12px;font-weight:700;color:#4ADE80}
html.v2 .v2-boleto .bi .est.pend{color:#FCD34D}
html.v2 .v2-boleto .bi b{display:block;margin:3px 0;font-size:17px;font-weight:800}
html.v2 .v2-boleto .bi p{margin:0;font-size:13px;line-height:1.45;color:rgba(255,255,255,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.v2 .v2-boleto > svg{width:20px;height:20px;margin-right:16px;opacity:.6}
/* Accesos en círculo */
html.v2 .v2-accesos{display:flex;justify-content:space-between;gap:6px}
html.v2 .v2-acceso{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;font-size:12.5px;font-weight:600;color:var(--tx2);text-align:center}
html.v2 .v2-acceso .bola{position:relative;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--sup);color:var(--tx)}
html.v2 .v2-acceso .bola svg{width:26px;height:26px}
html.v2 .v2-acceso .tag{position:absolute;top:-6px;right:-12px;padding:3px 7px;border-radius:999px;font-size:10.5px;font-weight:800;white-space:nowrap;background:var(--oro);color:#1A1200}
html.v2 .v2-acceso .tag.n{background:#EF4444;color:#fff}
/* Próximos viajes: chips por día y una fila que se desliza */
html.v2 .v2-salidas .carctl{display:none}
html.v2 .v2-dias{display:flex;gap:8px;margin:0 0 14px;overflow-x:auto;scrollbar-width:none}
html.v2 .v2-dias::-webkit-scrollbar{display:none}
html.v2 .v2-dias .cdot{flex:none;width:auto;height:auto;padding:10px 16px;border-radius:999px;border:0;background:var(--sup);font-size:14px;font-weight:600;color:var(--tx2)}
html.v2 .v2-dias .cdot.on{background:var(--btn);color:var(--btn-tx)}
html.v2 .v2-salidas .carday{display:none}
html.v2 .v2-salidas .trips{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:18px;margin:0 -18px;padding:2px 18px 6px;scrollbar-width:none}
html.v2 .v2-salidas .trips::-webkit-scrollbar{display:none}
html.v2 .v2-salidas .trip{flex:none;width:min(80vw,300px);scroll-snap-align:start}
/* Tarjeta de salida (la única tarjeta) */
html.v2 .trip.tv{display:flex;flex-direction:column;padding:12px;border:0;border-radius:24px;background:var(--sup);box-shadow:none}
html.v2 .trip.tv .tc-clima{order:-1;display:inline-flex;align-items:center;gap:8px;width:fit-content;max-width:100%;margin:0 0 10px;padding:6px 12px 6px 8px;border-radius:14px;background:var(--campo);color:var(--tx);font-size:12px;font-weight:600;line-height:1.3}
html.v2 .trip.tv .tc-clima b{font-weight:800}
html.v2 .trip.tv .tc-clima svg{width:16px;height:16px}
html.v2 .tv-cuerpo{display:flex;flex-direction:column;gap:12px}
html.v2 .tv-foto .photo{height:118px;border-radius:18px;background:radial-gradient(circle at 50% 62%,rgba(127,127,127,.12),transparent 66%),var(--campo);display:grid;place-items:center;overflow:hidden}
html.v2 .tv-foto .photo img{width:86%;height:100%;object-fit:contain}
html.v2 .trip.tv h3{display:flex;gap:6px;margin:0 2px 6px;font-size:17px;font-weight:800;color:var(--tx)}
html.v2 .trip.tv .tv-pin{display:none}
html.v2 .tv-dato{display:flex;align-items:center;gap:8px;margin:0 2px 4px;font-size:13.5px;color:var(--tx2)}
html.v2 .tv-dato svg{width:16px;height:16px;color:var(--tx3)}
html.v2 .trip.tv .avail{margin:4px 2px 0;font-weight:700;color:var(--ok)}
html.v2 .trip.tv .avail.full{color:var(--bad)}
html.v2 .trip.tv .pricehint{display:flex;align-items:center;gap:8px;margin:6px 2px 0;font-size:13px;color:var(--tx2)}
html.v2 .trip.tv .pricehint svg{width:16px;height:16px}
html.v2 .tv-acc{margin-top:12px}
html.v2 .tv-acc .btn{width:100%}
html.v2 .tv-acc .vlink{display:block;margin-top:10px;text-align:center;font-weight:700;color:var(--tx);text-decoration:underline}
@media (min-width:960px){
  html.v2 .v2-inicio{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:28px;align-items:start}
  html.v2 .v2-hola h1{margin-top:0;font-size:44px}
  html.v2 .v2-lado .v2-sec:first-child{margin-top:0}
  html.v2 .v2-accesos{justify-content:flex-start;gap:22px}
  html.v2 .v2-acceso{flex:none;width:88px}
  html.v2 .v2-salidas .trips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;overflow:visible}
  html.v2 .v2-salidas .trip{width:auto}
}

/* Mientras llega su rediseño: el próximo viaje de Mis viajes y las medallas sin azul */
html.v2 .prox-viaje{background:#0A0A0B;box-shadow:none}
html.v2[data-theme="dark"] .prox-viaje{background:linear-gradient(135deg,#2A2A30,#141418 70%)}
html.v2 .prox-viaje::after{display:none}
html.v2 .lg-medalla,html.v2 .lg-xpic{background:var(--btn);color:var(--btn-tx);box-shadow:none}

/* ---------- 5. Hojas: búsqueda y resultados ---------- */
html.v2 .v2-fondo{position:fixed;inset:0;z-index:84;background:rgba(0,0,0,.45)}
html.v2 .v2-hoja,html.v2 .results.card{position:fixed;left:0;right:0;bottom:0;z-index:85;max-height:88dvh;overflow:auto;overscroll-behavior:contain;margin:0;padding:10px 18px calc(22px + env(safe-area-inset-bottom,0px));
  border-radius:28px 28px 0 0;background:var(--bg);box-shadow:0 -20px 50px rgba(0,0,0,.35);animation:v2sube .28s cubic-bezier(.2,.9,.3,1)}
@keyframes v2sube{from{transform:translateY(100%)}}
html.v2 .v2-hoja::before,html.v2 .results.card::before{content:"";display:block;width:42px;height:5px;border-radius:999px;background:var(--sup2);margin:0 auto 14px}
html.v2 .v2-hoja-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
html.v2 .v2-hoja-h h2{margin:0;font-size:22px;font-weight:800}
html.v2 .v2-hoja .mform{margin:0;padding:0;background:none;box-shadow:none;border:0;display:grid;gap:12px}
html.v2 .v2-hoja .fld label{display:block;margin:0 2px 6px;font-size:13px;font-weight:700;color:var(--tx2)}
html.v2 .v2-hoja .btn-ir{width:100%}
html.v2 .v2-hoja .btn-ir .ir{display:none}
html.v2 .hoja-fondo{display:block;position:fixed;inset:0;z-index:84;background:rgba(0,0,0,.45)}
html.v2 .results .sec-h h2{font-size:20px}
html.v2 .results .tripw{display:flex;flex-direction:column;border:0!important;box-shadow:none!important;border-radius:24px;background:var(--sup);overflow:hidden}
html.v2 .results .tw-foto{background:transparent}
html.v2 .results .tw-info{padding:16px}
html.v2 .results .tw-info h3{font-size:20px;font-weight:800}
html.v2 .results .tw-info .btn{width:100%}
html.v2 .results .tw-clima{background:var(--campo)}
@media (min-width:960px){
  html.v2 .v2-hoja,html.v2 .results.card{left:50%;right:auto;bottom:auto;top:50%;width:520px;max-height:86vh;border-radius:28px;transform:translate(-50%,-50%);animation:none}
  html.v2 .results .tripw{display:grid;grid-template-columns:200px 1fr}
}

/* ---------- 6. Administración (provisional, hasta su rediseño): mismos colores, menú lateral de cristal ---------- */
html.v2 .app{background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;margin:0 auto;min-height:100dvh}
html.v2 .side{background:var(--sup);border:0;border-radius:var(--r-l);margin:16px 0 16px 16px;top:16px;height:calc(100dvh - 32px)}
html.v2 .nav a,html.v2 .nav button.grp{color:var(--tx2);border-radius:12px}
html.v2 .nav a.on{background:var(--btn);color:var(--btn-tx)}
html.v2 .nav a:hover{background:var(--sup2);color:var(--tx)}
html.v2 .nav a.on:hover{background:var(--btn);color:var(--btn-tx)}
html.v2 .topbar{background:transparent;border:0}
html.v2 .app .tile-logo{background:transparent!important;box-shadow:none!important;border:0!important}
html.v2 .app .tile-logo .logo-v1,html.v2 .login .tile-logo .logo-v1{display:none}
html.v2 .app .tile-logo .logo-v2,html.v2 .login .tile-logo .logo-v2{display:block;width:100%;height:100%;object-fit:contain}
html.v2:not([data-theme="dark"]) .side .tile-logo,html.v2:not([data-theme="dark"]) .mtop .tile-logo{background:#0A0A0B!important;border-radius:14px!important;padding:6px 10px!important}
@media (max-width:820px){
  html.v2 .mtop{background:var(--bg)}
  html.v2 .bnav{background:var(--cristal);border:0;border-radius:999px;backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);box-shadow:var(--cristal-brillo),0 0 0 1px var(--cristal-borde),0 16px 40px -14px rgba(0,0,0,.45)}
  html.v2 .bnav a{color:var(--tx2);border-radius:999px}
  html.v2 .bnav a.on{color:var(--tx)}
  html.v2 .bnav a.on svg{fill:none}
  html.v2 .side.open{background:var(--bg);margin:0;border-radius:0;top:0;height:100dvh}
}

/* ---------- 7. Reservar (como la maqueta: pasos y un solo botón abajo) ---------- */
html.v2 .v2-angosta{max-width:720px;margin:0 auto}
html.v2 .v2-cab{display:flex;align-items:center;gap:12px;min-height:52px;margin-bottom:6px}
html.v2 .v2-cab .crece{flex:1;min-width:0}
html.v2 .v2-cab h1{margin:0;font-size:22px;font-weight:800;line-height:1.15}
html.v2 .v2-cab p{margin:2px 0 0;font-size:13.5px;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.v2 .v2-circ{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--sup);color:var(--tx)}
html.v2 .v2-circ svg{width:20px;height:20px}
html.v2 .v2-reloj{flex:none;display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;font-size:13px;font-variant-numeric:tabular-nums;background:rgba(245,176,0,.18);color:var(--oro-tx)}
html.v2 .v2-reloj svg{width:15px;height:15px}
html.v2 .v2-reloj b{font-weight:800}
html.v2 .v2-paso{margin-top:12px;border-radius:var(--r-l);background:var(--sup);overflow:hidden;transition:opacity .2s}
html.v2 .v2-paso-h{display:flex;align-items:center;gap:12px;width:100%;padding:16px;border:0;background:none;text-align:left;color:var(--tx)}
html.v2 .v2-paso-n{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--sup2);font-size:14px;font-weight:800}
html.v2 .v2-paso-n svg{width:16px;height:16px;stroke-width:2.6}
html.v2 .v2-paso.hecho .v2-paso-n{background:#22C55E;color:#04130A}
html.v2 .v2-paso.abierto .v2-paso-n{background:var(--btn);color:var(--btn-tx)}
html.v2 .v2-paso-h div{flex:1;min-width:0}
html.v2 .v2-paso-h b{display:block;font-size:16.5px;font-weight:800}
html.v2 .v2-paso-h small{display:block;margin-top:2px;font-size:13px;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.v2 .v2-editar{font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
html.v2 .v2-paso-c{display:none;padding:0 16px 18px}
html.v2 .v2-paso.abierto .v2-paso-c{display:block}
html.v2 .v2-paso.espera{opacity:.45}
html.v2 .v2-paso.espera .v2-paso-h{cursor:default}
html.v2 .v2-ruta{margin:0;padding:0;background:none!important;border:0!important}
html.v2 .v2-campo{display:flex;align-items:center;gap:12px;margin-top:8px;padding:12px 14px;border-radius:var(--r-m);background:var(--campo);box-shadow:inset 0 0 0 1px var(--linea)}
html.v2 .v2-campo > svg{width:20px;height:20px;flex:none;color:var(--tx3)}
html.v2 .v2-campo > div{flex:1;min-width:0}
html.v2 .v2-campo small{display:block;font-size:12px;font-weight:600;color:var(--tx3)}
html.v2 .v2-campo .selb,html.v2 .v2-campo .selb.in{min-height:30px;padding:0;background:none!important;box-shadow:none!important;font-size:16px;font-weight:700;color:var(--tx)}
html.v2 .v2-campo .in:not(.selb){margin-top:8px}
html.v2 .v2-ok{flex:none;color:#22C55E}
html.v2 .v2-ok svg{width:20px;height:20px;stroke-width:2.6}
html.v2 .v2-et{display:block;margin:16px 2px 6px;font-size:13px;font-weight:700;color:var(--tx2)}
html.v2 .v2-mt{margin-top:8px}
html.v2 .v2-chip{display:inline-flex;align-items:center;gap:8px;max-width:100%;margin-top:12px;padding:10px 14px;border:0;border-radius:999px;background:var(--sup2);color:var(--tx);font-size:13.5px;font-weight:600;text-align:left}
html.v2 .v2-chip svg{width:16px;height:16px;flex:none}
html.v2 .v2-precio{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--linea);font-size:14px;color:var(--tx2)}
html.v2 .v2-precio b{font-size:20px;font-weight:800;color:var(--tx)}
html.v2 .v2-franja{display:flex;align-items:center;gap:14px;padding:6px 0 10px}
html.v2 .v2-franja img{width:84px;height:52px;object-fit:contain;flex:none}
html.v2 .v2-franja b{display:block;font-size:15px;font-weight:700}
html.v2 .v2-franja span{display:block;margin-top:2px;font-size:13px;color:var(--tx2)}
html.v2 .v2-asientos{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
html.v2 .v2-asientos .seatic{position:relative;width:66px;height:78px;padding:8px 4px 6px;border:0;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:var(--campo);box-shadow:inset 0 0 0 1px var(--linea);color:var(--tx2)}
html.v2 .v2-asientos .seatic svg{width:32px;height:32px}
html.v2 .v2-asientos .seatic small{font-size:10.5px;font-weight:700;line-height:1}
html.v2 .v2-asientos .seatic.taken{opacity:.38;cursor:not-allowed}
html.v2 .v2-asientos .seatic.reservando{color:#D99700;animation:v2respira 1.3s ease-in-out infinite;cursor:not-allowed}
html.v2[data-theme="dark"] .v2-asientos .seatic.reservando{color:#F5B000}
html.v2 .v2-asientos .seatic.on{background:var(--btn)!important;color:var(--btn-tx)!important;box-shadow:none}
html.v2 .v2-asientos .seatic .ck{position:absolute;top:8px;right:8px;width:9px;height:9px;border-radius:50%;background:#22C55E;box-shadow:none}
@keyframes v2respira{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){html.v2 .v2-asientos .seatic.reservando{animation:none}}
html.v2 .sel-cuenta{display:flex;align-items:center;gap:6px;margin:12px 2px 0;font-size:14.5px;font-weight:700;color:var(--tx)}
html.v2 .sel-cuenta svg{width:16px;height:16px;color:#22C55E}
html.v2 .envivo-nota{margin-top:8px;font-size:13px;color:var(--tx2)}
html.v2 .v2-leyenda{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;font-size:12px;color:var(--tx3)}
html.v2 .v2-leyenda span{display:inline-flex;align-items:center;gap:6px}
html.v2 .v2-leyenda i{width:9px;height:9px;border-radius:50%}
html.v2 .v2-pax{display:flex;align-items:center;gap:12px;margin-top:8px;padding:12px 14px;border-radius:var(--r-m);background:var(--campo);box-shadow:inset 0 0 0 1px var(--linea);font-size:15px;font-weight:600}
html.v2 .v2-pax > svg{width:20px;height:20px;color:var(--tx3);flex:none}
html.v2 .v2-pax span{flex:1}
html.v2 .v2-pax small{color:var(--tx3);font-weight:500}
html.v2 .v2-pax input{flex:1;min-width:0;border:0;background:none;color:var(--tx);font:inherit;font-size:16px;outline:none}
html.v2 .v2-quitar{flex:none;width:36px;height:36px;border:0;border-radius:50%;display:grid;place-items:center;background:var(--sup2);color:var(--bad)}
html.v2 .v2-quitar svg{width:16px;height:16px}
html.v2 .v2-cont{display:flex;align-items:center;gap:12px;margin-top:6px;padding:12px 0;border-top:1px solid var(--linea)}
html.v2 .v2-cont:first-of-type{border-top:0}
html.v2 .v2-cont > svg{width:20px;height:20px;flex:none;color:var(--tx3)}
html.v2 .v2-cont > div{flex:1;min-width:0}
html.v2 .v2-cont b{display:block;font-size:15px;font-weight:700}
html.v2 .v2-cont small{display:block;margin-top:2px;font-size:12.5px;color:var(--tx3)}
html.v2 .v2-stepper{flex:none;display:flex;align-items:center;gap:4px;padding:4px;border-radius:999px;background:var(--campo);box-shadow:inset 0 0 0 1px var(--linea)}
html.v2 .v2-stepper button{width:36px;height:36px;border:0;border-radius:50%;display:grid;place-items:center;background:var(--sup2);color:var(--tx)}
html.v2 .v2-stepper button[disabled]{opacity:.3;cursor:not-allowed}
html.v2 .v2-stepper button svg{width:16px;height:16px}
html.v2 .v2-stepper b{min-width:24px;text-align:center;font-size:16px}
html.v2 .v2-paso-c textarea.in{min-height:84px;resize:vertical}
/* Barra de acción: total + un solo botón (sustituye a la barra de navegación en esta pantalla) */
html.v2 .v2app.p-reservar .v2-barra,html.v2 .v2app.p-conf .v2-barra{display:none}
html.v2 .v2-barra-acc{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:70;display:flex;align-items:center;gap:12px;max-width:696px;margin:0 auto;padding:8px 8px 8px 20px;border-radius:999px;
  background:var(--cristal);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);box-shadow:var(--cristal-brillo),0 0 0 1px var(--cristal-borde),0 16px 40px -14px rgba(0,0,0,.45)}
html.v2 .v2-barra-acc .tot{flex:1;min-width:0}
html.v2 .v2-barra-acc .tot small{display:block;font-size:12px;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.v2 .v2-barra-acc .tot b{display:block;font-size:20px;font-weight:800}
html.v2 .v2-barra-acc .btn{flex:none;min-width:150px;min-height:54px;margin:0}
@media (min-width:960px){html.v2 .v2-barra-acc{bottom:24px}}

/* ---------- 8. Confirmación (como la maqueta: palomita, dos WhatsApp, boleto con muescas) ---------- */
html.v2 .v2-conf{padding-bottom:20px}
html.v2 .v2-centro{text-align:center}
html.v2 .v2-centro h1{margin:0;font-size:26px;font-weight:800;line-height:1.15}
html.v2 .v2-centro p{margin:6px 0 0;font-size:14px;color:var(--tx2)}
html.v2 .v2-ok-grande{width:84px;height:84px;margin:8px auto 14px;border-radius:50%;display:grid;place-items:center;background:#22C55E;color:#04130A;box-shadow:0 0 0 10px rgba(34,197,94,.18);animation:v2aparece .55s cubic-bezier(.3,1.6,.5,1) both}
html.v2 .v2-ok-grande.pend{background:#F5B000;color:#1A1200;box-shadow:0 0 0 10px rgba(245,176,0,.18)}
html.v2 .v2-ok-grande svg{width:42px;height:42px;stroke-width:2.8}
@keyframes v2aparece{from{transform:scale(.4);opacity:0}}
@media (prefers-reduced-motion:reduce){html.v2 .v2-ok-grande{animation:none}}
html.v2 .v2-bloque{margin-top:22px;padding:16px;border-radius:var(--r-l);background:var(--sup)}
html.v2 .v2-bloque h2{margin:0;font-size:17px;font-weight:800}
html.v2 .v2-bloque p{margin:4px 0 0;font-size:13.5px;color:var(--tx2)}
html.v2 .v2-wa2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
html.v2 .v2-wa2 .btn{flex-direction:column;gap:2px;min-height:62px;line-height:1.2}
html.v2 .v2-wa2 .btn small{font-size:12px;font-weight:600;opacity:.75}
html.v2 .v2-wa2 .btn.s{background:var(--campo);box-shadow:inset 0 0 0 1px var(--linea)}
html.v2 .v2-boleto-g{--cy:92px;margin-top:18px;border-radius:var(--r-xl);color:#fff;background:#0A0A0B;
  -webkit-mask:radial-gradient(circle 12px at 0 var(--cy),#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 12px at 100% var(--cy),#0000 97%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 12px at 0 var(--cy),#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 12px at 100% var(--cy),#0000 97%,#000) right/51% 100% no-repeat}
html.v2[data-theme="dark"] .v2-boleto-g{background:linear-gradient(160deg,#2A2A30,#141418 60%)}
html.v2 .v2-boleto-g .bg-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;height:var(--cy);margin:0 22px;border-bottom:2px dashed rgba(255,255,255,.28)}
html.v2 .v2-boleto-g .bg-cab img{height:28px;width:auto}
html.v2 .v2-boleto-g small{display:block;font-size:12px;font-weight:600;color:rgba(255,255,255,.55)}
html.v2 .v2-boleto-g .bg-cab small{text-align:right;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
html.v2 .v2-boleto-g .bg-cab b{display:block;font-size:18px;font-weight:800;text-align:right}
html.v2 .v2-boleto-g .bg-ruta{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:20px 22px 8px}
html.v2 .v2-boleto-g .bg-ruta b{display:block;margin-top:3px;font-size:19px;font-weight:800;line-height:1.15}
html.v2 .v2-boleto-g .bg-ruta svg{width:20px;height:20px;color:rgba(255,255,255,.5)}
html.v2 .v2-boleto-g .bg-ruta div:last-child{text-align:right}
html.v2 .v2-boleto-g .bg-datos{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;padding:14px 22px 22px}
html.v2 .v2-boleto-g .bg-datos b{display:block;margin-top:3px;font-size:14.5px;font-weight:700}
html.v2 .v2-boleto-g .bg-datos .ancho{grid-column:1/-1}
html.v2 .v2-boleto-g .bg-total{display:flex;align-items:baseline;justify-content:space-between;margin:0 22px;padding:14px 0 20px;border-top:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.7)}
html.v2 .v2-boleto-g .bg-total b{font-size:24px;font-weight:800;color:#fff}
html.v2 .v2-xp{display:flex;align-items:center;justify-content:center;gap:8px;margin:16px 0 0;font-size:13.5px;font-weight:700;color:var(--oro-tx)}
html.v2 .v2-xp svg{width:16px;height:16px;color:var(--oro)}
html.v2 .v2-full{display:flex;width:100%;margin-top:18px}
@media (min-width:960px){html.v2 .v2-centro h1{font-size:32px}}

/* ---------- 9. Mis viajes (como la maqueta: boleto, pestañas con burbuja y filas por mes) ---------- */
html.v2 .v2-cab-mv{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
html.v2 .v2-titulo{margin:18px 2px 14px;font-size:32px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
html.v2 .v2-cab-mv .v2-circ{margin-bottom:16px}
html.v2 .v2-fecha-circ{position:relative;cursor:pointer}
html.v2 .v2-fecha-circ input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0}
html.v2 .v2-filtro{margin:0 0 14px}
html.v2 .v2-cancelar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:2px;padding:0 4px}
html.v2 .v2-cancelar small{font-size:12.5px;color:var(--tx3);line-height:1.35}
html.v2 .v2-btn-rojo{flex:none;display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border:0;border-radius:999px;font-size:13.5px;font-weight:700;color:var(--bad);background:var(--bad-soft);white-space:nowrap}
html.v2 .v2-btn-rojo svg{width:16px;height:16px}
html.v2 .v2-xp-linea{padding:0 4px}
html.v2 .v2-xp-linea:empty{display:none}
html.v2 .v2-vacio{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
html.v2 .v2-vacio > svg{width:28px;height:28px;color:var(--tx3)}
html.v2 .v2-vacio div{flex:1;min-width:160px}
html.v2 .v2-vacio b{display:block;font-size:16px}
html.v2 .v2-vacio span{display:block;margin-top:2px;font-size:13.5px;color:var(--tx2)}
/* Pestañas: segmentos de cristal con la burbuja negra (o blanca en oscuro) */
html.v2 .v2-tabs{display:flex;gap:0;margin:24px 0 0;padding:5px;border-radius:999px;background:var(--sup)}
html.v2 .v2-tabs .chip{flex:1;justify-content:center;min-height:44px;font-size:14.5px;font-weight:700;background:transparent}
html.v2 .v2-tabs .chip svg{flex:none;width:18px;height:18px}
html.v2 .v2-tabs .chip{display:flex;align-items:center;gap:8px}
html.v2 .v2-mes{margin:24px 4px 10px;font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3)}
html.v2 .v2-lista{border-radius:var(--r-l);background:var(--sup);overflow:hidden}
html.v2 .v2-fila{display:flex;align-items:flex-start;gap:14px;padding:14px 16px}
html.v2 .v2-fila + .v2-fila{border-top:1px solid var(--linea)}
html.v2 .v2-ffecha{flex:none;width:44px;text-align:center;line-height:1;padding-top:2px}
html.v2 .v2-ffecha b{display:block;font-size:24px;font-weight:800}
html.v2 .v2-ffecha small{display:block;margin-top:3px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3)}
html.v2 .v2-finfo{flex:1;min-width:0}
html.v2 .v2-finfo b{display:block;font-size:15.5px;font-weight:700}
html.v2 .v2-finfo span{display:block;margin-top:3px;font-size:13px;line-height:1.4;color:var(--tx2);overflow-wrap:anywhere}
html.v2 .v2-finfo .xp-chip{display:inline-flex;margin-top:8px;white-space:normal}
html.v2 .v2-fila > .pill{flex:none}
html.v2 .v2-cancelar-mini{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:8px 12px;border:0;border-radius:999px;font-size:12.5px;font-weight:700;color:var(--bad);background:var(--bad-soft)}
html.v2 .v2-cancelar-mini svg{width:14px;height:14px}
html.v2 .v2-vacio-l{margin:16px 4px 0;font-size:14px;color:var(--tx2)}
html.v2 .v2-bloque h2 svg{width:20px;height:20px;vertical-align:-4px;margin-right:6px;color:#22C55E}
html.v2 .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (min-width:960px){html.v2 .v2-titulo{font-size:40px}}

/* ---------- 10. Perfil y Ajustes (una sola pantalla con grupos cortos, como la maqueta) ---------- */
html.v2 .v2-yo{display:flex;align-items:center;gap:16px;margin-top:18px}
html.v2 .v2-yo img{flex:none;width:76px;height:76px;border-radius:50%;object-fit:cover;background:var(--sup)}
html.v2 .v2-yo div{min-width:0}
html.v2 .v2-yo h1{margin:0;font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
html.v2 .v2-yo p{margin:3px 0 0;font-size:13.5px;color:var(--tx2);overflow-wrap:anywhere}
html.v2 .v2-resumen{display:flex;align-items:center;gap:14px;margin-top:18px;padding:14px 16px;border-radius:var(--r-l);background:var(--sup);color:var(--tx);text-decoration:none}
html.v2 .v2-resumen .med{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--oro);color:#1A1200}
html.v2 .v2-resumen .med svg{width:22px;height:22px}
html.v2 .v2-resumen > div{flex:1;min-width:0}
html.v2 .v2-resumen b{display:flex;align-items:center;gap:8px;font-size:15.5px;font-weight:800}
html.v2 .v2-resumen > div > span{display:block;margin-top:2px;font-size:13px;color:var(--tx2)}
html.v2 .v2-resumen em{font-style:normal;font-weight:700;color:var(--oro-tx)}
html.v2 .v2-resumen > svg{flex:none;width:18px;height:18px;color:var(--tx3)}
html.v2 .v2-grupo{margin:24px 4px 8px;font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3)}
html.v2 .v2-lista > * + *{border-top:1px solid var(--linea)}
html.v2 .v2-op{display:flex;align-items:center;gap:14px;width:100%;min-height:58px;padding:14px 16px;border:0;border-radius:0;background:none;color:var(--tx);font:inherit;text-align:left;text-decoration:none;cursor:pointer}
html.v2 div.v2-op{cursor:default}
html.v2 .v2-op > svg,html.v2 .v2-op-fl svg{flex:none;width:20px;height:20px;color:var(--tx3)}
html.v2 .v2-op > div{flex:1;min-width:0}
html.v2 .v2-op b{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:15px;font-weight:600}
html.v2 .v2-op small{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:var(--tx2)}
html.v2 .v2-op .pill{font-size:11.5px;padding:3px 9px}
html.v2 .v2-op-fl{display:grid;flex:none}
html.v2 .v2-op-fl svg{transition:transform .2s}
html.v2 .v2-opg.abierto .v2-op-fl svg{transform:rotate(180deg)}
html.v2 .v2-op.peligro b,html.v2 .v2-op.peligro > svg{color:var(--bad)}
html.v2 .v2-op-col{flex-direction:column;align-items:stretch;gap:12px}
html.v2 .v2-op-col .seg{max-width:380px}
html.v2 .v2-op-panel{padding:0 16px 18px}
html.v2 .v2-op-panel > .v2-et:first-child{margin-top:2px}
html.v2 .v2-op-panel .note{margin:10px 2px 0}
html.v2 .v2-op-panel .seg{max-width:340px}
html.v2 .v2-op-panel .v2-ruta .v2-campo:first-child{margin-top:0}
html.v2 .v2-op-panel .avpick{margin-top:4px}
html.v2 .avopt{border:0;box-shadow:inset 0 0 0 1px var(--linea)}
html.v2 .avopt.on{box-shadow:inset 0 0 0 2px var(--tx)}
html.v2 .avopt span{color:var(--tx2)}
html.v2 .avopt:has(input:focus-visible){outline-color:var(--tx)}
html.v2 .v2-mini{flex:none;padding:9px 14px;border:0;border-radius:999px;background:var(--sup2);color:var(--tx);font-size:13.5px;font-weight:700;cursor:pointer}
html.v2 .v2-salir{margin-top:14px}
/* Interruptor (verde encendido; apagado con buen contraste en Claro y Oscuro) */
html.v2 .v2-sw{position:relative;flex:none;width:50px;height:30px;padding:0;border:0;border-radius:999px;background:#C9C9CF;cursor:pointer;transition:background .2s}
html.v2[data-theme="dark"] .v2-sw{background:#45454D}
html.v2 .v2-sw::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.3);transition:transform .2s}
html.v2 .v2-sw[aria-checked="true"]{background:#16A34A}
html.v2 .v2-sw[aria-checked="true"]::after{transform:translateX(20px)}
html.v2 .v2-sw:focus-visible{outline:2px solid var(--tx);outline-offset:3px}
/* Aviso breve de "guardado" sobre la barra de abajo */
html.v2 .v2-toast{position:fixed;left:50%;bottom:calc(100px + env(safe-area-inset-bottom));z-index:70;display:flex;align-items:center;gap:8px;max-width:min(440px,calc(100vw - 32px));padding:12px 18px;border-radius:999px;background:var(--btn);color:var(--btn-tx);font-size:14px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.25);pointer-events:none;animation:v2toast 6s ease forwards}
html.v2 .v2-toast svg{flex:none;width:18px;height:18px}
@keyframes v2toast{0%{opacity:0;transform:translate(-50%,10px)}5%,85%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,0);visibility:hidden}}
@media (min-width:960px){html.v2 .v2-toast{bottom:32px}}
@media (prefers-reduced-motion:reduce){html.v2 .v2-sw,html.v2 .v2-sw::after,html.v2 .v2-op-fl svg{transition:none}html.v2 .v2-toast{animation:v2toastq 6s linear forwards}}
@keyframes v2toastq{0%,90%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,0);visibility:hidden}}

/* ---------- 11. Mis logros (anillo de nivel, XP, racha, insignias en círculo y ranking) ---------- */
html.v2 .v2-anillo{position:relative;flex:none;width:132px;height:132px}
html.v2 .v2-anillo.chico{width:64px;height:64px}
html.v2 .v2-anillo svg{width:100%;height:100%;transform:rotate(-90deg)}
html.v2 .v2-anillo circle{fill:none;stroke-width:10;stroke-linecap:round}
html.v2 .v2-anillo .fondo-a{stroke:var(--sup2)}
html.v2 .v2-anillo .avance{stroke:var(--oro);transition:stroke-dashoffset .8s ease}
html.v2 .v2-anillo .centro{position:absolute;inset:0;display:grid;place-items:center}
html.v2 .v2-anillo .centro svg{width:40px;height:40px;transform:none;color:var(--oro)}
html.v2 .v2-anillo.chico .centro svg{width:24px;height:24px}
html.v2 .v2-lg-hero{display:flex;align-items:center;gap:18px;margin-top:20px}
html.v2 .v2-lg-hero small{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--tx3)}
html.v2 .v2-lg-hero h2{margin:2px 0 0;font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
html.v2 .v2-lg-hero p{margin:6px 0 0;font-size:13.5px;line-height:1.4;color:var(--tx2)}
html.v2 .v2-xp-fila{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:18px}
html.v2 .v2-xp-g{font-size:34px;font-weight:800;letter-spacing:-.03em}
html.v2 .v2-xp-g span{margin-left:4px;font-size:16px;font-weight:700;color:var(--tx2)}
html.v2 .v2-xp-des{margin:4px 2px 0;font-size:13px;line-height:1.4;color:var(--tx2)}
html.v2 .v2-reclamar{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:11px 16px;border:0;border-radius:999px;background:var(--oro);color:#1A1200;font-size:14px;font-weight:800;cursor:pointer;animation:v2brillo 2s ease-in-out infinite}
html.v2 .v2-reclamar svg{width:16px;height:16px}
html.v2 .v2-reclamar:disabled{opacity:.6;animation:none}
@keyframes v2brillo{50%{box-shadow:0 0 26px 2px rgba(245,176,0,.6)}}
html.v2 .v2-racha{margin-top:18px}
html.v2 .racha-h{display:flex;align-items:center;gap:12px}
html.v2 .racha-h .flama{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--sup2);color:var(--tx3)}
html.v2 .racha-h .flama.on{background:linear-gradient(160deg,#FDBA74,#EA580C);color:#fff}
html.v2 .racha-h .flama svg{width:22px;height:22px}
html.v2 .racha-h b{display:block;font-size:16.5px;font-weight:800;color:var(--tx)}
html.v2 .racha-h small{display:block;margin-top:2px;font-size:13px;line-height:1.35;color:var(--tx2)}
html.v2 .v2-meses{display:flex;justify-content:space-between;margin-top:14px}
html.v2 .v2-meses span{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--tx2);text-transform:capitalize}
html.v2 .v2-meses i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--sup2)}
html.v2 .v2-meses .on i{background:linear-gradient(160deg,#FDBA74,#EA580C);color:#fff;box-shadow:0 0 16px -4px rgba(234,88,12,.8)}
html.v2 .v2-meses .on i svg{width:15px;height:15px;stroke-width:2.6}
html.v2 .v2-racha-n{margin:12px 0 0;font-size:12.5px;color:var(--tx2)}
html.v2 .v2-lg-cuenta{margin:22px 2px 0;font-size:13px;color:var(--tx2)}
html.v2 .v2-lg-cuenta b{color:var(--tx)}
html.v2 .v2-lg-t{margin:20px 2px 10px;font-size:15px;font-weight:800}
html.v2 .v2-insignias{display:flex;gap:16px;overflow-x:auto;margin:0 -18px;padding:6px 18px 8px;scroll-padding-inline:18px;scrollbar-width:none}
html.v2 .v2-insignias::-webkit-scrollbar{display:none}
html.v2 .v2-ins{flex:none;width:84px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;border:0;background:none;color:var(--tx);text-align:center;cursor:pointer}
html.v2 .v2-ins .bola{position:relative;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:var(--sup);color:var(--tx3);transition:transform .15s}
html.v2 .v2-ins .bola > svg:not(.prog){width:30px;height:30px}
html.v2 .v2-ins.ganada .bola{background:#0A0A0B;color:#fff;box-shadow:0 8px 20px -10px rgba(0,0,0,.6)}
html.v2[data-theme="dark"] .v2-ins.ganada .bola{background:radial-gradient(circle at 35% 30%,#FFFFFF,#C9C9CF);color:#09090B;box-shadow:0 0 20px -6px rgba(255,255,255,.55)}
html.v2 .v2-ins.reclamar .bola{background:radial-gradient(circle at 35% 30%,#FFE08A,#F5B000);color:#1A1200;animation:v2brillo 2s ease-in-out infinite}
html.v2 .v2-ins svg.prog{position:absolute;inset:-4px;width:80px;height:80px;transform:rotate(-90deg)}
html.v2 .v2-ins svg.prog circle{fill:none;stroke-width:4;stroke-linecap:round}
html.v2 .v2-ins svg.prog .pf{stroke:var(--sup2)}
html.v2 .v2-ins svg.prog .pa{stroke:var(--oro)}
html.v2 .v2-ins b{font-size:12.5px;font-weight:700;line-height:1.2}
html.v2 .v2-ins small{font-size:11.5px;font-weight:700;color:var(--oro-tx)}
html.v2 .v2-ins.sel .bola{transform:scale(1.06);outline:2px solid var(--tx);outline-offset:4px}
html.v2 .v2-ins:focus-visible{outline:none}
html.v2 .v2-ins:focus-visible .bola{outline:2px solid var(--tx);outline-offset:4px}
html.v2 .v2-ins-det{margin-top:6px;padding:14px 16px;border-radius:var(--r-l);background:var(--sup)}
html.v2 .v2-ins-det .d-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
html.v2 .v2-ins-det b{font-size:15.5px;font-weight:800}
html.v2 .v2-ins-det p{margin:4px 0 0;font-size:13.5px;line-height:1.4;color:var(--tx2)}
html.v2 .v2-ins-det small{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:12.5px;font-weight:700;color:var(--tx2)}
html.v2 .v2-ins-det small.ok{color:var(--ok)}
html.v2 .v2-ins-det small svg{width:15px;height:15px}
html.v2 .v2-ins-det .v2-reclamar{margin-top:12px}
html.v2 .v2-prog{height:6px;margin-top:12px;border-radius:999px;background:var(--sup2);overflow:hidden}
html.v2 .v2-prog i{display:block;height:100%;border-radius:inherit;background:var(--oro)}
html.v2 .v2-lg-aviso,html.v2 .v2-lg-nuevo{display:flex;gap:10px;align-items:flex-start;margin-top:22px}
html.v2 .v2-lg-nuevo{margin:0 0 14px;background:rgba(245,176,0,.14);color:var(--tx)}
html.v2 .v2-lg-aviso > svg,html.v2 .v2-lg-nuevo > svg{flex:none;width:18px;height:18px;margin-top:1px}
html.v2 .v2-lg-nuevo > svg{color:var(--oro-tx)}
/* Ranking */
html.v2 .v2-yo-lugar{display:flex;align-items:center;gap:14px;margin-top:18px}
html.v2 .v2-yo-lugar > div{min-width:0}
html.v2 .v2-yo-lugar small{display:block;font-size:13px;color:var(--tx2)}
html.v2 .v2-yo-lugar b{display:block;font-size:26px;font-weight:800;letter-spacing:-.02em}
html.v2 .v2-yo-lugar b small{display:inline;font-size:14px;font-weight:600}
html.v2 .v2-rk-lista{margin-top:14px}
html.v2 .v2-rk{display:flex;align-items:center;gap:14px;padding:12px 16px}
html.v2 .v2-rk.yo{background:color-mix(in srgb,var(--tx) 8%,transparent)}
html.v2 .v2-rk .rk-pos{flex:none;width:30px;text-align:center;font-size:16px;font-weight:800;color:var(--tx2)}
html.v2 .v2-rk .rk-pos.top{color:var(--oro-tx)}
html.v2 .v2-rk .rk-av{flex:none;width:40px;height:40px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--sup2);color:var(--tx3)}
html.v2 .v2-rk .rk-av img{width:100%;height:100%;object-fit:cover}
html.v2 .v2-rk .rk-av svg{width:20px;height:20px}
html.v2 .v2-rk .xp-num{flex:none;font-size:14.5px;font-weight:800;white-space:nowrap}
html.v2 .v2-rk-sep{padding:6px;text-align:center;color:var(--tx3);letter-spacing:.3em}
html.v2 .note a{color:var(--tx);font-weight:700;text-decoration:underline}
@media (prefers-reduced-motion:reduce){html.v2 .v2-reclamar,html.v2 .v2-ins.reclamar .bola{animation:none}html.v2 .v2-anillo .avance{transition:none}}
@media (max-width:380px){html.v2 .v2-anillo{width:108px;height:108px}html.v2 .v2-lg-hero h2{font-size:21px}}

/* ---------- 12. Notificaciones (por día, ícono según el aviso y las nuevas resaltadas) ---------- */
html.v2 .v2-noti{display:flex;align-items:flex-start;gap:14px;padding:14px 16px;color:var(--tx);text-decoration:none}
html.v2 .v2-noti.nueva{background:color-mix(in srgb,var(--tx) 6%,transparent)}
html.v2 .v2-noti .ic-n{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--sup2);color:var(--tx2)}
html.v2 .v2-noti .ic-n svg{width:19px;height:19px}
html.v2 .v2-noti .ic-n.oro{background:var(--oro);color:#1A1200}
html.v2 .v2-noti .ic-n.ok{background:var(--ok-soft);color:var(--ok)}
html.v2 .v2-noti .ic-n.bad{background:var(--bad-soft);color:var(--bad)}
html.v2 .v2-noti .ic-n.warn{background:var(--warn-soft);color:var(--warn)}
html.v2 .v2-noti > div{flex:1;min-width:0}
html.v2 .v2-noti b{display:block;font-size:15px;font-weight:700}
html.v2 .v2-noti > div > span{display:block;margin-top:3px;font-size:13.5px;line-height:1.4;color:var(--tx2);overflow-wrap:anywhere}
html.v2 .v2-noti time{flex:none;display:flex;align-items:center;gap:6px;margin-top:2px;font-size:12px;color:var(--tx2)}
html.v2 .v2-noti .pt{width:8px;height:8px;border-radius:50%;background:var(--tx)}
@media (hover:hover){html.v2 .v2-noti:hover{background:color-mix(in srgb,var(--tx) 4%,transparent)}html.v2 .v2-noti.nueva:hover{background:color-mix(in srgb,var(--tx) 9%,transparent)}}

/* ---------- 13. Inicio de sesión (como la maqueta) y los mismos colores en Completa tu perfil y Recuperar cuenta ---------- */
html.v2 .v2-login{min-height:100dvh;display:flex;flex-direction:column;max-width:460px;margin:0 auto;padding:calc(28px + env(safe-area-inset-top)) 22px calc(24px + env(safe-area-inset-bottom));color:var(--tx)}
html.v2 .v2-login .marca-l{margin-top:8vh;text-align:center}
html.v2 .v2-login .logo-chip{display:inline-flex;padding:12px 22px;border-radius:999px;background:#0A0A0B}
html.v2[data-theme="dark"] .v2-login .logo-chip{padding:0;background:none}
html.v2 .v2-login .logo-chip img{display:block;width:auto;height:48px}
html.v2[data-theme="dark"] .v2-login .logo-chip img{height:64px}
html.v2 .v2-login .marca-l p{margin:14px 0 0;font-size:17px;font-weight:600;color:var(--tx2)}
html.v2 .v2-login .abajo{margin-top:auto;padding-top:40px}
html.v2 .v2-login h1{margin:0;font-size:22px;font-weight:800;letter-spacing:-.02em;text-align:center}
html.v2 .v2-login .sub{margin:6px 0 0;font-size:14px;line-height:1.4;color:var(--tx2);text-align:center}
html.v2 .v2-login .info{margin-top:16px;text-align:left}
html.v2 .v2-google{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:58px;margin-top:22px;border-radius:999px;background:var(--btn);color:var(--btn-tx);font-size:16.5px;font-weight:800;text-decoration:none}
html.v2 .v2-google .g{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#fff}
html.v2 .v2-google .g svg{width:18px;height:18px}
html.v2 .v2-login .recupera{display:block;margin:16px auto 0;text-align:center;font-size:14px;font-weight:600;line-height:1.4;color:var(--tx2);text-decoration:underline;text-underline-offset:3px}
html.v2 .v2-login .ayuda{margin-top:22px;text-align:center;font-size:13px;color:var(--tx2)}
html.v2 .v2-login .ayuda div{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:8px}
html.v2 .v2-login .ayuda a{display:flex;flex-direction:column;align-items:center;min-width:120px;padding:9px 16px;border-radius:999px;background:var(--sup);color:var(--tx);font-size:13px;font-weight:700;text-decoration:none}
html.v2 .v2-login .ayuda a small{font-size:11.5px;font-weight:600;color:var(--tx2)}
html.v2 .v2-login .legal{display:flex;justify-content:center;gap:16px;margin-top:20px;font-size:12.5px}
html.v2 .v2-login .legal a{color:var(--tx2);text-decoration:underline;text-underline-offset:3px}
/* Completa tu perfil y Recuperar cuenta: sin recuadro, con el logo en su cápsula negra (Claro) */
html.v2 .login{min-height:100dvh;padding:calc(20px + env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom));background:var(--bg)}
html.v2 .login .card{background:transparent;box-shadow:none;border:0;padding:8px 4px}
html.v2 .login .tile-logo{width:auto;height:auto;display:inline-flex;padding:10px 18px!important;border-radius:999px;background:#0A0A0B!important;box-shadow:none!important;border:0!important}
html.v2 .login .tile-logo .logo-v2{width:auto;height:40px}
html.v2[data-theme="dark"] .login .tile-logo{padding:0!important;background:none!important}
html.v2[data-theme="dark"] .login .tile-logo .logo-v2{height:52px}
html.v2 .login h1{font-size:24px!important;font-weight:800!important;letter-spacing:-.02em}
html.v2 .login .note a{color:var(--tx)!important;font-weight:700;text-decoration:underline}
html.v2 .login .gbtn{background:var(--btn);color:var(--btn-tx);border:0}

/* ---------- 14. Administración: marco nuevo (menú lateral de cristal en computadora; barra de burbuja con "Agendar" en celular) ---------- */
html.v2 .v2-menu-lat{display:none}
html.v2 .v2adm .v2-logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
html.v2 .v2-adm-et{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tx2)}
html.v2 .v2-ini{flex:none;width:42px;height:42px;border:0;border-radius:50%;display:grid;place-items:center;background:var(--btn);color:var(--btn-tx);font-size:14px;font-weight:800;cursor:pointer}
html.v2 .v2-dd-w{position:relative}
html.v2 .v2-dd-w .dd{right:0;min-width:250px;padding:8px;border-radius:20px;background:var(--bg);box-shadow:0 0 0 1px var(--linea),0 20px 50px -18px rgba(0,0,0,.45)}
html.v2 .v2-dd-w .dd a{color:var(--tx);font-size:14px;padding:11px 12px;border-radius:12px}
html.v2 .v2-dd-w .dd a:hover{background:var(--sup);color:var(--tx)}
html.v2 .v2-dd-w .dd a svg{width:18px;height:18px;color:var(--tx2)}
html.v2 .dd-quien{margin:4px 12px 8px;padding-bottom:10px;border-bottom:1px solid var(--linea)}
html.v2 .dd-quien b{display:block;font-size:15px}
html.v2 .dd-quien small{font-size:12.5px;color:var(--tx2)}
html.v2 .v2adm .v2-pastilla a{font-size:11px}
html.v2 .v2-pastilla .v2-badge{position:absolute;top:4px;right:calc(50% - 24px);min-width:18px;height:18px;padding:0 5px;border-radius:999px;display:grid;place-items:center;background:var(--oro);color:#1A1200;font-size:11px;font-weight:800}
html.v2 .v2-pastilla .v2-badge[hidden]{display:none}
html.v2 .v2adm .v2-reservar svg{width:30px;height:30px}
@media (min-width:960px){
  html.v2 .v2adm{max-width:none;display:grid;grid-template-columns:250px minmax(0,1fr);gap:28px;padding:20px 32px 40px}
  html.v2 .v2-menu-lat{display:flex;flex-direction:column;gap:4px;position:sticky;top:20px;align-self:start;height:calc(100dvh - 40px);overflow:auto;padding:20px 14px;border-radius:28px;scrollbar-width:none;
    background:var(--cristal);backdrop-filter:blur(24px) saturate(170%);-webkit-backdrop-filter:blur(24px) saturate(170%);box-shadow:var(--cristal-brillo),0 0 0 1px var(--cristal-borde)}
  html.v2 .v2-menu-lat .v2-logo{margin:0 8px 18px}
  html.v2 .v2-menu-lat nav{display:flex;flex-direction:column;gap:4px}
  html.v2 .v2-menu-lat nav > a,html.v2 .v2-menu-lat .grp{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:0;border-radius:14px;background:none;font:inherit;font-size:14.5px;font-weight:600;color:var(--tx2);text-align:left;text-decoration:none;cursor:pointer}
  html.v2 .v2-menu-lat nav > a svg,html.v2 .v2-menu-lat .grp svg{flex:none;width:20px;height:20px}
  html.v2 .v2-menu-lat nav > a:hover,html.v2 .v2-menu-lat .grp:hover{background:var(--sup);color:var(--tx)}
  html.v2 .v2-menu-lat nav > a.on{background:var(--burbuja-bg);color:var(--tx)}
  html.v2 .v2-menu-lat .grp > svg:last-child{margin-left:auto;width:16px;height:16px;transition:transform .2s}
  html.v2 .v2-menu-lat .grp.open > svg:last-child{transform:rotate(180deg)}
  html.v2 .v2-menu-lat .n{margin-left:auto;min-width:22px;height:22px;padding:0 6px;border-radius:999px;display:grid;place-items:center;background:var(--oro);color:#1A1200;font-size:12px;font-weight:800}
  html.v2 .v2-menu-lat .n[hidden]{display:none}
  html.v2 .v2-menu-lat .subm{padding:2px 0 6px 12px}
  html.v2 .v2-menu-lat .subm a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;font-size:13.5px;font-weight:600;color:var(--tx2);text-decoration:none}
  html.v2 .v2-menu-lat .subm a svg{width:16px;height:16px}
  html.v2 .v2-menu-lat .subm a:hover{background:var(--sup);color:var(--tx)}
  html.v2 .v2-menu-lat .subm a.on{background:var(--burbuja-bg);color:var(--tx)}
  html.v2 .v2-menu-lat .wxmini{margin-top:auto;padding:12px;border-radius:18px;background:var(--sup);border:0;box-shadow:none;color:var(--tx)}
  html.v2 .v2-menu-lat .wxmini span{color:var(--tx2)}
  html.v2 .v2-menu-lat .wxmini span:first-child{color:var(--tx);font-weight:700}
  html.v2 .v2adm .v2-top{position:static;padding:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;justify-content:flex-end}
  html.v2 .v2adm .v2-top > .v2-logo{display:none}
  html.v2 .v2adm .v2-main{margin-top:8px}
}

/* ---------- 15. Agenda Administrativa (saludo, indicadores, salidas por sentido, solicitudes, clima) ---------- */
html.v2 .v2-saludo{margin:22px 2px 4px;font-size:28px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
html.v2 .v2-saludo-p{margin:0 2px;font-size:14px;color:var(--tx2)}
html.v2 .v2-saludo-p::first-letter{text-transform:uppercase}
html.v2 .v2-kpis{display:flex;gap:10px;overflow-x:auto;margin:18px -18px 0;padding:2px 18px 4px;scrollbar-width:none}
html.v2 .v2-kpis::-webkit-scrollbar{display:none}
html.v2 .v2-kpi{flex:none;min-width:132px;padding:14px 16px;border-radius:var(--r-l);background:var(--sup);color:var(--tx);text-decoration:none}
html.v2 .v2-kpi b{display:block;font-size:28px;font-weight:800;letter-spacing:-.02em}
html.v2 .v2-kpi span{display:block;margin-top:2px;font-size:12.5px;font-weight:600;color:var(--tx2)}
html.v2 .v2-kpi.atencion{background:color-mix(in srgb,var(--oro) 16%,var(--sup));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--oro) 45%,transparent)}
html.v2 .v2-kpi.atencion b{color:var(--oro-tx)}
html.v2 .v2-sec > .sec-h a{font-size:14px;font-weight:700;color:var(--tx);text-decoration:underline;text-underline-offset:3px}
html.v2 .v2-sentido{display:flex;align-items:center;gap:8px;margin:16px 4px 8px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tx2)}
html.v2 .v2-sec > .sec-h + .v2-sentido{margin-top:0}
html.v2 .v2-sentido svg{width:16px;height:16px}
html.v2 .v2-salida{display:flex;align-items:center;gap:12px;padding:14px 16px}
html.v2 .v2-salida .ver{flex:1;min-width:0;display:block;color:var(--tx);text-decoration:none}
html.v2 .v2-salida .ver b{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:15.5px;font-weight:700}
html.v2 .v2-salida .ver > span{display:block;margin-top:3px;font-size:13px;color:var(--tx2)}
html.v2 .v2-salida .ver > span.ocup{display:flex;align-items:center;gap:8px;margin-top:8px}
html.v2 .v2-salida .ocup i{flex:1;max-width:160px;height:6px;border-radius:999px;background:var(--sup2);overflow:hidden}
html.v2 .v2-salida .ocup i::before{content:"";display:block;width:var(--p);height:100%;border-radius:inherit;background:var(--tx)}
html.v2 .v2-salida .ocup i.llena::before{background:var(--bad)}
html.v2 .v2-salida .ocup small{font-size:12.5px;font-weight:700;color:var(--tx2)}
html.v2 .v2-salida .can{display:block;margin-top:6px;font-size:12px;color:var(--tx2)}
html.v2 .v2-salida .pill{font-size:11px;padding:3px 9px}
html.v2 .v2-encurso{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;color:var(--bad)}
html.v2 .v2-encurso i{width:7px;height:7px;border-radius:50%;background:currentColor;animation:v2respira 1.2s ease-in-out infinite}
html.v2 .v2-mini-btn{flex:none;display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:999px;background:var(--btn);color:var(--btn-tx);font-size:13.5px;font-weight:700;text-decoration:none}
html.v2 .v2-mini-btn svg{width:16px;height:16px}
html.v2 .v2-sol{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;color:var(--tx);text-decoration:none}
html.v2 .v2-sol .ic-s{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(245,176,0,.2);color:var(--oro-tx)}
html.v2 .v2-sol .ic-s svg{width:20px;height:20px}
html.v2 .v2-sol > div{flex:1;min-width:0}
html.v2 .v2-sol b{display:block;font-size:15px;font-weight:700}
html.v2 .v2-sol > div > span{display:block;margin-top:3px;font-size:13px;line-height:1.45;color:var(--tx2)}
html.v2 .v2-sol .v2-mini-btn{align-self:center}
html.v2 .v2-wx{padding:14px 16px}
html.v2 .v2-wx-hoy{display:flex;align-items:center;gap:12px;padding-bottom:10px}
html.v2 .v2-wx-hoy b{display:block;font-size:15px}
html.v2 .v2-wx-hoy span{display:block;font-size:13px;color:var(--tx2)}
html.v2 .v2-wx-f{display:grid;grid-template-columns:minmax(64px,auto) 1fr 1fr;gap:8px;align-items:center;padding:9px 0;border-top:1px solid var(--linea);font-size:13.5px;color:var(--tx2)}
html.v2 .v2-wx-f .d{font-weight:700;color:var(--tx);text-transform:capitalize}
html.v2 .v2-wx-f span{display:flex;align-items:center;gap:6px}
html.v2 .v2-wx-f b{color:var(--tx)}
html.v2 .v2-wx-al{display:flex;align-items:center;gap:6px;margin:0 0 6px;font-size:12.5px;font-weight:700;color:var(--warn)}
html.v2 .v2-wx-al svg{width:14px;height:14px}
html.v2 .v2-wx-n{margin:8px 0 0;font-size:12.5px;color:var(--tx2)}
html.v2 .v2-wx .wxattr{display:inline-block;margin-top:6px;font-size:12px;color:var(--tx2)}
html.v2 .v2adm .ap-aviso{margin-top:16px}
@media (min-width:960px){
  html.v2 .v2-saludo{font-size:38px}
  html.v2 .v2-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:24px 0 0;padding:0;overflow:visible}
  html.v2 .v2-kpi{min-width:0}
  html.v2 .v2-acols{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;align-items:start}
}

/* ---------- 16. Reservaciones (calendario con días en círculo, salidas del día y reservaciones en filas) ---------- */
html.v2 .v2-rcols{margin-top:18px}
html.v2 .calr{margin:0;padding:16px;border:0;border-radius:var(--r-l);background:var(--sup)!important;box-shadow:none!important}
html.v2 .calr-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
html.v2 .calr-h h2{margin:0;font-size:17px;font-weight:800}
html.v2 .calr-h .icbtn{width:40px;height:40px;border:0;border-radius:50%;background:var(--campo);color:var(--tx);box-shadow:none}
html.v2 .calr-sem,html.v2 .calr-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center}
html.v2 .calr-sem span{padding:4px 0;font-size:12px;font-weight:700;color:var(--tx2)}
html.v2 .calr-d{position:relative;width:100%;max-width:44px;aspect-ratio:1;justify-self:center;display:grid;place-items:center;padding:0;border:0!important;border-radius:50%!important;background:none!important;box-shadow:none;color:var(--tx);font-size:14px;cursor:pointer}
html.v2 .calr-d b{font-weight:600}
html.v2 .calr-d:hover{background:var(--sup2)!important}
html.v2 .calr-d.hoy{box-shadow:inset 0 0 0 2px var(--tx2)}
html.v2 .calr-d.sin{color:var(--tx2)}
html.v2 .calr-d.pasado{opacity:.6}
html.v2 .calr-d[aria-pressed="true"]{background:var(--btn)!important;color:var(--btn-tx);opacity:1}
html.v2 .calr-p{position:absolute;bottom:4px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%}
html.v2 .calr-p.verde{background:#22C55E}
html.v2 .calr-p.naranja{background:#F08C00}
html.v2 .calr-p.rojo{background:#EF4444}
html.v2 .calr-d[aria-pressed="true"] .calr-p{box-shadow:0 0 0 2px var(--btn)}
html.v2 .calr-ley{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;font-size:12px;color:var(--tx2)}
html.v2 .calr-ley span{display:inline-flex;align-items:center;gap:6px}
html.v2 .calr-ley .calr-p{position:static;width:7px;height:7px;margin:0}
html.v2 .v2-link{padding:0;border:0;background:none;font:inherit;font-size:14px;font-weight:700;color:var(--tx);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
html.v2 .v2-filtros{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;margin:0 -18px 10px;padding:2px 18px;scrollbar-width:none}
html.v2 .v2-filtros::-webkit-scrollbar{display:none}
html.v2 .v2-filtros .chip{flex:none;white-space:nowrap}
html.v2 .v2-cuenta{margin:0 2px 10px;font-size:13px;color:var(--tx2)}
html.v2 .v2-cuenta::first-letter{text-transform:uppercase}
html.v2 .v2-res{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;border:0;background:none;color:var(--tx);font:inherit;text-align:left;cursor:pointer}
html.v2 .v2-res > div{flex:1;min-width:0}
html.v2 .v2-res b{display:block;font-size:15px;font-weight:700}
html.v2 .v2-res > div > span{display:block;margin-top:3px;font-size:13px;line-height:1.4;color:var(--tx2)}
html.v2 .v2-res .pills{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px;max-width:44%}
html.v2 .v2-res .pill{font-size:11px;padding:3px 9px;text-align:right}
html.v2 .v2-resg.abierto{background:color-mix(in srgb,var(--tx) 5%,transparent)}
html.v2 .v2-res-panel{padding:0 16px 16px}
html.v2 .v2-res-panel p{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:13.5px;color:var(--tx2)}
html.v2 .v2-res-panel p svg{flex:none;width:16px;height:16px}
html.v2 .v2-res-acc{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
@media (min-width:960px){
  html.v2 .v2-rcols{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:24px;align-items:start}
  html.v2 .v2-rcols .calr{position:sticky;top:20px}
  html.v2 .v2-rcols .v2-sec-dia{margin-top:0}
  html.v2 .v2-filtros{margin:0 0 10px;padding:2px 0;flex-wrap:wrap;overflow:visible}
}
html.v2 .v2-res-acc .btn.s{background:var(--campo);color:var(--tx);box-shadow:inset 0 0 0 1px var(--linea)}
html.v2 .v2-res-acc .btn.p{background:var(--btn);color:var(--btn-tx)}

/* ---------- 17. Agendar (bloques como la maqueta) y Agendado ---------- */
html.v2 .v2-ag-sub{margin:-4px 2px 0 56px;font-size:13px;color:var(--tx2)}
html.v2 .v2-ag{margin-top:14px}
html.v2 .v2-ag > h2{margin:0 2px 4px}
html.v2 .v2-canal{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
html.v2 .v2-canal button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;border:0;border-radius:var(--r-m);background:var(--campo);box-shadow:inset 0 0 0 1px var(--linea);color:var(--tx);font:inherit;font-size:15px;font-weight:700;cursor:pointer}
html.v2 .v2-canal button svg{width:20px;height:20px}
html.v2 .v2-canal button[aria-checked="true"]{background:var(--btn);color:var(--btn-tx);box-shadow:none}
html.v2 .v2-cliente{display:flex;align-items:center;gap:12px;margin-top:10px;padding:12px 14px;border-radius:var(--r-m);background:var(--ok-soft)}
html.v2 .v2-cliente > svg{flex:none;width:20px;height:20px;color:var(--ok)}
html.v2 .v2-cliente.warn{background:var(--warn-soft)}
html.v2 .v2-cliente.warn > svg{color:var(--warn)}
html.v2 .v2-cliente b{display:block;font-size:14.5px}
html.v2 .v2-cliente span{display:block;margin-top:2px;font-size:12.5px;line-height:1.4;color:var(--tx2)}
html.v2 .v2-ag .v2-ruta{margin-top:6px}
html.v2 .v2-ag .seatrow{margin-top:12px}
html.v2 .v2-ag .v2-cont + .err,html.v2 .v2-ag .v2-cont + .err + .err{margin:4px 2px 0}
html.v2 .v2-precio-c{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
html.v2 .v2-precio-c small{display:block;font-size:12.5px;color:var(--tx2)}
html.v2 .v2-precio-c b{display:block;font-size:20px;font-weight:800}
html.v2 .precio-in{display:flex;align-items:center;gap:8px;padding:0 14px;min-height:52px;border-radius:var(--r-m);background:var(--campo);box-shadow:inset 0 0 0 1px var(--linea);color:var(--tx2);font-weight:700}
html.v2 .precio-in input{flex:1;min-width:0;border:0;background:none;color:var(--tx);font:inherit;font-size:17px;font-weight:700;outline:none}
html.v2 .precio-in small{font-size:12.5px;color:var(--tx2)}
html.v2 .v2-kv{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:9px 0;font-size:14px}
html.v2 .v2-kv + .v2-kv{border-top:1px solid var(--linea)}
html.v2 .v2-kv span{flex:none;color:var(--tx2)}
html.v2 .v2-kv b{text-align:right;font-weight:700}
html.v2 .v2-msg{margin-top:10px;padding:14px 16px;border-radius:var(--r-m);background:var(--campo);box-shadow:inset 0 0 0 1px var(--linea);font-size:14.5px;line-height:1.5;white-space:pre-line;overflow-wrap:anywhere}
html.v2 .v2-dos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
html.v2 .v2-dos .btn{margin:0;min-height:50px;justify-content:center;text-align:center}
@media (max-width:420px){html.v2 .v2-angosta > .v2-dos{grid-template-columns:1fr}}

/* ---------- 18. Resto de Administración: encabezado igual al de las pantallas nuevas y Panel en grupos ---------- */
html.v2 .v2app .encab{margin:14px 0 16px;padding:0;background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html.v2 .v2app .encab .sh{display:flex;align-items:center;gap:12px;margin:0}
html.v2 .v2app .encab .back{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--sup);color:var(--tx);box-shadow:none}
html.v2 .v2app .encab .back:hover{background:var(--sup2)}
html.v2 .v2app .encab h1{margin:0;font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.15;color:var(--tx)}
html.v2 .v2app .encab .subline{margin:6px 2px 0;font-size:14px;line-height:1.4;color:var(--tx2)}
html.v2 .v2app .encab .sh:has(.back) + .subline{margin-left:56px}
html.v2 .v2app .encab .subline svg{color:var(--tx2)}
html.v2 .v2app .encab + div[style*="height:10px"]{display:none}
html.v2 .v2app .screen{max-width:none;padding:0;margin:0}
html.v2 .v2-pcols{display:block}
@media (min-width:960px){
  html.v2 .v2app .encab h1{font-size:34px}
  html.v2 .v2-pcols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
}
/* Configuración: días con servicio (cuadros) con los colores nuevos */
html.v2 .dia-c{border-radius:var(--r-m);background:var(--campo);box-shadow:inset 0 0 0 1px var(--linea);color:var(--tx2)}
html.v2 .dia-c b{color:var(--tx)}
html.v2 .dia-ic{box-shadow:inset 0 0 0 1.5px var(--linea2)}
html.v2 .dia-op input:checked + .dia-c{background:var(--btn);color:var(--btn-tx);box-shadow:none}
html.v2 .dia-op input:checked + .dia-c b{color:var(--btn-tx)}
html.v2 .dia-op input:checked + .dia-c .dia-ic{background:var(--btn-tx);color:var(--btn)}
html.v2 .dia-op input:focus-visible + .dia-c{outline-color:var(--tx)}
/* Fotos con texto encima (aviso del clima y foto de la salida): degradado neutro más oscuro abajo para leer bien el texto blanco */
html.v2 .wxban::after,html.v2 .dhero::after{background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.05) 40%,rgba(0,0,0,.62))}
html.v2 .wxban{border-radius:var(--r-l)}
html.v2 .wxban p{font-size:13.5px;text-shadow:0 1px 10px rgba(0,0,0,.6)}