html, body {
    font-family: 'Roboto', sans-serif;
    overflow: hidden;
    background-color: #07101f;
}

/* =====================================================
   LOADING SCREEN — ECF ELITE ATHLETICS EXPERIENCE
   Stadium spotlights · Perspective track · Lens flare
   ===================================================== */

.loading-page {
    min-height: 100vh;
    min-width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Rich layered navy background */
    background:
        radial-gradient(ellipse 120% 80% at 50% -10%, rgba(0,18,40,1)        0%, transparent 55%),
        radial-gradient(ellipse 80%  60% at 50%  50%, rgba(10,28,60,0.60)    0%, transparent 60%),
        radial-gradient(ellipse 100% 40% at 50% 110%, rgba(111,217,142,0.07) 0%, transparent 55%),
        linear-gradient(180deg, #03091a 0%, #07101f 40%, #050e1c 100%);
    position: fixed;
    top: 0; left: 0;
    z-index: 9999;
    overflow: hidden;
}

/* ── Perspective running track ── */
.lp-track {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    perspective: 700px;
    perspective-origin: 50% 115%;
}

.lp-track-inner {
    position: absolute;
    bottom: -8%;
    left: -25%;
    width: 150%;
    height: 145%;
    transform: rotateX(54deg);
    transform-origin: 50% 100%;
    animation: lp-track-zoom 18s ease-in-out infinite alternate;
}
@keyframes lp-track-zoom {
    0%   { transform: rotateX(54deg) scale(1);    }
    100% { transform: rotateX(54deg) scale(1.06); }
}

.lp-lane {
    position: absolute;
    bottom: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(to top,
        rgba(255,255,255,0.30) 0%,
        rgba(255,255,255,0.07) 55%,
        transparent 100%);
}
.lp-lane:nth-child(1) { left: 10%; width: 2px;
    background: linear-gradient(to top, rgba(111,217,142,0.65) 0%, rgba(111,217,142,0.12) 55%, transparent 100%); }
.lp-lane:nth-child(2) { left: 22%; }
.lp-lane:nth-child(3) { left: 33%; }
.lp-lane:nth-child(4) { left: 44%; }
.lp-lane:nth-child(5) { left: 56%; }
.lp-lane:nth-child(6) { left: 67%; }
.lp-lane:nth-child(7) { left: 78%; }
.lp-lane:nth-child(8) { left: 89%; width: 2px;
    background: linear-gradient(to top, rgba(111,217,142,0.65) 0%, rgba(111,217,142,0.12) 55%, transparent 100%); }

/* Horizontal distance markers */
.lp-track-inner::before {
    content: '';
    position: absolute;
    top: 22%;
    left: 0; right: 0;
    height: 1px;
    background: rgba(255,255,255,0.16);
    box-shadow:
        0  55px 0 rgba(255,255,255,0.11),
        0 115px 0 rgba(255,255,255,0.07),
        0 180px 0 rgba(255,255,255,0.04);
}
/* Finish line golden stripe */
.lp-track-inner::after {
    content: '';
    position: absolute;
    top: 18%;
    left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,215,0,0.50) 10%,
        rgba(255,215,0,0.80) 50%,
        rgba(255,215,0,0.50) 90%,
        transparent 100%);
    box-shadow: 0 6px 0 rgba(255,215,0,0.22);
    animation: lp-finish-pulse 3s ease-in-out infinite;
}
@keyframes lp-finish-pulse {
    0%,100% { opacity: 0.7; }
    50%     { opacity: 1; }
}

/* ── Ambient glows ── */
.lp-glow-1 {
    position: absolute;
    width: 80vw; height: 65vh;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(111,217,142,0.22) 0%, transparent 70%);
    top: -22%; left: -10%;
    animation: lp-glow-pulse 7s ease-in-out infinite alternate;
    z-index: 1;
}
.lp-glow-2 {
    position: absolute;
    width: 65vw; height: 55vh;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255,215,0,0.12) 0%, transparent 70%);
    top: -12%; right: -8%;
    animation: lp-glow-pulse 9s ease-in-out 1s infinite alternate;
    z-index: 1;
}
.lp-glow-3 {
    position: absolute;
    width: 75vw; height: 40vh;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(111,217,142,0.16) 0%, transparent 70%);
    bottom: -14%; left: 12%;
    animation: lp-glow-pulse 11s ease-in-out 2s infinite alternate;
    z-index: 1;
}
@keyframes lp-glow-pulse {
    0%   { opacity: 0.55; transform: scale(1); }
    100% { opacity: 1;    transform: scale(1.10); }
}

