/* Marca EricSports en las páginas del servidor (login, registro, cuenta): el mismo
 * tema que eric.poc (wwwroot/styles/eric-brand.css), aquí sobre LeptonX Pro.
 * El @import tiene que ir al principio de la hoja, por eso la fuente va aquí arriba. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;900&display=swap');

:root {
  --eric-red: #DA0432;
  --eric-red-dark: #B00328;
  --eric-ink: #0D0D0D;
  --eric-ground: #F5F6F8;
  --eric-amber: #FFB800;

  /* variables de marca de LeptonX */
  --lpx-brand: var(--eric-red);
  --lpx-logo: url('/images/logo/ericsports-logo.png');
  --lpx-logo-icon: url('/images/logo/ericsports-logo.png');
}

body {
  font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  background-color: var(--eric-ground);
  color: var(--eric-ink);
}

h1, h2, h3, .card-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: var(--eric-ink);
}

/* Botones primarios (Iniciar sesión, Registrar…) */
.btn-primary {
  background-color: var(--eric-red);
  border-color: var(--eric-red);
  font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--eric-red-dark) !important;
  border-color: var(--eric-red-dark) !important;
}
.btn-outline-primary {
  color: var(--eric-red);
  border-color: var(--eric-red);
}
.btn-outline-primary:hover {
  background-color: var(--eric-red);
  border-color: var(--eric-red);
}

a, .text-primary {
  color: var(--eric-red);
}
a:hover {
  color: var(--eric-red-dark);
}

/* Tarjetas de las páginas de cuenta */
.abp-account-container .card,
.card {
  border: none;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(13, 13, 13, 0.07);
}

/* Botón de mostrar/ocultar contraseña (morado por defecto en LeptonX) */
.input-group .btn:not(.btn-primary):not(.btn-outline-primary) {
  background-color: var(--eric-ink);
  border-color: var(--eric-ink);
  color: #FFFFFF;
}

/* Campos de formulario: foco en rojo de marca en vez del azul Bootstrap */
.form-control:focus, .form-check-input:focus {
  border-color: var(--eric-red);
  box-shadow: 0 0 0 0.2rem rgba(218, 4, 50, 0.15);
}
.form-check-input:checked {
  background-color: var(--eric-red);
  border-color: var(--eric-red);
}

/* Logo + nombre del tenant en la cabecera del login (lo compone global-scripts.js) */
.eric-brand-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 1rem;
}
.eric-brand-row .lpx-login-logo {
  /* Dentro del flex el div del logo colapsa a 0 de ancho: se fija */
  margin: 0 !important;
  width: 190px;
  min-width: 190px;
  background-repeat: no-repeat;
  background-position: center;
}
.eric-tenant-name {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1;
  color: var(--eric-ink);
  border-left: 3px solid var(--eric-red);
  padding-left: 16px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Wordmark: el nombre de la app en las páginas de cuenta, estilo display */
.lpx-brand-name, .navbar-brand {
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--eric-ink);
}

/* LeptonX Pro carga la hoja del tema (bootstrap-light.css, light.css) después de esta, y sus
 * variables en :root pisarían las de arriba: html:root gana por especificidad. */
html:root {
  --lpx-primary: var(--eric-red);
  --bs-primary: var(--eric-red);
  --bs-primary-rgb: 218, 4, 50;
  --bs-link-color: var(--eric-red);
  --bs-link-color-rgb: 218, 4, 50;
  --bs-link-hover-color: var(--eric-red-dark);
  --bs-link-hover-color-rgb: 176, 3, 40;
  --bs-body-font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
}

/* Fondo liso de la guía de marca en lugar de las ondas moradas. El layout de cuenta de Pro
 * lo fija con un <style> en línea y !important, así que hace falta !important y más especificidad. */
.lpx-login-area .lpx-login-bg {
  background-image: none !important;
  background-color: var(--eric-ground);
}

/* Prefijo body para ganar al bootstrap-*.css del tema, que se carga después */
body .btn-primary {
  --bs-btn-bg: var(--eric-red);
  --bs-btn-border-color: var(--eric-red);
  --bs-btn-hover-bg: var(--eric-red-dark);
  --bs-btn-hover-border-color: var(--eric-red-dark);
  --bs-btn-active-bg: var(--eric-red-dark);
  --bs-btn-active-border-color: var(--eric-red-dark);
}

body .btn-outline-primary {
  --bs-btn-color: var(--eric-red);
  --bs-btn-border-color: var(--eric-red);
  --bs-btn-hover-bg: var(--eric-red);
  --bs-btn-hover-border-color: var(--eric-red);
}

/* El logo es un wordmark apaisado; Pro reserva un cuadrado y lo recortaba */
.lpx-login-brand-text .lpx-brand-logo.lpx-login-logo {
  width: 190px;
  background-size: contain;
  background-position: center;
}

/* El wordmark ya lleva el nombre; el texto de la app debajo sobra */
.lpx-login-name {
  display: none;
}