/* ============================================================================
   00 GUIA AFB — Estilos de la guía de primer uso
   ----------------------------------------------------------------------------
   ⚠ ESTE ES EL ORIGINAL. Las copias dentro de cada app se sobrescriben con
   `hacer-inline.js` + `llevar-inline.js` (las de un archivo) o con
   `llevar-a-la-app.js` (09, que carga módulos). No edites la copia.

   ── Se pinta con los colores de su anfitrión ──
   Mismo método que `00 SUITE AFB`: todo en tokens, y los tokens son los que ya
   usan las apps. Si la app no define alguno, abajo hay un valor de emergencia
   —claro y oscuro— para que la guía nunca salga sin color. `var(--x, respaldo)`
   toma siempre el de la app cuando existe.

   ── La regla del foco ──
   El agujero que ilumina el elemento NO se dibuja recortando nada: es una
   `box-shadow` de 9999px que oscurece todo lo de fuera. Es una sola capa, no
   estorba al dedo (`pointer-events:none`) y funciona sobre cualquier fondo,
   que es lo que hace falta cuando el mismo bloque tiene que servir en seis
   apps que no se parecen.
   ========================================================================== */

:root {
  --guia-superficie: var(--superficie, #ffffff);
  --guia-superficie-2: var(--superficie-2, #f0f2f5);
  --guia-borde: var(--borde, #dfe3e8);
  --guia-texto: var(--texto, #16202c);
  --guia-texto-2: var(--texto-2, #5b6b7c);
  --guia-acento: var(--acento, #2563a5);
  --guia-sobre-acento: #ffffff;
  --guia-aviso: var(--aviso, #b26a00);
  --guia-sombra: var(--sombra, 0 1px 2px rgba(16,32,44,.06), 0 10px 30px rgba(16,32,44,.18));
  --guia-r: var(--r, 10px);
  /* Lo de fuera del foco. Más claro en tema claro: oscurecer al 80% una app
     blanca la deja negra y asusta más de lo que guía. */
  --guia-velo: rgba(16, 32, 44, .55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --guia-superficie: var(--superficie, #151d27);
    --guia-superficie-2: var(--superficie-2, #1c2734);
    --guia-borde: var(--borde, #27343f);
    --guia-texto: var(--texto, #e7edf3);
    --guia-texto-2: var(--texto-2, #94a5b8);
    --guia-acento: var(--acento, #7fb0e0);
    --guia-sobre-acento: #0d1219;
    --guia-aviso: var(--aviso, #e0a83c);
    --guia-velo: rgba(4, 8, 13, .74);
  }
}
:root[data-tema="oscuro"] {
  --guia-superficie: var(--superficie, #151d27);
  --guia-superficie-2: var(--superficie-2, #1c2734);
  --guia-borde: var(--borde, #27343f);
  --guia-texto: var(--texto, #e7edf3);
  --guia-texto-2: var(--texto-2, #94a5b8);
  --guia-acento: var(--acento, #7fb0e0);
  --guia-sobre-acento: #0d1219;
  --guia-aviso: var(--aviso, #e0a83c);
  --guia-velo: rgba(4, 8, 13, .74);
}

/* Por encima de todo lo de la app, incluidos sus modales. La guía es lo único
   que puede estar hablando en un momento dado. */
.afb-guia { position: fixed; inset: 0; z-index: 9000; display: none; }
.afb-guia.ver { display: block; }

.afb-guia-foco {
  position: absolute; border-radius: 8px;
  box-shadow: 0 0 0 9999px var(--guia-velo);
  border: 2px solid var(--guia-acento);
  transition: all .22s cubic-bezier(.3,.7,.3,1);
  pointer-events: none;
}
/* Cuando el paso no señala nada, el velo cubre la pantalla entera y el marco
   desaparece: sin esto queda un rectángulo de 0px con borde, que se ve como
   una mota rara en medio de la pantalla. */
.afb-guia-foco.sin { border-color: transparent; border-radius: 0; }

.afb-guia-tarjeta {
  position: absolute; width: min(360px, calc(100vw - 24px));
  background: var(--guia-superficie); color: var(--guia-texto);
  border: 1px solid var(--guia-borde); border-radius: var(--guia-r);
  box-shadow: var(--guia-sombra); padding: 16px 18px 14px;
  transition: top .22s, left .22s;
  /* `border-box` a propósito: varias apps declaran `*{box-sizing:border-box}`
     y otras no. Sin esto, el ancho de la tarjeta cambia de app en app. */
  box-sizing: border-box;
}
.afb-guia-tarjeta h3 {
  margin: 0 0 6px; font-size: 17px; font-weight: 700; line-height: 1.25;
  color: var(--guia-texto);
}
.afb-guia-tarjeta p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--guia-texto); }
.afb-guia-tarjeta p + p { margin-top: 9px; }
.afb-guia-tarjeta b { color: var(--guia-acento); font-weight: 600; }
/* `em` no es cursiva aquí: es el renglón de «ojo con esto». Una advertencia en
   cursiva dentro de un párrafo pequeño se pierde; en color, no. */
.afb-guia-tarjeta em { font-style: normal; color: var(--guia-aviso); font-weight: 600; }
.afb-guia-tarjeta ul { margin: 8px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.5; }
.afb-guia-tarjeta li + li { margin-top: 4px; }

.afb-guia-pie { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.afb-guia-cuenta { font-size: 12px; color: var(--guia-texto-2); margin-right: auto; }
.afb-guia-bt {
  padding: 8px 14px; border-radius: 8px; border: 1px solid var(--guia-borde);
  background: var(--guia-superficie-2); color: var(--guia-texto);
  font: inherit; font-size: 13px; cursor: pointer;
}
.afb-guia-bt:hover { border-color: var(--guia-acento); }
.afb-guia-bt.fuerte { background: var(--guia-acento); color: var(--guia-sobre-acento); border-color: var(--guia-acento); }
.afb-guia-bt.plana { border-color: transparent; background: none; color: var(--guia-texto-2); padding: 8px 4px; }
.afb-guia-bt.plana:hover { color: var(--guia-texto); }
.afb-guia-bt:focus-visible { outline: 2px solid var(--guia-acento); outline-offset: 2px; }

/* El botón «?» que la vuelve a abrir. Se cuelga de la barra que la app diga. */
.afb-guia-abrir {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--guia-borde); background: var(--guia-superficie-2);
  color: var(--guia-texto-2); font: inherit; font-size: 15px; font-weight: 700;
  cursor: pointer; flex: none; line-height: 1;
}
.afb-guia-abrir:hover { color: var(--guia-acento); border-color: var(--guia-acento); }
.afb-guia-abrir:focus-visible { outline: 2px solid var(--guia-acento); outline-offset: 2px; }

/* ── En el teléfono, ancha pero NO clavada abajo ──
   Clavarla abajo parecía lo sensato y era el defecto: casi todo lo que una guía
   señala en un teléfono es la barra de pestañas, que vive exactamente ahí. La
   tarjeta se sentaba encima del foco y tapaba justo lo que estaba explicando —
   el texto se leía perfecto y no se veía nada de lo que hablaba.

   Ahora ocupa el ancho, y DÓNDE va lo decide `coloca()`: encima del elemento
   cuando no hay sitio debajo, que en una barra inferior es siempre. */
@media (max-width: 560px) {
  .afb-guia-tarjeta { width: calc(100vw - 24px); }
}

@media (prefers-reduced-motion: reduce) {
  .afb-guia-foco, .afb-guia-tarjeta { transition: none; }
}

@media print { .afb-guia { display: none !important; } }