/* Guía de primer uso llevada por el piloto EMIR (guia-piloto.js) */
body>.guia-piloto{position:fixed!important;inset:0;z-index:2147483000!important;pointer-events:none}
/* mientras guía el piloto, nada más se encima (asistente, ventanas de promoción) */
body.gp-activa #xamur,body.gp-activa #popGana,body.gp-activa .xamur{visibility:hidden!important}
.guia-piloto.oculto{display:none}
.gp-velo{position:absolute;inset:0;background:rgba(0,0,0,.62);pointer-events:auto;transition:opacity var(--dur-3)}
.guia-piloto.con-foco .gp-velo{background:transparent;pointer-events:none}
/* tapas: atrapan los clics fuera de la zona iluminada; la zona iluminada sí se puede tocar */
.gp-tapa{position:fixed;display:none;pointer-events:auto;background:transparent}
.gp-foco{position:fixed;border-radius:var(--radio-2);border:2px solid var(--menta,#89FF9E);box-shadow:0 0 0 9999px rgba(0,0,0,.66),0 0 24px rgba(var(--menta-rgb,137,255,158),.45);transition:top var(--dur-3) var(--curva-entra),left var(--dur-3) var(--curva-entra),width var(--dur-3) var(--curva-entra),height var(--dur-3) var(--curva-entra),opacity var(--dur-2);opacity:0;pointer-events:none}
.guia-piloto.con-foco .gp-foco{opacity:1}
.gp-guia{position:fixed;display:flex;align-items:flex-end;gap:4px;pointer-events:auto}
/* el piloto vive siempre en la misma esquina: celular arriba (abajo están la barra y sus hojas), computadora abajo a la izquierda */
.gp-guia.gp-arriba{left:8px;right:8px}
.gp-guia.gp-abajo{left:24px;bottom:24px;width:min(480px,calc(100% - 48px))}
.gp-piloto{flex:none;width:108px;height:auto;background:transparent;filter:drop-shadow(0 12px 22px rgba(0,0,0,.7));animation:gpEntra var(--dur-3) cubic-bezier(.2,1.2,.3,1)}
@media(min-width:861px){.gp-piloto{width:150px}}
@keyframes gpEntra{from{transform:translateX(-40px) scale(.8);opacity:0}to{transform:none;opacity:1}}
.gp-globo{position:relative;flex:1;margin-bottom:16px;background:#0F141B;border:1px solid rgba(var(--menta-rgb,137,255,158),.55);border-radius:var(--radio-3);padding:16px 16px 12px;box-shadow: var(--sombra-3);animation:gpGlobo var(--dur-3) var(--curva-entra)}
@keyframes gpGlobo{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
.gp-globo::before{content:'';position:absolute;left:-9px;bottom:26px;width:16px;height:16px;background:#0F141B;border-left:1px solid rgba(var(--menta-rgb,137,255,158),.55);border-bottom:1px solid rgba(var(--menta-rgb,137,255,158),.55);transform:rotate(45deg)}
.gp-globo b{display:block;font-size:var(--t-5);line-height:1.15;color:#fff;padding-right:24px}
.gp-globo p{margin:4px 0 0;font-size:var(--t-4);line-height:1.35;color:#D5DAE1}
.gp-acc{display:flex;gap:8px;align-items:center;margin-top:12px;flex-wrap:wrap}
.gp-acc button{font:inherit;font-weight:800;font-size:var(--t-4);border-radius:var(--radio-2);padding:12px 16px;cursor:pointer;border:1px solid transparent}
.gp-si{background:var(--menta,#89FF9E);color:var(--sobre-menta,#04110A)}
.gp-no{background:transparent;color:#EEF1F5;border-color:rgba(255,255,255,.18)!important}
.gp-puntos{margin-left:auto;display:flex;gap:4px}
.gp-puntos i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.2)}
.gp-puntos i.on{background:var(--menta,#89FF9E)}
.gp-arriba-acc{display:flex;justify-content:flex-end;gap:2px;margin:-12px -12px 0 0}
.gp-x,.gp-atras{background:none;border:0;color:#9AA3B0;font-size:var(--t-3);font-weight:600;cursor:pointer;padding:8px}
.gp-x:hover,.gp-atras:hover{color:#fff}
.gp-globo b{padding-right:0}
/* «Ver la guía otra vez» en Mi perfil */
.gp-otra{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:20px 0 0;padding:12px 16px;border-radius:var(--radio-2);border:1px solid rgba(var(--menta-rgb,137,255,158),.3);background:rgba(var(--menta-rgb,137,255,158),.06)}
.gp-otra img{width:44px;height:44px;object-fit:cover;object-position:50% 15%;border-radius:50%;background:var(--panel,#0F141B)}
.gp-otra span{flex:1 1 180px;font-size:var(--t-3);color:#D5DAE1}.gp-otra span b{display:block;color:#fff;font-size:var(--t-4)}
@media (prefers-reduced-motion:reduce){.gp-piloto,.gp-globo{animation:none}.gp-foco,.gp-guia{transition:none}}
/* dedo que señala dónde tocar */
.gp-dedo{position:fixed;display:none;width:42px;height:42px;fill:#fff;stroke:#111;stroke-width:1.3;stroke-linejoin:round;filter:drop-shadow(0 4px 8px rgba(0,0,0,.6));pointer-events:none;animation:gpToca 1.4s ease-in-out infinite}
@keyframes gpToca{0%,100%{transform:translate(4px,8px)}40%{transform:translate(0,0) scale(.92)}}
/* «¡Excelente!»: estrellas que salen del globito */
.gp-chispas{position:absolute;left:62%;top:40%;width:0;height:0;pointer-events:none}
.gp-chispas i{position:absolute;left:0;top:0;font-style:normal;color:var(--menta,#89FF9E);text-shadow:0 0 10px rgba(var(--menta-rgb,137,255,158),.8);opacity:0}
.gp-chispas i:nth-child(3n){color:#FFD60A;text-shadow:0 0 10px rgba(255,214,10,.8)}
.gp-chispas.va i{animation:gpChispa 1.1s cubic-bezier(.15,.8,.3,1) var(--d) forwards}
@keyframes gpChispa{0%{transform:translate(0,0) scale(.3) rotate(0);opacity:1}70%{opacity:1}100%{transform:translate(var(--x),var(--y)) scale(1.1) rotate(160deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.gp-dedo{animation:none}.gp-chispas.va i{animation-duration:var(--dur-1)}}
/* «¿Qué equipo tienes?»: guía para registrarlo con el fabricante (guias.js) */
.reg-guia{display:flex;align-items:center;gap:12px;margin:12px 0 4px;padding:12px 12px;border-radius:var(--radio-2);background:rgba(var(--menta-rgb,137,255,158),.07);border:1px solid rgba(var(--menta-rgb,137,255,158),.4);color:#EEF1F5;text-decoration:none;font-weight:400}
.reg-guia img{width:52px;height:52px;object-fit:contain;border-radius:var(--radio-2);flex:none}
.reg-guia span{flex:1}.reg-guia small{display:block;font-size:var(--t-2);color:#9AA3B0}.reg-guia b{display:block;font-size:var(--t-4);line-height:1.25;color:#fff}
.reg-guia em{font-style:normal;font-weight:800;color:var(--menta,#89FF9E);white-space:nowrap}
.gp-otra-acc{display:flex;gap:8px;flex-wrap:wrap}.gp-otra-acc .btn{margin:0;width:auto}
/* modo prueba: «No volver a mostrar» */
.gp-nomas{display:none;align-items:center;gap:8px;margin-top:12px;font-size:var(--t-3);color:#9AA3B0;cursor:pointer}
.guia-piloto.gp-prueba.gp-ultimo .gp-nomas{display:flex}
.gp-nomas input{width:16px;height:16px;accent-color:var(--menta,#89FF9E);margin:0}
/* ---- el globito mide siempre lo mismo (Rodrigo: «que no cambien los tamaños a cada rato») ---- */
.gp-guia.gp-arriba .gp-piloto{width:84px}
.gp-globo{flex:none;width:calc(100vw - 16px - 88px);max-width:320px;height:252px;display:flex;flex-direction:column;animation:none}
@media(min-width:861px){.gp-globo{width:360px;max-width:none;height:232px}.gp-guia.gp-abajo{width:auto}}
.gp-arriba-acc{flex:none;height:26px}
.gp-txt{flex:1;min-height:0;overflow:hidden;transition:opacity var(--dur-1) var(--curva-entra),transform var(--dur-1) var(--curva-entra)}
.gp-txt.gp-sale{opacity:0;transform:translateY(4px)}
.gp-globo b{min-height:2.3em}
.gp-acc{flex:none;height:44px;margin-top:8px;flex-wrap:nowrap}
.gp-nomas{flex:none;height:22px;margin-top:8px;display:flex!important;visibility:hidden}
.guia-piloto.gp-prueba.gp-ultimo .gp-nomas{visibility:visible}
/* flecha hacia lo iluminado */
.gp-globo.cola-abajo::before{left:var(--cx);bottom:-9px;transform:translateX(-50%) rotate(-45deg)}
.gp-globo.cola-arriba::before{left:var(--cx);bottom:auto;top:-9px;transform:translateX(-50%) rotate(135deg)}
.gp-acc button{white-space:nowrap;font-size:var(--t-3);padding:0 16px;height:40px;line-height:40px}
/* arriba: «← Atrás» a la izquierda y ✕ para cerrar a la derecha */
.gp-arriba-acc{justify-content:space-between;margin:-12px -12px 0 -8px}
.gp-x{font-size:var(--t-4);line-height:1;width:30px;height:30px;padding:0;border-radius:50%}
.gp-x:hover{background:rgba(255,255,255,.08)}
@media(max-width:860px){.gp-acc{gap:8px}.gp-acc button{font-size:var(--t-3);padding:0 12px}}
/* «No volver a mostrar»: en la fila de los botones, chica y a la derecha (solo en el último paso); la burbuja no crece */
.gp-nomas{height:auto!important;margin:0 0 0 auto!important;font-size:var(--t-2);line-height:1.2;white-space:nowrap;display:none!important;visibility:visible!important}
.guia-piloto.gp-prueba.gp-ultimo .gp-nomas{display:flex!important}
.gp-nomas input{width:15px;height:15px;flex:none}
.gp-globo{height:224px}
@media(min-width:861px){.gp-globo{height:204px}}
/* burbuja compacta: medida al texto más largo real (título de 2 renglones y 3 renglones en celular / 2 en computadora) */
.gp-globo{padding:12px 16px 12px;height:194px}
@media(min-width:861px){.gp-globo{height:174px}}
.gp-arriba-acc{height:22px;margin:-8px -8px -2px -8px}
.gp-x{width:26px;height:26px;font-size:var(--t-4)}.gp-atras{padding:4px 8px}
.gp-globo b{font-size:var(--t-5);line-height:1.12;min-height:2.24em}
.gp-globo p{font-size:var(--t-3);line-height:1.3;margin-top:4px}
.gp-acc{height:40px;margin-top:8px}
.gp-acc button{height:38px;line-height:38px}
/* la manita viaja de la burbuja al botón, lo toca (onda) y se repite cada 3 s */
.gp-dedo{animation:gpViaja 3s cubic-bezier(.45,.05,.3,1) infinite!important}
@keyframes gpViaja{
  0%{transform:translate(var(--x0),var(--y0)) scale(.85);opacity:0}
  8%{opacity:1}
  30%{transform:translate(var(--xm),var(--ym)) scale(1)}
  55%{transform:translate(var(--x1),var(--y1)) scale(1)}
  62%{transform:translate(var(--x1),var(--y1)) scale(.8)}
  70%{transform:translate(var(--x1),var(--y1)) scale(1)}
  88%{transform:translate(var(--x1),var(--y1)) scale(1);opacity:1}
  100%{transform:translate(var(--x1),var(--y1)) scale(1);opacity:0}}
.gp-onda{position:fixed;display:none;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;border:3px solid var(--menta,#89FF9E);pointer-events:none;opacity:0;animation:gpOnda 3s var(--curva-entra) infinite}
@keyframes gpOnda{0%,58%{transform:scale(.3);opacity:0}63%{opacity:.95}100%{transform:scale(1.9);opacity:0}}
@media (prefers-reduced-motion:reduce){.gp-dedo{animation:none!important;transform:translate(var(--x1),var(--y1))}.gp-onda{animation:none;opacity:.8}}
/* letra más grande y burbuja a la medida de cada celular: el alto lo pone guia-piloto.js (--gp-h, texto más largo
   medido con el ancho y la letra de ese aparato). Si en una pantalla muy chica no cabe, el texto se desliza por dentro */
.gp-globo{height:auto!important}
.gp-txt{flex:none;height:var(--gp-h,auto);max-height:min(44svh,340px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
.gp-globo b{font-size:clamp(18px,5.3vw,21px);line-height:1.18;min-height:0;overflow-wrap:break-word}
.gp-globo p{font-size:clamp(15.5px,4.5vw,17px);line-height:1.4;margin-top:8px;overflow-wrap:break-word}
@media(min-width:861px){.gp-globo b{font-size:var(--t-6)}.gp-globo p{font-size:var(--t-4)}}
/* celulares angostos (≤ 360 px, como iPhone SE o Android chicos): piloto más chico para dejarle ancho al texto */
@media(max-width:360px){.gp-guia.gp-arriba .gp-piloto{width:62px}.gp-globo{width:calc(100vw - 16px - 66px)}}
/* los pasos cortos quedan centrados en la burbuja (sin hueco abajo); márgenes automáticos: si no cabe, nada se corta arriba */
.gp-txt{display:flex;flex-direction:column}
.gp-txt b{margin-top:auto}.gp-txt p{margin-bottom:auto}
/* ===== Rodrigo (21 oct): piloto abajo con la nota saliendo de él, letra más chica y armónica, ✕ de 44 px, burbuja en fibra de carbono ===== */
.gp-guia.gp-celabajo{left:8px;right:8px;top:auto;transition:bottom var(--dur-3) var(--curva-entra)}
.gp-globo b{font-size:var(--t-4)!important;line-height:1.2!important}
.gp-globo p{font-size:var(--t-3)!important;line-height:1.42!important;margin-top:4px!important;color:#CDD3DB}
@media(min-width:861px){.gp-globo b{font-size:var(--t-5)!important}.gp-globo p{font-size:var(--t-4)!important}}
.gp-acc button{font-size:var(--t-3)}
.gp-atras{font-size:var(--t-2)}
/* ✕ para cerrar: círculo de 44 px en la esquina, centrada (como la de las hojas del menú) */
.gp-x{position:absolute!important;top:-16px;right:-12px;width:44px!important;height:44px!important;padding:0!important;display:flex!important;align-items:center;justify-content:center;
  font-size:var(--t-6)!important;line-height:1;color:#fff!important;background:#15181c!important;border:1px solid rgba(255,255,255,.24)!important;border-radius:50%!important;box-shadow: var(--sombra-2);z-index:3}
.gp-x:hover{background:#22262c!important}
.gp-arriba-acc{justify-content:flex-start!important}
/* fondo: fibra de carbono negra (tejido fino) con un brillo suave arriba */
.gp-globo{background-color:#0b0c0e!important;
  background-image:radial-gradient(120% 90% at 20% 0%,rgba(255,255,255,.07),transparent 60%),
    linear-gradient(27deg,#17191c 3px,transparent 3px),linear-gradient(207deg,#17191c 3px,transparent 3px),
    linear-gradient(27deg,#1e2124 3px,transparent 3px),linear-gradient(207deg,#1e2124 3px,transparent 3px),
    linear-gradient(90deg,#141619 6px,transparent 6px),
    linear-gradient(#16181b 25%,#131517 25%,#131517 50%,transparent 50%,transparent 75%,#1b1d20 75%,#1b1d20)!important;
  background-size:100% 100%,12px 12px,12px 12px,12px 12px,12px 12px,12px 12px,12px 12px!important;
  background-position:0 0,0 3px,6px 0,0 6px,6px 3px,0 0,0 0!important;
  border-color:rgba(var(--menta-rgb,137,255,158),.45)!important;box-shadow:0 18px 40px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.06)!important}
.gp-globo::before{background:#131517!important}
/* ===== modos de manejo (modos.css): los acentos de la guía toman el color del modo; la burbuja de fibra de carbono se queda negra.
   En EV (claro) la guía es isla oscura con el verde brillante (regla de islas en modos.css) ===== */
.gp-otra span{color:var(--texto2,#D5DAE1)}.gp-otra span b{color:var(--tinta,#fff)}
.reg-guia{color:var(--texto,#EEF1F5)}.reg-guia small{color:var(--gris,#9AA3B0)}.reg-guia b{color:var(--tinta,#fff)}
/* Panel › Manuales y videos › Guías rápidas (guias-panel.js) */
.gpn-rej{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.gpn-tj{background:var(--sup,#0F141B);border:1px solid var(--linea);border-top:3px solid var(--c);border-radius:var(--radio-2);padding:16px;display:flex;flex-direction:column;gap:8px}
.gpn-cab{display:flex;gap:12px;align-items:center}.gpn-cab img{width:64px;height:44px;object-fit:contain}
.gpn-cab b{display:block;font-size:var(--t-4)}.gpn-cab small{color:var(--gris);font-weight:700;font-size:var(--t-2)}
.gpn-mod{margin:0;font-size:var(--t-2);color:var(--gris,#9AA3B0);line-height:1.4}
.gpn-acc{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.gpn-sin{display:flex;gap:8px;flex-wrap:wrap}
body>.gpn-aviso{position:fixed!important;left:50%;top:auto;bottom:12px;transform:translateX(-50%);z-index:2147483001!important;display:flex;gap:12px;align-items:center;flex-wrap:wrap;max-width:min(760px,calc(100% - 20px));
  padding:12px 12px 12px 16px;border-radius:var(--radio-2);background:#111418;border:1px solid var(--menta,#89FF9E);box-shadow: var(--sombra-2);font-size:var(--t-3);color:#EEF1F5}
.gpn-aviso span{flex:1 1 300px}.gpn-aviso .btn.chico{pointer-events:none}.gpn-aviso>button.btn{pointer-events:auto!important}
@media (max-width:600px){body>.gpn-aviso{width:calc(100% - 20px)}}
.gpn-mini{position:relative;height:110px;border-radius:var(--radio-2);overflow:hidden;background:radial-gradient(ellipse 70% 90% at 50% 0%,rgba(255,255,255,.10),transparent 70%),#07090C;border:1px solid var(--linea)}
.gpn-mini-foto{position:absolute;right:6px;bottom:4px;height:92px;width:auto;max-width:62%;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(0,0,0,.7))}
.gpn-mini-logo{position:absolute;left:12px;top:12px;height:26px;width:auto;max-width:42%;object-fit:contain}
.gpn-cab small{display:block}
body>.gpn-celmodal{position:fixed!important;inset:0;z-index:9000!important;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:16px}
.gpn-cel{width:406px;max-width:100%;height:min(860px,calc(100vh - 32px));background:#111;border:1px solid var(--linea);border-radius:var(--radio-3);padding:8px;display:flex;flex-direction:column;box-shadow: var(--sombra-3)}
.gpn-cel-bar{display:flex;justify-content:space-between;align-items:center;padding:4px 12px 8px;font:var(--t-2)/1.2 var(--mono,monospace);color:var(--tenue,#9aa)}
.gpn-cel-bar button{background:none;border:0;color:inherit;font-size:var(--t-4);cursor:pointer}
.gpn-cel iframe{flex:1;width:390px;max-width:100%;margin:0 auto;border:0;border-radius:var(--radio-3);background:#000}
.gpn-mini-logo.claro{filter:brightness(0) invert(1)}
.gpn-mini-logo.pastilla{background:#fff;border-radius:var(--radio-1);padding:4px 8px;box-sizing:content-box}
@media (max-width:900px){body>.gpn-aviso{bottom:calc(84px + env(safe-area-inset-bottom))}}
.gpo-t{margin:20px 0 8px;font-size:var(--t-4)}
.gpo td small{display:block;color:var(--gris2,#8A94A3);font-size:var(--t-2);margin-top:2px;max-width:560px}
.gpo-quien{display:inline-block;padding:4px 8px;border-radius:var(--radio-pildora);font-size:var(--t-2);font-weight:700;white-space:nowrap;border:1px solid var(--linea)}
.gpo-quien.q-rodrigo{color:#FFB020;border-color:rgba(255,176,32,.45)}.gpo-quien.q-equipo{color:var(--menta,#89FF9E);border-color:rgba(137,255,158,.4)}.gpo-quien.q-sistema{color:#8A94A3}
/* con el aviso flotante abierto (aviso.js), la barra de vista previa sube para no taparlo */
body:has(>.avf-caja)>.gpn-aviso{top:calc(10px + env(safe-area-inset-top))!important;bottom:auto!important}
/* al desplazar, el cuadro iluminado se mueve sin transición: se queda pegado a lo que resalta (guia-piloto.js, sigue) */
.gp-foco.gp-sin-ir{transition:opacity var(--dur-2)!important}
/* con la configuración abierta («Tu taller», «¿Qué atiendes?»), el Piloto se esconde para no tapar el formulario; el globo sigue */
body:has(#escConfig:not(.oculto)) .gp-guia .gp-pil{display:none}