/**
 * @file tour-equiatext.css
 * @brief Estilos del tour guiado de EquIAtext.
 * @ingroup estilos
 */

.acciones-cabecera-aplicacion {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
}

.contenedor-guia-rapida {
    position: relative;
    flex: 0 0 auto;
}

.invitacion-tour[hidden] {
    display: none !important;
}

.invitacion-tour {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 1200;

    width: min(370px, calc(100vw - 28px));
    padding: 16px 17px 14px;

    border: 1px solid #d9cdeb;
    border-radius: 14px;

    background:
        linear-gradient(135deg, rgba(238, 234, 245, 0.78), rgba(255, 255, 255, 0) 48%),
        #fff;
    color: #352d40;

    box-shadow:
        0 15px 38px rgba(45, 31, 68, 0.20),
        0 3px 10px rgba(86, 67, 118, 0.10);

    animation: eq-invitacion-entrada 0.22s ease-out;
}

.invitacion-tour::before {
    content: "";
    position: absolute;
    top: -7px;
    right: 34px;
    width: 13px;
    height: 13px;
    border-top: 1px solid #d9cdeb;
    border-left: 1px solid #d9cdeb;
    background: #f8f5fc;
    transform: rotate(45deg);
}

.invitacion-tour-titulo {
    display: block;
    margin: 0 0 6px;
    color: #4a3678;
    font-family: 'Poppins', sans-serif;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.35;
}

.invitacion-tour-texto {
    margin: 0;
    color: #5a5263;
    font-size: 13.5px;
    line-height: 1.5;
}

.invitacion-tour-acciones {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 11px;
}

.invitacion-tour-accion {
    min-height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #564376;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.invitacion-tour-accion:hover {
    opacity: 1;
    color: #c94f7c;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.invitacion-tour-accion:focus-visible {
    outline: 3px solid #d8c9ea;
    outline-offset: 3px;
}

.invitacion-tour-separador {
    color: #a297ac;
    font-weight: 700;
}

