/* Tela de acesso: regras restritas ao corpo e aos elementos .pf-acesso. */
body.pf-acesso {
  --acesso-fundo: #17334c;
  --acesso-superficie: #fff;
  --acesso-tinta: #172b47;
  --acesso-secundaria: #6a778a;
  --acesso-borda: #dce3ed;
  --acesso-campo: #fff;
  --acesso-azul: #246be8;
  --acesso-acao: #246be8;
  --acesso-azul-hover: #195bd0;
  --acesso-cyan: #57d6ed;
  --acesso-foco: rgb(36 107 232 / 15%);
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 3rem;
  background: var(--acesso-fundo);
  color: var(--acesso-tinta);
  font-family: "Manrope", "Poppins", system-ui, sans-serif;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.6;
}

body.pf-acesso::before {
  content: "";
  position: fixed;
  z-index: -2;
  inset: -2rem;
  background: linear-gradient(110deg, rgb(8 33 60 / 60%), rgb(14 38 56 / 38%)), url('/img/login-entregas.webp') center / cover;
  filter: blur(15px);
  pointer-events: none;
}

body.pf-acesso::after {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  background: linear-gradient(135deg, rgb(7 25 45 / 10%), rgb(7 25 45 / 24%));
  pointer-events: none;
}

.pf-acesso .pf-acesso-shell {
  display: grid;
  grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
  width: min(100%, 90rem);
  min-height: min(48rem, calc(100dvh - 6rem));
  margin: auto;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 1.4rem;
  background: var(--acesso-superficie);
  box-shadow: 0 24px 80px rgb(3 20 38 / 28%);
}

.pf-acesso .pf-acesso-apresentacao {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  gap: 2.25rem;
  padding: clamp(2.25rem, 4.2vw, 4.5rem);
  background-color: #0d2c50;
  background-image: linear-gradient(90deg, rgb(7 34 65 / 96%) 0%, rgb(9 39 72 / 89%) 45%, rgb(10 41 73 / 43%) 100%), linear-gradient(0deg, rgb(4 26 50 / 60%), rgb(7 34 65 / 8%) 65%), url('/img/login-entregas.webp');
  background-position: center, center, 66% center;
  background-size: cover;
  color: #fff;
}

.pf-acesso .pf-acesso-marca {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.pf-acesso .pf-acesso-logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  max-width: 11.25rem;
  padding: .55rem .7rem;
  border: 1px solid rgb(255 255 255 / 65%);
  border-radius: .45rem;
  background: #fff;
}

