/* Clube do Guto V75 · Design system semântico: cor por superfície, não por página.
   Usar .cg-surface-light / .cg-surface-dark em novos componentes.
   As telas administrativas em Bootstrap com cards brancos recebem o tema light
   pelo body.cg-admin-light, sem afetar planos, relatórios escuros ou vitrines. */
:root {
  --cg-light-surface: #ffffff;
  --cg-light-ink: #19241f;
  --cg-light-heading: #141d19;
  --cg-light-muted: #46554d;
  --cg-light-label: #27352d;
  --cg-light-accent: #684400;
  --cg-light-border: #b7c2ba;
  --cg-light-input: #ffffff;
  --cg-light-focus: #ad7818;
  --cg-dark-surface: #171916;
  --cg-dark-ink: #fff7ea;
  --cg-dark-muted: #c8c4bb;
  --cg-dark-accent: #ffe09b;
  --cg-dark-border: #666052;
}

/* As superfícies claras do Admin são intencionais. O Bootstrap aplica fundo branco
   nos .card, portanto a cor NÃO pode ser herdada da página preta. */
body.cg-admin-light .site-main .card,
.site-main .cg-surface-light {
  --cg-surface: var(--cg-light-surface);
  --cg-on-surface: var(--cg-light-ink);
  --cg-on-muted: var(--cg-light-muted);
  --cg-on-accent: var(--cg-light-accent);
  --bs-card-bg: var(--cg-light-surface);
  --bs-card-color: var(--cg-light-ink);
  --bs-body-color: var(--cg-light-ink);
  background-color: var(--cg-light-surface);
  color: var(--cg-on-surface);
  border-color: #dee3dd;
}