@keyframes eq-invitacion-entrada {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.boton-guia-rapida {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 38px;
    padding: 8px 12px;

    border: 1px solid #d8c9ea;
    border-radius: 8px;

    background: #fff;
    color: #564376;

    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;

    box-shadow: 0 3px 10px rgba(86, 67, 118, 0.08);

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.boton-guia-rapida:hover {
    opacity: 1;
    color: #4a3678;
    background: #f8f5fc;
    border-color: #9f88c2;
    box-shadow: 0 5px 14px rgba(86, 67, 118, 0.14);
    transform: translateY(-1px);
}

.boton-guia-rapida:focus-visible {
    outline: 3px solid #d8c9ea;
    outline-offset: 2px;
}

.boton-guia-rapida svg {
    flex: 0 0 auto;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.eq-tour-raiz[hidden] {
    display: none !important;
}

.eq-tour-raiz {
    position: fixed;
    inset: 0;
    z-index: 50000;
    font-family: 'Inter', sans-serif;
}

.eq-tour-cortina {
    position: fixed;
    z-index: 50000;
    background: rgba(34, 25, 50, 0.61);
    backdrop-filter: blur(1.2px);
    -webkit-backdrop-filter: blur(1.2px);
    pointer-events: auto;
    transition:
        left 0.22s ease,
        top 0.22s ease,
        width 0.22s ease,
        height 0.22s ease;
}

.eq-tour-foco {
    position: fixed;
    z-index: 50001;
    border: 3px solid #c94f7c;
    border-radius: 13px;
    pointer-events: none;

    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.88),
        0 8px 28px rgba(45, 31, 68, 0.28),
        0 0 24px rgba(201, 79, 124, 0.35);

    transition:
        left 0.22s ease,
        top 0.22s ease,
        width 0.22s ease,
        height 0.22s ease;
}

.eq-tour-tooltip {
    position: fixed;
    z-index: 50002;

    width: min(460px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    overflow: auto;

    padding: 22px 22px 18px;

    border: 1px solid #d9cdeb;
    border-radius: 15px;

    background:
        linear-gradient(135deg, rgba(238, 234, 245, 0.76), rgba(255, 255, 255, 0) 42%),
        #fff;
    color: #2c2733;

    box-shadow:
        0 20px 55px rgba(34, 25, 50, 0.30),
        0 4px 15px rgba(86, 67, 118, 0.12);

    outline: none;
}

.eq-tour-tooltip::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    border-radius: 15px 15px 0 0;
    background: linear-gradient(90deg, #564376 0%, #7d62a7 58%, #c94f7c 100%);
}

.eq-tour-cerrar {
    position: absolute;
    top: 11px;
    right: 11px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 31px;
    height: 31px;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: transparent;
    color: #746981;
}

.eq-tour-cerrar:hover {
    opacity: 1;
    background: #eeeaf5;
    color: #564376;
}

.eq-tour-cerrar svg {
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.eq-tour-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-right: 30px;
}

.eq-tour-etiqueta {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #eeeaf5;
    color: #564376;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.eq-tour-contador {
    display: none;
    color: #746981;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.eq-tour-progreso {
    height: 4px;
    margin: 12px 0 15px;
    overflow: hidden;
    border-radius: 999px;
    background: #eeeaf5;
}

.eq-tour-barra {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #564376, #c94f7c);
    transition: width 0.25s ease;
}

.eq-tour-titulo {
    margin: 0 34px 8px 0;
    color: #4a3678;
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
}

.eq-tour-texto {
    color: #4f4857;
    font-size: 16px;
    line-height: 1.6;
}

.eq-tour-texto strong {
    color: #3e3157;
    font-weight: 700;
}

.eq-tour-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #eee8f4;
}

.eq-tour-navegacion {
    display: flex;
    align-items: center;
    gap: 8px;
}

.eq-tour-omitir,
.eq-tour-anterior,
.eq-tour-siguiente {
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
}

.eq-tour-omitir {
    padding-left: 0;
    padding-right: 0;
    background: transparent;
    color: #776d80;
}

.eq-tour-omitir:hover {
    opacity: 1;
    color: #564376;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.eq-tour-anterior {
    border: 1px solid #d8c9ea;
    background: #fff;
    color: #564376;
}

.eq-tour-anterior:hover:not(:disabled) {
    opacity: 1;
    background: #f8f5fc;
}

.eq-tour-anterior:disabled {
    cursor: default;
    opacity: 0.42;
}

.eq-tour-siguiente {
    min-width: 92px;
    background: #564376;
    color: #fff;
    box-shadow: 0 4px 12px rgba(86, 67, 118, 0.20);
}

.eq-tour-siguiente:hover {
    opacity: 1;
    background: #4a3678;
}

.eq-tour-omitir:focus-visible,
.eq-tour-anterior:focus-visible,
.eq-tour-siguiente:focus-visible,
.eq-tour-cerrar:focus-visible {
    outline: 3px solid #d8c9ea;
    outline-offset: 2px;
}

@media (max-width: 680px) {
    .invitacion-tour {
        right: 0;
        width: min(350px, calc(100vw - 24px));
        padding: 15px 16px 13px;
    }

    .invitacion-tour::before {
        right: 11px;
    }

    .acciones-cabecera-aplicacion {
        gap: 7px;
    }

    .boton-guia-rapida {
        width: 36px;
        height: 36px;
        min-height: 36px;
        padding: 0;
    }

    .boton-guia-rapida span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .eq-tour-cortina {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .eq-tour-tooltip {
        width: auto !important;
        max-height: min(62vh, 520px);
        padding: 18px 16px 14px;
        border-radius: 14px;
    }

    .eq-tour-titulo {
        font-size: 20px;
    }

    .eq-tour-texto {
        font-size: 15px;
        line-height: 1.56;
    }

    .eq-tour-pie {
        align-items: flex-end;
    }

    .eq-tour-navegacion {
        gap: 6px;
    }

    .eq-tour-omitir,
    .eq-tour-anterior,
    .eq-tour-siguiente {
        font-size: 13px;
    }
}

@media (max-width: 430px) {
    .eq-tour-pie {
        display: grid;
        grid-template-columns: 1fr auto;
    }

    .eq-tour-omitir {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }

    .eq-tour-navegacion {
        grid-column: 2;
        grid-row: 1;
    }

    .eq-tour-anterior,
    .eq-tour-siguiente {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .eq-tour-cortina,
    .eq-tour-foco,
    .eq-tour-barra,
    .boton-guia-rapida {
        transition: none !important;
    }
}

/*
|--------------------------------------------------------------------------
| Controles de resultados mostrados únicamente durante la guía
|--------------------------------------------------------------------------
*/

.eq-tour-demostracion-descargas {
    margin-top: 24px;
}

.eq-tour-demostracion-descargas .cabecera-explicaciones,
.eq-tour-resultados-demostracion > .cabecera-explicaciones {
    margin-bottom: 0;
}

.eq-tour-control-demostracion {
    pointer-events: none;
    user-select: none;
}

/* Los paneles reales de resultados se hacen visibles temporalmente durante
   el tour. Por defecto se muestra su cabecera; algunos pasos pueden mostrar
   además una sustitución de ejemplo completamente reversible. */
.eq-tour-resultados-demostracion {
    display: block !important;
}

.eq-tour-resultados-demostracion:not(.eq-tour-resultados-demostracion-completa)
    > :not(.cabecera-explicaciones) {
    display: none !important;
}

/* En el paso final del modo Web se muestra una sustitución completa de ejemplo,
   pero se mantienen ocultos los resúmenes y contenedores auxiliares. */
.eq-tour-resultados-demostracion-completa
    > :not(.cabecera-explicaciones):not(.vista-documento) {
    display: none !important;
}

.eq-tour-resultados-demostracion-completa .eq-tour-tarjeta-ejemplo {
    margin-top: 18px;
}

@media (max-width: 640px) {
    .eq-tour-demostracion-descargas {
        margin-top: 18px;
    }
}

/*
|--------------------------------------------------------------------------
| Ajustes responsive del bocadillo y del tour v5
|--------------------------------------------------------------------------
*/

@media (max-width: 680px) {
    /* En móvil el bocadillo deja de depender de la posición horizontal del
       botón. Se centra dentro de la ventana y conserva márgenes seguros. */
    .invitacion-tour {
        position: fixed;
        top: calc(72px + env(safe-area-inset-top, 0px));
        left: max(12px, env(safe-area-inset-left, 0px));
        right: max(12px, env(safe-area-inset-right, 0px));
        width: auto;
        max-width: 420px;
        margin: 0 auto;
        transform: none;
        padding: 15px 16px 13px;
    }

    .invitacion-tour::before {
        display: none;
    }

    .eq-tour-tooltip {
        width: auto !important;
        max-height: none;
        overscroll-behavior: contain;
    }

    .eq-tour-tooltip[data-posicion="arriba-movil"],
    .eq-tour-tooltip[data-posicion="abajo-movil"] {
        left: 12px !important;
        right: 12px !important;
        bottom: auto !important;
    }
}

@media (max-width: 430px) {
    .invitacion-tour {
        top: calc(66px + env(safe-area-inset-top, 0px));
        left: max(8px, env(safe-area-inset-left, 0px));
        right: max(8px, env(safe-area-inset-right, 0px));
        padding: 14px 14px 12px;
    }

    .eq-tour-tooltip[data-posicion="arriba-movil"],
    .eq-tour-tooltip[data-posicion="abajo-movil"] {
        left: 8px !important;
        right: 8px !important;
    }
}


/*
|--------------------------------------------------------------------------
| Tour móvil sin scroll interno v6
|--------------------------------------------------------------------------
*/
@media (max-width: 680px) {
    .eq-tour-tooltip {
        max-height: none !important;
        overflow: visible !important;
        overscroll-behavior: auto;
        transform-origin: top center;
    }

    .eq-tour-tooltip[data-compactado="true"] {
        /* La escala se calcula dinámicamente solo en pantallas muy bajas. */
        box-shadow:
            0 18px 48px rgba(34, 25, 50, 0.30),
            0 4px 14px rgba(86, 67, 118, 0.12);
    }

    .eq-tour-cortina {
        touch-action: pan-y;
    }
}

/* v14 · Icono de copia y sustitución de ejemplo durante la guía rápida. */
.eq-tour-icono-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: -3px;
    margin: 0 3px;
    color: #564376;
}

.eq-tour-icono-inline svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.eq-tour-demostracion-sustitucion {
    margin-top: 24px;
}

.eq-tour-demostracion-sustitucion .selector-alternativa-traductor,
.eq-tour-demostracion-sustitucion button {
    pointer-events: none;
}