:root {
  --pelegal-red: #8f171b;
  --pelegal-red-strong: #731014;
  --pelegal-logo-bg: #541713;
  --pelegal-red-soft: #f8e9e9;
  --pelegal-ink: #291719;
  --pelegal-muted: #766568;
  --pelegal-border: #ead7d8;
  --pelegal-white: #ffffff;
  color-scheme: light;
}

html,
html.dark {
  color-scheme: light !important;
  --color-n-brand: 143 23 27 !important;
  --color-n-brand-hover: 115 16 20 !important;
}

body {
  background: #faf7f7 !important;
  color: var(--pelegal-ink) !important;
}

/* Login exclusivo do dominio Pe Legal */
body.pelegal-login main {
  position: relative;
  min-height: 100vh !important;
  padding: 4.5rem 1.25rem !important;
  background:
    radial-gradient(circle at 15% 10%, rgba(143, 23, 27, 0.10), transparent 35%),
    linear-gradient(145deg, #fff 0%, #faf4f4 58%, #f3e5e5 100%) !important;
}

body.pelegal-login main::before {
  content: "ATENDIMENTO INTEGRADO";
  display: block;
  margin: 0 auto 1rem;
  color: var(--pelegal-red);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .22em;
  text-align: center;
}

body.pelegal-login main > section:first-of-type img {
  width: auto !important;
  height: 5.4rem !important;
  max-width: min(78vw, 22rem) !important;
  object-fit: contain !important;
}

body.pelegal-login main > section:first-of-type img[data-pelegal-logo="true"] {
  padding: .5rem 0 !important;
  background: var(--pelegal-logo-bg) !important;
  box-shadow: 0 0 0 100vmax var(--pelegal-logo-bg) !important;
  clip-path: inset(0 -100vmax) !important;
}

body.pelegal-login main > section:first-of-type h2 {
  margin-top: 1.25rem !important;
  color: var(--pelegal-ink) !important;
  font-size: clamp(1.65rem, 4vw, 2.25rem) !important;
  font-weight: 750 !important;
}

body.pelegal-login main > section:nth-of-type(2) {
  border: 1px solid var(--pelegal-border) !important;
  border-top: 5px solid var(--pelegal-red) !important;
  border-radius: 1.25rem !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 24px 70px rgba(80, 20, 24, .14) !important;
}

body.pelegal-login label,
body.pelegal-login p,
body.pelegal-login span {
  color: var(--pelegal-ink);
}

body.pelegal-login input {
  background: #fff !important;
  color: var(--pelegal-ink) !important;
  border: 1px solid var(--pelegal-border) !important;
  outline-color: var(--pelegal-border) !important;
}

body.pelegal-login input:focus {
  border-color: var(--pelegal-red) !important;
  outline-color: rgba(143, 23, 27, .34) !important;
  box-shadow: 0 0 0 3px rgba(143, 23, 27, .10) !important;
}

body.pelegal-login button[type="submit"],
body.pelegal-login form button:last-child {
  background: linear-gradient(135deg, var(--pelegal-red), var(--pelegal-red-strong)) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(143, 23, 27, .23) !important;
}

body.pelegal-login button[type="submit"] *,
body.pelegal-login button[aria-label*="password" i],
body.pelegal-login button[aria-label*="password" i] * {
  color: #fff !important;
}

body.pelegal-login button[aria-label*="password" i] {
  width: 3.25rem !important;
  min-width: 3.25rem !important;
  height: 100% !important;
  padding: 0 !important;
  border-radius: .7rem !important;
}

body.pelegal-login button[aria-label*="password" i] > span {
  width: 1.2rem !important;
  height: 1.2rem !important;
}

body.pelegal-login a {
  color: var(--pelegal-red) !important;
}

/* Identidade aplicada tambem ao painel interno neste dominio. */
body:not(.pelegal-login) [class*="bg-n-brand"],
body:not(.pelegal-login) [class*="bg-woot"] {
  background-color: var(--pelegal-red) !important;
}

body:not(.pelegal-login) [class*="text-n-brand"],
body:not(.pelegal-login) [class*="text-woot"],
body:not(.pelegal-login) .text-link {
  color: var(--pelegal-red) !important;
}

body:not(.pelegal-login) [class*="border-n-brand"],
body:not(.pelegal-login) [class*="border-woot"] {
  border-color: var(--pelegal-red) !important;
}

body:not(.pelegal-login) [class*="outline-n-brand"] {
  outline-color: var(--pelegal-red) !important;
}

body:not(.pelegal-login) nav,
body:not(.pelegal-login) aside {
  --color-n-brand: 143 23 27 !important;
}

img[data-pelegal-logo="true"] {
  object-fit: contain !important;
}

@media (max-width: 640px) {
  body.pelegal-login main {
    padding: 2.5rem 1rem !important;
  }

  body.pelegal-login main > section:nth-of-type(2) {
    padding: 1.5rem !important;
  }
}