/* =========================
   FLAG WEBVIEW (PADRÃO)
========================= */
:root{
  /* ✅ altura do menu topo (ajuste conforme sua navbar real) */
  --nav-h: 70px;

  /* ✅ safe-area (iOS / Android gestos) com fallback */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  
  --nav-extra: 12px; /* 🔥 gordura da navbar (ajuste aqui) */
  --oc-offset-top: 2px; /* 🔼 quanto subir o offcanvas */  
}

/* =========================
   FLAG WEBVIEW (0 = browser / 1 = Android WebView)
========================= */
body {
  --is-webview: 0; /* browser */
}

body.webview {
  --is-webview: 1; /* Android WebView */
}

/* =========================
   LAYOUT BASE (PADDING TOP + SAFE AREA)
========================= */
/* ✅ mantém seu padding-top, mas alinhado com a mesma altura do top do offcanvas
   (se você quiser manter 70px sempre, pode trocar o --nav-h pra 70px) */
body{
  padding-top: calc(var(--nav-h) + var(--nav-extra) + var(--safe-top));
}

/* =========================
   LAYOUT BASE (DESKTOP)
========================= */
/* opcional: se no desktop sua navbar é maior */
@media (min-width: 992px){
  :root{ --nav-h: 70px; }
  body{ --is-webview: 0; }
}

/* =========================
   OFFCANVAS (ALTURA / SAFE AREA)
========================= */
/* ✅ offcanvas sem corte no mobile (não usa calc(100vh...) que quebra em iOS/Android) */
.offcanvasAltura{
  top: calc(var(--nav-h) + var(--safe-top) + var(--oc-offset-top)) !important;
  bottom: 0 !important;
  height: auto !important;
}

/* ✅ respiro embaixo (home indicator / barra de gestos) */
.offcanvasAltura .offcanvas-body{
  padding-bottom: max(1rem, var(--safe-bottom));
  -webkit-overflow-scrolling: touch;
}

/* =========================
   NAVBAR FIXED – BACKGROUND
========================= */
.navbar.fixed-top {
  background-color: var(--bs-body-bg); /* respeita light/dark */
  z-index: 1055;
}

html[data-bs-theme="dark"] .navbar.fixed-top {
  background-color: #1e2226;
}

html[data-bs-theme="light"] .navbar.fixed-top {
  background-color: #ffffff;
}

/* =====================================================
   DROPDOWN / MENU
===================================================== */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: .1rem;
  display: none;
}

.dropdown-submenu:hover > .dropdown-menu {
  display: block;
}

/* dropdown submenu no mobile */
@media (max-width: 991.98px) {
  .dropdown-submenu > .dropdown-menu {
    position: static;
    margin-left: 0;
  }
}

/* =====================================================
   FONTES / ESCALA GLOBAL
===================================================== */
@media (min-width: 992px) {
  html {
    font-size: 0.85rem;
  }
}

/* =====================================================
   BOTÕES / CONTROLES
===================================================== */
html[data-bs-theme="light"] .btn-group .btn.active {
  background-color: #212529;
  color: #fff;
}

html[data-bs-theme="dark"] .btn-group .btn.active {
  background-color: #fff;
  color: #000;
}

html:not([data-bs-theme]) .btn-group .btn.active {
  background-color: var(--bs-body-color);
  color: var(--bs-body-bg);
}

/* Tamanho mínimo para botões */
.btn-min {
  min-width: 120px;
  min-height: 30px;
}

/* =====================================================
   OFFCANVAS / AGUARDE
===================================================== */
#offcanvasAguarde.offcanvas-bottom {
  --bs-offcanvas-height: 180px;
  max-height: 40vh;
}

/* =====================================================
   FORMULÁRIOS – ESTILO MATERIAL
===================================================== */
/* Wrapper */
.floating-with-icon {
  gap: .75rem;
}

/* Ícone */
.icon-wrapper {
  padding-bottom: .1rem;
  color: var(--bs-body-color);
  font-size: 1.6rem;
}

/* Underline */
.form-underline {
  border: none;
  border-bottom: 1px solid #9e9e9e;
  border-radius: 0;
}

.form-underline:focus {
  box-shadow: none;
  border-bottom: 2px solid #4CAF50;
}

/* Floating input */
.form-floating > .form-control {
  padding-left: .75rem;
}

