/* ── Guía interactiva (2026-08-18) ──────────────────────────
   Burbuja que reemplaza el title="" nativo del navegador al pasar el mouse
   sobre un botón, explicando qué hace. La arma static/js/ayuda.js.
   Aparte de style.css/portal.css a propósito: la usan las dos plantillas
   base (app y portal del cliente) y así no se duplica en ninguna. Usa los
   15 tokens del patrón oro (--navy, --radius-sm) que sirve app-shell.css,
   cargado en ambas bases — no los redefine. */
.ayuda-burbuja {
    display: none;
    position: fixed;
    z-index: 99999;
    max-width: 280px;
    padding: 8px 12px;
    background: var(--navy, #0F2A4A);
    color: #fff;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.8125rem; /* 13px, escala de letra */
    line-height: 1.4;
    border-radius: var(--radius-sm, 4px);
    box-shadow: 0 6px 20px rgba(15, 42, 74, .28);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .12s ease, transform .12s ease;
    pointer-events: none;
}

.ayuda-burbuja-visible {
    opacity: 1;
    transform: translateY(0);
}

.ayuda-burbuja-flecha {
    position: absolute;
    bottom: -5px;
    width: 10px;
    height: 10px;
    background: var(--navy, #0F2A4A);
    transform: translateX(-50%) rotate(45deg);
}

.ayuda-burbuja-abajo .ayuda-burbuja-flecha {
    top: -5px;
    bottom: auto;
}

/* ── El «?» de cada pantalla, solo en el teléfono (2026-09-21) ─────────
   Con ratón están las burbujas de arriba; en pantalla táctil no hay «pasar
   el mouse», así que en su lugar sale un círculo junto al título que lleva a
   la sección de la Guía de esa pantalla (templates/_ayuda_guia.html). Se
   pide --toque-min porque la app se pinta al 80% (--zoom-app): así queda en
   44 px reales, el mismo toque que los botones (antes 50 px = 40 reales). */
.ayuda-guia-tel {
    display: none;
    width: var(--toque-min, 50px);
    height: var(--toque-min, 50px);
    margin-left: 8px;
    border-radius: 50%;
    border: 1px solid var(--navy, #0F2A4A);
    color: var(--navy, #0F2A4A);
    background: transparent;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1.375rem; /* 22px, escala de letra */
    font-weight: 700;
    line-height: calc(var(--toque-min, 50px) - 2px);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
}

@media (hover: none), (pointer: coarse) {
    .ayuda-guia-tel { display: inline-block; }
}