/* ============================================================================
   Facilu Flow — ayuda contextual (directiva fg-ayuda)
   ----------------------------------------------------------------------------
   Ver mejoras/PLAN_AYUDA_CONTEXTUAL.md. Botón de icono reutilizando
   .fg-btn-icono (sin redefinirlo) + modal con pestañas, ámbito propio
   .fg-modal-ayuda para no pisar ningún otro modal de la aplicación.
   Consume los tokens de facilu-theme.css.
   ========================================================================= */

/* ══ 1. BOTÓN ═════════════════════════════════════════════════════════════ */

/* El botón sigue siendo btn-default (mismo fondo gris que Exportar/Historial):
   solo el icono se pinta del morado de marca, para que se note que es un
   acceso "vivo" sin competir visualmente con btn-primary (Nuevo servicio). */
.fg-btn-ayuda .fa-question-circle {
    color: var(--fg-p);
}

.fg-btn-ayuda:hover .fa-question-circle,
.fg-btn-ayuda:focus .fa-question-circle {
    color: var(--fg-pd);
}

/* Variante con etiqueta (Home): el texto pega al icono, mismo tamaño que
   cualquier btn-sm del resto de la app — no se redefine .fg-btn-icono para
   no afectar los botones de solo-icono que ya existen en otras pantallas. */
.fg-btn-ayuda-etiqueta {
    width: auto;
    padding-left: 10px;
    padding-right: 10px;
}

/* Franja superior de Home (Main.html): no hay ningun box-header propio ahi,
   asi que el boton con etiqueta va en una fila nueva, alineada a la derecha,
   sin reordenar ni ocultar nada de las noticias/chat/cumpleaños de abajo. */
.fg-home-barra {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

/* ══ 2. MODAL ═════════════════════════════════════════════════════════════ */

.fg-modal-ayuda .modal-title .fa-question-circle {
    color: var(--fg-p);
}

.fg-modal-ayuda .modal-body {
    padding-top: 14px;
}

/* Botón "Volver" de una guía paso a paso (ver bloque 13): a la izquierda del
   título, mismo sitio donde AdminLTE deja aire en la cabecera de una modal.
   Solo aparece con `pila.length` — nunca convive con el botón cerrar. */
.fg-ayuda-volver {
    float: left;
    margin-top: 2px;
    padding: 3px 4px;
    border: 0;
    background: transparent;
    color: var(--fg-p);
    font-size: 12.5px;
    font-weight: 600;
}

.fg-ayuda-volver:hover,
.fg-ayuda-volver:focus {
    color: var(--fg-pd);
    text-decoration: underline;
}

.fg-ayuda-volver .fa { margin-right: 4px; }

/* ══ 3. BUSCADOR Y RESULTADOS ═════════════════════════════════════════════
   Atajo para quien ya sabe qué duda tiene: escribe "cancelar" y ve todas las
   coincidencias del manual con la pestaña de la que salen, sin recorrerlas. */

.fg-ayuda-buscador {
    position: relative;
    margin-bottom: 14px;
}

.fg-ayuda-buscador > .fa-search {
    position: absolute;
    top: 50%;
    left: 11px;
    margin-top: -7px;
    font-size: 13px;
    color: var(--fg-muted);
    pointer-events: none;
}

.fg-ayuda-buscador .form-control {
    height: 38px;
    padding-left: 32px;
    padding-right: 32px;
    border-color: var(--fg-line);
    border-radius: 6px;
    background-color: var(--fg-soft);
    font-size: 13px;
}

.fg-ayuda-buscador .form-control:focus {
    background-color: #fff;
    border-color: var(--fg-p);
    box-shadow: 0 0 0 3px var(--fg-ring);
}

.fg-ayuda-buscador-x {
    position: absolute;
    top: 50%;
    right: 8px;
    margin-top: -11px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--fg-muted);
    font-size: 12px;
    line-height: 22px;
}

.fg-ayuda-buscador-x:hover { background-color: var(--fg-line); color: var(--fg-ink); }