/* Subtítulos, formulários e chamadas em cartões claros. */
body.cg-admin-light .site-main .card :is(h1,h2,h3,h4,h5,h6,strong,b,.fw-bold,.fw-semibold),
.site-main .cg-surface-light :is(h1,h2,h3,h4,h5,h6,strong,b,.fw-bold,.fw-semibold) {
  color: var(--cg-light-heading);
}
body.cg-admin-light .site-main .card :is(label,.form-label,.section-kicker,.eyebrow,.report-label,.category-chip,.partner-meta,legend),
.site-main .cg-surface-light :is(label,.form-label,.section-kicker,.eyebrow,legend) {
  color: var(--cg-light-label) !important;
  opacity: 1;
  font-weight: 700;
}
body.cg-admin-light .site-main .card :is(.text-secondary,.form-text,.text-muted,.text-soft,.section-copy,small,.small,.help-text),
.site-main .cg-surface-light :is(.text-secondary,.form-text,.text-muted,.text-soft,.section-copy) {
  color: var(--cg-light-muted) !important;
  opacity: 1;
}
body.cg-admin-light .site-main .card :is(.text-warning,.text-gold,.discount-line),
.site-main .cg-surface-light :is(.text-warning,.text-gold,.discount-line) {
  color: var(--cg-light-accent) !important;
}
body.cg-admin-light .site-main .card .text-success,
.site-main .cg-surface-light .text-success { color: #19603b !important; }
body.cg-admin-light .site-main .card .text-danger,
.site-main .cg-surface-light .text-danger { color: #a02d36 !important; }
body.cg-admin-light .site-main .card .text-info,
.site-main .cg-surface-light .text-info { color: #135e71 !important; }
/* Corrige texto claro utilitário nos cartões brancos sem alterar badges/botões escuros. */
body.cg-admin-light .site-main .card :is(.text-white,.text-light):not(.btn):not(.badge):not(.bg-dark),
.site-main .cg-surface-light :is(.text-white,.text-light):not(.btn):not(.badge):not(.bg-dark) { color: var(--cg-light-ink) !important; }
body.cg-admin-light .site-main .card a:not(.btn),
.site-main .cg-surface-light a:not(.btn) {
  color: var(--cg-light-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
body.cg-admin-light .site-main .card a:not(.btn):hover,
.site-main .cg-surface-light a:not(.btn):hover { color: #392400; }

/* Campos claros e controles de seleção. Os placeholders não desaparecem. */
body.cg-admin-light .site-main .card :is(.form-control,.form-select,input:not([type="checkbox"]):not([type="radio"]),textarea,select),
.site-main .cg-surface-light :is(.form-control,.form-select,input:not([type="checkbox"]):not([type="radio"]),textarea,select) {
  background-color: var(--cg-light-input);
  color: var(--cg-light-ink) !important;
  border-color: var(--cg-light-border);
  opacity: 1;
}
body.cg-admin-light .site-main .card :is(input,textarea)::placeholder,
.site-main .cg-surface-light :is(input,textarea)::placeholder {
  color: #59675f !important;
  opacity: 1;
}
body.cg-admin-light .site-main .card :is(.form-control,.form-select):focus,
.site-main .cg-surface-light :is(.form-control,.form-select):focus {
  color: var(--cg-light-ink);
  border-color: var(--cg-light-focus);
  box-shadow: 0 0 0 .18rem rgba(173,120,24,.20);
}

/* Botões amarelos recebem texto escuro; outline em cartão branco é visível. */
body.cg-admin-light .site-main .card :is(.btn-warning,.btn-light),
.site-main .cg-surface-light :is(.btn-warning,.btn-light) {
  color: #17130b !important;
  background: #ffcb53;
  border-color: #db9c25;
  font-weight: 800;
}
body.cg-admin-light .site-main .card :is(.btn-outline-light,.btn-outline-warning),
.site-main .cg-surface-light :is(.btn-outline-light,.btn-outline-warning) {
  color: #2c271b !important;
  background: #fff9ea !important;
  border-color: #8a794c !important;
}
body.cg-admin-light .site-main .card :is(.btn-outline-light,.btn-outline-warning):hover,
.site-main .cg-surface-light :is(.btn-outline-light,.btn-outline-warning):hover {
  color: #1c170e !important;
  background: #f6d68b !important;
  border-color: #aa7421 !important;
}
body.cg-admin-light .site-main .card .btn:disabled,
body.cg-admin-light .site-main .card .btn.disabled {
  opacity: 1;
  color: #4b5050 !important;
  background: #e6e8e7 !important;
  border-color: #bfc6c4 !important;
  box-shadow: none;
  cursor: not-allowed;
}

/* A cor padrão escura das tabelas globais da V74 era a causa estrutural
   dos cabeçalhos invisíveis sobre branco. Cor das células acompanha a card. */
body.cg-admin-light .site-main .card :is(.table,table),
.site-main .cg-surface-light :is(.table,table) {
  --bs-table-color: var(--cg-light-ink);
  --bs-table-bg: transparent;
  --bs-table-border-color: #cbd2cc;
  --bs-table-hover-bg: #f1f4ee;
  --bs-table-hover-color: var(--cg-light-ink);
  color: var(--cg-light-ink);
}
body.cg-admin-light .site-main .card :is(.table,table) :is(thead,tbody,tfoot,tr,td,th),
.site-main .cg-surface-light :is(.table,table) :is(thead,tbody,tfoot,tr,td,th) {
  background-color: transparent !important;
  color: var(--cg-light-ink) !important;
  border-color: #cbd2cc !important;
}
body.cg-admin-light .site-main .card :is(.table,table) th,
.site-main .cg-surface-light :is(.table,table) th {
  font-weight: 800;
  color: var(--cg-light-heading) !important;
}
body.cg-admin-light .site-main .card .border-bottom { border-color: #d8ddd8 !important; }

/* Outras superfícies claras (mapa, páginas de parceiro, cliente e filtros). */
.site-main :is(#explore-filter,.map-shell,.explore-place,.home-map-section > .card,.partner-detail-card,.partner-detail-sidebar,.partner-access-card,.dashboard-page .card) {
  --cg-surface: var(--cg-light-surface);
  --cg-on-surface: var(--cg-light-ink);
  --cg-on-muted: var(--cg-light-muted);
  --cg-on-accent: var(--cg-light-accent);
}
.site-main :is(#explore-filter,.map-shell,.explore-place,.partner-detail-card,.partner-detail-sidebar,.partner-access-card,.dashboard-page .card) :is(.form-label,label,.text-warning) {
  color: var(--cg-light-label) !important;
}
.site-main :is(#explore-filter,.map-shell,.explore-place,.partner-detail-card,.partner-detail-sidebar,.partner-access-card,.dashboard-page .card) :is(.text-secondary,.form-text) {
  color: var(--cg-light-muted) !important;
}

/* Componentes explicitamente escuros seguem design system dark. */
.site-main :is(.cg-surface-dark,.v74-story,.v74-stat,.v74-admin-tile,.premium-card,.cg-partner-spotlight-card) {
  --cg-surface: var(--cg-dark-surface);
  --cg-on-surface: var(--cg-dark-ink);
  --cg-on-muted: var(--cg-dark-muted);
  --cg-on-accent: var(--cg-dark-accent);
}

/* Acessibilidade: foco visível sem mudar a identidade. */
.site-main :is(a,button,input,textarea,select):focus-visible {
  outline: 3px solid #cc921f;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .site-main :is(.btn,.v74-admin-tile,.v74-arrow){transition:none!important;scroll-behavior:auto!important;}
}

/* Tabelas largas devem ser roláveis no celular, sem cortar ações. */
body.cg-admin-light .site-main .card .table-responsive,
.site-main .cg-surface-light .table-responsive {max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
