/* ==========================================================
   TUTORIAL GUIADO (js/tutorial.js)

   Tres piezas que trabajan juntas:

     .tut-marco      el holograma: recuadro que rodea el elemento del que
                     se está hablando. Oscurece TODO lo demás con una sombra
                     enorme, así que hace de foco y de velo a la vez.
     .tut-asistente  el panel de A.R.P.I.A. con el texto del paso.
     .tut-globo      la etiqueta corta pegada al holograma.

   El velo va en el marco (box-shadow gigante) y no en un elemento aparte
   para que no haga falta recortar nada: una sola caja produce el hueco
   iluminado y la penumbra de alrededor.

   Nada de esto captura clics salvo los botones del asistente: si algo
   fallara, la página sigue usable por debajo.
   ========================================================== */

.tut-capa {
    position: fixed;
    inset: 0;
    z-index: 9600;          /* por encima del menú (9500 es la hoja de iOS) */
    pointer-events: none;
}

/* ----------------------------------------------------------
   EL HOLOGRAMA
   ---------------------------------------------------------- */

.tut-marco {
    position: fixed;
    border: 1px solid var(--arpia-space);
    border-radius: 10px;
    box-shadow:
        0 0 0 9999px rgba(4, 12, 29, .82),          /* el velo de alrededor */
        0 0 18px rgba(84, 177, 220, .55),
        inset 0 0 22px rgba(84, 177, 220, .16);
    background: rgba(84, 177, 220, .05);
    transition: top .35s cubic-bezier(.4, 0, .2, 1),
                left .35s cubic-bezier(.4, 0, .2, 1),
                width .35s cubic-bezier(.4, 0, .2, 1),
                height .35s cubic-bezier(.4, 0, .2, 1);
    pointer-events: none;
    /* sin overflow:hidden a propósito: las esquinas sobresalen 1px y así
       se leen como corchetes de mira, no como un borde más */
}

/* Sin elemento al que apuntar (bienvenida y cierre): solo el velo */
.tut-marco[data-sin-objetivo="si"] {
    border-color: transparent;
    background: none;
    box-shadow: 0 0 0 9999px rgba(4, 12, 29, .82);
}

/* El recuadro mide 0x0 cuando no hay nada que señalar: sus adornos sobran */
.tut-marco[data-sin-objetivo="si"] .tut-esquina,
.tut-marco[data-sin-objetivo="si"] .tut-escaner {
    display: none;
}

/* Las cuatro esquinas: es lo que da el aire de proyección militar */
.tut-esquina {
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid var(--arpia-space);
}

.tut-esquina[data-e="ni"] { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; }
.tut-esquina[data-e="nd"] { top: -1px; right: -1px; border-left: 0; border-bottom: 0; border-radius: 0 10px 0 0; }
.tut-esquina[data-e="si"] { bottom: -1px; left: -1px; border-right: 0; border-top: 0; border-radius: 0 0 0 10px; }
.tut-esquina[data-e="sd"] { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-radius: 0 0 10px 0; }

/* Línea que barre el interior, como un escáner */
.tut-escaner {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        rgba(84, 177, 220, .85) 20%,
        rgba(84, 177, 220, .85) 80%,
        transparent);
    animation: tut-barrer 2.6s ease-in-out infinite;
}

@keyframes tut-barrer {
    0%, 100% { top: 4%; opacity: .25; }
    50% { top: 94%; opacity: .9; }
}

/* Etiqueta corta pegada al holograma */
.tut-globo {
    position: fixed;
    z-index: 9601;
    max-width: 260px;
    padding: 7px 11px;
    border-radius: 8px;
    border: 1px solid rgba(84, 177, 220, .5);
    background: rgba(15, 27, 48, .96);
    color: var(--arpia-space);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
    pointer-events: none;
    transition: top .35s cubic-bezier(.4, 0, .2, 1),
                left .35s cubic-bezier(.4, 0, .2, 1);
}

/* ----------------------------------------------------------
   EL ASISTENTE
   ---------------------------------------------------------- */

.tut-asistente {
    position: fixed;
    z-index: 9602;
    right: 22px;
    bottom: 22px;
    width: min(390px, calc(100vw - 32px));
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px 18px;
    border-radius: 16px;
    border: 1px solid var(--arpia-border-active);
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(84, 177, 220, .13), transparent 60%),
        var(--arpia-surface);
    box-shadow: 0 20px 48px rgba(0, 0, 0, .62);
    color: var(--arpia-text);
    pointer-events: auto;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .3s ease, transform .3s ease;
}

.tut-asistente[data-visible="si"] {
    opacity: 1;
    transform: translateY(0);
}

/* Cuando el asistente taparía justo lo que señala, se va al otro lado */
.tut-asistente[data-lado="izquierda"] {
    right: auto;
    left: 22px;
}

.tut-asistente[data-lado="arriba"] {
    bottom: auto;
    top: 22px;
}

.tut-cabeza {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* El logo de A.R.P.I.A. proyectado */
.tut-avatar {
    position: relative;
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    animation: tut-flotar 3.6s ease-in-out infinite;
}

@keyframes tut-flotar {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* Anillo que gira alrededor del logo */
.tut-avatar::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        transparent 0deg,
        rgba(84, 177, 220, .75) 70deg,
        transparent 150deg,
        transparent 360deg);
    animation: tut-girar 3.2s linear infinite;
    /* deja solo el borde: el centro se recorta */
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
}

@keyframes tut-girar {
    to { transform: rotate(360deg); }
}

