:root {
  --bg-dark: #0A0A0A;          /* Color oscuro extraído de tu login */
  --text-gray: #94a3b8;
  --brand-blue: #0A0A0A;
  --brand-hover: #2A2A2A;
  --input-border: #e2e8f0;
  --text-dark: #0f172a;
}

* { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
  font-family: system-ui, -apple-system, sans-serif; 
}

/* Forzar vista fija de una sola pantalla sin scroll */
body { 
  display: flex; 
  height: 100vh; 
  max-height: 100vh;
  overflow: hidden; 
  background-color: #ffffff; 
}

/* Panel Izquierdo */
.left-panel {
  flex: 1;
  background-color: var(--bg-dark);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5rem;
}

.brand-area { 
  display: flex; 
  align-items: center; 
  gap: 12px; 
  margin-bottom: 3rem; 
}

.brand-area img { 
  width: 40px; 
  height: 40px; 
  border-radius: 6px; 
}

.brand-title { 
  font-size: 1.4rem; 
  font-weight: 700; 
  letter-spacing: -0.02em;
}

.brand-title span { 
  color: #00C896;
}

.hero-text h2 { 
  font-size: 2.6rem; 
  font-weight: 600; 
  line-height: 1.25; 
  margin-bottom: 1.5rem; 
  letter-spacing: -0.01em;
}

.hero-text p { 
  color: var(--text-gray); 
  font-size: 1.05rem; 
  line-height: 1.6; 
  max-width: 480px; 
}

/* Panel Derecho */
.right-panel {
  width: 45%;
  min-width: 460px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Mantiene balanceados los elementos verticalmente */
  padding: 3rem 4rem;
}

.top-bar { 
  display: flex; 
  justify-content: flex-start; 
  align-items: center; 
  height: 40px;
}

.btn-back { 
  display: flex; 
  align-items: center; 
  gap: 6px; 
  background: #f1f5f9; 
  border: none; 
  padding: 8px 16px; 
  border-radius: 6px; 
  cursor: pointer; 
  font-size: 0.85rem; 
  color: #475569; 
  text-decoration: none; 
  font-weight: 500;
}

/* Contenedor central del formulario */
.auth-container { 
  max-width: 380px; 
  width: 100%; 
  margin: auto 0; 
}

.auth-title { 
  font-size: 2.2rem; 
  color: var(--text-dark); 
  margin-bottom: 0.5rem; 
  font-weight: 700; 
  letter-spacing: -0.02em;
}

.auth-subtitle { 
  color: #64748b; 
  margin-bottom: 2rem; 
  font-size: 0.95rem; 
}

/* Elementos del Formulario */
.form-group { 
  margin-bottom: 1.2rem; 
}

.form-group label { 
  display: block; 
  font-size: 0.85rem; 
  font-weight: 600; 
  color: var(--text-dark); 
  margin-bottom: 0.4rem; 
}

.form-group input { 
  width: 100%; 
  padding: 11px 14px; 
  border: 1px solid var(--input-border); 
  border-radius: 6px; 
  font-size: 0.95rem; 
  outline: none; 
}

.form-group input:focus { 
  border-color: var(--brand-blue); 
}

.forgot-pass { 
  text-align: right; 
  margin-bottom: 1.5rem; 
}

.forgot-pass a { 
  color: #16a34a; /* Enlace verde para restablecer contraseña */
  font-size: 0.85rem; 
  text-decoration: none; 
  font-weight: 500; 
}

.btn-submit { 
  width: 100%; 
  background-color: var(--brand-blue); 
  color: white; 
  border: none; 
  padding: 13px; 
  border-radius: 30px; 
  font-size: 0.95rem; 
  font-weight: 600; 
  cursor: pointer; 
  transition: background 0.15s ease;
}

.btn-submit:hover { 
  background-color: var(--brand-hover); 
}

/* Divisor OAuth */
.separator { 
  display: flex; 
  align-items: center; 
  text-align: center; 
  color: #94a3b8; 
  font-size: 0.8rem; 
  margin: 1.5rem 0; 
}

.separator::before, .separator::after { 
  content: ''; 
  flex: 1; 
  border-bottom: 1px solid #e2e8f0; 
}

.separator:not(:empty)::before { margin-right: .8em; }
.separator:not(:empty)::after { margin-left: .8em; }

/* Botón Google */
.btn-google { 
  width: 100%; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: 10px; 
  background: white; 
  border: 1px solid var(--input-border); 
  padding: 11px; 
  border-radius: 30px; 
  font-size: 0.95rem; 
  font-weight: 500; 
  color: #334155; 
  cursor: pointer; 
}

/* Caja de intercambio inferior */
.switch-box { 
  margin-top: 2rem;
  text-align: center; 
  font-size: 0.9rem; 
  color: #475569; 
}

.switch-box a { 
  color: #16a34a; 
  font-weight: 600; 
  text-decoration: none; 
  margin-left: 4px; 
}

/* Desactivar panel izquierdo en móviles manteniendo la regla de no scroll */
@media (max-width: 950px) {
  .left-panel { display: none; }
  .right-panel { width: 100%; min-width: 100%; padding: 2rem; justify-content: center; }
  .top-bar { position: absolute; top: 2rem; left: 2rem; }
}