.form-floating > .form-control.form-underline {
  padding-left: 0;
  padding-right: 0;
  padding-top: 1.4rem;
  padding-bottom: .35rem;
}

.form-floating > label {
  padding-left: 0;
  padding-top: 1.6rem;
  font-size: .95rem;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
  transform: scale(.80) translateY(-1.8rem);
}

/* Floating select */
.floating-select {
  position: relative;
}

.floating-select > label {
  font-size: .8rem;
  color: var(--bs-secondary-color);
  margin-bottom: .25rem;
}

.floating-select > .form-select {
  border: none;
  border-bottom: 1px solid #9e9e9e;
  border-radius: 0;
  padding-left: 4px;
}

.floating-select > .form-select:focus {
  box-shadow: none;
  border-bottom: 1px solid #4CAF50;
}

/* =====================================================
   TÍTULOS DE SEÇÃO
===================================================== */
.section-title {
  color: var(--bs-body-color);
}

.section-title-text {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.section-title hr {
  border: none;
  border-top: 2px solid var(--bs-border-color);
  opacity: 1;
}

/* =====================================================
   LAYOUT BASE
===================================================== */
/* ✅ removido aqui porque já está no bloco do topo e alinhado com --nav-h
body {
  padding-top: 70px;
}
*/
main {
  padding-bottom: 2rem;
}

/* =====================================================
   ANIMAÇÕES / DESTAQUES
===================================================== */
/* Pisca ícone */
.highlight {
  color: #0d6efd;
  transition: color 0.3s ease;
}

@keyframes highlight {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* =====================================================
   LISTAS / CARDS
===================================================== */
.card-lista {
  cursor: pointer;
  transition: all .2s ease;
  border: 1.5px dashed var(--bs-border-color);
  border-radius: 12px;
  background-color: var(--bs-body-bg);
  position: relative;
}

@media (hover: hover) and (pointer: fine) {
  .card-lista:hover {
    background-color: var(--bs-secondary-bg);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
    transform: translateY(-0px);
  }
}

.card-lista.card-static {
  cursor: default;
}

.card-lista.card-static:hover {
  transform: none;
}

.card-lista.is-inactive .fw-semibold {
  color: var(--bs-secondary-color);
}

.card-lista.is-inactive img {
  filter: grayscale(100%);
  opacity: .6;
}

.card-lista:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 3px;
}

/* =====================================================
   FOTO DE PERFIL
===================================================== */
.profile-media {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  cursor: pointer;
}

.profile-avatar-wrapper {
  width: 90px;
  height: 90px;
  min-width: 90px;
  min-height: 90px;
  flex-shrink: 0;

  border-radius: 999px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(var(--bs-emphasis-color-rgb), .06);
  border: 1px solid var(--bs-border-color);
}

.profile-avatar-wrapper.is-sm {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}

.profile-avatar-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.perfil-letter {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1;
  user-select: none;
  color: var(--bs-body-color);
}

/* =====================================================
   NAVBAR / BRAND
===================================================== */
.navbar {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

/* Brand text */
.brand-text {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  line-height: 1;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  position: relative;
  top: -1px;
}

html[data-bs-theme="dark"] .brand-text {
  color: #fff;
}

html[data-bs-theme="light"] .brand-text {
  color: #212529;
}

/* Fallback para AUTO (usa cores do Bootstrap) */
html:not([data-bs-theme]) .brand-text {
  color: var(--bs-body-color);
}

.brand-text::selection {
  background: transparent;
}

.brand-word {
  margin-right: .45rem;
}

.brand-verified {
  font-size: .75em;
  margin-left: .01rem;
  color: var(--bs-primary);
  flex-shrink: 0;
}

@media (max-width: 991.98px) {
  .brand-text {
    animation: fadeGlow .8s ease-in-out 2;
  }
}

@keyframes fadeGlow {
  0% { opacity: 0; text-shadow: none; }
  50% { opacity: 1; text-shadow: 0 0 8px rgba(255,255,255,.4); }
  100% { opacity: 1; text-shadow: none; }
}

/* =========================
   BRAND ESTÁTICA (SEM LINK)
========================= */
.brand-static {
  user-select: none;          /* não selecionável */
  cursor: default;            /* seta normal */
}

.brand-static * {
  user-select: none;          /* garante em filhos */
}

/* Remove qualquer comportamento de clique acidental */
.brand-static:active,
.brand-static:focus {
  outline: none;
}

/* =====================================================
   AÇÃO DE SEÇÃO (LUPA)
===================================================== */
.section-action {
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.section-action:hover {
  opacity: 1;
  transform: scale(1.05);
}

/* =====================================================
   DESTAQUE FOTO (LIGHT / DARK)
===================================================== */
.destaque-foto {
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-width: 1.5px;
  border-style: dashed;
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

/* Light */
html[data-bs-theme="light"] .destaque-foto {
  background: #f8f9fa;
  border-color: #6c757d;
}

html[data-bs-theme="light"] .destaque-foto h6 {
  color: #212529;
}

html[data-bs-theme="light"] .destaque-foto p {
  color: #495057;
}

/* Dark */
html[data-bs-theme="dark"] .destaque-foto {
  background: #1e2226;
  border-color: #adb5bd;
}

html[data-bs-theme="dark"] .destaque-foto h6 {
  color: #ffffff;
}

html[data-bs-theme="dark"] .destaque-foto p {
  color: #ced4da;
}

/* ======================================================
   CONTAINER CENTRALIZADO PARA TELAS COMO RECUPERA SENHA (SÓ EM TELAS GRANDES)
====================================================== */
.main-wrapper {
  padding-left: 0.75rem;   /* 🔑 entre px-2 (0.5rem) e px-3 (1rem) */
  padding-right: 0.75rem;
}

/* Desktop */
@media (min-width: 992px) {
  .main-wrapper {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;

    /* ainda mais elegante no desktop */
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  
  .main-wrapper.sm {
    max-width: 620px;
  }  
}

/* ======================================================
   FORM / ELEMENTOS
====================================================== */

/* ======================================================
   LOADING PRO SELECT (COMBO)
====================================================== */
.select-loading {
  background-image: linear-gradient(
    100deg,
    transparent 40%,
    rgba(0,0,0,.08) 50%,
    transparent 60%
  );
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* =========================
   CARD APP-LIKE
========================= */

/* =========================
   TIPOGRAFIA
========================= */

/* =====================================================
   VARIÁVEIS DE COR – LIGHT / DARK
===================================================== */

/* =====================================================
   VARIÁVEIS DE COR – LIGHT / DARK (BOOTSTRAP data-bs-theme)
===================================================== */
/* Fallback (caso não tenha data-bs-theme definido) */
:root {
  --badge-text-color: var(--bs-body-color);
}

/* Light */
html[data-bs-theme="light"] {
  /* --badge-text-color: #0f172a; /* texto escuro */
  --badge-text-color: #f8fafc; /* texto claro */  
}

/* Dark */
html[data-bs-theme="dark"] {
  --badge-text-color: #f8fafc; /* texto claro */
}

/* =====================================================
   BADGES – PALETA DARK SOFT
===================================================== */
.badge-criterios{
  min-width: 3.5rem;   /* mínimo */
  height: 1.4rem;

  width: auto;         /* deixa crescer */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 .45rem;   /* importante: dá “respiro” pros lados */

  border-radius: .45rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .4px;
  color: var(--badge-text-color);

  white-space: nowrap; /* evita quebrar linha */
}

.criterio-zerado {
  text-decoration: line-through;
  opacity: 0.5;
}

/* =====================================================
   CORES DOS BADGES
===================================================== */
.badge-jb { background:#F2B705; color: var(--badge-text-color); } /* opcional manter explícito */
.badge-pc { background:#2FBF71; }
.badge-vi { background:#3B82F6; }

.badge-vv,
.badge-vp { background:#2563EB; }

.badge-vd { background:#38BDF8; }
.badge-vs { background:#14B8A6; }
.badge-em { background:#F97316; }
.badge-ng { background:#A855F7; }

.badge-er,
.badge-np { background:#EF4444; }

/* =====================================================
   CRITÉRIOS – LISTA APP
===================================================== */
.lista-criterios p {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .35rem;
}

/* =========================
   DETALHES COMPETIÇÃO – UI
========================= */
.detalhes-competicao {
  padding-left: 0;
}

.detalhes-competicao .det-item {
  display: grid;
  grid-template-columns: 1.2rem auto;
  align-items: center;
  gap: .5rem;
  margin-bottom: .45rem;
  line-height: 1.35;
}

/* Ícones */
.detalhes-competicao .det-item i {
  font-size: .95rem;
  line-height: 1;
  opacity: .9;
}

/* Texto padrão */
.detalhes-competicao .det-item span {
  color: var(--bs-body-color);
}

/* Destaque visual para valores */
.detalhes-competicao .det-item.valor {
  margin-top: .5rem;
  padding-top: .4rem;
  border-top: 1px dashed var(--bs-border-color);
}

.detalhes-competicao .det-item.valor span {
  font-weight: 600;
  color: var(--bs-success);
}

#DetalhesCompeticao {
  border-radius: .8rem;
  background: var(--bs-body-bg);
}

html[data-bs-theme="dark"] #DetalhesCompeticao {
  background: #1e2226;
}

/* =========================
   TRANSIÇÕES / ESTADOS (PALPITES)
========================= */
/* transição */
#MeusPalpitesJogos {
  transition: opacity .25s ease, transform .25s ease;
}

/* estados */
.fade-out-left {
  opacity: 0;
  transform: translateX(-20px);
}

.fade-out-right {
  opacity: 0;
  transform: translateX(20px);
}

.fade-in {
  opacity: 1;
  transform: translateX(0);
}

/* =========================
   LOADERS
========================= */
/* loader simples */
.loader-center {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
}

.loader-center.sm {
  min-height: 50px;
}

.loader-center.md {
  min-height: 80px;
}

/* loader 3 dots */
.loader-dots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.loader-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--bs-primary);
  opacity: .3;
  animation: dotPulse 1.2s infinite ease-in-out;
}

.loader-dots span:nth-child(1) { animation-delay: 0s; }
.loader-dots span:nth-child(2) { animation-delay: .15s; }
.loader-dots span:nth-child(3) { animation-delay: .3s; }

@keyframes dotPulse {
  0%   { opacity: .3; }
  20%  { opacity: 1; }
  100% { opacity: .3; }
}

/* ======================================================
   AREA DE PONTOS
====================================================== */
@keyframes pulse-glow {
  0% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 rgba(var(--pulse-color), 0);
  }
  50% {
    opacity: .65;
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(var(--pulse-color), .6);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 rgba(var(--pulse-color), 0);
  }
}

.pulse {
  display: inline-flex;
  align-items: center;
  gap: .25rem;

  animation: pulse-glow 2.4s ease-in-out infinite;
  will-change: transform, opacity, box-shadow;
}

/* variações por cor */
.pulse-red {
  --pulse-color: 220, 53, 69;   /* bootstrap danger */
}

.pulse-green {
  --pulse-color: 25, 135, 84;   /* bootstrap success */
}

/* acessibilidade (respeita mobile/iOS) */
@media (prefers-reduced-motion: reduce) {
  .pulse {
    animation: none;
  }
}

/* ======================================================
   JOGOS DESATIVADOS
====================================================== */
.card[data-desativado="1"] .card-fade {
  opacity: .45;
  filter: grayscale(.6);
}

/* ======================================================
   OFFCANVAS REPLICAR PALPITES (AJUSTES – BOTTOM)
====================================================== */
.offcanvas-ajustes {
  --bs-offcanvas-height: min(34vh, 230px);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  overflow: hidden; /* respeita arredondado */
}

/* “puxador” visual */
.offcanvas-ajustes .oc-handle {
  width: 44px;
  height: 5px;
  border-radius: 999px;
  opacity: .35;
}

/* Header mais clean */
.offcanvas-ajustes .offcanvas-header {
  padding-top: .6rem;
  padding-bottom: .6rem;
}

/* Caixa interna para dar acabamento */
.offcanvas-ajustes .box {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
}

/* Ajuste fino nos switches */
.offcanvas-ajustes .form-check.form-switch {
  padding-left: 2.75rem; /* espaço do switch */
}

.offcanvas-ajustes .form-check-input {
  width: 2.6rem;
  height: 1.4rem;
  margin-left: -2.75rem;
  cursor: pointer;
}

.offcanvas-ajustes .form-check-label {
  cursor: pointer;
}

/* Reduz fonte apenas no offcanvas de ajustes */
.offcanvas-ajustes {
  font-size: .9rem; /* base geral */
}

/* Título */
.offcanvas-ajustes .offcanvas-title {
  font-size: .9rem;
}

/* ======================================================
   CURSOR POINTER
====================================================== */
.cursor-pointer {
  cursor: pointer !important;
}

/* =========================
   CSS DA CLASSIFICACAO
========================= */
.rk-item{
  border: 1px solid var(--rk-border, var(--bs-border-color));
  border-radius: 14px;
  background: var(--bs-body-bg);
  padding: .65rem .75rem;
  box-shadow: 0 .25rem .9rem rgba(0,0,0,.04);
}

.rk-item + .rk-item{
  margin-top: .5rem;
}

.rk-top1{ --rk-border:#0b5d1e; }
.rk-top2{ --rk-border:#157a2a; }
.rk-top3{ --rk-border:#1f9636; }
.rk-top4{ --rk-border:#3cad53; }
.rk-top5{ --rk-border:#65c57a; }
.rk-rest{ --rk-border:#c53939; }

.rk-avatar{
  width:56px;
  height:56px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid var(--bs-border-color);
  background: var(--bs-secondary-bg);
}

.rk-letter {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1;
  user-select: none;
  color: var(--bs-body-color);
}

.rk-rank{
  min-width: 2.1rem;
  height: 1.4rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: .6rem;
  font-size: .75rem;
  font-weight: 800;
  color: #fff;
  background: var(--rk-border, #198754);
}

.rk-name{
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.15;
}

.rk-meta-pill{
  border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
  border-radius: 999px;
  padding: .15rem .55rem;
  font-size: .78rem;
  white-space: nowrap;
}

.rk-pin-pill{
  border-color: rgba(13,110,253,.35);
  background: rgba(13,110,253,.08);
  color: var(--bs-body-color);
  font-weight: 700;
}

.rk-pontos{
  border-radius: 999px;
  padding: .25rem .7rem;
  font-weight: 800;
  font-size: .78rem;
  color: #fff;
  background: var(--rk-border, #198754);
  box-shadow: 0 .35rem .9rem rgba(0,0,0,.10);
  white-space: nowrap;
}

.rk-opcoes.btn{
  border-radius: 999px;
  padding: .25rem .7rem;
  font-size: .8rem;
}

.rk-criterios{
  margin-top: .45rem;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.rk-me{
  box-shadow: 0 .25rem 1rem rgba(25,135,84,.10);
}

.rk-pinned{
  position: relative;
}
/* =========================
   CSS DA CLASSIFICACAO
========================= */

/* =========================
   CHIPS DO BOLÃO (DARK/LIGHT OK)
========================= */
.bolao-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .6rem;
}

.bolao-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .38rem .7rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;

  border: 1px solid var(--bs-border-color);
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);

  transition: all .15s ease;
}

.bolao-chip i {
  font-size: .9rem;
  opacity: .85;
}

/* Destaque principal (por rodada) */
.bolao-chip.primary {
  border-color: rgba(var(--bs-primary-rgb), .35);
  background-color: rgba(var(--bs-primary-rgb), .12);
  color: var(--bs-primary);
}

/* neutro */
.bolao-chip.neutral {
  background-color: var(--bs-secondary-bg);
}

/* leve */
.bolao-chip.soft {
  background-color: var(--bs-tertiary-bg);
}
/* =========================
   CHIPS DO BOLÃO (DARK/LIGHT OK)
========================= */

/* =========================
   DESATIVAR CLICK NA BARRA RANGE (RODADAS)
========================= */
/* Não deixa clicar na barra/linha/grid (mas ainda mostra) */
.irs-line,
.irs-bar,
.irs-bar-edge,
.irs-grid,
.irs-grid-pol,
.irs-grid-text {
  pointer-events: none !important;
}

/* Mantém o handle arrastável/clicável */
.irs-handle {
  pointer-events: auto !important;
}
/* =========================
   DESATIVAR CLICK NA BARRA RANGE (RODADAS)
========================= */

/* =========================
   AUTOFILL (LIGHT/DARK) – BOOTSTRAP data-bs-theme
========================= */
/* Chrome/Edge/Safari - autofill sem “pintar” diferente */
.form-control.form-underline:-webkit-autofill,
.form-control.form-underline:-webkit-autofill:hover,
.form-control.form-underline:-webkit-autofill:focus,
.form-control.form-underline:-webkit-autofill:active {
  -webkit-text-fill-color: var(--bs-body-color) !important;
  caret-color: var(--bs-body-color) !important;
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  box-shadow: 0 0 0 1000px transparent inset !important;
  transition: background-color 99999s ease-in-out 0s;
}

/* Firefox */
.form-control.form-underline:-moz-autofill {
  box-shadow: 0 0 0 1000px transparent inset !important;
  -moz-text-fill-color: var(--bs-body-color) !important;
  caret-color: var(--bs-body-color) !important;
}

/* deixa o fundo do input igual ao fundo da área onde ele está */
.form-control.form-underline,
.form-select.form-underline {
  background-color: transparent !important;
  color: var(--bs-body-color) !important;
}

/* =========================
   ÍCONE NO INPUT (MOSTRAR SENHA ETC.)
========================= */
.field-icon{
  position:absolute;
  top:50%;
  right:12px;
  transform:translateY(-35%);
  color: var(--bs-body-color); /* 🔥 resolve automaticamente */
  cursor:pointer;
  opacity:.9;
  font-size:16px !important;
}
.field-icon:hover{
  opacity:1;
}

/* =========================
   DISABLED (INPUT/SELECT) – CINZA
========================= */
.form-control.form-underline:disabled,
.form-select.form-underline:disabled,
.form-control.form-underline[disabled],
.form-select.form-underline[disabled] {
  background-color: var(--bs-secondary-bg) !important; /* cinza */
  color: var(--bs-secondary-color) !important;         /* texto cinza */
  opacity: 1 !important;                               /* evita ficar "lavado" demais */
  cursor: not-allowed;
}

/* Placeholder cinza no disabled */
.form-control.form-underline:disabled::placeholder {
  color: var(--bs-secondary-color) !important;
  opacity: .85;
}

/* Linha/underline mais clara no disabled */
.form-control.form-underline:disabled,
.form-select.form-underline:disabled {
  border-bottom-color: var(--bs-border-color) !important;
}

/* =========================
   SELECT NATIVO (LIGHT/DARK)
========================= */
/* ✅ Ajuda o browser a renderizar controles nativos em dark/light */
html[data-bs-theme="dark"] { color-scheme: dark; }
html[data-bs-theme="light"] { color-scheme: light; }

/* ✅ Select padrão no DARK (campo fechado) – NÃO afeta .select-secondary */
html[data-bs-theme="dark"] select.form-select:not(.select-secondary),
html[data-bs-theme="dark"] .form-select:not(.select-secondary) {
  background-color: #1e2226 !important;
  color: #f8fafc !important;
  border-color: rgba(255,255,255,.18) !important;
}

/* ✅ Dropdown do select no DARK (option/optgroup) – quando o browser permitir */
html[data-bs-theme="dark"] select.form-select option,
html[data-bs-theme="dark"] .form-select option {
  background-color: #1e2226 !important;
  color: #f8fafc !important;
}

html[data-bs-theme="dark"] select.form-select optgroup,
html[data-bs-theme="dark"] .form-select optgroup {
  background-color: #1e2226 !important;
  color: #cbd5e1 !important;
}

/* ✅ Disabled cinza no dark */
html[data-bs-theme="dark"] select.form-select:disabled,
html[data-bs-theme="dark"] .form-select:disabled {
  background-color: rgba(255,255,255,.06) !important;
  color: rgba(248,250,252,.55) !important;
  border-color: rgba(255,255,255,.10) !important;
  opacity: 1 !important;
}

/* =========================
   FOOTER (LIGHT/DARK)
========================= */
html[data-bs-theme="dark"] footer.footer{
  background-color: #1e2226 !important;
}
html[data-bs-theme="light"] footer.footer{
  background-color: #ffffff !important;
}

/* =========================
   SELECT CINZA (LIGHT/DARK) – CLASSE UTILITÁRIA
========================= */
.select-secondary {
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}

/* =========================
   COMBOBOLAO (LIGHT) – OPTIONS / OPTGROUP
========================= */
html[data-bs-theme="light"] #COMBOBOLAO option,
html[data-bs-theme="light"] #COMBOBOLAO optgroup {
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-body-color) !important;
}