/* ── Diagonal energy slashes ── */
.lp-slash {
    position: absolute;
    top: 0; bottom: 0;
    width: 1px;
    z-index: 1;
    animation: lp-slash-fade 6s ease-in-out infinite alternate;
}
.lp-slash--1 {
    left: 18%;
    transform: skewX(-22deg);
    background: linear-gradient(to bottom, transparent 0%, rgba(111,217,142,0.22) 30%, rgba(111,217,142,0.50) 60%, transparent 100%);
    animation-delay: 0s;
}
.lp-slash--2 {
    left: 50%; width: 2px;
    transform: skewX(-16deg);
    background: linear-gradient(to bottom, transparent 0%, rgba(255,215,0,0.12) 25%, rgba(255,215,0,0.40) 55%, transparent 100%);
    animation-delay: 1.5s;
}
.lp-slash--3 {
    left: 80%;
    transform: skewX(-26deg);
    background: linear-gradient(to bottom, transparent 0%, rgba(111,217,142,0.18) 35%, rgba(111,217,142,0.42) 65%, transparent 100%);
    animation-delay: 3s;
}
@keyframes lp-slash-fade {
    0%   { opacity: 0.45; }
    100% { opacity: 1; }
}

/* ── Stadium spotlights (top-down cones) ── */
.lp-spot {
    position: absolute;
    top: 0;
    width: 260px;
    height: 100vh;
    z-index: 1;
    pointer-events: none;
    animation: lp-spot-flicker 8s ease-in-out infinite alternate;
}
.lp-spot--l {
    left: 5%;
    transform: skewX(16deg);
    background: linear-gradient(to bottom, rgba(111,217,142,0.12) 0%, rgba(111,217,142,0.04) 40%, transparent 80%);
    animation-delay: 0s;
}
.lp-spot--r {
    right: 5%;
    transform: skewX(-16deg);
    background: linear-gradient(to bottom, rgba(111,217,142,0.12) 0%, rgba(111,217,142,0.04) 40%, transparent 80%);
    animation-delay: 3s;
}
@keyframes lp-spot-flicker {
    0%   { opacity: 0.50; }
    40%  { opacity: 1.00; }
    60%  { opacity: 0.85; }
    100% { opacity: 0.65; }
}

/* ── Vanishing point lens flare ── */
.lp-flare {
    position: absolute;
    /* sits at the vanishing point of the track — upper centre */
    top: 28%; left: 50%;
    transform: translate(-50%, -50%);
    width: 3px; height: 3px;
    border-radius: 50%;
    z-index: 2;
    /* Core bright dot */
    background: rgba(255,255,255,0.95);
    box-shadow:
        /* tight core */
        0  0   4px  2px rgba(255,255,255,0.80),
        /* green halo */
        0  0  18px  8px rgba(111,217,142,0.55),
        /* gold bloom */
        0  0  40px 16px rgba(255,215,0,0.20),
        /* wide corona */
        0  0  80px 30px rgba(111,217,142,0.10),
        /* horizontal lens streak left */
        -120px 0 60px  2px rgba(255,255,255,0.12),
        -240px 0 80px  1px rgba(111,217,142,0.08),
        /* horizontal lens streak right */
         120px 0 60px  2px rgba(255,255,255,0.12),
         240px 0 80px  1px rgba(255,215,0,0.08),
        /* vertical shaft downward */
        0 60px 40px 2px rgba(111,217,142,0.15),
        0 120px 60px 2px rgba(111,217,142,0.08);
    animation: lp-flare-pulse 4s ease-in-out infinite;
}
@keyframes lp-flare-pulse {
    0%,100% { opacity: 0.70; transform: translate(-50%,-50%) scale(1); }
    50%     { opacity: 1.00; transform: translate(-50%,-50%) scale(1.3); }
}

/* ── Speed streaks ── */
.lp-streaks {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}
.lp-streak {
    position: absolute;
    height: 1px;
    border-radius: 1px;
    opacity: 0;
    animation: lp-streak-fly linear infinite;
}
.lp-streak:nth-child(1) { top: 14%; width: 22%; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(111,217,142,0.85), transparent);
    animation-duration: 2.4s; animation-delay: 0.0s; }
