/*
 * Login de staging (Authelia 4.39) con la marca de Dónde Compro.
 *
 * Authelia arma el portal con variables de diseño (`--primary`, `--card`, …):
 * se pisan con los tokens de la web de clientes (apps/web/src/app/globals.css)
 * y se le da la forma de su pantalla de ingreso (cuenta/auth-ui.tsx). Si una
 * actualización de Authelia cambia algo, el login sigue andando: solo pierde
 * estos estilos. Revisarlo en cada actualización.
 */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('./dc-fonts/plus-jakarta-sans-latin-v12.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root,
[data-theme='light'] {
  --background: #f6f5fa;
  --foreground: #1b2a41;
  --card: #ffffff;
  --card-foreground: #1b2a41;
  --popover: #ffffff;
  --popover-foreground: #1b2a41;
  --primary: #6d28d9;
  --primary-foreground: #ffffff;
  --muted-foreground: #5b6577;
  --border: #ece9f4;
  --input: #e5e1f0;
  --ring: #6d28d9;
  --radius: 0.75rem;
}

html,
body,
button,
input {
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif !important;
}

body {
  color: #1b2a41;
  background:
    radial-gradient(60rem 30rem at 0% 0%, rgb(8 184 237 / 0.1), transparent 60%),
    radial-gradient(50rem 30rem at 100% 100%, rgb(245 0 145 / 0.08), transparent 60%),
    #f6f5fa !important;
  min-height: 100vh;
}

/* Logo completo a tamaño de encabezado (Authelia lo fija en 64 px). */
img[src$='static/media/logo.png'] {
  width: 200px !important;
  max-width: 70vw !important;
  height: auto !important;
  margin-bottom: 4px;
}

/* La etapa de cada paso (contraseña, 2FA, …) como la tarjeta de la web. */
[id$='-stage'] > div:first-child {
  background: #ffffff;
  border: 1px solid #ece9f4;
  border-radius: 18px;
  padding: 28px 22px 22px;
  box-shadow:
    0 1px 2px 0 rgb(27 42 65 / 0.05),
    0 4px 16px -4px rgb(27 42 65 / 0.08);
  max-width: 440px;
}

[id$='-stage'] h5 {
  font-size: 21px;
  font-weight: 800;
  color: #1b2a41;
}

/* Campos: como los de la web (46 px, borde violeta suave, radio 12 px). */
[id$='-stage'] input[type='text'],
[id$='-stage'] input[type='email'],
[id$='-stage'] input[type='password'] {
  border-radius: 12px;
  border-width: 1.5px;
  border-color: #e5e1f0;
  font-weight: 500;
  font-size: 15px;
  color: #1b2a41;
}

[id$='-stage'] input:focus {
  border-color: #6d28d9 !important;
  box-shadow: 0 0 0 3px rgb(109 40 217 / 0.18) !important;
}

[id$='-stage'] label {
  font-weight: 600;
}

/* Botón principal con el degradé del logo. */
#sign-in-button,
button.bg-primary:not([role='checkbox']) {
  height: 48px;
  border-radius: 12px;
  border: 0;
  text-transform: none;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
  color: #ffffff;
  background: linear-gradient(90deg, #168af2 0%, #7933e8 55%, #c715d5 100%);
  box-shadow: 0 6px 16px -6px rgb(121 51 232 / 0.55);
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}

#sign-in-button:hover,
button.bg-primary:not([role='checkbox']):hover {
  filter: brightness(1.06);
  box-shadow: 0 8px 20px -6px rgb(121 51 232 / 0.65);
}

/* Links en el violeta de la web. */
[id$='-stage'] a,
[id$='-stage'] button.text-primary {
  color: #5b21b6;
  font-weight: 700;
}

/* «Login protegido con Authelia»: discreto. */
a[href*='authelia.com'] {
  color: #5b6577 !important;
  font-weight: 500 !important;
  font-size: 11px;
  opacity: 0.7;
}