/* =========================================================
   NEXXA PRO — plataforma privada
   · Escalera irregular de dimensiones (viva, respira y flota)
   · Mini-ventanas en cascada al tocar cada peldaño
   · Página de dimensión
   Colores por categoría DEFINITIVOS:
     Descanso turquesa · Alimentación violeta · Movimiento fucsia
   Se carga antes de nexxa-glass-v15.css.
   ========================================================= */

.pro-page {
    padding: clamp(120px, 16vh, 170px) 0 90px;
}

/* ---------- Encabezado ---------- */
.pro-hero {
    max-width: 860px;
    margin-bottom: 56px;
}

.pro-eyebrow {
    margin: 0 0 14px;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    color: #8fe9e8;
    text-shadow: 0 0 16px rgba(143, 233, 232, 0.35);
}

.pro-hero h1,
.pro-dim-copy h1 {
    margin: 0 0 22px;
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.03em;
    color: transparent;
    background:
        linear-gradient(
            110deg,
            #8fe9e8 0%,
            #a99aff 22%,
            #e5b8ff 40%,
            #74dfe7 58%,
            #a98aff 76%,
            #ff76d5 92%,
            #8fe9e8 100%
        );
    background-size: 320% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter:
        drop-shadow(0 0 8px rgba(111, 224, 230, 0.25))
        drop-shadow(0 0 18px rgba(165, 133, 255, 0.22));
    animation: proFlow 9s ease-in-out infinite;
}

@keyframes proFlow {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

.pro-lead {
    max-width: 700px;
    margin: 0 0 28px;
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.8;
    color: rgba(249, 245, 255, 0.82);
}

.pro-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.pro-logout { margin: 0; }

.pro-alert {
    margin: 0 0 22px;
    padding: 12px 16px;
    border: 1px solid rgba(255, 54, 190, 0.45);
    border-radius: 14px;
    color: rgba(255, 235, 250, 0.92);
    background: rgba(255, 54, 190, 0.08);
}

/* ---------- Color por categoría ---------- */
.is-rest { --card-color: rgba(78, 219, 211, 0.94); }
.is-food { --card-color: rgba(173, 137, 239, 0.96); }
.is-move { --card-color: rgba(239, 79, 193, 0.98); }

.pro-card-label {
    display: block;
    font-family: var(--font-display);
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.17em;
    color: color-mix(in srgb, var(--card-color) 78%, white);
}

/* =========================================================
   ESCALERA DIAGONAL DE DIMENSIONES
   Tarjetas = .spotlight-card (mismo cristal e iluminación al pasar el
   cursor que las dimensiones de Inicio, vía app.js). Compactas para no
   tapar el fondo. Al tocar la 1ª se despliegan las otras en diagonal.
   ========================================================= */
.pro-stair {
    --w: clamp(250px, 27vw, 340px);
    --pw: clamp(230px, 23vw, 280px);

    position: relative;
    min-height: 700px;
}

.pro-step {
    position: absolute;
    left: var(--cx, 0px);
    top: var(--cy, 0px);
    z-index: var(--z, 1);
    width: var(--w);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.88);
    transition-property: left, top, opacity, transform, visibility;
    transition-duration: 1800ms, 1800ms, 1300ms, 1800ms, 0s;
    transition-timing-function: cubic-bezier(.2, .8, .2, 1);
    transition-delay: var(--d, 0ms), var(--d, 0ms), var(--d, 0ms), var(--d, 0ms), 0s;
}

.pro-step:nth-child(1) { --z: 3; --k: 0; opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.pro-step:nth-child(2) { --z: 2; --k: 1; }
.pro-step:nth-child(3) { --z: 1; --k: 2; }

/* Desplegada: 1ª arriba-izquierda, 2ª al centro, 3ª abajo-derecha */
.pro-stair.is-expanded .pro-step {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
}

.pro-stair.is-expanded .pro-step:nth-child(2) {
    --cx: calc(50% - var(--w) / 2);
    --cy: 200px;
    --d: 250ms;
}

.pro-stair.is-expanded .pro-step:nth-child(3) {
    --cx: calc(100% - var(--w));
    --cy: 400px;
    --d: 800ms;
}

/* Con vida: flotan suavemente una vez desplegadas */
.pro-stair.is-expanded .pro-step {
    animation: proFloat 7s ease-in-out infinite;
    animation-delay: calc(var(--k, 0) * -2300ms);
}

@keyframes proFloat {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -7px; }
}

