/*
 * Zorros animados del login central y del registro de academia
 * (partials/auth-foxes.blade.php + public/js/auth-foxes.js).
 *
 * El escenario va encima de la tarjeta (.u-auth-panel): reserva su hueco con
 * margin-top solo cuando hay JS (clase fx-js en <html>) y el SVG asoma un
 * 9 % de su ancho sobre el borde superior de la tarjeta, dentro del padding
 * (no tapa ningún campo). Decorativo: aria-hidden y sin eventos de puntero.
 */
:root {
    --fx-w: 190px;           /* ancho de un zorro */
    --fx-ratio: 1.04;        /* alto / ancho del viewBox (520 / 500) */
    --fx-overlap: .09;       /* parte del zorro sobre la tarjeta */
}
.fx-stage { display: none; }

.fx-js .u-auth-panel:has(> .fx-stage) {
    margin-top: calc(var(--fx-w) * (var(--fx-ratio) - var(--fx-overlap)));
}
.fx-js .fx-stage {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: calc(var(--fx-w) * var(--fx-ratio));
    transform: translateY(calc(var(--fx-w) * var(--fx-overlap)));
    pointer-events: none;
    z-index: 1;
}
.fx-js .fx-stage.fx-empty { display: none; }
.fx-fox {
    flex: 0 0 var(--fx-w);
    width: var(--fx-w);
    height: calc(var(--fx-w) * var(--fx-ratio));
    opacity: 0;
    transition: opacity .35s ease;
}
.fx-ready .fx-fox { opacity: 1; }
.fx-fox svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Los tres juntos (fin de semana): más pequeños y algo solapados. */
.fx-stage.fx-count-2, .fx-stage.fx-count-3 { --fx-w: 150px; }
.fx-count-3 .fx-fox + .fx-fox { margin-left: -22px; }
.fx-count-2 .fx-fox + .fx-fox { margin-left: -10px; }
.fx-js .u-auth-panel:has(> .fx-stage.fx-count-2),
.fx-js .u-auth-panel:has(> .fx-stage.fx-count-3) {
    margin-top: calc(150px * (var(--fx-ratio) - var(--fx-overlap)));
}

/* Modo oscuro: un halo suave despega los contornos oscuros del fondo. */
html[data-u-theme="dark"] .fx-fox svg { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .45)); }
@media (prefers-color-scheme: dark) {
    html[data-u-theme="auto"] .fx-fox svg { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .45)); }
}

/* Móvil (390 px): más pequeños; nunca más anchos que la pantalla. */
@media (max-width: 520px) {
    :root { --fx-w: 140px; }
    .fx-stage.fx-count-2, .fx-stage.fx-count-3 { --fx-w: 112px; }
    .fx-js .u-auth-panel:has(> .fx-stage.fx-count-2),
    .fx-js .u-auth-panel:has(> .fx-stage.fx-count-3) {
        margin-top: calc(112px * (var(--fx-ratio) - var(--fx-overlap)));
    }
    .fx-count-3 .fx-fox + .fx-fox { margin-left: -16px; }
}

/* Registro largo (data-fx-sticky): en escritorio, cuando el escenario ya no
 * se ve, se queda fijo a la izquierda de la tarjeta para seguir el campo activo. */
@media (min-width: 1280px) {
    .fx-js .fx-stage[data-fx-sticky="1"].fx-stuck {
        position: fixed;
        top: 96px;
        left: calc(50% - 260px - 24px - var(--fx-w));
        bottom: auto;
        height: auto;
        transform: none;
        display: block;
        width: var(--fx-w);
    }
    .fx-js .fx-stage[data-fx-sticky="1"].fx-stuck .fx-fox + .fx-fox { margin-left: 0; }
    .fx-js .fx-stage[data-fx-sticky="1"].fx-stuck .fx-fox {
        width: var(--fx-w);
        flex: none;
    }
}

/* Botón «mostrar contraseña» dentro del campo. */
.fx-pass-wrap { position: relative; }
.fx-pass-wrap > input { padding-right: 46px; width: 100%; }
.fx-pass-toggle {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--u-text-dim, #475569);
    cursor: pointer;
}
.fx-pass-toggle:hover { color: var(--u-text, #0f172a); background: var(--u-surface-2, rgba(15, 23, 42, .06)); }
.fx-pass-toggle:focus-visible {
    outline: 2px solid var(--u-primary, #2563eb);
    outline-offset: 1px;
}
.fx-pass-toggle svg { pointer-events: none; }