.lp-streak:nth-child(2) { top: 27%; width: 30%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.50), transparent);
    animation-duration: 3.1s; animation-delay: 0.7s; }
.lp-streak:nth-child(3) { top: 38%; width: 18%; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(111,217,142,0.70), transparent);
    animation-duration: 2.0s; animation-delay: 1.2s; }
.lp-streak:nth-child(4) { top: 52%; width: 35%;
    background: linear-gradient(90deg, transparent, rgba(255,215,0,0.55), transparent);
    animation-duration: 3.5s; animation-delay: 0.3s; }
.lp-streak:nth-child(5) { top: 63%; width: 25%; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(111,217,142,0.65), transparent);
    animation-duration: 2.8s; animation-delay: 1.8s; }
.lp-streak:nth-child(6) { top: 75%; width: 20%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.40), transparent);
    animation-duration: 2.2s; animation-delay: 0.5s; }
.lp-streak:nth-child(7) { top: 85%; width: 28%; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(111,217,142,0.55), transparent);
    animation-duration: 3.8s; animation-delay: 2.1s; }

@keyframes lp-streak-fly {
    0%   { left: -40%; opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { left: 120%; opacity: 0; }
}

/* ── Vignette overlay ── */
.lp-vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 90% 85% at 50% 50%, transparent 30%, rgba(3,9,26,0.82) 100%),
        linear-gradient(to bottom, rgba(3,9,26,0.65) 0%, transparent 22%, transparent 75%, rgba(3,9,26,0.75) 100%);
    z-index: 3;
    pointer-events: none;
}

/* Línea de luz inferior */
.loading-page::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,215,0,0.40) 22%,
        rgba(111,217,142,0.90) 50%,
        rgba(255,215,0,0.40) 78%,
        transparent 100%);
    animation: lp-bottom-pulse 3s ease-in-out infinite;
    z-index: 10;
    pointer-events: none;
}
@keyframes lp-bottom-pulse {
    0%,100% { opacity: 0.6; }
    50%     { opacity: 1; }
}

/* Centro */
.lp-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 5;
    animation: lp-fade-up 0.9s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes lp-fade-up {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Contenedor de anillos — perspectiva 3D inclinada */
.lp-rings {
    position: relative;
    width: 220px; height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
    /* 3D tilt for stadium-broadcast depth */
    perspective: 600px;
    filter: drop-shadow(0 0 32px rgba(111,217,142,0.30))
            drop-shadow(0 12px 24px rgba(0,0,0,0.60));
}

/* Outer wrapper that provides the tilt — only non-logo rings tilt */
.lp-rings::before {
    content: '';
    position: absolute;
    inset: -14%;
    border-radius: 50%;
    border: 1px dashed rgba(255,215,0,0.10);
    transform: rotateX(28deg) rotateY(-6deg);
    box-shadow:
        inset 0 0 40px rgba(111,217,142,0.04),
        0 0 60px rgba(111,217,142,0.08);
    animation: lp-orbit-tilt 14s linear infinite;
}
@keyframes lp-orbit-tilt {
    0%   { transform: rotateX(28deg) rotateY(-6deg) rotateZ(0deg); }
    100% { transform: rotateX(28deg) rotateY(-6deg) rotateZ(360deg); }
}

/* Pulse ring — expands outward like a signal burst */
.lp-rings::after {
    content: '';
    position: absolute;
    inset: -4%;
    border-radius: 50%;
    border: 1.5px solid rgba(111,217,142,0.35);
    animation: lp-pulse-ring 2.2s ease-out infinite;
}
@keyframes lp-pulse-ring {
    0%   { transform: scale(0.90); opacity: 0.80; }
    100% { transform: scale(1.40); opacity: 0; }
}

.lp-ring {
    position: absolute;
    border-radius: 50%;
}

/* Anillo exterior — inclinado en 3D, dorado, rotación lenta inversa */
.lp-ring--1 {
    width: 112%; height: 112%;
    border: 1px dashed rgba(255,215,0,0.20);
    transform: rotateX(32deg) rotateY(-8deg);
    animation: lp-arc-ccw-3d 12s linear infinite;
}
.lp-ring--1::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    border: 1.5px solid transparent;
    border-bottom-color: rgba(255,215,0,0.65);
    border-left-color:   rgba(255,215,0,0.22);
    animation: lp-arc-ccw 4s cubic-bezier(0.5,0,0.5,1) infinite;
}
@keyframes lp-arc-ccw-3d {
    0%   { transform: rotateX(32deg) rotateY(-8deg) rotateZ(0deg); }
    100% { transform: rotateX(32deg) rotateY(-8deg) rotateZ(-360deg); }
}