/* ---------- Tarjeta ---------- */
.pro-step .pro-card {
    --card-color: inherit;

    display: block;
    width: 100%;
    padding: 14px;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
    border-radius: 28px;
    border: 1px solid color-mix(in srgb, var(--card-color) 40%, rgba(255, 255, 255, 0.2));
    background:
        radial-gradient(
            ellipse at 10% 0%,
            color-mix(in srgb, var(--card-color) 22%, transparent),
            transparent 60%
        ),
        radial-gradient(
            ellipse at 100% 100%,
            color-mix(in srgb, var(--card-color) 11%, transparent),
            transparent 58%
        ),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 38%);
    -webkit-backdrop-filter: blur(4px) saturate(175%);
    backdrop-filter: blur(4px) saturate(175%);
    box-shadow:
        0 24px 64px rgba(38, 18, 64, 0.20),
        0 0 28px color-mix(in srgb, var(--card-color) 16%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

/* La iluminación (::before / ::after) la aporta .spotlight-card;
   aquí solo se refuerzan borde y halo al pasar el cursor o seleccionar */
.pro-step .pro-card:hover,
.pro-step .pro-card:focus-visible,
.pro-step .pro-card[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--card-color) 82%, white);
    box-shadow:
        0 30px 76px rgba(38, 18, 64, 0.26),
        0 0 36px color-mix(in srgb, var(--card-color) 34%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.pro-step .pro-card:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--card-color) 80%, white);
    outline-offset: 4px;
}

/* Imagen compacta (la propia de NEXXA PRO) */
.pro-step-thumb {
    display: block;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--card-color) 38%, rgba(255, 255, 255, 0.18));
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--card-color) 18%, rgba(255, 255, 255, 0.08)),
            rgba(255, 255, 255, 0.02)
        );
}

.pro-step-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pro-card .pro-step-thumb {
    height: 92px;
    margin-bottom: 12px;
}

.pro-card-body {
    display: grid;
    gap: 4px;
    padding: 0 4px 4px;
}

.pro-card-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.3vw, 2rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.04em;
    color: color-mix(in srgb, var(--card-color) 82%, white);
    text-shadow: 0 0 24px color-mix(in srgb, var(--card-color) 36%, transparent);
}

.pro-card-line {
    font-family: var(--font-body);
    font-size: 0.88rem;
    line-height: 1.5;
    color: rgba(249, 245, 255, 0.76);
}

/* Pista inicial (desaparece al desplegar) */
.pro-hint {
    position: absolute;
    left: 8px;
    top: calc(100% + 14px);
    font-family: var(--font-display);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--card-color) 78%, white);
    text-shadow: 0 0 14px var(--card-color);
    animation: proHint 2.4s ease-in-out infinite;
}

.pro-stair.is-expanded .pro-hint {
    visibility: hidden;
    animation: none;
}

@keyframes proHint {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}

/* ---------- Ventanita flotante (al tocar una tarjeta) ---------- */
.pro-pop {
    position: absolute;
    top: 18px;
    left: calc(100% + 14px);
    z-index: 5;
    width: var(--pw);
    padding: 16px 18px 18px;
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--card-color) 62%, rgba(255, 255, 255, 0.2));
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.16) 0%,
            rgba(255, 255, 255, 0.04) 46%,
            rgba(255, 255, 255, 0) 47%
        ),
        linear-gradient(
            120deg,
            color-mix(in srgb, var(--card-color) 30%, transparent),
            color-mix(in srgb, var(--card-color) 8%, transparent)
        );
    -webkit-backdrop-filter: blur(4px) saturate(175%);
    backdrop-filter: blur(4px) saturate(175%);
    box-shadow:
        0 18px 44px rgba(38, 18, 64, 0.28),
        0 0 26px color-mix(in srgb, var(--card-color) 30%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.34);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-14px) scale(0.96);
    transition:
        opacity 600ms ease,
        transform 800ms cubic-bezier(.2, .8, .2, 1),
        visibility 0s linear 600ms;
}

/* La 3ª se abre hacia la izquierda para no salirse de la pantalla */
.pro-step:nth-child(3) .pro-pop {
    left: auto;
    right: calc(100% + 14px);
    top: 44px;
    transform: translateX(14px) scale(0.96);
}

.pro-step.is-open .pro-pop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition-delay: 120ms, 120ms, 0s;
}

.pro-pop-text {
    margin: 0 0 14px;
    font-family: var(--font-body);
    font-size: 0.92rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
}

.pro-pop-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 20px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--card-color) 80%, white);
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.22) 0%,
            rgba(255, 255, 255, 0.05) 46%,
            rgba(255, 255, 255, 0) 47%
        ),
        linear-gradient(
            110deg,
            color-mix(in srgb, var(--card-color) 52%, transparent),
            color-mix(in srgb, var(--card-color) 18%, transparent)
        );
    font-family: var(--font-display);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    text-decoration: none;
    color: #ffffff;
    box-shadow:
        0 8px 20px rgba(38, 18, 64, 0.24),
        0 0 16px color-mix(in srgb, var(--card-color) 30%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.36);
    transition: box-shadow 260ms ease, border-color 260ms ease;
}

.pro-pop-btn::after {
    content: "✦";
    text-shadow: 0 0 10px var(--card-color);
}