.pf-acesso .pf-acesso-logo img { display: block; width: 9.5rem; max-width: 100%; height: auto; }
.pf-acesso .pf-acesso-marca > span { max-width: 10rem; padding-left: 1rem; border-left: 1px solid rgb(209 224 238 / 32%); color: #d1e0ee; font-size: .875rem; font-weight: 600; line-height: 1.55; }
.pf-acesso .pf-acesso-mensagem { max-width: 34rem; }
.pf-acesso .pf-acesso-produto { margin: 0 0 .9rem; color: #c4deef; font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.pf-acesso .pf-acesso-mensagem h1 {
  margin: 0;
  color: #fff;
  font-family: "Manrope", "Poppins", system-ui, sans-serif;
  font-size: clamp(2.5rem, 3.55vw, 3.7rem);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -.05em;
}
.pf-acesso .pf-acesso-destaque { color: var(--acesso-cyan); }
.pf-acesso .pf-acesso-descricao { max-width: 28rem; margin: 1.1rem 0 0; color: #d2dfed; font-size: 1rem; font-weight: 500; line-height: 1.85; }
.pf-acesso .pf-acesso-recursos { display: grid; gap: 1.2rem; max-width: 28rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.pf-acesso .pf-acesso-recursos li { display: flex; align-items: center; gap: .85rem; }
.pf-acesso .pf-acesso-recurso-icone { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border: 1px solid rgb(94 205 236 / 22%); border-radius: .7rem; background: rgb(53 136 180 / 15%); color: #7cdef0; }
.pf-acesso .pf-acesso-recurso-icone svg { display: block; width: 1.3rem; height: 1.3rem; }
.pf-acesso .pf-acesso-recursos b { display: block; color: #f5f9fd; font-size: .9375rem; font-weight: 700; line-height: 1.6; }
.pf-acesso .pf-acesso-recursos li div > span { display: block; margin-top: .15rem; color: #bbcede; font-size: .8125rem; line-height: 1.6; }
.pf-acesso .pf-acesso-integracao { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem 1rem; padding-top: 1.1rem; border-top: 1px solid rgb(202 226 245 / 20%); font-size: .6875rem; line-height: 1.6; }
.pf-acesso .pf-acesso-integracao span { color: #bcd1e3; }
.pf-acesso .pf-acesso-integracao b { color: #f0f6fc; font-size: .75rem; font-weight: 700; }

.pf-acesso .pf-acesso-conta { display: flex; flex-direction: column; min-width: 0; padding: 1.75rem clamp(2.25rem, 4vw, 4.5rem) 1.75rem; background: var(--acesso-superficie); }
.pf-acesso .pf-acesso-preferencias { display: flex; justify-content: flex-end; min-height: 2.25rem; }
.pf-acesso .pf-acesso-preferencias .pf-icone-botao { width: 2.25rem; height: 2.25rem; border: 1px solid var(--acesso-borda); border-radius: .65rem; background: var(--acesso-superficie); color: var(--acesso-secundaria); }
.pf-acesso .pf-acesso-preferencias .pf-icone-botao:hover { background: var(--acesso-foco); color: var(--acesso-azul); }
.pf-acesso .pf-acesso-formulario { width: 100%; max-width: 26rem; margin: auto; padding: 2.5rem 0; }
.pf-acesso .pf-acesso-selo { display: inline-block; margin-bottom: .7rem; color: var(--acesso-azul); font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.pf-acesso .pf-acesso-formulario h2 { margin: 0; color: var(--acesso-tinta); font-family: "Manrope", "Poppins", system-ui, sans-serif; font-size: 2rem; font-weight: 800; line-height: 1.35; letter-spacing: -.045em; }
.pf-acesso .pf-acesso-orientacao { margin: .75rem 0 2rem; color: var(--acesso-secundaria); font-size: .9375rem; line-height: 1.8; }
.pf-acesso .pf-acesso-campo { margin-bottom: 1.25rem; }
.pf-acesso .form-label { margin-bottom: .5rem; color: var(--acesso-tinta); font-size: .875rem; font-weight: 700; }
.pf-acesso .form-control { width: 100%; min-height: 3.3rem; padding: .85rem 1rem; border: 1px solid var(--acesso-borda); border-radius: .6rem; background: var(--acesso-campo); color: var(--acesso-tinta); font-family: inherit; font-size: .9375rem; font-weight: 500; line-height: 1.6; box-shadow: none; transition: border-color .18s, box-shadow .18s; }
.pf-acesso .form-control::placeholder { color: var(--acesso-secundaria); opacity: .75; }
.pf-acesso .form-control:focus { border-color: var(--acesso-azul); outline: none; background: var(--acesso-campo); color: var(--acesso-tinta); box-shadow: 0 0 0 3px var(--acesso-foco); }
.pf-acesso .pf-acesso-input,
.pf-acesso .pf-acesso-senha { position: relative; }
.pf-acesso .pf-acesso-input .form-control,
.pf-acesso .pf-acesso-senha .form-control { padding-left: 2.85rem; }
.pf-acesso .pf-acesso-campo-icone { position: absolute; z-index: 1; left: 1rem; top: 50%; width: 1rem; height: 1rem; margin-top: -.5rem; color: var(--acesso-secundaria); pointer-events: none; }
.pf-acesso .pf-acesso-campo-icone svg { display: block; width: 100%; height: 100%; }
.pf-acesso .pf-acesso-input:focus-within .pf-acesso-campo-icone,
.pf-acesso .pf-acesso-senha:focus-within .pf-acesso-campo-icone { color: var(--acesso-azul); }
.pf-acesso .pf-acesso-senha .form-control { padding-right: 3.3rem; }
.pf-acesso .pf-acesso-senha-toggle { position: absolute; right: .35rem; top: .35rem; bottom: .35rem; display: grid; place-items: center; width: 2.6rem; padding: .4rem; border: 0; border-radius: .4rem; background: transparent; color: var(--acesso-secundaria); cursor: pointer; }
.pf-acesso .pf-acesso-senha-toggle svg { width: 1.5rem; height: 1.5rem; }
.pf-acesso .pf-acesso-senha-toggle:hover { background: var(--acesso-foco); color: var(--acesso-azul); }
.pf-acesso .pf-acesso-olho-fechado { display: none; }
.pf-acesso .pf-acesso-senha-toggle[aria-pressed="true"] .pf-acesso-olho { display: none; }
.pf-acesso .pf-acesso-senha-toggle[aria-pressed="true"] .pf-acesso-olho-fechado { display: block; }
.pf-acesso .pf-acesso-opcoes { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem 1rem; margin-top: .15rem; color: var(--acesso-secundaria); font-size: .8125rem; line-height: 1.6; }
.pf-acesso .pf-acesso-lembrar { display: inline-flex; align-items: center; gap: .5rem; margin: 0; cursor: pointer; }
.pf-acesso .pf-acesso-lembrar input { flex: none; width: 1rem; height: 1rem; margin: 0; accent-color: var(--acesso-acao); cursor: pointer; }
.pf-acesso .pf-acesso-lembrar label { margin: 0; cursor: pointer; }
.pf-acesso .pf-acesso-esqueci { padding: 0; border: 0; background: transparent; color: var(--acesso-azul); font-family: inherit; font-size: inherit; font-weight: 700; line-height: inherit; text-decoration: none; cursor: pointer; }
.pf-acesso .pf-acesso-esqueci:hover { text-decoration: underline; text-underline-offset: .2em; }
.pf-acesso .pf-acesso-entrar { position: relative; display: flex; align-items: center; justify-content: center; gap: .8rem; width: 100%; min-height: 3.3rem; margin-top: 1.8rem; padding: .8rem 3rem; border: 1px solid transparent; border-radius: .6rem; background: var(--acesso-acao); color: #fff; font-family: inherit; font-size: .9375rem; font-weight: 700; line-height: 1.6; box-shadow: 0 4px 12px rgb(31 101 224 / 15%); transition: background-color .18s; }
.pf-acesso .pf-acesso-entrar span { font: inherit; }
.pf-acesso .pf-acesso-entrar svg { position: absolute; right: 1.1rem; top: 50%; width: 1.05rem; height: 1.05rem; margin-top: -.525rem; }
.pf-acesso .pf-acesso-entrar:hover,
.pf-acesso .pf-acesso-entrar:focus { border-color: transparent; background: var(--acesso-azul-hover); color: #fff; box-shadow: 0 4px 12px rgb(31 101 224 / 15%); transform: none; }
.pf-acesso .pf-acesso-entrar:active { background: #154cae; color: #fff; transform: none; }
.pf-acesso .pf-acesso-ajuda { margin-top: 1.25rem; padding: .9rem 1rem; border: 1px solid var(--acesso-borda); border-radius: .6rem; background: var(--acesso-foco); }
.pf-acesso .pf-acesso-ajuda b { color: var(--acesso-tinta); font-size: .75rem; font-weight: 700; }
.pf-acesso .pf-acesso-ajuda p { margin: .35rem 0 0; color: var(--acesso-secundaria); font-size: .75rem; line-height: 1.8; }
.pf-acesso [hidden] { display: none !important; }
.pf-acesso .pf-acesso-rodape { width: 100%; padding: .5rem 0 0; color: var(--acesso-secundaria); font-size: .625rem; line-height: 1.7; text-align: center; }
.pf-acesso .pf-acesso-rodape > span { margin: 0 .5rem; }
.pf-acesso .pf-acesso-seguranca { display: flex; align-items: center; justify-content: center; gap: .4rem; margin: 0 0 .8rem; color: var(--acesso-secundaria); font-size: .6875rem; }
.pf-acesso .pf-acesso-seguranca svg { flex: none; width: .85rem; height: .85rem; }
.pf-acesso .pf-acesso-erro { padding: .8rem .9rem; border-radius: .6rem; font-size: .75rem; line-height: 1.7; box-shadow: none; }
.pf-acesso button:focus-visible,
.pf-acesso input[type="checkbox"]:focus-visible,
.pf-acesso a:focus-visible { outline: 3px solid var(--acesso-azul); outline-offset: 3px; }

html.dark body.pf-acesso {
  --acesso-fundo: #0b192b;
  --acesso-superficie: #14243b;
  --acesso-tinta: #edf3fc;
  --acesso-secundaria: #a5b7ce;
  --acesso-borda: #35465e;
  --acesso-campo: #102035;
  --acesso-azul: #9abbff;
  --acesso-foco: rgb(133 178 255 / 12%);
}
html.dark body.pf-acesso::after { background: rgb(2 14 28 / 32%); }
html.dark .pf-acesso .pf-acesso-shell { border-color: #30435a; box-shadow: 0 24px 80px rgb(0 0 0 / 40%); }
html.dark .pf-acesso .pf-acesso-apresentacao { background-color: #0a2341; }

@media (max-width: 1150px) {
  body.pf-acesso { padding: 2rem; }
  .pf-acesso .pf-acesso-shell { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); min-height: min(46rem, calc(100dvh - 4rem)); }
  .pf-acesso .pf-acesso-apresentacao { padding: 2.5rem; gap: 2rem; }
  .pf-acesso .pf-acesso-conta { padding: 1.5rem 2.25rem; }
  .pf-acesso .pf-acesso-mensagem h1 { font-size: 2.65rem; }
  .pf-acesso .pf-acesso-descricao { font-size: .9375rem; }
  .pf-acesso .pf-acesso-recursos { gap: 1rem; }
  .pf-acesso .pf-acesso-recursos li div > span { font-size: .8125rem; }
}

@media (min-width: 781px) and (max-height: 800px) {
  body.pf-acesso { padding: 2rem; }
  .pf-acesso .pf-acesso-shell { min-height: min(44rem, calc(100dvh - 4rem)); }
  .pf-acesso .pf-acesso-apresentacao { gap: 1.5rem; padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .pf-acesso .pf-acesso-mensagem h1 { font-size: clamp(2.4rem, 3.4vw, 3.1rem); }
  .pf-acesso .pf-acesso-produto { margin-bottom: .65rem; }
  .pf-acesso .pf-acesso-descricao { margin-top: .9rem; line-height: 1.75; }
  .pf-acesso .pf-acesso-recursos { gap: .95rem; margin-top: 1.5rem; }
  .pf-acesso .pf-acesso-recurso-icone { width: 2.75rem; height: 2.75rem; }
  .pf-acesso .pf-acesso-conta { padding-top: 1.25rem; padding-bottom: 1.25rem; }
  .pf-acesso .pf-acesso-formulario { padding: 1.5rem 0; }
  .pf-acesso .pf-acesso-formulario h2 { font-size: 1.85rem; }
  .pf-acesso .pf-acesso-orientacao { margin-bottom: 1.5rem; }
  .pf-acesso .pf-acesso-campo { margin-bottom: 1rem; }
  .pf-acesso .pf-acesso-entrar { margin-top: 1.4rem; }
}

@media (max-width: 780px) {
  body.pf-acesso { display: block; padding: 1.25rem; }
  .pf-acesso .pf-acesso-shell { grid-template-columns: minmax(0, 1fr); width: min(100%, 35rem); min-height: 0; border-radius: 1.1rem; }
  .pf-acesso .pf-acesso-apresentacao { gap: 1.75rem; padding: 2rem; background-position: center, center, 62% 42%; }
  .pf-acesso .pf-acesso-marca { flex-wrap: nowrap; gap: .9rem; }
  .pf-acesso .pf-acesso-logo { max-width: 10rem; padding: .4rem .55rem; }
  .pf-acesso .pf-acesso-logo img { width: 8rem; }
  .pf-acesso .pf-acesso-marca > span { max-width: 8rem; padding-left: .9rem; font-size: .8125rem; }
  .pf-acesso .pf-acesso-mensagem h1 { font-size: 2.3rem; line-height: 1.18; }
  .pf-acesso .pf-acesso-produto { margin-bottom: .6rem; font-size: .75rem; }
  .pf-acesso .pf-acesso-descricao { max-width: 25rem; margin-top: .8rem; font-size: .875rem; line-height: 1.8; }
  .pf-acesso .pf-acesso-recursos,
  .pf-acesso .pf-acesso-integracao { display: none; }
  .pf-acesso .pf-acesso-conta { padding: 1.25rem 2rem 1.75rem; }
  .pf-acesso .pf-acesso-formulario { max-width: 26rem; padding: .9rem 0 2.25rem; }
  .pf-acesso .pf-acesso-formulario h2 { font-size: 1.6rem; }
  .pf-acesso .pf-acesso-orientacao { margin-bottom: 1.6rem; font-size: .875rem; }
  .pf-acesso .form-control { min-height: 3.25rem; font-size: 1rem; }
  .pf-acesso .pf-acesso-entrar { min-height: 3.25rem; }
}

@media (max-width: 380px) {
  body.pf-acesso { padding: .75rem; }
  .pf-acesso .pf-acesso-shell { border-radius: .9rem; }
  .pf-acesso .pf-acesso-apresentacao { gap: 1.5rem; padding: 1.5rem; }
  .pf-acesso .pf-acesso-logo img { width: 7rem; }
  .pf-acesso .pf-acesso-marca > span { max-width: 7rem; padding-left: .75rem; font-size: .75rem; }
  .pf-acesso .pf-acesso-mensagem h1 { font-size: 1.9rem; }
  .pf-acesso .pf-acesso-conta { padding: 1.15rem 1.5rem 1.5rem; }
  .pf-acesso .pf-acesso-formulario h2 { font-size: 1.45rem; }
  .pf-acesso .pf-acesso-opcoes { gap: .6rem; font-size: .8125rem; }
}