/* Halo detrás, para que parezca emitir luz */
.tut-avatar::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(84, 177, 220, .38), transparent 70%);
    filter: blur(5px);
}

.tut-avatar img {
    position: relative;
    z-index: 1;
    width: 42px;
    height: 42px;
    object-fit: contain;
    border-radius: 50%;
    /* la marca viene en .jpg con fondo claro: se integra al panel oscuro */
    mix-blend-mode: screen;
}

.tut-quien {
    min-width: 0;
}

.tut-quien strong {
    display: block;
    font-size: 13px;
    letter-spacing: .08em;
    color: var(--arpia-space);
}

.tut-quien small {
    display: block;
    font-size: 11px;
    color: var(--arpia-text-muted);
}

.tut-cuerpo h2 {
    margin: 0 0 6px;
    font-size: 16px;
    color: var(--arpia-text);
}

.tut-cuerpo p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--arpia-text-secondary);
}

.tut-cuerpo p + p {
    margin-top: 8px;
}

.tut-cuerpo strong {
    color: var(--arpia-text);
}

/* ----------------------------------------------------------
   AVANCE Y BOTONES
   ---------------------------------------------------------- */

.tut-avance {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.tut-punto {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--arpia-border-active);
    transition: background .2s ease, transform .2s ease;
}

.tut-punto[data-estado="hecho"] { background: var(--arpia-space); opacity: .55; }
.tut-punto[data-estado="aqui"] { background: var(--arpia-space); transform: scale(1.7); }

.tut-conteo {
    margin-left: auto;
    font-size: 11px;
    color: var(--arpia-text-muted);
    font-variant-numeric: tabular-nums;
}

.tut-botones {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tut-boton {
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 15px;
    border-radius: 9px;
    border: 1px solid var(--arpia-border-active);
    background: var(--arpia-elevated);
    color: var(--arpia-text);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.tut-boton:hover {
    background: var(--arpia-border);
    border-color: var(--arpia-space);
}

.tut-boton:focus-visible {
    outline: 2px solid var(--arpia-space);
    outline-offset: 2px;
}

.tut-boton[data-papel="seguir"] {
    margin-left: auto;
    background: var(--arpia-primary);
    border-color: var(--arpia-primary);
}

.tut-boton[data-papel="seguir"]:hover {
    background: var(--arpia-electric);
    border-color: var(--arpia-space);
}

/* Omitir se ve como enlace: presente, pero sin competir con «Siguiente» */
.tut-boton[data-papel="omitir"] {
    border-color: transparent;
    background: none;
    color: var(--arpia-text-muted);
    padding-left: 4px;
    padding-right: 4px;
}

.tut-boton[data-papel="omitir"]:hover {
    background: none;
    color: var(--arpia-text);
    text-decoration: underline;
}

.tut-boton[hidden] {
    display: none;
}

/* ----------------------------------------------------------
   CELULAR
   ---------------------------------------------------------- */

@media (max-width: 760px) {
    .tut-asistente {
        right: 10px;
        left: 10px;
        bottom: 10px;
        bottom: max(10px, env(safe-area-inset-bottom));
        width: auto;
        padding: 13px 14px 15px;
        gap: 10px;
    }

    /* De lado no hay a dónde ir: el panel ocupa todo el ancho */
    .tut-asistente[data-lado="izquierda"] {
        right: 10px;
        left: 10px;
        top: auto;
        bottom: max(10px, env(safe-area-inset-bottom));
    }

    /* Arriba sí se respeta, y hace falta: en una pantalla estrecha es la única
       manera de destapar algo que quede en la mitad de abajo. Sin esto, el
       asistente termina hablando de algo que él mismo está tapando. */
    .tut-asistente[data-lado="arriba"] {
        right: 10px;
        left: 10px;
        bottom: auto;
        top: max(10px, env(safe-area-inset-top));
    }

    .tut-avatar { width: 46px; height: 46px; }
    .tut-avatar img { width: 34px; height: 34px; }
    .tut-cuerpo h2 { font-size: 15px; }
    .tut-cuerpo p { font-size: 13px; }

    /* El globo estorba en pantalla pequeña: el texto ya está en el panel */
    .tut-globo { display: none; }

    .tut-boton { padding: 10px 13px; }
}

/* Pantallas muy bajas (celular en horizontal): el panel no puede comerse todo */
@media (max-height: 460px) {
    .tut-cuerpo p { font-size: 12.5px; line-height: 1.45; }
    .tut-asistente { gap: 8px; padding: 10px 12px 12px; }
    .tut-avatar { width: 38px; height: 38px; }
    .tut-avatar img { width: 28px; height: 28px; }
}

/* ----------------------------------------------------------
   MODO LIGERO Y MOVIMIENTO REDUCIDO

   Mismo tutorial, sin nada que se mueva: en un equipo lento las
   animaciones del holograma se notan más que el propio contenido.
   ---------------------------------------------------------- */

.ligero .tut-escaner,
.ligero .tut-avatar::before {
    animation: none;
}

.ligero .tut-avatar {
    animation: none;
}

.ligero .tut-marco,
.ligero .tut-globo {
    transition: none;
}

.ligero .tut-avatar::before {
    background: conic-gradient(from 0deg, rgba(84, 177, 220, .55), rgba(84, 177, 220, .1));
}

@media (prefers-reduced-motion: reduce) {
    .tut-escaner,
    .tut-avatar,
    .tut-avatar::before {
        animation: none;
    }

    .tut-marco,
    .tut-globo,
    .tut-asistente {
        transition: none;
    }
}