.pro-pop-btn:hover,
.pro-pop-btn:focus-visible {
    box-shadow:
        0 12px 26px rgba(38, 18, 64, 0.30),
        0 0 28px color-mix(in srgb, var(--card-color) 52%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.46);
}

/* Cuenta regresiva (~8 s): se pausa si el cursor o el foco están encima */
.pro-pop-bar {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--card-color), rgba(255, 255, 255, 0.9));
    transform-origin: left center;
    opacity: 0;
}

.pro-step.is-open .pro-pop-bar {
    opacity: 0.9;
    animation: proCountdown 8s linear forwards;
}

.pro-step:hover .pro-pop-bar,
.pro-step:focus-within .pro-pop-bar {
    animation-play-state: paused;
}

@keyframes proCountdown {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* =========================================================
   PÁGINA DE DIMENSIÓN
   ========================================================= */
.pro-back {
    display: inline-block;
    margin-bottom: 28px;
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-decoration: none;
    color: color-mix(in srgb, var(--card-color) 80%, white);
    border-bottom: 1px solid color-mix(in srgb, var(--card-color) 45%, transparent);
}

.pro-dim-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: 36px;
    align-items: center;
    margin-bottom: 44px;
}

.pro-dim-visual {
    width: 100%;
    border-radius: 26px;
    box-shadow: 0 0 36px color-mix(in srgb, var(--card-color) 28%, transparent);
}

.pro-dim-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.pro-panel {
    margin-bottom: 24px;
    padding: 28px;
    border-radius: 28px;
    border: 1px solid color-mix(in srgb, var(--card-color) 40%, rgba(255, 255, 255, 0.2));
    background:
        radial-gradient(
            ellipse at 8% 0%,
            color-mix(in srgb, var(--card-color) 20%, transparent),
            transparent 62%
        ),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 40%);
    -webkit-backdrop-filter: blur(4px) saturate(175%);
    backdrop-filter: blur(4px) saturate(175%);
    box-shadow:
        0 24px 64px rgba(38, 18, 64, 0.18),
        0 0 28px color-mix(in srgb, var(--card-color) 14%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    scroll-margin-top: 120px;
}

.pro-dim-columns .pro-panel { margin-bottom: 0; }

.pro-panel h2 {
    margin: 0 0 18px;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    color: color-mix(in srgb, var(--card-color) 82%, white);
}

.pro-acciones {
    display: grid;
    gap: 12px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.pro-acciones li {
    padding: 14px 18px;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--card-color) 30%, rgba(255, 255, 255, 0.14));
    background: color-mix(in srgb, var(--card-color) 8%, transparent);
    font-family: var(--font-body);
    line-height: 1.6;
    color: rgba(249, 245, 255, 0.86);
}

.pro-note,
.pro-empty {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(249, 245, 255, 0.68);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .pro-dim-hero,
    .pro-dim-columns {
        grid-template-columns: 1fr;
    }

    /* Escalera en vertical, con desfase diagonal hacia la derecha */
    .pro-stair {
        --w: 100%;
        min-height: 0;
        display: grid;
        gap: 14px;
    }

    .pro-step {
        position: relative;
        left: auto;
        top: auto;
        width: min(100%, 440px);
        margin-left: var(--mx, 0%);
        overflow: hidden;
        transition-property: max-height, opacity, transform, visibility;
        transition-duration: 1500ms, 1100ms, 1500ms, 0s;
        transition-delay: var(--d, 0ms), var(--d, 0ms), var(--d, 0ms), 0s;
    }

    .pro-step:nth-child(2) { --mx: 9%; }
    .pro-step:nth-child(3) { --mx: 18%; }

    .pro-step:not(:nth-child(1)) {
        max-height: 0;
        transform: translateY(-18px);
    }

    .pro-stair.is-expanded .pro-step:not(:nth-child(1)) {
        max-height: 560px;
    }

    .pro-stair.is-expanded .pro-step:nth-child(2) { --d: 200ms; }
    .pro-stair.is-expanded .pro-step:nth-child(3) { --d: 650ms; }

    .pro-stair.is-expanded .pro-step { animation: none; }

    /* La ventanita pasa a ir debajo de su tarjeta */
    .pro-pop,
    .pro-step:nth-child(3) .pro-pop {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: auto;
        max-height: 0;
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-width: 0;
        transform: translateY(-10px);
    }

    .pro-step.is-open .pro-pop {
        max-height: 240px;
        margin-top: 12px;
        padding: 16px 18px 18px;
        border-width: 1px;
        transform: none;
    }

    .pro-hint { left: 6px; }
}

@media (max-width: 560px) {
    .pro-card .pro-step-thumb { height: 76px; }
}

/* ---------- Accesibilidad: sin movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
    .pro-hero h1,
    .pro-dim-copy h1,
    .pro-stair.is-expanded .pro-step,
    .pro-hint {
        animation: none;
    }

    .pro-step,
    .pro-pop {
        transition-duration: 1ms;
        transition-delay: 0s;
    }
}