/* Anillo medio — arco spinner verde, el principal */
.lp-ring--2 {
    width: 100%; height: 100%;
    border: 1px solid rgba(111,217,142,0.08);
    box-shadow:
        0 0 0 1px rgba(111,217,142,0.04) inset,
        0 0 40px rgba(111,217,142,0.06);
}
.lp-ring--2::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    border: 2.5px solid transparent;
    border-top-color:   rgba(111,217,142,0.90);
    border-right-color: rgba(111,217,142,0.35);
    animation: lp-arc-cw 1.8s cubic-bezier(0.5,0,0.5,1) infinite;
}
@keyframes lp-arc-cw {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Anillo interior — pequeño, giro rápido, color acento, contra-inclinado */
.lp-ring--3 {
    width: 72%; height: 72%;
    border: 1px solid rgba(164,192,219,0.10);
    transform: rotateX(-20deg) rotateY(10deg);
    animation: lp-inner-tilt 9s linear infinite;
}
.lp-ring--3::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    border: 1.5px solid transparent;
    border-top-color:  rgba(255,255,255,0.55);
    border-left-color: rgba(255,255,255,0.18);
    animation: lp-arc-cw 0.95s linear infinite;
}
@keyframes lp-inner-tilt {
    0%   { transform: rotateX(-20deg) rotateY(10deg) rotateZ(0deg); }
    100% { transform: rotateX(-20deg) rotateY(10deg) rotateZ(360deg); }
}

/* Shared flat ccw keyframe (used by ring--1::after) */
@keyframes lp-arc-ccw {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}

/* Logo */
.lp-logo {
    position: relative;
    width: 175px;
    max-width: 48vw;
    z-index: 2;
    filter:
        drop-shadow(0  6px 20px rgba(111,217,142,0.25))
        drop-shadow(0  2px  6px rgba(0,0,0,0.40));
    animation: lp-logo-enter 1.1s cubic-bezier(0.22,1,0.36,1) both,
               lp-logo-glow  4s ease-in-out 1.1s infinite;
}
@keyframes lp-logo-enter {
    from { opacity: 0; transform: scale(0.80); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes lp-logo-glow {
    0%,100% { filter: drop-shadow(0 6px 18px rgba(111,217,142,0.22)) drop-shadow(0 2px 5px rgba(0,0,0,0.40)); }
    50%     { filter: drop-shadow(0 6px 32px rgba(111,217,142,0.50)) drop-shadow(0 0 12px rgba(255,215,0,0.12)) drop-shadow(0 2px 8px rgba(0,0,0,0.45)); }
}

/* Tagline */
.lp-tagline {
    font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.38em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    margin: 0 0 22px 0;
}

/* Barra de carga */
.lp-bar-container {
    width: 200px;
    max-width: 52vw;
    height: 2px;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}
/* Borde dorado sutil alrededor de la barra */
.lp-bar-container::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 3px;
    border: 1px solid rgba(255,215,0,0.15);
}
.lp-bar {
    height: 100%;
    width: 40%;
    border-radius: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,215,0,0.30)    15%,
        rgba(111,217,142,0.80)  45%,
        rgba(111,217,142,1.00)  50%,
        rgba(111,217,142,0.80)  55%,
        rgba(255,215,0,0.30)    85%,
        transparent 100%);
    animation: lp-bar-slide 1.9s ease-in-out infinite;
}
@keyframes lp-bar-slide {
    0%   { transform: translateX(-200%); }
    100% { transform: translateX(500%); }
}

/* Ocultar legacy */
.loading-logo-top, .loading-progress, .loading-progress-text, .loading-image-bottom { display: none; }

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.custom-border {
    border-bottom: 1px solid var(--color-accent-y);
}

.custom-border-r {
    border-right: 1px solid var(--color-accent-y);
    height: auto;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI29MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA8Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}


