/* ============================================================
   THEME: SL BENFICA  (sl-benfica-pt-v4)
   Sin rediseño Figma → skin heredado del legacy
   (https://www.sl-benfica-mobile.pt): portal CLARO (fondo blanco),
   color de marca rojo Benfica #c30000.
   ============================================================ */

:root {
  /* Superficies — portal CLARO */
  --color-bg-base: #ffffff;
  --color-bg-card: #f5f5f5;
  --color-bg-elevated: #ffffff;

  /* Texto sobre fondo claro (legacy usa grises #4e4e4e / #5b5b5b) */
  --color-text-base: #1a1a1a;
  --color-text-muted: #5b5b5b;
  --color-text-inverse: #ffffff;
  --color-on-accent: #ffffff;

  /* Marca — rojo Benfica */
  --color-primary: #c30000;
  --primary-500: #c30000;
  --primary-600: #96151d; /* rojo oscuro (legacy) */
  --primary-400: #ff223d; /* rojo claro (legacy) */
  --color-secondary: #4e4e4e;

  --gradient-primary: linear-gradient(112deg, #ff223d 0%, #c30000 60%, #96151d 100%);
  /* Alias que consume el botón Aceptar del banner de cookies (CookieConsentWrapper
     usa var(--gradient-primary-secondary); si no existiera, el botón quedaría sin
     fondo). = mismo rojo de marca. */
  --gradient-primary-secondary: linear-gradient(112deg, #ff223d 0%, #c30000 60%, #96151d 100%);

  /* Cabecera de DOS BANDAS (skin del legacy):
     banda superior NEGRA con el logo grande + barra de nav ROJA con texto
     blanco. */
  --header-top-bg: #000000;
  --header-nav-bg: #c30000;
  --header-nav-text: #ffffff;
  --header-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);

  /* Footer: banda ROJA con texto blanco (skin del legacy). */
  --footer-bg: #c30000;
  --footer-border: #96151d;
  --footer-text: #ffffff;

  /* Bordes / inputs */
  --color-border: #e0e0e0;
  --color-input-bg: #ffffff;
  --color-input-border: #cfcfcf;

  /* Estados */
  --color-error: #c30000;
  --color-success: #2e7d32;

  /* Radios */
  --radius-card: 12px;
  --radius-input: 8px;

  /* Sombras */
  --shadow-cta: 0 6px 18px rgba(195, 0, 0, 0.28);
  --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* Tipografía — la fuente propia del club ('Benfica', 'benfica23_24_regular')
     es propietaria (no licenciable para web sin ficheros). Usamos la MISMA
     cadena de fallback que declara el legacy. Si el club aporta los .woff2,
     añadir con next/font/local y anteponer aquí. */
  --font-family-base: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-family-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Trampa del template: src/app/[locale]/layout.tsx fija en el <body> la clase
   `bg-neutral-900! text-white`. Al ser portal CLARO hay que vencerla con
   especificidad + !important (ver patch "fondo de página" de migrar_portal). */
body.theme-benfica {
  background-color: var(--color-bg-base) !important;
  color: var(--color-text-base) !important;
  font-family: var(--font-family-base);
}

.theme-benfica,
.theme-benfica body {
  font-family: var(--font-family-base);
}

/* ------------------------------------------------------------
   Login page — fondo de fans del legacy (paridad visual)
   ------------------------------------------------------------ */

body.theme-benfica .login-page {
  background-image:
    linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
    url('https://d2obs2d3lmpnq9.cloudfront.net/Benfica/Assets/Login/logindesk2.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100vh !important;
  background-color: #0d0000 !important;
}

/* Extiende el fondo oscuro al body en login y recovery-password */
body.theme-benfica:has(.login-page),
body.theme-benfica:has(.recovery-password-page),
body.theme-benfica:has(.recover-page) {
  background-color: #0d0000 !important;
  background-image:
    linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
    url('https://d2obs2d3lmpnq9.cloudfront.net/Benfica/Assets/Login/logindesk2.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Tarjeta semitransparente oscura sobre el fondo */
body.theme-benfica .login-card {
  background-color: rgba(0, 0, 0, 0.40) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(4px);
}

/* Título del login */
body.theme-benfica .signup-title {
  color: #ffffff !important;
}

/* Labels y texto del formulario → blancos sobre fondo oscuro */
body.theme-benfica .login-card label,
body.theme-benfica .signup-form label {
  color: #ffffff !important;
}

/* Inputs — fondo blanco semitransparente con texto oscuro */
body.theme-benfica .signup-form input,
body.theme-benfica .login-card input {
  background-color: rgba(255, 255, 255, 0.92) !important;
  color: #1a1a1a !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}
body.theme-benfica .signup-form input::placeholder,
body.theme-benfica .login-card input::placeholder {
  color: #555 !important;
  opacity: 1;
}

/* Icono del ojo / user dentro del input */
body.theme-benfica .signup-form .login-input svg,
body.theme-benfica .login-card .login-input svg {
  color: #555 !important;
}

/* Autofill del browser — evita el fondo rojo/amarillo del sistema */
body.theme-benfica .signup-form input:-webkit-autofill,
body.theme-benfica .login-card input:-webkit-autofill,
body.theme-benfica .signup-form input:-webkit-autofill:hover,
body.theme-benfica .login-card input:-webkit-autofill:hover,
body.theme-benfica .signup-form input:-webkit-autofill:focus,
body.theme-benfica .login-card input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px rgba(255,255,255,0.92) inset !important;
  -webkit-text-fill-color: #1a1a1a !important;
  caret-color: #1a1a1a;
}

/* Botón submit → rojo con texto blanco */
body.theme-benfica .login-card button[type="submit"],
body.theme-benfica .signup-form button[type="submit"] {
  background: var(--color-primary) !important;
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
  border: none !important;
  opacity: 1 !important;
}
body.theme-benfica .login-card button[type="submit"]:hover:not(:disabled),
body.theme-benfica .signup-form button[type="submit"]:hover:not(:disabled) {
  background-color: var(--primary-600) !important;
}
body.theme-benfica .login-card button[type="submit"]:disabled,
body.theme-benfica .signup-form button[type="submit"]:disabled {
  background-color: rgba(195, 0, 0, 0.45) !important;
  color: rgba(255,255,255,0.7) !important;
}

/* "Esqueceste-te da tua palavra-passe?" y cualquier link de recovery → blanco visible */
body.theme-benfica .login-card a.forgot-password-link,
body.theme-benfica .signup-form a.forgot-password-link,
body.theme-benfica .login-card a[href*="recovery"],
body.theme-benfica .signup-form a[href*="recovery"],
body.theme-benfica .login-card a[href*="forgot"],
body.theme-benfica .signup-form a[href*="forgot"] {
  color: rgba(255, 255, 255, 0.90) !important;
  opacity: 1 !important;
}
body.theme-benfica .login-card a.forgot-password-link:hover,
body.theme-benfica .signup-form a.forgot-password-link:hover {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* "Não tens conta?" y texto muted → blanco visible */
body.theme-benfica .login-card [class*="muted"],
body.theme-benfica .signup-form [class*="muted"] {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Contenedor del link recovery (div padre con opacity propia) */
body.theme-benfica .login-card [class*="opacity-"],
body.theme-benfica .signup-form [class*="opacity-"] {
  opacity: 1 !important;
}

/* Footer sobre banda ROJA: los legales (LinkLegal usa el color muted del tema,
   pensado para fondo claro) deben ir en BLANCO para contrastar con el rojo. */
body.theme-benfica footer a,
body.theme-benfica footer button {
  color: var(--footer-text) !important;
}
body.theme-benfica footer a:hover,
body.theme-benfica footer button:hover {
  color: #ffffff !important;
  opacity: 0.85;
}

/* ------------------------------------------------------------
   SDK PasswordReset Component Overrides (.pr-*)
   Heredan de las variables de :root de arriba.
   ------------------------------------------------------------ */

.pr-page {
  background-color: var(--color-bg-base);
  font-family: inherit;
  color: var(--color-text-base);
}

.pr-card {
  background-color: var(--color-bg-card);
  border-color: var(--color-border);
  border-radius: var(--radius-card);
  max-width: 480px;
}

.pr-title {
  color: var(--color-text-base);
  font-size: 28px;
  font-weight: 700;
}

.pr-subtitle {
  color: var(--color-text-muted);
}

.pr-label {
  color: var(--color-text-base);
  font-size: 18px;
}

.pr-input {
  background-color: var(--color-input-bg);
  border-color: var(--color-input-border);
  color: var(--color-text-base);
  border-radius: var(--radius-input);
}

.pr-input:focus {
  border-color: var(--primary-500);
  outline: none;
}

.pr-btn {
  background: var(--gradient-primary) !important;
  color: var(--color-on-accent) !important;
  border-radius: 999px;
  font-weight: 700;
  font-size: 18px;
}

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

.pr-error-msg {
  color: var(--color-error);
}

.pr-success-text {
  color: var(--color-text-base);
}

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

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

/* ------------------------------------------------------------
   SDK RecoveryPassword Component Overrides (.rp-*)
   !important necesario: el SDK inyecta sus <style> después del
   <link> del tema, ganando en orden de fuente.
   ------------------------------------------------------------ */

.rp-page {
  background-color: var(--color-bg-base) !important;
  font-family: inherit !important;
  color: var(--color-text-base) !important;
}

/* En páginas recovery/recover el fondo del SDK debe ser transparente */
.recovery-password-page .rp-page,
.recovery-password-page .pr-page,
.recover-page .rp-page,
.recover-page .pr-page {
  background-color: transparent !important;
  min-height: unset !important;
}

.rp-card {
  background-color: var(--color-bg-base) !important;
  border-color: var(--color-border) !important;
  border-radius: var(--radius-card) !important;
  max-width: 480px;
}

.rp-title {
  color: var(--color-text-base) !important;
  font-size: 28px;
  font-weight: 700;
}

.rp-subtitle {
  color: var(--color-text-muted) !important;
}

.rp-label {
  color: var(--color-text-base) !important;
  font-size: 18px;
}

.rp-input {
  background-color: var(--color-input-bg) !important;
  border-color: var(--color-input-border) !important;
  color: var(--color-text-base) !important;
  border-radius: var(--radius-input) !important;
}

.rp-input::placeholder {
  color: var(--color-text-muted) !important;
  opacity: 1;
}

.rp-input:focus {
  border-color: var(--primary-500) !important;
  outline: none !important;
}

.rp-btn {
  background: var(--gradient-primary) !important;
  color: var(--color-on-accent) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: 18px !important;
}

.rp-btn:hover:not(:disabled) {
  opacity: 0.92 !important;
}

.rp-error-msg {
  color: var(--color-error) !important;
}

.rp-success-text {
  color: var(--color-text-base) !important;
}

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

/* Mismo tratamiento para .pr-* — mismo problema de orden de fuente */
.pr-title    { color: var(--color-text-base) !important; }
.pr-subtitle { color: var(--color-text-muted) !important; }
.pr-label    { color: var(--color-text-base) !important; }
.pr-input {
  background-color: var(--color-input-bg) !important;
  border-color: var(--color-input-border) !important;
  color: var(--color-text-base) !important;
}
.pr-input::placeholder { color: var(--color-text-muted) !important; opacity: 1; }
.pr-input:focus        { border-color: var(--primary-500) !important; }