/* entrar.css — la puerta. Hereda paleta y titulares de `estilo.css` + `landing.css`; solo añade la tarjeta.
 *
 * Decisión de forma: una tarjeta ESTRECHA y centrada, no un formulario a página completa. Un campo de
 * correo de 900 px de ancho se lee como un formulario administrativo; a 420 px se lee como una puerta.
 */

.caja-entrar {
  min-height: calc(100vh - 60px);
  display: grid; place-items: center;
  padding: 30px 20px 70px;
}
.tarjeta-entrar {
  width: 100%; max-width: 420px;
  background: var(--sup-1); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 26px 22px 22px;
}
.tarjeta-entrar h1 { font-size: clamp(26px, 7vw, 34px); line-height: 1; margin: 20px 0 6px; text-transform: none; }
.sub-entrar { color: var(--gris); font-size: 15px; margin: 0 0 20px; }

/* ── pestañas ──────────────────────────────────────────────────────────────────────────────────── */
.pestanas { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--negro); padding: 4px; border-radius: 8px; }
.pestana {
  background: transparent; border: 0; cursor: pointer; color: var(--gris);
  font: 700 14px/1 inherit; letter-spacing: .08em; text-transform: uppercase;
  padding: 11px 8px; border-radius: 6px;
  transition: background .15s ease, color .15s ease;
}
.pestana:hover { color: var(--hueso); }
.pestana.activa { background: var(--sup-2); color: var(--hueso); }

/* ── campos ────────────────────────────────────────────────────────────────────────────────────── */
.tarjeta-entrar label { margin-top: 14px; }
.tarjeta-entrar input[type="email"], .tarjeta-entrar input[type="password"], .tarjeta-entrar input[type="text"] {
  background: var(--negro); border-radius: 8px;
}
/* el botón «ver» va DENTRO del campo: fuera parecía un segundo botón del formulario y se pulsaba por error */
.campo-clave { position: relative; }
.campo-clave input { padding-right: 62px; }
.ver-clave {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: var(--sup-2); border: 1px solid var(--linea); color: var(--gris);
  font: 700 11px/1 inherit; letter-spacing: .1em; text-transform: uppercase;
  padding: 8px 10px; border-radius: 6px; cursor: pointer;
}
.ver-clave:hover { color: var(--hueso); border-color: #4a463c; }
.ver-clave[aria-pressed="true"] { color: var(--amarillo); border-color: var(--amarillo); }
.pista { color: var(--gris); font-size: 12px; line-height: 1.45; margin: 8px 0 0; }

.ancho-total { width: 100%; text-align: center; display: block; }
#btn-enviar { margin-top: 20px; }

/* El aviso de error: fondo ÁMBAR y no rojo, a propósito. Equivocarse de contraseña no es un accidente
   grave; el rojo de alarma para un fallo cotidiano solo pone nervioso. El rojo se reserva para lo que
   de verdad rompe algo. */
.aviso-entrar {
  background: #2b2416; color: var(--amarillo);
  border: 1px solid #4a3d15; border-radius: 8px;
  font-size: 14px; line-height: 1.45; padding: 11px 13px; margin: 16px 0 0;
}

/* ── separador y otras vías ────────────────────────────────────────────────────────────────────── */
.separador { display: flex; align-items: center; gap: 12px; margin: 22px 0 16px; color: var(--gris); font-size: 12px; }
.separador::before, .separador::after { content: ''; flex: 1; height: 1px; background: var(--linea); }
.otras-vias { display: grid; gap: 9px; }
.otras-vias .btn { text-decoration: none; font-size: 14px; padding: 13px 16px; }
.pie-tarjeta { margin: 20px 0 0; text-align: center; line-height: 1.5; }
.pie-tarjeta a { color: var(--amarillo); }