/* Draikotune — pantallas de acceso (login, restablecer contraseña). Usa los tokens de ui.css */
html,body{height:100%;overflow:auto}
body{background:var(--bg)}
.auth-shell{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);background:var(--surface)}
.auth-main{display:flex;align-items:center;justify-content:center;padding:40px 28px;position:relative}
.auth-box{width:100%;max-width:410px;animation:authIn .5s cubic-bezier(.16,1,.3,1) both}
@keyframes authIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.auth-logo{margin-bottom:40px}
.auth-logo img{height:48px;max-height:48px;max-width:280px;width:auto;object-fit:contain;filter:brightness(0);opacity:.92}
.auth-logo .logo-text{font-weight:800;font-size:22px;letter-spacing:-.5px}
h1{font-family:var(--display);font-size:34px;font-weight:700;letter-spacing:-1.2px;line-height:1.1;margin-bottom:8px}
.subtitle{color:var(--muted);font-size:14.5px;margin-bottom:28px;line-height:1.55}

.alert{border-radius:13px;padding:12px 15px;font-size:13.5px;margin-bottom:18px;display:none}
.alert-error{background:var(--danger-soft);border:1px solid #F7C9CB;color:var(--danger)}
.alert-success{background:var(--ok-soft);border:1px solid #BFE8D6;color:var(--ok)}
.alert-info{background:var(--accent-soft);border:1px solid #DDD8FB;color:var(--accent-ink)}

.form-group{margin-bottom:18px}
label{display:block;font-size:12.5px;font-weight:700;color:var(--text);margin-bottom:8px}
input{width:100%;background:var(--surface);border:1.5px solid var(--border-strong);border-radius:12px;padding:13px 16px;color:var(--text);font-family:inherit;font-size:15px;outline:none;transition:border-color .2s,box-shadow .2s}
input:hover{border-color:var(--faint)}
input:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(106,90,224,.16)}
input::placeholder{color:var(--faint)}
.password-field-wrap{position:relative}
.password-field-wrap input{padding-right:46px}
.password-toggle{position:absolute;top:50%;right:7px;transform:translateY(-50%);background:none;border:none;color:var(--muted);cursor:pointer;padding:7px;display:flex;align-items:center;justify-content:center;border-radius:9px}
.password-toggle:hover{color:var(--text);background:var(--surface2)}
.forgot-link{text-align:right;margin-top:-6px;margin-bottom:20px}
.forgot-link a{font-size:13px;font-weight:600;color:var(--accent);text-decoration:none}
.forgot-link a:hover{text-decoration:underline}

.btn{width:100%;padding:14px;border:none;border-radius:12px;font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;transition:background .2s,transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn-primary{background:var(--accent);color:#fff;box-shadow:none}
.btn-primary:hover{background:var(--accent-ink)}
.btn-secondary{background:var(--surface);border:1.5px solid var(--border-strong);color:var(--text);margin-top:10px}
.btn-secondary:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.divider{display:flex;align-items:center;gap:12px;margin:22px 0}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border)}
.divider span{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.admin-link{text-align:center;margin-top:26px;padding-top:20px;border-top:1px solid var(--border)}
.admin-link a{font-size:13px;color:var(--muted);text-decoration:none}
.admin-link a:hover{color:var(--text)}
.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;display:none}
.spinner-light{border-color:rgba(108,92,231,.25);border-top-color:#fff}
@keyframes spin{to{transform:rotate(360deg)}}
#resetView{display:none}
.back-btn{background:none;border:none;color:var(--muted);font-size:13.5px;font-weight:600;cursor:pointer;padding:0;margin-bottom:24px;display:flex;align-items:center;gap:6px;font-family:inherit}
.back-btn:hover{color:var(--accent)}
.rate-bar{height:3px;background:var(--border);border-radius:3px;margin-top:10px;overflow:hidden;display:none}
.rate-fill{height:100%;background:var(--danger);width:100%;transition:width linear}

/* Panel de marca (derecha) */
.auth-side{position:relative;overflow:hidden;color:#fff;display:flex;flex-direction:column;justify-content:center;padding:56px;
  /* foto de portada + capa oscura para que el texto siempre se lea; si la foto no carga, queda el degradado */
  background:
    linear-gradient(100deg,rgba(16,14,38,.90) 0%,rgba(20,18,43,.74) 55%,rgba(34,29,77,.55) 100%),
    url('https://pub-002e75a81f7f41cabb59506029e2d1b2.r2.dev/videospage/fotologinportal.webp') center/cover no-repeat,
    linear-gradient(130deg,var(--night) 0%,var(--night2) 100%)}
.auth-side::before{content:'';position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(560px 320px at 90% 0%,rgba(139,127,240,.22),transparent 70%),
  repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 48px)}
.auth-wave{position:absolute;left:0;right:0;bottom:48px;height:120px;width:100%;opacity:.6;pointer-events:none}
.side-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;letter-spacing:2px;text-transform:uppercase;opacity:.75;margin-bottom:16px;position:relative}
.side-eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent2)}
.side-title{font-family:var(--display);font-size:42px;font-weight:700;letter-spacing:-1.6px;line-height:1.05;max-width:470px;margin-bottom:16px;position:relative}
.side-sub{font-size:15.5px;opacity:.72;max-width:430px;line-height:1.6;margin-bottom:34px;position:relative}
.side-list{list-style:none;display:flex;flex-direction:column;gap:12px;position:relative}
.side-list li{display:flex;align-items:center;gap:14px;font-size:14.5px;font-weight:500}
.side-list li i{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(255,255,255,.85)}
.side-list svg{width:18px;height:18px;stroke-width:1.7}
@media(max-width:900px){
  .auth-shell{grid-template-columns:1fr}
  .auth-side{display:none}
  .auth-main{padding:32px 20px;align-items:flex-start;padding-top:72px}
  h1{font-size:26px}
  .auth-logo img{height:40px;max-height:40px}
}