/* ============================================================
   auth.css — Estilos compartidos de páginas de autenticación
   (login, registro, pendiente)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #0D0D0D;
  color: #F8FAFC;
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.card {
  background: #1C1C1C;
  border: 1px solid #2C2C2C;
  border-radius: 14px;
  padding: 36px 32px;
  width: 100%;
  max-width: 420px;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
}
.logo img { height: 36px; width: auto; }

h1 { font-size: 20px; font-weight: 700; color: #F8FAFC; text-align: center; margin-bottom: 6px; }
.subtitle { font-size: 13.5px; color: #6B7280; text-align: center; margin-bottom: 28px; }

.field { margin-bottom: 16px; }

.pwd-wrap { position: relative; }
.pwd-wrap input { padding-right: 42px !important; }
.pwd-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #6B7280; padding: 4px; display: flex; align-items: center; line-height: 0; }
.pwd-toggle:hover { color: #9CA3AF; }
label { display: block; font-size: 12.5px; font-weight: 500; color: #94A3B8; margin-bottom: 6px; }

input {
  width: 100%;
  background: #0D0D0D;
  border: 1px solid #2C2C2C;
  color: #F8FAFC;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus { outline: none; border-color: #F97316; box-shadow: 0 0 0 3px rgba(249,115,22,0.1); }
input::placeholder { color: #475569; }

.btn {
  width: 100%;
  padding: 11px;
  background: #F97316;
  color: #0D0D0D;
  font-weight: 700;
  font-size: 14px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
  margin-top: 8px;
}
.btn:hover { background: #EA6C0A; }

/* Errores */
.error, .errores {
  background: rgba(244,63,94,0.08);
  border: 1px solid rgba(244,63,94,0.25);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 20px;
}
.error { font-size: 13px; color: #FDA4AF; }
.errores p { font-size: 13px; color: #FDA4AF; line-height: 1.6; }

.footer { text-align: center; margin-top: 24px; font-size: 13px; color: #475569; }
.footer a { color: #F97316; text-decoration: none; }
.footer a:hover { text-decoration: underline; }

.divider { border: none; border-top: 1px solid #2C2C2C; margin: 24px 0; }

/* pendiente.html */
.card-centered { text-align: center; padding: 48px 36px; }
.icon { width: 56px; height: 56px; background: rgba(249,115,22,0.1); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; }
.hint { font-size: 13px; color: #475569; margin-top: 28px; padding-top: 24px; border-top: 1px solid #2C2C2C; }
p { font-size: 14px; color: #94A3B8; line-height: 1.6; }