@import url("https://fonts.googleapis.com/css2?family=Climate+Crisis:YEAR@1979&family=Contrail+One&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap");

:root {
  --white: #ffffff;
  --gray-100: #f5f5f5;
  --gray-200: #eeeeee;
  --gray-300: #e0e0e0;
  --gray-400: #bdbdbd;
  --gray-500: #9e9e9e;
  --gray-600: #757575;
  --gray-700: #616161;
  --gray-800: #424242;
  --gray-900: #212121;
  --black: #000000;

  /* Colores principales */
  --bs-primary: #0d00ca;
  --bs-primary-rgb: 13, 0, 202;

  --bs-secondary: #304ffe;
  --bs-secondary-rgb: 48, 79, 254;

  --bs-success: #2e7d32;
  --bs-success-rgb: 46, 125, 50;

  --bs-info: #00bcd4;
  --bs-info-rgb: 0, 188, 212;

  --bs-warning: #ff9800;
  --bs-warning-rgb: 255, 152, 0;

  --bs-danger: #c62828;
  --bs-danger-rgb: 198, 40, 40;

  --bs-light: #f5f5f5;
  --bs-light-rgb: 245, 245, 245;

  --bs-dark: #1e1e2f;
  --bs-dark-rgb: 30, 30, 47;

  /* Ajustes adicionales para mejor contraste */
  --bs-body-bg: #f5f5f5;
  --bs-body-color: #212529;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

body header nav.navbar {
  background-image: url("/img/WC_BG.jpg");
  background-position: top;
}

.login-card {
  background-image: url("/img/WC_BLUE_BG.jpg");
  background-position: center;
  background-size: cover;
}

body,
p,
span {
  font-family: "Nunito Sans", sans-serif;
}

.nunito-font {
  font-family: "Nunito Sans", sans-serif;
}

.crisis-font {
  font-family: "Climate Crisis", sans-serif;
}
.contrail-font {
  font-family: "Contrail One", sans-serif;
}

.bg-prussian {
  background-color: #013369;
}

.bg-palatinate {
  background-color: #1b48e0;
}

.bg-redsurrection {
  background-color: #d50a0a;
}

.btn {
  font-weight: 700;
}

.btn-lg {
  padding: 10px 16px;
}

.btn-palatinate {
  background-color: #004fff;
  border-color: #1b48e0;
  color: #fff;
}
.btn-palatinate:hover {
  background-color: #1b48e0;
  border-color: #1b48e0;
  color: #fff;
}

.btn-redsurrection {
  background-color: var(--bs-danger);
  border-color: var(--bs-danger);
  color: #fff;
}
.btn-redsurrection:hover {
  background-color: #980000;
  border-color: #980000;
  color: #fff;
}
.team {
  padding: 10px;
}
.team .team-name {
  line-height: 1.1;
}
.team-state {
  color: #212529;
  opacity: 0.5;
}

.card-picked .team-selected {
  background-color: var(--bs-primary);
  border-radius: 0.75rem;
  color: #fff;
}

.team-disabled {
  background-color: #cfcfcf;
  border-radius: 0.5rem;
  color: #fff;
}

.card-picked .team-selected .team-state {
  color: white;
  opacity: 0.5;
}

.selectteam label {
  border-radius: 0.5rem;
  margin: 0;
  cursor: pointer;
  line-height: 1.1;
}
.selectteam input:checked + label {
  background-color: var(--bs-primary);
  color: #fff;
}
.selectteam input:checked + label .team-state {
  color: white;
  opacity: 0.5;
}

.svg-prussian {
  filter: invert(15%) sepia(29%) saturate(4365%) hue-rotate(194deg)
    brightness(99%) contrast(104%);
}
.svg-palatinate {
  filter: invert(19%) sepia(70%) saturate(4275%) hue-rotate(227deg)
    brightness(92%) contrast(91%);
}

.svg-redsurrection {
  filter: invert(12%) sepia(96%) saturate(4610%) hue-rotate(356deg)
    brightness(91%) contrast(101%);
}
.svg-success {
  filter: invert(67%) sepia(57%) saturate(7403%) hue-rotate(90deg)
    brightness(112%) contrast(112%);
}

.text-prussian {
  color: #013369;
}

.text-palatinate {
  color: #1b48e0;
}

.text-redsurrection {
  color: #d50a0a;
}

.btn-white {
  background: var(--white);
  color: var(--black);
}
.btn-white:hover {
  background: var(--gray-300);
}
.card {
  border-radius: 1rem !important;
}
.validation-summary-errors ul {
  margin-bottom: 0;
}

.rounded-4 {
  border-radius: 0.75rem;
}
.rounded-5 {
  border-radius: 1rem;
}