/* ═══════════════════════════════════════════════════════════
   YouAnime — base.css
   ═══════════════════════════════════════════════════════════ */

*,
*::before,
*::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
    height: 100%;
    scroll-behavior: auto;   /* SIN smooth: los ajustes deben ser instantáneos */
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    color: var(--txt-2);
    background-color: var(--bg-0);
    background-image:
        linear-gradient(
            180deg,
            rgba(5, 9, 18, 0.55) 0%,
            rgba(5, 9, 18, 0.35) 45%,
            rgba(5, 9, 18, 0.65) 100%
        ),
        url('/assets/img/background.jpg');
    background-repeat: repeat, repeat;
    background-size: auto, auto;
    background-attachment: fixed, fixed;
    -webkit-font-smoothing: antialiased;
}

/* ── Layout principal: body = flex column, main = scroll container ── */
body.app {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;            /* sin scroll en body */
}

.app-main {
    flex: 1 1 auto;
    overflow-y: auto;            /* aquí vive el scroll */
    overflow-x: hidden;
    overflow-anchor: none;       /* desactivamos el ajuste automático del navegador */
    -webkit-overflow-scrolling: touch;
}

.app-container {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: var(--s-6) var(--s-4);
}

/* ── Scrollbar personalizado (sobre el contenedor) ─────── */
.app-main::-webkit-scrollbar { width: 10px; height: 10px; }
.app-main::-webkit-scrollbar-track { background: var(--bg-1); }
.app-main::-webkit-scrollbar-thumb {
    background: rgba(34, 211, 238, 0.25);
    border-radius: var(--r-full);
}
.app-main::-webkit-scrollbar-thumb:hover {
    background: rgba(34, 211, 238, 0.5);
}

/* ── Reset de controles ────────────────────────────────── */
img, svg, video { display: block; max-width: 100%; height: auto; }

button {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

a {
    color: var(--cyan);
    text-decoration: none;
    transition: color var(--tr-fast);
}
a:hover { color: var(--teal); }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--txt-1);
    margin: 0 0 var(--s-4);
}

input, select, textarea { font-family: inherit; }

::selection { background: rgba(34, 211, 238, 0.35); color: #fff; }