@media (max-width: 768px) {
    html, body
    {
        overflow-y: auto;
    }

/* Cambiar el layout principal para móvil */
.app-layout {
    height: auto;
    min-height: 100vh; 
}

/* El layout-body también debe ser flexible */
.layout-body {
    height: auto;
    min-height: calc(100vh - 56px);
    margin-top: 35px;
}

/* Content area debe permitir que el contenido crezca */
.content-area {
    overflow-y: visible; /* Cambiar de auto a visible */
    min-height: calc(100vh - 156px); /* Header + footer space */
}
    .loading-image-bottom {
        margin-bottom: 105px;
    }

.content {
    overflow-y: visible;
    flex: 1;
    min-height: 50vh;
}

/* Footer completamente estático */
.footer {
    display: none !important;
    flex-shrink: 0;
    position: static !important;
    margin-top: auto;
}

main {
    flex: 1;
    min-height: 40vh;
}

.federation-item {
    color: white !important;
}

    .federation-item:hover {
        background-color: var(--color-accent-y);
        color: var(--color-primary-db) !important;
        border-color: var(--color-accent-y);
        text-decoration: none;
    }


    .page {
        min-height: calc(100vh - 56px);
    }
}

/* 🧱 Tabla moderna con bordes redondeados */
.wp-block-table {
    user-select: none; /* no permite seleccionar texto */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

    .wp-block-table td,
    .wp-block-table th {
        pointer-events: none; /* desactiva clics y selección */
    }

    .wp-block-table table {
        width: 100%;
        border-collapse: separate; /* permite bordes redondeados */
        border-spacing: 0; /* sin espacio extra entre celdas */
        border: 1px solid var(--light-blue);
        border-radius: 10px; /* esquinas redondeadas */
        overflow: hidden; /* aplica el redondeo correctamente */
        background-color: var(--card-bg);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        pointer-events: none; /* desactiva clics */
        user-select: none; /* no se puede seleccionar texto */
    }
    /* 📋 Encabezados */
    .wp-block-table th {
        background-color: var(--dark-blue);
        color: var(--yellow-accent);
        font-weight: 600;
        text-align: left;
        padding: 10px 14px;
        border-bottom: 2px solid var(--card-border);
    }
    /* 🧾 Celdas del cuerpo */
    .wp-block-table td {
        padding: 10px 14px;
        border-bottom: 1px solid var(--card-border); /* separador entre filas */
        border-right: 1px solid var(--card-border); /* separador entre columnas */
        border-top: 1px solid var(--card-border);
        border-left: 1px solid var(--card-border);
        color: var(--light-blue);
    }
    /* Evita doble línea en el borde derecho e inferior */
    .wp-block-table tr:last-child td {
        border-bottom: none;
    }

    .wp-block-table td:last-child,
    .wp-block-table th:last-child {
        border-right: none;
    }
    /* 💡 Hover visual en filas */
    .wp-block-table tbody tr:hover {
        background-color: rgba(90, 140, 190, 0.15);
        transition: background-color 0.2s ease-in-out;
    }
    /* ✨ Opcional: efecto redondeado suave en hover */
    .wp-block-table td:hover {
        border-radius: 6px;
        background-color: rgba(90, 140, 190, 0.1);
    }


.swal-popup {
    font-family: "Lato", sans-serif;
    width: 90% !important;
    max-width: 400px !important;
    padding: 25px !important;
}

.swal-title {
    font-size: 1.3rem !important;
    font-weight: 700;
    color: #0F1932;
}

.swal-content {
    font-size: 0.95rem !important;
    color: #1a2847;
    margin-top: 10px;
    line-height: 1.4;
}

.swal-confirm-btn, .swal-cancel-btn {
    font-size: 1rem !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

.swal-confirm-btn {
    background-color: #E1FF00 !important;
    color: #0F1932 !important;
}

.swal-cancel-btn {
    background-color: #0F1932 !important;
    color: #E1FF00 !important;
}

/* Fondo azul con linear-gradient */
.custom-register-modal {
    background: linear-gradient(135deg, #0F1932 0%, #1a2847 100%) !important;
    color: white !important;
    border-radius: 12px !important;
}

/* Título más visible */
.custom-register-title {
    color: #E1FF00 !important;
    font-weight: 700;
}

/* Texto del contenido */
.custom-register-content {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 0.95rem;
}

/* Botón Confirmar */
.custom-register-btn {
    background-color: #E1FF00 !important;
    color: #0F1932 !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
}

/* Botón Cancelar */
.custom-cancel-btn {
    background-color: #0F1932 !important;
    color: #E1FF00 !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    border: 1px solid #E1FF00 !important;
}

/* Botones de SweetAlert personalizados */
.swal-btn-yellow {
    color: #E1FF00 !important;
}