/* 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-light:#DACBB4;--gold-dark:#8A7660;--green:#33291E;--choco:#5C3A21;--cream:#F3ECE1;--muted:rgba(243,236,225,0.55)}
        html,body{height:100%;font-family:'Montserrat',sans-serif;background:var(--green);overflow:hidden}
        .bg-photo{position:fixed;inset:0;background:url('https://cdn.allsquaregolf.com/pictures/pictures/000/164/853/large/cover_picture_club_la-vista-country-club.jpg') center/cover no-repeat;filter:brightness(0.32) saturate(0.8);z-index:0;animation:slowZoom 30s ease-in-out infinite alternate}
        @keyframes slowZoom{from{transform:scale(1.04)}to{transform:scale(1.10)}}
        .bg-overlay{position:fixed;inset:0;background:radial-gradient(ellipse at center,transparent 30%,rgba(25,20,14,.75) 100%);z-index:1}
        .page{position:relative;z-index:2;display:flex;min-height:100vh}
        .side-strip{width:5px;background:linear-gradient(to bottom,var(--gold-dark),var(--gold),var(--gold-dark));opacity:.7}
        .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,.72);border:1px solid rgba(144,128,105,.25);border-radius:2px;padding:52px 44px 48px;backdrop-filter:blur(18px);box-shadow:0 32px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(144,128,105,.15);animation:cardReveal .9s cubic-bezier(.16,1,.3,1) both}
        @keyframes cardReveal{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
        .logo-area{text-align:center;margin-bottom:36px}
        .crest{display:inline-flex;align-items:center;justify-content:center;margin-bottom:20px}
        .club-name{font-family:'Montserrat',sans-serif;font-size:1.85rem;font-weight:400;color:var(--cream);line-height:1.15}
        .club-name em{display:block;font-style:italic;color:var(--gold-light);font-weight:300}
        .divider{display:flex;align-items:center;gap:12px;margin:22px 0 28px}
        .divider::before,.divider::after{content:'';flex:1;height:1px;background:linear-gradient(to right,transparent,rgba(144,128,105,.35))}
        .divider::after{background:linear-gradient(to left,transparent,rgba(144,128,105,.35))}
        .divider-icon{color:var(--gold);font-size:.65rem;letter-spacing:.2em;font-weight:500;text-transform:uppercase;white-space:nowrap}
        .form-label{display:block;font-size:.74rem;font-weight:600;letter-spacing:.06em;color:var(--gold);margin-bottom:8px}
        .input-wrap{position:relative;margin-bottom:20px;display:flex;align-items:center}
        .input-wrap i{position:absolute;left:16px;color:var(--gold-dark);font-size:.85rem;pointer-events:none;z-index:1;transition:color .2s}
        .input-wrap input{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(144,128,105,.2);border-radius:2px;padding:13px 16px 13px 42px;color:var(--cream);font-family:'Montserrat',sans-serif;font-size:.9rem;font-weight:300;outline:none;transition:border-color .25s,background .25s,box-shadow .25s}
        .input-wrap input::placeholder{color:var(--muted)}
        .input-wrap input:focus{border-color:var(--gold);background:rgba(185,167,140,.08);box-shadow:0 0 0 3px rgba(185,167,140,.12)}
        .input-wrap input:focus~i,.input-wrap:focus-within i{color:var(--gold)}
        .estado-bar{display:flex;align-items:center;gap:8px;font-size:.72rem;color:var(--muted);margin-bottom:20px;letter-spacing:.05em}
        .estado-dot{width:6px;height:6px;border-radius:50%;background:#aaa;flex-shrink:0;animation:pulse 1.4s ease-in-out infinite}
        .estado-dot.ok{background:#70903B;animation:none}.estado-dot.err{background:#e55;animation:none}
        @keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
        .btn-login{width:100%;margin-top:8px;padding:14px 0;background:linear-gradient(135deg,var(--gold-dark) 0%,var(--gold) 50%,var(--gold-dark) 100%);background-size:200% 100%;border:none;border-radius:2px;color:var(--choco);font-family:'Montserrat',sans-serif;font-size:.8rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;overflow:hidden;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:active{transform:scale(.98)}
        .btn-login:disabled{opacity:.5;cursor:not-allowed}
        .message{margin-top:16px;font-size:.78rem;text-align:center;min-height:18px;color:var(--muted)}
        .message.error{color:#D9A3A2}.message.success{color:#C9C2B4}
        .card-footer{margin-top:36px;text-align:center;font-size:.68rem;letter-spacing:.06em;color:rgba(185,167,140,.45)}
        .branding{position:fixed;left:60px;top:50%;transform:translateY(-50%);z-index:2;pointer-events:none;display:none}
        @media(min-width:900px){.branding{display:block}}
        .branding-title{font-family:'Montserrat',sans-serif;font-size:3.4rem;font-weight:300;color:var(--cream);line-height:1.05;opacity:.85}
        .branding-title strong{display:block;color:var(--gold-light);font-weight:600;font-style:italic}
        .branding-sub{margin-top:16px;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);opacity:.65}
        .branding-line{width:48px;height:1px;background:var(--gold);opacity:.4;margin:18px 0}
        @media(max-width:580px){.main{padding:24px 20px;justify-content:center}.card{padding:40px 28px 36px}}

/* ── Agregados en la versión PHP ── */
form{margin:0}
.info-box{font-size:.76rem;line-height:1.6;background:rgba(255,255,255,.05);border:1px solid rgba(192,171,142,.25);padding:12px 14px;margin-bottom:16px;border-radius:4px}
.main{min-width:0}
.card{max-width:100%}
@media(max-width:580px){
  html,body{overflow-x:hidden;overflow-y:auto}
  .card{width:100%}
  .input-wrap input{font-size:16px}
}