/* ============================================================
   ZAPLUXE THEME
   Tema oscuro con fondo #010d1d, texto blanco, fuente Raleway
   ============================================================ */

:root {
  /* Background colors */
  --color-bg-base: #010d1d;
  --color-bg-card: #0a1629;
  --color-bg-secondary: #0f1f33;

  /* Text colors */
  --color-text-base: #ffffff;
  --color-text-muted: rgba(255, 255, 255, 0.7);
  --color-text-secondary: rgba(255, 255, 255, 0.6);

  /* Primary colors (rojo acento del legacy #E90216) */
  --primary-300: #ff7080;
  --primary-400: #ff3d4f;
  --primary-500: #e90216;
  --primary-600: #b30012;
  --color-primary: #e90216;          /* alias para TopLegalBanner y otros componentes genéricos */
  --color-text-inverse: #ffffff;     /* texto sobre fondo primario (rojo) → blanco */

  /* Gradients */
  --gradient-primary: linear-gradient(112deg, #e90216, #b30012);
  --gradient-primary-secondary: linear-gradient(112deg, #e90216, #b30012);

  /* Border and inputs */
  --color-border: rgba(255, 255, 255, 0.1);
  --color-input-bg: #0f1f33;
  --color-input-border: rgba(255, 255, 255, 0.15);

  /* Border radius */
  --radius-card: 12px;
  --radius-button: 8px;

  /* Header and Footer */
  --header-bg: #010d1d;
  --header-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  --footer-bg: #010d1d;
  --footer-border: rgba(255, 255, 255, 0.1);

  /* Icons */
  --color-icon-default: #ffffff;
  --color-icon-muted: rgba(255, 255, 255, 0.6);

  /* Error and status colors */
  --color-error: #fc8181;
  --color-success: #68d391;
  --color-warning: #f6ad55;

  /* Font family variables */
  --font-raleway: 'Raleway', system-ui, sans-serif;
  --font-family-base: var(--font-raleway);
  --font-family-display: var(--font-raleway);
}

/* Body override - forces dark bg and Raleway font with !important to override template defaults */
body.theme-zapluxe {
  background-color: #010d1d !important;
  color: #fff !important;
  font-family: var(--font-raleway), system-ui, sans-serif;
}

.theme-zapluxe {
  --font-family-base: var(--font-raleway);
  --font-family-display: var(--font-raleway);
}

/* SDK PasswordReset Component Overrides for Zapluxe */
.pr-page {
  background-color: #010d1d;
  font-family: var(--font-raleway), inherit;
  color: #ffffff;
}

.pr-card {
  background-color: #0a1629;
  border-color: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  max-width: 480px;
}

.pr-title {
  color: #ffffff;
  font-size: 28px;
  font-weight: 700;
}

.pr-subtitle {
  color: rgba(255, 255, 255, 0.7);
}

.pr-label {
  color: #ffffff;
  font-size: 18px;
}

.pr-input {
  background-color: #0f1f33;
  border-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border-radius: 999px;
}

.pr-input:focus {
  border-color: #e90216;
  outline: none;
}

.pr-btn {
  background: linear-gradient(112deg, #e90216, #b30012) !important;
  color: #ffffff !important;
  border-radius: 999px;
  font-weight: 700;
  font-size: 18px;
}

.pr-btn:hover:not(:disabled) {
  opacity: 0.9;
}

.pr-error-msg {
  color: #fc8181;
}

.pr-success-text {
  color: #ffffff;
}

.pr-rule {
  font-size: 14px;
}

.pr-logo {
  max-height: 56px;
}