:root { color-scheme: light; }
body { margin: 0; color: #20242b; background: #f1f3f5; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at top, #fff 0, #f1f3f5 55%); }
.auth-card { width: min(100%, 420px); padding: 42px; border: 1px solid #d9dde2; border-radius: 16px; background: #fff; box-shadow: 0 18px 45px rgba(25, 30, 38, .10); }
.auth-symbol { display: flex; gap: 5px; margin-bottom: 26px; }
.auth-symbol span { width: 9px; height: 9px; border-radius: 50%; background: #68717c; }
.auth-symbol span:nth-child(2) { background: #a2a9b1; }.auth-symbol span:nth-child(3) { background: #c8ccd1; }
.auth-card h1 { margin: 0 0 8px; font-size: 25px; font-weight: 700; letter-spacing: -.4px; }
.auth-card > p { margin: 0 0 28px; color: #68717c; font-size: 14px; }
.auth-card .form-label { color: #3d444d; font-size: 13px; font-weight: 650; }
.auth-card .form-control { min-height: 44px; border-color: #cfd4da; box-shadow: none; }
.auth-card .form-control:focus { border-color: #6d7680; box-shadow: 0 0 0 .2rem rgba(80, 88, 98, .14); }
.auth-submit { min-height: 44px; border: 0; background: #343a40; color: #fff; font-weight: 650; }.auth-submit:hover, .auth-submit:focus { background: #20252a; color: #fff; }
.auth-help { margin-top: 22px; color: #68717c; font-size: 13px; text-align: center; }.auth-help a { color: #343a40; font-weight: 650; }
@media (max-width: 480px) { .auth-page { padding: 16px; }.auth-card { padding: 30px 24px; } }

/* Acceso alineado con el nuevo sistema visual. */
:root { --auth-green: #007a3d; --auth-green-dark: #06442c; --auth-yellow: #ffd400; --auth-ink: #17211b; --auth-muted: #6e7b73; }
body { color: var(--auth-ink); background: #eff4f1; }
.auth-page { position: relative; isolation: isolate; overflow: hidden; padding: 28px; background: linear-gradient(135deg, #edf4f0 0%, #f8faf9 48%, #eef3f0 100%); }
.auth-page::before { content: ""; position: fixed; z-index: -1; left: -12vw; top: -22vw; width: 55vw; height: 55vw; border-radius: 50%; background: radial-gradient(circle, rgba(0,122,61,.16), transparent 68%); }
.auth-page::after { content: ""; position: fixed; z-index: -1; right: -13vw; bottom: -24vw; width: 54vw; height: 54vw; border: 90px solid rgba(255,212,0,.13); border-radius: 50%; }
.auth-card { position: relative; overflow: hidden; width: min(100%, 440px); padding: 45px; border: 1px solid rgba(25,54,37,.1); border-radius: 24px; box-shadow: 0 28px 75px rgba(25,54,37,.14); }
.auth-card::before { content: "GESTIÓN DEPORTIVA"; display: block; margin-bottom: 30px; color: var(--auth-green); font-size: 10px; font-weight: 800; letter-spacing: 1.5px; }
.auth-symbol { position: absolute; top: 36px; right: 40px; gap: 4px; margin: 0; }
.auth-symbol span { width: 8px; height: 8px; background: var(--auth-green); }
.auth-symbol span:nth-child(2) { background: var(--auth-yellow); }
.auth-symbol span:nth-child(3) { background: var(--auth-green-dark); }
.auth-card h1 { margin-bottom: 10px; font-size: 29px; font-weight: 780; letter-spacing: -1px; }
.auth-card > p { margin-bottom: 30px; color: var(--auth-muted); line-height: 1.55; }
.auth-card .form-label { margin-bottom: 7px; color: #344139; font-size: 12px; font-weight: 700; }
.auth-card .form-control { min-height: 47px; padding: 10px 13px; border: 1px solid rgba(25,54,37,.14); border-radius: 11px; background: #fbfcfb; }
.auth-card .form-control:focus { border-color: var(--auth-green); background: #fff; box-shadow: 0 0 0 .22rem rgba(0,122,61,.1); }
.auth-submit { min-height: 48px; border-radius: 11px; background: linear-gradient(115deg, var(--auth-green-dark), var(--auth-green)); box-shadow: 0 10px 24px rgba(0,92,48,.2); }
.auth-submit:hover, .auth-submit:focus { background: linear-gradient(115deg, var(--auth-green), #07894a); transform: translateY(-1px); }
.auth-help a { color: var(--auth-green-dark); text-underline-offset: 3px; }
.auth-card .alert { border-radius: 11px; font-size: 12px; }
@media (max-width: 480px) { .auth-page { padding: 15px; }.auth-card { padding: 38px 24px 30px; border-radius: 20px; }.auth-symbol { top: 31px; right: 24px; }.auth-card h1 { font-size: 26px; } }

/* Acceso de la plantilla horizontal: neutro, plano y sin identidad de equipo. */
:root { --auth-green: #59616b; --auth-green-dark: #30363d; --auth-yellow: #a8afb7; --auth-ink: #212529; --auth-muted: #6c737a; }
body { background: #f7f8fa; }
.auth-page { background: #f7f8fa; }
.auth-page::before, .auth-page::after { display: none; }
.auth-card { width: min(100%, 410px); padding: 38px; border: 1px solid #e1e5e9; border-radius: 12px; box-shadow: 0 12px 32px rgba(25,28,34,.08); }
.auth-card::before { margin-bottom: 25px; color: var(--auth-green); }
.auth-symbol { top: 34px; right: 38px; }
.auth-card h1 { font-size: 27px; font-weight: 720; }
.auth-card .form-control { min-height: 45px; border-color: #d2d8de; border-radius: 7px; background: #fff; }
.auth-card .form-control:focus { border-color: var(--auth-green); box-shadow: 0 0 0 .2rem rgba(89,97,107,.12); }
.auth-submit { min-height: 45px; border-radius: 7px; background: var(--auth-green); box-shadow: none; }
.auth-submit:hover, .auth-submit:focus { background: var(--auth-green-dark); transform: none; }
@media (max-width: 480px) { .auth-card { padding: 34px 23px 28px; border-radius: 10px; }.auth-symbol { top: 29px; right: 23px; } }
.auth-card-wide { width: min(100%, 480px); }
.totp-qr { width: 218px; min-height: 218px; display: grid; place-items: center; margin: 0 auto 20px; padding: 14px; border: 1px solid #dfe3e7; border-radius: 10px; background: #fff; }
.totp-qr img, .totp-qr canvas { max-width: 100%; height: auto!important; }
.totp-manual { margin: 0 0 22px; color: var(--auth-muted); font-size: 12px; text-align: center; }
.totp-manual summary { margin-bottom: 9px; cursor: pointer; }
.totp-manual code { display: block; padding: 10px; border-radius: 7px; color: var(--auth-ink); background: #f1f3f5; font-size: 13px; letter-spacing: 1.5px; overflow-wrap: anywhere; }
.totp-input { font-size: 21px; font-weight: 700; letter-spacing: 5px; text-align: center; }
.auth-cancel { color: var(--auth-muted); font-size: 12px; text-decoration: none; }
.recovery-code-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; padding: 16px; border: 1px solid #dfe3e7; border-radius: 9px; background: #f6f7f8; }
.recovery-code-grid code { color: var(--auth-ink); font-size: 14px; font-weight: 700; text-align: center; }
@media (max-width: 480px) { .recovery-code-grid { grid-template-columns: 1fr; }.totp-qr { width: 210px; min-height: 210px; } }