.fg-ayuda-res-cuenta {
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

.fg-ayuda-res {
    padding: 9px 0;
    border-bottom: 1px solid var(--fg-line);
    font-size: 13px;
    line-height: 1.5;
}

.fg-ayuda-res:last-child { border-bottom: 0; }

.fg-ayuda-res-origen {
    margin-bottom: 2px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fg-p);
}

.fg-ayuda-res-origen .fa { margin-right: 4px; }

.fg-ayuda-res-texto b { color: var(--fg-ink); }
.fg-ayuda-res-texto span { color: var(--fg-muted); }

.fg-ayuda-res-vacio {
    padding: 30px 16px;
    text-align: center;
    color: var(--fg-muted);
}

.fg-ayuda-res-vacio .fa {
    display: block;
    margin-bottom: 8px;
    font-size: 24px;
    color: #CBD5E1;
}

.fg-ayuda-res-vacio b { display: block; margin-bottom: 3px; color: var(--fg-ink); }
.fg-ayuda-res-vacio span { font-size: 12.5px; }

/* ══ 4. PESTAÑAS ══════════════════════════════════════════════════════════ */

.fg-ayuda-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid var(--fg-line);
    margin-bottom: 16px;
}

.fg-ayuda-tabs > li {
    float: none;
    flex: 0 0 auto;
}

.fg-ayuda-tabs > li > a {
    padding: 8px 14px;
    margin-right: 2px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--fg-muted);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.fg-ayuda-tabs > li > a:hover,
.fg-ayuda-tabs > li > a:focus {
    background-color: var(--fg-soft);
    border-color: transparent;
    color: var(--fg-ink);
}

.fg-ayuda-tabs > li.active > a,
.fg-ayuda-tabs > li.active > a:hover,
.fg-ayuda-tabs > li.active > a:focus {
    background-color: transparent;
    border-color: transparent transparent var(--fg-p);
    color: var(--fg-p);
}

.fg-ayuda-tabs .fa {
    margin-right: 4px;
}

/* ══ 5. CONTENIDO ═════════════════════════════════════════════════════════ */

.fg-ayuda-tab-content {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--fg-ink);
}

.fg-ayuda-tab-content p {
    margin: 0 0 10px;
}

.fg-ayuda-tab-content p:last-child {
    margin-bottom: 0;
}

/* ══ 6. PASOS NUMERADOS ═══════════════════════════════════════════════════
   "Cómo usar la pantalla" / "Ejemplo práctico": una guía a seguir, no una
   lista suelta — cada paso con su número y, si aplica, el mismo icono que
   tiene el control real en la pantalla. */

.fg-ayuda-pasos {
    list-style: none;
    margin: 0 0 4px;
    padding: 0;
}

.fg-ayuda-pasos > li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--fg-line);
}

.fg-ayuda-pasos > li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.fg-ayuda-paso-num {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--fg-p);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    text-align: center;
    line-height: 22px;
}

.fg-ayuda-paso-texto .fa {
    margin-right: 5px;
    width: 14px;
    text-align: center;
    color: var(--fg-p);
}

/* ══ 7. ESTADOS ═══════════════════════════════════════════════════════════
   La pastilla tal como se ve en la grilla, qué significa y qué hacer con ella.
   Los colores replican los de facilu-servicios.css / facilu-conductores.css a
   proposito: si en la pantalla "Sin Mensajero" es rojo, en el manual tiene que
   verse rojo, o el usuario no lo reconoce. */

.fg-ayuda-estado {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--fg-line);
}

.fg-ayuda-estado:last-child { border-bottom: 0; padding-bottom: 0; }

.fg-ayuda-pill {
    flex: 0 0 auto;
    min-width: 104px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

.fg-ayuda-estado-txt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    line-height: 1.45;
}

.fg-ayuda-estado-accion {
    color: var(--fg-muted);
    font-size: 12.5px;
}

.fg-ayuda-estado-accion .fa {
    margin-right: 5px;
    color: var(--fg-p);
}

