:root{
  --bg:#0b0b0c; --card:#111214; --panel:#0c0d10; --muted:#9ca3af;
  --gold:#d4af37; --gold-2:#c4a233; --text:#f5f5f6;
  --error:#ef4444; --success:#10b981; --stroke:#1f2125; --input:#181a1e;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(1200px 600px at 85% -20%, rgba(212,175,55,.15), transparent 60%),
    radial-gradient(900px 500px at -20% 120%, rgba(212,175,55,.10), transparent 60%),
    var(--bg);
  color:var(--text);

  /* Scrollbar global elegante (solo en la página) */
  scrollbar-width: thin;                 /* Firefox */
  scrollbar-color: #D4AF37 #111;         /* thumb | track */
}

/* Chrome, Edge (Chromium), Safari */
body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
body::-webkit-scrollbar-track {
  background: #111;
  border-radius: 6px;
}
body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #D4AF37, #B9931A);
  border-radius: 6px;
  border: 2px solid #111;
  box-shadow: 0 0 6px rgba(212,175,55,.5);
}
body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #FFD700, #D4AF37);
  box-shadow: 0 0 10px rgba(212,175,55,.8);
}

.wrap{min-height:100dvh;display:grid;place-items:center;padding:28px}
.card{
  width:100%;max-width:1100px;min-height:92vh;
  background:linear-gradient(180deg, #121316 0%, #0f1013 100%);
  border:1px solid var(--stroke); border-radius:22px; overflow:hidden;
  display:grid; grid-template-columns:420px 1fr;
  box-shadow:0 30px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
}
@media (max-width:980px){ .card{grid-template-columns:1fr} }
@media (max-width:900px){
  .wrap{padding:16px}
  .card{max-width:100%; border-radius:18px}
}
@media (max-width:480px){
  .wrap{padding:10px}
  .card{border-radius:14px}
}

/* Lateral */
.aside{
  padding:28px; display:flex; flex-direction:column; justify-content:space-between;
  background:
    radial-gradient(600px 400px at 50% 0%, rgba(212,175,55,.12), transparent 60%),
    linear-gradient(180deg, #121316 0%, #0d0e11 100%);
  border-right:1px solid var(--stroke);
}
.brand{display:flex;justify-content:center}
.brand img{height:96px;width:auto;display:block}

.tabs{
  display:flex; gap:10px; margin-top:18px;
  background:#0f1013;border:1px solid var(--stroke); padding:6px; border-radius:14px;
}
.tab-btn{
  flex:1; padding:10px 12px; border-radius:10px; border:1px solid transparent;
  background:transparent; color:#fff; cursor:pointer; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:filter .2s ease;
}
.tab-ic{ width:18px;height:18px; object-fit:contain; display:inline-block; }
.tab-btn:not(.active){ color:#fff; }
.tab-btn:not(.active) .tab-ic{ filter:invert(1) brightness(2) contrast(1.1); }
.tab-btn.active{
  color:#0b0b0c; background:linear-gradient(180deg, var(--gold), var(--gold-2));
  border-color:rgba(212,175,55,.25);
  box-shadow:0 6px 16px rgba(212,175,55,.22), inset 0 1px 0 rgba(255,255,255,.35);
}
.tab-btn.active .tab-ic{ filter:none; }

.aside-desc{margin-top:16px; color:#d7d7d8; line-height:1.5}

/* Clock block */
.aside-clock{
  margin-top:18px;
  border:1px solid var(--stroke);
  border-radius:14px;
  background:#0f1013;
  height:170px;
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  text-align:center;
}
.clock-hour{font-size:44px;font-weight:900;letter-spacing:.5px}
.clock-date{margin-top:6px;color: var(--muted);font-size:13px}

.aside-footer{margin-top:14px; color:var(--muted); font-size:12px; border-top:1px dashed #25272c; padding-top:12px; text-align:center}

/* Main (forms) */
.main{padding:34px; background-color:#181818}
h1{margin:0 0 12px 0;font-size:28px;letter-spacing:.3px}

/* Panel con color diferenciado */
.panel{
  background:linear-gradient(180deg, var(--panel) 0%, #0b0c0f 100%);
  border:1px solid #1b1d22;
  border-radius:18px;
  padding:26px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 10px 30px rgba(0,0,0,.25);
}
@media (max-width:900px){
  .main{padding:18px}
  .panel{padding:18px;border-radius:16px}
}
@media (max-width:480px){
  .main{padding:12px}
  .panel{padding:16px}
}

form{display:grid; gap:14px}
.row{display:grid; gap:8px}
.row-2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
label{font-size:12px;color:var(--muted); letter-spacing:.3px}

/* Inputs */
.input{
  width:100%;
  background:none; border:none; outline:none;
  padding:12px 48px 12px 18px;
  font-size:16px; border-radius:9999px;
  box-shadow: inset 2px 5px 10px rgb(5,5,5);
  color:#fff;
}
.input::placeholder{color:#8a8f98}
.input-wrap{ position:relative; }
.reveal-btn{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; border:2px solid #ffffff4d;
  background:transparent; color:#fff; cursor:pointer; transition:all .2s ease;
}
.reveal-btn:hover{ transform:translateY(-50%) scale(1.05); border-color:#fff9; }
.reveal-btn img{ width:18px; height:18px; object-fit:contain; filter:invert(1) brightness(2); }

/* File + preview */
.file-like{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:none; border-radius:9999px; box-shadow: inset 2px 5px 10px rgb(5,5,5);
  padding:8px 10px;
}
.file-like input[type="file"]{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; clip-path:inset(50%); border:0; padding:0; margin:-1px;
}
.file-trigger{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px;
  border-radius:9999px; cursor:pointer; border:2px solid #ffffff4d;
  color:#fff; background:transparent; transition:all .25s ease;
}
.file-trigger:hover{ transform:scale(1.03); border-color:#fff9; }
.file-name{ color:#cfd2d7; font-size:13px; padding:4px 6px }

.file-grid{
  display:grid; grid-template-columns:1fr 160px; gap:12px; align-items:center;
}
.preview{
  width:160px;height:160px; border-radius:50%;
  background:#0c0d10; border:2px dashed #2a2d33;
  display:grid; place-items:center; overflow:hidden;
  color:#6b7280; font-size:12px; user-select:none;
  transition:border-color .2s, box-shadow .2s, transform .1s;
}
.preview.dragover{
  border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(212,175,55,.15), 0 10px 24px rgba(212,175,55,.12);
  transform:scale(1.02);
}
.preview img{
  width:100%; height:100%; object-fit:cover; display:block; border-radius:50%;
}

/* Botones */
.actions{
  display:flex; gap:12px; align-items:center; justify-content:space-between;
  margin-top:6px; flex-wrap:wrap;
}
.actions .left, .actions .center, .actions .right{display:flex; align-items:center}
.actions .center{justify-content:center; flex:1; text-align:center}
.btn{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:12px 16px; border:3px solid #ffffff4d; border-radius:9999px;
  cursor:pointer; text-decoration:none; transition:all .3s ease-in-out;
  box-shadow:0 10px 20px rgba(0,0,0,.2); color:#0b0b0c; font-weight:900; overflow:hidden;
  background:linear-gradient(180deg, var(--gold), var(--gold-2));
}
.btn:hover{ transform:scale(1.05); border-color:#fff9; }
.btn::before{
  content:""; position:absolute; top:0; left:-120px; height:100%; width:120%; opacity:.6;
  background-image:linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.8), rgba(255,255,255,0) 70%);
}
.btn:hover::before{ animation:shine 1.5s ease-out infinite; }
.btn-outline{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:12px 16px; border:3px solid var(--gold-2); border-radius:9999px;
  cursor:pointer; text-decoration:none; transition:all .3s ease-in-out;
  box-shadow:0 10px 20px rgba(0,0,0,.2); background:transparent; color:#fff; font-weight:900; overflow:hidden;
}
.btn-outline:hover{ transform:scale(1.05); border-color:var(--gold); background:rgba(212,175,55,.14); }
.btn-outline::before{
  content:""; position:absolute; top:0; left:-120px; height:100%; width:120%; opacity:.6;
  background-image:linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.8), rgba(255,255,255,0) 70%);
}
.btn-outline:hover::before{ animation:shine 1.5s ease-out infinite; }
@keyframes shine{ 0%{left:-120px} 60%,100%{left:100%} }
.btn-ic{
  width:22px; height:22px; object-fit:contain; transition:transform .3s ease-in-out;
  display:inline-block; filter:none;
}
.btn:hover .btn-ic, .btn-outline:hover .btn-ic{ transform:translateX(4px); }
.btn-outline .btn-ic{ filter:invert(1) brightness(2) contrast(1.1); }

.muted{color:var(--muted); font-size:12px}
.link-gold{color:var(--gold); text-decoration:none}
.link-gold:hover{text-decoration:underline}
.terms-note{margin-top:0; text-align:center}

/* Tooltips contraseñas */
.tip-wrap{ position:relative; }
.tooltip{
  position:absolute; left:50%; bottom:100%; transform:translate(-50%,-10px);
  background:#111218; color:#e9eaec; border:1px solid #24262c; border-radius:12px;
  padding:12px 14px; min-width:260px; z-index:50; box-shadow:0 14px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
  display:none;
}
.tooltip.show{ display:block; }
.tooltip .tip-title{ font-weight:800; font-size:13px; margin-bottom:6px; }
.tooltip .tip-list{ list-style:none; padding:0; margin:0; display:grid; gap:6px; }
.tip-item{ display:flex; align-items:center; gap:8px; font-size:13px; color:#cdd1d6; }
.tip-ico{ width:18px; height:18px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:900; }
.tip-ico.bad{ background:#3a1111; color:var(--error); border:1px solid #5e1a1a; }
.tip-ico.ok{ background:#0f2f29; color:var(--success); border:1px solid #1c5c50; }
.tip-close{
  position:absolute; top:6px; right:8px; border:none; background:transparent; color:#9aa0a6; cursor:pointer; font-size:16px; line-height:1;
}
.tip-close:hover{ color:#fff; }
.tooltip::after{
  content:""; position:absolute; left:calc(50% - 7px); bottom:-8px;
  width:14px; height:14px; background:#111218; border-left:1px solid #24262c; border-bottom:1px solid #24262c;
  transform:rotate(45deg);
}

/* Toast arriba derecha */
#toast{
  position:fixed; top:16px; right:16px; z-index:1000; min-width:280px; max-width:360px;
  background:#111218; border:1px solid #24262c; border-radius:14px; padding:12px 14px 12px 14px;
  color:#e9eaec; box-shadow:0 14px 34px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
  display:none; opacity:0; transform:translateY(-10px);
}
#toast.show{ display:block; animation:toastIn .25s ease-out forwards; }
#toast .title{ font-weight:800; margin-bottom:4px; font-size:14px }
#toast .msg{ font-size:13px; color:#cdd1d6 }
#toast .close{
  position:absolute; top:6px; right:8px; cursor:pointer; color:#9aa0a6; font-size:16px; line-height:1;
}
#toast .close:hover{ color:#fff; }
#toast.success{
  border-color:#155e52;
  box-shadow:0 14px 34px rgba(16,185,129,.15), inset 0 1px 0 rgba(255,255,255,.04);
}
#toast.error{
  border-color:#6b1b1b;
  box-shadow:0 14px 34px rgba(239,68,68,.15), inset 0 1px 0 rgba(255,255,255,.04);
}
@keyframes toastIn{
  from{opacity:0; transform:translateY(-10px)}
  to{opacity:1; transform:translateY(0)}
}

/* RESPONSIVO: centrar .preview y ajustar acciones */
@media (max-width:900px){
  .row-2{grid-template-columns:1fr}

  /* aquí centramos la foto de perfil cuando se apila */
  .file-grid{
    grid-template-columns:1fr;
    justify-items:center;   /* centra los hijos, incluida .preview */
  }
  .preview{
    margin-top:8px;         /* pequeño espacio respecto al file input */
  }

  .actions{gap:12px}
  .actions .left, .actions .right{ flex:0 0 calc(50% - 6px); }
  .actions .left .btn-outline, .actions .right .btn{ width:100%; justify-content:center; }
  .actions .center{ order:3; width:100%; flex-basis:100%; margin-top:2px; justify-content:center; }
}