/* Estilos de las pantallas de acceso (login, contraseña, instalación) */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--gold:#C0AB8E;--gold-l:#DACBB4;--gold-d:#8A7660;--green:#33291E;--choco:#5C3A21;--cream:#F3ECE1;--mu:rgba(243,236,225,.55)}
html,body{height:100%;font-family:Montserrat,sans-serif;background:var(--green);overflow:hidden}
.bg{position:fixed;inset:0;z-index:0;
  background:
    linear-gradient(rgba(144,128,105,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(144,128,105,.05) 1px,transparent 1px),
    radial-gradient(ellipse at 20% 50%, #4a3c2b 0%, var(--green) 60%);
  background-size:34px 34px,34px 34px,cover;
}
.ov{position:fixed;inset:0;background:radial-gradient(ellipse at center,transparent 25%,rgba(25,20,14,.72) 100%);z-index:1}
/* Cinta dorada: firma del sistema */
.hazard-top{position:fixed;top:0;left:0;right:0;height:3px;z-index:5;
  background:linear-gradient(90deg,var(--gold-d),var(--gold) 35%,var(--gold-l) 55%,var(--gold) 75%,var(--gold-d));
  box-shadow:0 1px 10px rgba(144,128,105,.35)}
.page{position:relative;z-index:2;display:flex;min-height:100vh}
.strip{width:4px;background:linear-gradient(to bottom,transparent,var(--gold-d) 20%,var(--gold) 50%,var(--gold-d) 80%,transparent);opacity:.8}
.brand{position:fixed;left:60px;top:50%;transform:translateY(-50%);z-index:2;pointer-events:none;display:none}
@media(min-width:900px){.brand{display:block}}
.brand h1{font-family:Montserrat,sans-serif;font-size:3.6rem;font-weight:600;color:var(--cream);line-height:.98;opacity:.92;text-transform:uppercase;letter-spacing:.03em}
.brand h1 strong{display:block;color:var(--gold-l);font-weight:800}
.brand-line{width:48px;height:1px;background:var(--gold);opacity:.4;margin:18px 0}
.brand-sub{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);opacity:.65}
.main{flex:1;display:flex;align-items:center;justify-content:flex-end;padding:40px 8vw 40px 40px}
.card{width:420px;max-width:100%;background:rgba(51,41,30,.78);border:1px solid rgba(144,128,105,.25);border-radius:2px;padding:50px 42px 46px;backdrop-filter:blur(20px);box-shadow:0 32px 80px rgba(0,0,0,.65),inset 0 1px 0 rgba(144,128,105,.15);animation:cardIn .9s cubic-bezier(.16,1,.3,1) both}
@keyframes cardIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
.logo-area{text-align:center;margin-bottom:32px}
.club-name{font-family:Montserrat,sans-serif;font-size:1.7rem;font-weight:600;color:var(--cream);line-height:1.08;margin-top:14px;text-transform:uppercase;letter-spacing:.05em}
.club-name em{display:block;font-style:normal;color:var(--gold-l);font-weight:800}
.div{display:flex;align-items:center;gap:12px;margin:20px 0 26px}
.div::before,.div::after{content:'';flex:1;height:1px;background:linear-gradient(to right,transparent,rgba(144,128,105,.35))}
.div::after{background:linear-gradient(to left,transparent,rgba(144,128,105,.35))}
.div span{color:var(--gold);font-size:.63rem;letter-spacing:.2em;font-weight:500;text-transform:uppercase;white-space:nowrap}
.status{display:flex;align-items:center;gap:8px;font-size:.70rem;color:var(--mu);margin-bottom:18px;letter-spacing:.05em}
.dot{width:6px;height:6px;border-radius:50%;background:#aaa;animation:pulse 1.4s infinite}
.dot.ok{background:#4caf6e;animation:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.lbl{display:block;font-size:.72rem;font-weight:600;letter-spacing:.08em;color:var(--gold);margin-bottom:7px}
.iw{position:relative;margin-bottom:18px}
.iw i{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--gold-d);font-size:.84rem;pointer-events:none;transition:color .2s}
.iw input{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(144,128,105,.2);border-radius:2px;padding:12px 15px 12px 40px;color:var(--cream);font-family:Montserrat,sans-serif;font-size:.88rem;font-weight:300;outline:none;transition:border-color .25s,background .25s,box-shadow .25s}
.iw input::placeholder{color:var(--mu)}
.iw input:focus{border-color:var(--gold);background:rgba(192,171,142,.08);box-shadow:0 0 0 3px rgba(192,171,142,.12)}
.iw:focus-within i{color:var(--gold)}
.btn-login{width:100%;margin-top:6px;padding:13px 0;background:linear-gradient(135deg,var(--gold-d) 0%,var(--gold) 50%,var(--gold-d) 100%);background-size:200% 100%;border:none;border-radius:2px;color:var(--choco,#5C3A21);font-family:Montserrat,sans-serif;font-size:.78rem;font-weight:600;letter-spacing:.1em;cursor:pointer;transition:background-position .4s,box-shadow .3s}
.btn-login:hover{background-position:100% 0;box-shadow:0 8px 28px rgba(144,128,105,.35)}
.btn-login:disabled{opacity:.5;cursor:not-allowed}
.msg{margin-top:14px;font-size:.76rem;text-align:center;min-height:16px;color:var(--mu)}
.msg.error{color:#ff7f7f}.msg.success{color:#7fd9a1}
.footer{margin-top:32px;text-align:center;font-size:.66rem;letter-spacing:.08em;color:rgba(192,171,142,.42)}
@media(max-width:580px){.main{padding:24px 20px;justify-content:center}.card{padding:38px 26px 34px}}
/* Agregados en la versión PHP */
.iw input{font-size:.88rem}
form{margin:0}
.info-box{font-size:.74rem;line-height:1.55;color:var(--mu);background:rgba(255,255,255,.03);border:1px solid rgba(144,128,105,.2);padding:12px 14px;margin-bottom:16px}
.info-box b{color:var(--gold-l)}

/* ── Ajuste para celular: la tarjeta nunca es más ancha que la pantalla ── */
.main{min-width:0}
.card{width:100%;max-width:420px}
@media(max-width:580px){
  html,body{overflow-x:hidden;overflow-y:auto}
  .page{min-height:100%}
  .strip{display:none}
  .main{padding:20px 14px}
  .card{padding:32px 20px 28px}
  .club-name{font-size:1.35rem}
  .iw input{font-size:16px}          /* evita el zoom automático del iPhone al escribir */
}