:root{
  --bg-dark: #0e1116;
  --ink-900:#1f2329;
  --ink-600:#6b7280;
  --white:#ffffff;
  --card: rgba(255,255,255,0.88);
  --card-bd: rgba(17,17,17,0.12);
  --shadow: 0 18px 60px rgba(0,0,0,.22);
  --radius-xl: 18px;

  --btn: #0f0f10;
  --btn-hover:#151517;
  --accent:#6B82A8;
}

/* Reset */
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink-900); background: var(--bg-dark);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* Fondo a pantalla completa (OJO: ruta ABSOLUTA para evitar /DISEÑO/...) */
.bg{
  position: fixed; inset:0;
  background-image: url('/IMAGENES/fondo.png'); /* <-- cambia aquí si tu archivo se llama distinto */
  background-size: cover; background-position: center;
  filter: saturate(0.85) contrast(1.05) brightness(0.9);
  z-index: 0;
}
.bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(1200px 800px at 50% 30%, rgba(0,0,0,.20), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
}

/* Contenedor principal */
.auth-wrap{
  min-height: 100svh;
  position: relative; z-index: 1;
  display:grid; place-items:center;
  padding: clamp(16px, 3vw, 40px);
}

/* Grid de tarjetas */
.auth-grid{
  width: min(1120px, 100%);
  display:grid; gap: clamp(14px, 2vw, 26px);
  grid-template-columns: repeat(2, minmax(280px, 520px));
}
@media (max-width: 900px){
  .auth-grid{ grid-template-columns: 1fr; }
}

/* Tarjetas / formularios */
.card{
  background: var(--card);
  border:1px solid var(--card-bd);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  padding: clamp(18px, 2.8vw, 28px);
  display:flex; flex-direction:column; gap: 12px;
}

/* Encabezado dentro de la tarjeta */
.form-header{
  text-align:center;
  display:grid; place-items:center; gap:8px;
  color: #0f1115;
}
.form-header.compact{ gap:6px; }
.form-header .brand{
  width: clamp(72px, 10vw, 84px); height:auto;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.20));
}
.form-header h2, .form-header h3{
  margin: 6px 0 0; font-weight: 800; letter-spacing:.2px;
  color:#0e0f12; font-size: clamp(1.2rem, 2.2vw, 1.4rem);
}
.form-header p{ margin:0; color:#394150; font-size: .95rem; }

/* Campos */
label{
  font-weight:700; color:#2a2f39; font-size: .95rem; display:block;
}
label i{ margin-right:8px; color:#374151; }

input{
  width:100%;
  padding: 12px 14px;
  border:1px solid #d7dce3; border-radius: 12px;
  background: #fff; color: var(--ink-900);
  font-size: 1rem; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
input:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 5px rgba(107,130,168,.20);
}

/* Password + botón ojo */
.password-wrap{ position:relative; }
.toggle-pass{
  position:absolute; top:50%; right:.6rem; transform:translateY(-50%);
  border:0; background:transparent; color:#4b5563; cursor:pointer;
  width:36px; height:36px; display:grid; place-items:center;
}
.toggle-pass:hover{ color:#1f2937; }

/* Botones */
.btn{
  appearance:none; border:1px solid #e5e7eb;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height: 44px; padding: 0 16px; border-radius: 12px;
  font-weight: 800; cursor:pointer; user-select:none;
  transition: transform .05s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
.btn:active{ transform: translateY(1px); }

.btn-primary{
  background: #0f0f10; color:#fff; border-color: #0f0f10;
  box-shadow: 0 12px 34px rgba(0,0,0,.22);
}
.btn-primary:hover{ background: #151517; }

.btn-secondary{
  background: #0f0f10; color:#fff; border-color:#0f0f10;
}
.btn-secondary:hover{ filter: brightness(1.05); }

/* Links */
.form-links{ text-align:center; margin-top: 6px; }
.link{
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(107,130,168,.5);
  font-weight:700;
}

/* Modal recuperación */
.modal{ position: fixed; inset:0; z-index: 50; }
.is-hidden{ display:none !important; }
.modal-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); }
.modal-dialog{
  position: relative; margin: auto; inset: 0;
  width: min(560px, 92vw);
  background: var(--card); border:1px solid var(--card-bd); border-radius: var(--radius-xl);
  box-shadow: var(--shadow); padding: clamp(18px, 2.6vw, 26px);
  z-index: 1; top: 50%; transform: translateY(-50%);
  display:flex; flex-direction:column; gap: 12px;
}
.modal-close{
  position:absolute; top:10px; right:10px;
  border:0; background:transparent; cursor:pointer;
  width:38px; height:38px; display:grid; place-items:center; color:#374151;
}
.modal-close:hover{ color:#111827; }

.hint{ color:#394150; font-size:.95rem; }

/* Código 6 dígitos */
.codigo-grid{
  display:grid; grid-template-columns: repeat(6, 1fr);
  gap:.6rem; max-width:380px; margin:.6rem auto;
}
.code-input{
  width:2.6rem; height:2.6rem; text-align:center; font-size:1.25rem;
  border:1px solid #cfd6df; border-radius:12px; background:#fff;
  transition:border-color .2s, box-shadow .2s;
}
.code-input:focus{
  border-color: var(--accent); box-shadow: 0 0 0 4px rgba(107,130,168,.20);
}

/* Responsive */
@media (max-width: 480px){
  .btn{ height: 42px; }
}