/* Mismos valores que las pastillas reales de la aplicación. */
.fg-ayuda-pill.fg-pill-rojo { background-color: var(--fg-danger-btn); color: #fff; }
.fg-ayuda-pill.fg-pill-naranja { background-color: #C2410C; color: #fff; }
.fg-ayuda-pill.fg-pill-verde { background-color: var(--fg-success-btn); color: #fff; }
.fg-ayuda-pill.fg-pill-ambar { background-color: var(--fg-warning); color: var(--fg-warning-ink); }
.fg-ayuda-pill.fg-pill-morado { background-color: var(--fg-p); color: #fff; }
.fg-ayuda-pill.fg-pill-verde-suave { background-color: #D1FAE5; color: #065F46; }
.fg-ayuda-pill.fg-pill-rojo-suave { background-color: #FEE2E2; color: #991B1B; }
.fg-ayuda-pill.fg-pill-gris { background-color: var(--fg-soft); color: var(--fg-muted); border: 1px solid var(--fg-line); }

/* ══ 8. TARJETAS DE ACCIÓN ════════════════════════════════════════════════
   "Acciones disponibles": una tarjeta por botón/acción real, agrupadas por
   dónde vive cada una en la pantalla (cabecera, fila, menú "más acciones"). */

.fg-ayuda-grupo {
    margin-bottom: 16px;
}

.fg-ayuda-grupo:last-child {
    margin-bottom: 0;
}

.fg-ayuda-grupo-titulo {
    margin-bottom: 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

.fg-ayuda-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.fg-ayuda-card {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 10px;
    border: 1px solid var(--fg-line);
    border-radius: 6px;
    background-color: var(--fg-soft);
}

.fg-ayuda-card > .fa {
    flex: 0 0 auto;
    margin-top: 1px;
    width: 15px;
    text-align: center;
    color: var(--fg-p);
}

.fg-ayuda-card-texto {
    font-size: 12.5px;
    line-height: 1.4;
}

.fg-ayuda-card-texto b {
    color: var(--fg-ink);
}

/* ══ 9. AVISOS (CONSEJO / ATENCIÓN) ═══════════════════════════════════════
   El "ojo con esto" que hoy se aprende preguntando o equivocándose. */

.fg-ayuda-aviso {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    border-left: 3px solid;
    font-size: 12.5px;
    line-height: 1.5;
}

.fg-ayuda-aviso > .fa { margin-top: 2px; font-size: 14px; }

.fg-ayuda-aviso-tip {
    border-left-color: var(--fg-p);
    background-color: var(--fg-soft);
    color: var(--fg-ink);
}

.fg-ayuda-aviso-tip > .fa { color: var(--fg-p); }

.fg-ayuda-aviso-ojo {
    border-left-color: var(--fg-warning);
    background-color: #FFFBEB;
    color: var(--fg-warning-ink);
}

.fg-ayuda-aviso-ojo > .fa { color: #B45309; }

/* ══ 10. ENLACES A OTRAS PANTALLAS ════════════════════════════════════════
   Cierran la ayuda y navegan: el usuario no tiene que buscar la pantalla en
   el menú después de leer que debe ir a ella. */

.fg-ayuda-enlaces {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--fg-line);
}

.fg-ayuda-ir {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border: 1px solid var(--fg-line);
    border-radius: 6px;
    background-color: #fff;
    color: var(--fg-p);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}

.fg-ayuda-ir:hover,
.fg-ayuda-ir:focus {
    background-color: var(--fg-soft);
    border-color: var(--fg-p);
    color: var(--fg-pd);
    text-decoration: none;
}

.fg-ayuda-ir-flecha { font-size: 11px; opacity: .7; }

/* ══ 11. PREGUNTAS FRECUENTES (ACORDEÓN) ══════════════════════════════════
   Se expande al hacer clic en la pregunta. Es CSS puro (checkbox oculto +
   selector de hermanos): no depende del plugin collapse de Bootstrap ni de
   ningún manejador propio en la directiva. */

.fg-ayuda-faq-item {
    border-bottom: 1px solid var(--fg-line);
}

.fg-ayuda-faq-item:last-child {
    border-bottom: 0;
}

.fg-ayuda-faq-check {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.fg-ayuda-faq-pregunta {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 10px 2px;
    font-weight: 600;
    font-size: 13px;
    color: var(--fg-ink);
    cursor: pointer;
}

.fg-ayuda-faq-pregunta:hover {
    color: var(--fg-p);
}

.fg-ayuda-faq-pregunta .fa {
    font-size: 11px;
    color: var(--fg-p);
    transition: transform .15s ease;
}

.fg-ayuda-faq-respuesta {
    max-height: 0;
    overflow: hidden;
    padding: 0 2px;
    color: var(--fg-muted);
    font-size: 12.5px;
    line-height: 1.5;
    transition: max-height .25s ease, padding .25s ease;
}

.fg-ayuda-faq-check:checked ~ .fg-ayuda-faq-pregunta .fa {
    transform: rotate(90deg);
}

.fg-ayuda-faq-check:checked ~ .fg-ayuda-faq-respuesta {
    max-height: 400px;
    padding: 0 2px 12px;
}

.fg-ayuda-faq-check:focus-visible ~ .fg-ayuda-faq-pregunta {
    outline: 2px solid var(--fg-ring);
    outline-offset: 2px;
}

/* ══ 13. CAPTURAS REALES ══════════════════════════════════════════════════
   Imagen recortada de la pantalla real + círculos numerados superpuestos en
   % (no quemados en el PNG, ver mejoras/PLAN_AYUDAS_VISUALES.md §6.1): así
   se puede recapturar tras un rediseño visual sin volver a anotar nada. */

.fg-ayuda-capturas {
    margin-top: 12px;
}

.fg-ayuda-captura {
    margin: 0 0 14px;
}

.fg-ayuda-captura:last-child { margin-bottom: 0; }

.fg-ayuda-captura-img {
    position: relative;
    overflow: auto;
    border: 1px solid var(--fg-line);
    border-radius: 6px;
    background-color: var(--fg-soft);
}

.fg-ayuda-captura-img img {
    display: block;
    width: 100%;
    max-width: 100%;
}

.fg-ayuda-captura-punto {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: -11px;
    margin-top: -11px;
    border-radius: 50%;
    border: 2px solid #fff;
    background-color: var(--fg-p);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(0,0,0,.35);
    pointer-events: none;
}

.fg-ayuda-captura figcaption {
    margin-top: 6px;
    font-size: 12px;
    color: var(--fg-muted);
    text-align: center;
}

/* ══ 14. GUÍAS PASO A PASO ════════════════════════════════════════════════
   Tarjetas del índice (pestaña "Guías paso a paso" de Home): cada una abre
   otra clave DENTRO del mismo modal (ver `abrirContenido` en fg-ayuda.js),
   no navega de pantalla. */

.fg-ayuda-guias {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fg-ayuda-guia-card {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--fg-line);
    border-radius: 6px;
    background-color: #fff;
    text-align: left;
    cursor: pointer;
}

.fg-ayuda-guia-card:hover,
.fg-ayuda-guia-card:focus {
    border-color: var(--fg-p);
    background-color: var(--fg-soft);
    outline: none;
}

.fg-ayuda-guia-card > .fa-map-signs {
    flex: 0 0 auto;
    width: 20px;
    text-align: center;
    font-size: 16px;
    color: var(--fg-p);
}

.fg-ayuda-guia-texto {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
}

.fg-ayuda-guia-texto b { color: var(--fg-ink); }
.fg-ayuda-guia-texto span { font-size: 12px; color: var(--fg-muted); }

.fg-ayuda-guia-flecha {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--fg-muted);
}

/* ══ 12. RESPONSIVO ═══════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    .fg-ayuda-tabs > li > a {
        padding: 7px 10px;
        font-size: 12px;
    }
}

@media (max-width: 640px) {
    .fg-ayuda-cards {
        grid-template-columns: 1fr;
    }

    /* La pastilla pasa arriba del texto: a este ancho, dejarla en su propia
       columna dejaba la explicación en dos palabras por línea. */
    .fg-ayuda-estado {
        flex-direction: column;
        gap: 5px;
    }

    .fg-ayuda-pill { min-width: 0; align-self: flex-start; }
}