/* Identidad oficial LatamPlay. Colores compartidos; los originales se conservan. */
:root, [data-theme="light"], [data-theme="dark"] {
    --brand-night: #101018;
    --brand-lime: #96e000;
    --brand-purple: #9700ff;
    --primary: #96e000;
    --primary-h: #a8f220;
    --primary-light: rgba(150,224,0,.12);
    --primary-dark: #466b00;
    --sidebar-bg: #101018;
    --sidebar-hover: #222032;
    --sidebar-active-bg: rgba(150,224,0,.12);
    --sidebar-active-color: #b0f234;
    --sidebar-active-border: #96e000;
}
.sidebar { background: var(--brand-night) !important; }
.sidebar-logo { border-bottom: 1px solid rgba(255,255,255,.09); }
.sidebar-logo span { color: #fff; }
.sidebar-logo img, .topbar-logo { background: #101018 !important; }
.btn-primary, .btn-main, .latam-auth .btn {
    background: var(--brand-lime) !important; color: #182000 !important;
    border-color: var(--brand-lime); font-weight: 700;
}
.btn-primary:hover, .btn-main:hover, .latam-auth .btn:hover { background: #a8f220 !important; }
button:disabled { opacity: .6; cursor: not-allowed; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 3px solid #9700ff; outline-offset: 3px;
}
.latam-auth {
    font-family: Arial, Helvetica, sans-serif;
    background: radial-gradient(ellipse at 18% 15%, rgba(151,0,255,.15), transparent 50%), #101018;
    padding: 32px 20px; min-height: 100vh;
}
.auth-shell { width: min(960px, 100%); display: grid; grid-template-columns: 1fr 420px; align-items: center; gap: 56px; }
.auth-shell > .card { width: 100%; max-width: 420px; border-radius: 22px; box-shadow: 0 24px 80px #0005; }
.brand-welcome { color: #fff; align-self: center; }
.brand-welcome .eyebrow { color: #b0f234; font-size: 11px; letter-spacing: .16em; font-weight: 700; text-transform: uppercase; }
.brand-welcome h2 { font-size: clamp(28px, 3.8vw, 42px); line-height: 1.1; margin: 16px 0; letter-spacing: -.035em; }
.brand-welcome p { color: #b8b5c9; max-width: 360px; line-height: 1.6; font-size: 15px; }
.brand-welcome img { display: block; width: 220px; height: 330px; object-fit: contain; margin: 24px auto 0; }
.latam-auth .logo-wrap { background: #101018; border-radius: 12px; padding: 15px 12px; margin-bottom: 18px; }
.latam-auth .brand-logo { width: 100%; max-width: 300px; height: auto !important; display: block; margin: auto; }
.latam-auth .method-tab.active { color: #6900b2; }
.latam-auth .links a, .latam-auth .tabs .active { color: #6900b2; }
.latam-auth input:focus, .latam-auth select:focus { border-color: #9700ff; box-shadow: 0 0 0 3px #9700ff12; }
.brand-capi-card { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; padding: 16px 22px; background: #101018; color: #fff; border: 1px solid #9700ff50; border-radius: 16px; overflow: hidden; }
.brand-capi-card img { width: 66px; height: 92px; object-fit: contain; flex: 0 0 auto; }
.brand-capi-card strong { display: block; margin-bottom: 5px; font-size: 16px; }
.brand-capi-card p { margin: 0; color: #c6c2d5; font-size: 13px; line-height: 1.5; }
.brand-account-welcome { background: linear-gradient(120deg, #241234, #101018) !important; }
.brand-welcome img, .brand-capi-card img { animation: capi-float 4s ease-in-out infinite; }
@keyframes capi-float {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-7px) rotate(1deg); }
}
@media (prefers-reduced-motion: reduce) {
    .brand-welcome img, .brand-capi-card img { animation: none; }
}
@media (max-width: 760px) {
    .auth-shell { display: block; max-width: 420px; }
    .brand-welcome { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 16px; }
    .brand-welcome .eyebrow, .brand-welcome p { display: none; }
    .brand-welcome h2 { font-size: 22px; margin: 0; }
    .brand-welcome img { width: 76px; height: 114px; margin: 0; order: -1; flex: 0 0 auto; }
    .latam-auth { padding: 24px 16px; }
    .auth-shell > .card { padding: 24px 20px; }
}