/*
 * BRIALPACA — Auth Pages Styles
 * Login, Register, Forgot Password, Reset Password
 */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Cormorant+Garamond:ital,wght@1,300;1,400&family=Raleway:wght@300;400;500&display=swap');

:root {
  --cream:     #F5EFE4;
  --sand:      #E8D5B5;
  --alpaca:    #C9A87C;
  --tierra:    #8B6340;
  --andino:    #4A3728;
  --obsidiana: #1C1410;
  --oro:       #D4A853;
  --blanco:    #FAF7F2;
}

/* ── Página completa ── */
body {
  background-color: var(--cream) !important;
  font-family: 'Raleway', sans-serif !important;
}

/* ── Logo BRIALPACA en auth ── */
.bri-auth-logo-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none !important;
  margin: 0 auto 24px;
  gap: 4px;
}
.bri-auth-logo {
  font-family: 'Cinzel', serif;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--andino);
  line-height: 1;
}
.bri-auth-bri {
  color: var(--tierra);
}
.bri-auth-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 13px;
  font-weight: 300;
  color: var(--tierra);
  letter-spacing: 0.1em;
}

/* ── Card del formulario ── */
.m-auto.w-full.max-w-\[870px\] {
  background: var(--blanco) !important;
  border-color: var(--sand) !important;
  border-radius: 8px !important;
}

/* ── Título h1 (Inicio de Sesión, Registro...) ── */
h1.font-dmserif {
  font-family: 'Cinzel', serif !important;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--andino) !important;
}

/* ── Subtítulo ── */
p.mt-4.text-xl.text-zinc-500 {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic;
  color: var(--tierra) !important;
}

/* ── Labels ── */
label {
  font-family: 'Raleway', sans-serif !important;
  font-size: 11px !important;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--andino) !important;
}

/* ── Inputs ── */
input[type="email"],
input[type="password"],
input[type="text"] {
  font-family: 'Raleway', sans-serif !important;
  border-color: var(--sand) !important;
  border-radius: 4px !important;
  background: var(--blanco) !important;
  color: var(--obsidiana) !important;
  transition: border-color .25s, box-shadow .25s;
}
input[type="email"]:focus,
input[type="password"]:focus,
input[type="text"]:focus {
  border-color: var(--alpaca) !important;
  box-shadow: 0 0 0 3px rgba(201,168,124,.18) !important;
  outline: none !important;
}

/* ── Botón submit ── */
button.primary-button[type="submit"],
button[type="submit"].primary-button {
  font-family: 'Raleway', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500;
  letter-spacing: 0.35em !important;
  text-transform: uppercase !important;
  background: var(--andino) !important;
  color: var(--alpaca) !important;
  border: 1px solid var(--andino) !important;
  border-radius: 4px !important;
  padding: 14px 36px !important;
  transition: all .3s ease !important;
  max-width: 100% !important;
}
button.primary-button[type="submit"]:hover {
  background: var(--oro) !important;
  color: var(--obsidiana) !important;
  border-color: var(--oro) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(212,168,83,.3) !important;
}

/* ── Links (olvidé contraseña, crear cuenta) ── */
a.text-navyBlue,
a.cursor-pointer.text-base.text-black {
  color: var(--tierra) !important;
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
}
a.text-navyBlue:hover,
a.cursor-pointer.text-base.text-black:hover {
  color: var(--alpaca) !important;
}

/* ── Texto "¿Ya tienes cuenta?" ── */
p.font-medium.text-zinc-500 {
  font-family: 'Raleway', sans-serif !important;
  color: var(--tierra) !important;
  font-weight: 300;
}

/* ── Footer ── */
p.text-center.text-xs.text-zinc-500 {
  font-family: 'Raleway', sans-serif !important;
  color: var(--tierra) !important;
  font-size: 11px;
  letter-spacing: 0.1em;
}
p.text-center.text-xs.text-zinc-500 a {
  color: var(--alpaca) !important;
  text-decoration: none;
}
p.text-center.text-xs.text-zinc-500 a:hover {
  color: var(--oro) !important;
}

/* ── Checkbox mostrar contraseña ── */
.text-navyBlue.peer-checked\:text-navyBlue {
  color: var(--alpaca) !important;
}

/* ── Línea separadora ── */
.border-zinc-200 {
  border-color: var(--sand) !important;
}

/* ── Fondo del contenedor total ── */
.container.mt-20 {
  padding-top: 48px !important;
}