/* ==========================================================================
   DeVence TI — PrecificaPro Light Theme Master
   Padronização visual baseada na identidade institucional em tema claro.
   Eliminação total de artefatos escuros, bordas duras e gradientes opacos.
   ========================================================================== */

:root,
html,
body {
  color-scheme: light !important;
}

:root {
  --devence-teal: #075b55;
  --devence-teal-dark: #064943;
  --devence-teal-light: #0d8378;
  --devence-soft: #eef7f5;
  --devence-soft-border: #86b8ae;
  --devence-canvas: #f8faf9;
  --devence-surface: #ffffff;
  --devence-border: #e2e8e6;
  --devence-text-main: #192524;
  --devence-text-body: #3f4f4c;
  --devence-text-muted: #6b7c79;
}

/* ==========================================================================
   Global High-Contrast Text Selection (Modo Claro)
   Garante contraste perfeito e legibilidade total ao marcar texto com mouse
   ========================================================================== */
::selection {
  background-color: #075b55 !important;
  color: #ffffff !important;
}

::-moz-selection {
  background-color: #075b55 !important;
  color: #ffffff !important;
}

*::selection {
  background-color: #075b55 !important;
  color: #ffffff !important;
}

*::-moz-selection {
  background-color: #075b55 !important;
  color: #ffffff !important;
}

input::selection,
textarea::selection {
  background-color: #075b55 !important;
  color: #ffffff !important;
}

input::-moz-selection,
textarea::-moz-selection {
  background-color: #075b55 !important;
  color: #ffffff !important;
}

/* Base Body & Canvas */
body {
  background-color: #f3f8f7 !important;
  background-image: radial-gradient(circle at 88% -10%, rgba(12,123,113,.07), transparent 28rem) !important;
  color: var(--devence-text-main) !important;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.min-h-screen {
  background-color: transparent !important;
  color: var(--devence-text-main) !important;
}

/* Header
   2026-09-11: Header.tsx (fonte React) passou a ser claro nativamente — usa
   cores explícitas (#192524, #075b55, #eef7f5...) direto no componente, sem
   depender de override aqui. As duas regras abaixo mirando classes antigas
   (bg-gradient-to-tr.from-emerald-600, bg-slate-800) não batem em nada do
   Header.tsx atual; mantidas como no-op inofensivo (podem ter sido usadas
   por uma versão anterior do componente). Layout mobile no bloco
   @media mais abaixo. */

header .bg-gradient-to-tr.from-emerald-600 {
  background-image: linear-gradient(135deg, var(--devence-teal), var(--devence-teal-light)) !important;
  box-shadow: 0 4px 14px rgba(7, 91, 85, 0.22) !important;
}

/* Secondary Actions in Header */
header button.bg-slate-800,
header .bg-slate-800 {
  background-color: #ffffff !important;
  color: var(--devence-teal) !important;
  border: 1px solid #c9d6d3 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

header button.bg-slate-800:hover,
header .bg-slate-800:hover {
  background-color: var(--devence-soft) !important;
  border-color: var(--devence-teal-light) !important;
}

/* Navigation Tabs Bar */
nav.w-full {
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--devence-border) !important;
}

nav button {
  transition: all 0.15s ease !important;
}

/* Inactive Tab */
nav button.text-slate-400 {
  color: var(--devence-text-muted) !important;
  background-color: transparent !important;
}

nav button.text-slate-400:hover {
  color: var(--devence-teal) !important;
  background-color: var(--devence-soft) !important;
}

/* Active Tab — gradiente teal com texto branco, idêntico ao OrdemPro e MercadoPro */
nav button.bg-slate-800,
nav button.text-white {
  background: linear-gradient(135deg, var(--devence-teal), var(--devence-teal-light)) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(7, 91, 85, 0.22) !important;
  font-weight: 750 !important;
}


/* Main Cards & Containers */
.bg-slate-800,
.bg-slate-800\/20,
.bg-slate-800\/40,
.bg-slate-800\/50,
.bg-slate-800\/60,
.bg-slate-800\/70,
.bg-slate-800\/80,
.bg-slate-800\/90,
.bg-slate-850\/60,
.bg-slate-900\/80 {
  background-color: #ffffff !important;
  border-color: var(--devence-border) !important;
  box-shadow: 0 4px 20px -2px rgba(7, 91, 85, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

.bg-slate-900,
.bg-slate-950 {
  background-color: var(--devence-canvas) !important;
}

/* Dark Slate Elements Override (Tags, Count Badges, Pills) */
.bg-slate-700,
.bg-slate-700\/60 {
  background-color: var(--devence-soft) !important;
  color: var(--devence-teal) !important;
  border: 1px solid #bfe0d8 !important;
}

/* Borders & Dividers */
.border-slate-800,
.border-slate-800\/80,
.border-slate-700,
.border-slate-700\/40,
.border-slate-700\/60,
.border-slate-700\/70,
.border-slate-700\/80,
.border-slate-600,
.border-slate-600\/60 {
  border-color: var(--devence-border) !important;
}

[class*="divide-slate-"] > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--devence-border) !important;
}

/* Gradient Cards (Hero / Big Sell Price / Highlights) */
[class*="from-emerald-950"],
[class*="via-slate-900"],
[class*="to-slate-900"],
[class*="to-slate-800"] {
  background-image: linear-gradient(135deg, #f0faf7 0%, #ffffff 100%) !important;
  border-color: #84ccba !important;
  box-shadow: 0 6px 20px -2px rgba(7, 91, 85, 0.07) !important;
}

.bg-gradient-to-br.from-emerald-950\/60 {
  background-image: linear-gradient(135deg, #f0faf7 0%, #ffffff 100%) !important;
  border-color: #72bead !important;
  box-shadow: 0 10px 30px -4px rgba(7, 91, 85, 0.1) !important;
}

.bg-gradient-to-br.from-emerald-950\/60 .text-emerald-400 {
  color: var(--devence-teal-dark) !important;
}

.bg-gradient-to-br.from-emerald-950\/60 .text-white {
  color: var(--devence-teal-dark) !important;
}

/* Typography Overrides & Contrast Fixes */
.text-white {
  color: var(--devence-text-main) !important;
}

.text-slate-100,
.text-slate-200 {
  color: var(--devence-text-main) !important;
}

.text-slate-300,
.text-slate-400 {
  color: var(--devence-text-body) !important;
}

.text-slate-500,
.text-slate-600 {
  color: var(--devence-text-muted) !important;
}

/* Accent Colors & Brand Highlights */
.text-emerald-400,
.text-emerald-300,
.text-emerald-400\/80 {
  color: var(--devence-teal) !important;
}

.bg-emerald-500\/10,
.bg-emerald-500\/20,
.bg-emerald-950\/40,
.bg-emerald-950\/60 {
  background-color: var(--devence-soft) !important;
}

.border-emerald-500\/20,
.border-emerald-500\/30,
.border-emerald-500\/40,
.border-emerald-500\/50,
.border-emerald-500\/60,
.border-emerald-800\/40 {
  border-color: #9cd4c7 !important;
}

/* Primary Action Buttons */
button.bg-emerald-500,
a.bg-gradient-to-r.from-emerald-500 {
  background: linear-gradient(135deg, var(--devence-teal), var(--devence-teal-light)) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(7, 91, 85, 0.22) !important;
}

button.bg-emerald-500 *,
a.bg-gradient-to-r.from-emerald-500 * {
  color: #ffffff !important;
}

button.bg-emerald-500:hover,
a.bg-gradient-to-r.from-emerald-500:hover {
  background: linear-gradient(135deg, var(--devence-teal-dark), var(--devence-teal)) !important;
  box-shadow: 0 6px 18px rgba(7, 91, 85, 0.32) !important;
  transform: translateY(-1px);
}

/* Secondary Action Buttons & Hover Overrides */
.bg-slate-800 button,
button.bg-slate-800,
button.bg-slate-700\/60 {
  background-color: #ffffff !important;
  color: var(--devence-text-main) !important;
  border: 1px solid #c9d6d3 !important;
}

button[class*="hover:bg-slate-700"]:hover,
button[class*="hover:bg-slate-800"]:hover,
a[class*="hover:bg-slate-700"]:hover,
a[class*="hover:bg-slate-800"]:hover,
[class*="hover:bg-slate-700"]:hover,
[class*="hover:bg-slate-800"]:hover {
  background-color: var(--devence-soft) !important;
  color: var(--devence-teal-dark) !important;
  border-color: var(--devence-soft-border) !important;
}

/* Text Hover Contrast Overrides for Light Theme */
.hover\:text-white:hover,
.hover\:text-slate-200:hover,
.hover\:text-slate-100:hover {
  color: var(--devence-teal-dark) !important;
}

/* White text ONLY on solid green/primary action buttons */
button.bg-emerald-500:hover,
button.bg-emerald-600:hover,
a.bg-gradient-to-r.from-emerald-500:hover,
button.bg-gradient-to-r.from-emerald-500:hover {
  color: #ffffff !important;
}

button.bg-emerald-500:hover *,
button.bg-emerald-600:hover *,
a.bg-gradient-to-r.from-emerald-500:hover *,
button.bg-gradient-to-r.from-emerald-500:hover * {
  color: #ffffff !important;
}

/* Form Inputs, Selects and Number Controls */
input:not([type="range"]),
select,
textarea {
  background-color: #ffffff !important;
  color: var(--devence-text-main) !important;
  border: 1px solid #cdd8d5 !important;
  border-radius: 12px !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

input:not([type="range"]):focus,
select:focus,
textarea:focus {
  border-color: var(--devence-teal-light) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(13, 131, 120, 0.15) !important;
}

input::placeholder,
textarea::placeholder {
  color: #879693 !important;
}

/* Range Sliders */
input[type="range"] {
  accent-color: var(--devence-teal) !important;
  background-color: #dbe7e4 !important;
  border-radius: 999px !important;
  border: none !important;
}

input[type="range"]::-webkit-slider-runnable-track {
  background-color: #dbe7e4 !important;
  border-radius: 999px !important;
  height: 8px !important;
}

/* Status Cards / DRE Highlights */
.bg-emerald-950\/40 {
  background-color: #edf8f5 !important;
}

.bg-amber-950\/40 {
  background-color: #fffbeb !important;
  border-color: #fde68a !important;
}

.bg-amber-950\/40 .text-amber-400,
.bg-amber-950\/40 .text-amber-200 {
  color: #b45309 !important;
}

.bg-rose-950\/40 {
  background-color: #fef2f2 !important;
  border-color: #fecaca !important;
}

.bg-rose-950\/40 .text-rose-400,
.bg-rose-950\/40 .text-rose-300,
.bg-rose-950\/40 .text-rose-200 {
  color: #b91c1c !important;
}

.bg-indigo-950\/30 {
  background-color: #f5f3ff !important;
  border-color: #ddd6fe !important;
}

.bg-indigo-950\/30 .text-indigo-400,
.bg-indigo-950\/30 .text-indigo-300 {
  color: #5b21b6 !important;
}

/* Blue Variant Card (ex: Markup Multiplicador) */
.bg-blue-950\/40 {
  background-color: #f0f7ff !important;
  border-color: #b9daf9 !important;
}

.bg-blue-950\/40 .text-blue-400 {
  color: #1d4ed8 !important;
}

.bg-blue-950\/40 .text-white {
  color: #1e3a8a !important;
}

.bg-blue-500\/20 {
  background-color: #dbeafe !important;
  border-color: #93c5fd !important;
  color: #1e40af !important;
}

/* Purple Variant Card */
.bg-purple-950\/40 {
  background-color: #faf5ff !important;
  border-color: #e9d5ff !important;
}

.bg-purple-950\/40 .text-purple-400 {
  color: #7e22ce !important;
}

.bg-purple-950\/40 .text-white {
  color: #581c87 !important;
}

.bg-purple-500\/20 {
  background-color: #f3e8ff !important;
  border-color: #d8b4fe !important;
  color: #6b21a8 !important;
}

/* Dark Slate Pills (ex: 13% + R$ 6.75 in Channel Presets) */
.bg-slate-900\/60 {
  background-color: #e5efec !important;
  color: var(--devence-teal-dark) !important;
  border: 1px solid #c4ded7 !important;
}

/* Inset Value Boxes across all cards (.bg-slate-900/80) */
.bg-slate-900\/80 {
  background-color: var(--devence-soft) !important;
  border: 1px solid #c8e4dd !important;
}

.bg-slate-900\/80 .text-white {
  color: var(--devence-teal-dark) !important;
}

/* Cards & Containers in Modo Reverso, Comparar Canais e Modais */
.bg-slate-850\/60,
.bg-slate-850 {
  background-color: #f8faf9 !important;
  border-color: var(--devence-border) !important;
}

input.bg-slate-900,
input.bg-slate-800,
select.bg-slate-800\/80 {
  background-color: #ffffff !important;
  color: var(--devence-text-main) !important;
  border: 1px solid #cdd8d5 !important;
}

input.bg-slate-900:focus,
input.bg-slate-800:focus,
select.bg-slate-800\/80:focus {
  border-color: var(--devence-teal-light) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(13, 131, 120, 0.15) !important;
}

/* SVG DRE Doughnut Chart / Circle */
svg circle[stroke="#1e293b"] {
  stroke: #e3ece9 !important;
}

/* Modal Dialogs & Drawers */
.fixed.inset-0.bg-slate-950\/80,
.fixed.inset-0.bg-black\/70 {
  background-color: rgba(25, 37, 36, 0.45) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

.fixed.inset-0 .bg-slate-900,
.fixed.inset-0 .bg-slate-850 {
  background-color: #ffffff !important;
  border: 1px solid var(--devence-border) !important;
  box-shadow: 0 25px 60px -12px rgba(7, 91, 85, 0.25) !important;
}

/* Footer */
footer.bg-slate-900\/80 {
  background-color: #ffffff !important;
  border-top: 1px solid var(--devence-border) !important;
  color: var(--devence-text-muted) !important;
}

footer.bg-slate-900\/80 .text-slate-300 {
  color: var(--devence-text-main) !important;
}

/* Trial Notice Banner */
.bg-gradient-to-r.from-amber-950\/70 {
  background-image: linear-gradient(90deg, #fef3c7, #fef9c3, #eef7f5) !important;
  border-bottom: 1px solid #fde68a !important;
  color: #92400e !important;
}

.bg-gradient-to-r.from-amber-950\/70 .text-white {
  color: #78350f !important;
}

.bg-gradient-to-r.from-rose-950\/80 {
  background-image: linear-gradient(90deg, #fee2e2, #fef2f2, #fee2e2) !important;
  border-bottom: 1px solid #fca5a5 !important;
  color: #991b1b !important;
}

.bg-gradient-to-r.from-rose-950\/80 .text-white {
  color: #7f1d1d !important;
}

/* Scrollbar */
::-webkit-scrollbar-track {
  background: var(--devence-canvas);
}

::-webkit-scrollbar-thumb {
  background: #cbd8d5;
}

::-webkit-scrollbar-thumb:hover {
  background: #9ab0ac;
}

/* ==========================================================================
   Catalog Product Cards & Saved Products Grid Polish
   ========================================================================== */
.bg-slate-800\/60.group,
.group.bg-slate-800\/60 {
  background-color: #ffffff !important;
  border: 1px solid var(--devence-border) !important;
  border-radius: 1rem !important;
  box-shadow: 0 2px 8px rgba(7, 91, 85, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.bg-slate-800\/60.group:hover,
.group.bg-slate-800\/60:hover {
  border-color: var(--devence-soft-border) !important;
  box-shadow: 0 10px 25px -4px rgba(7, 91, 85, 0.12), 0 4px 10px rgba(0, 0, 0, 0.03) !important;
  transform: translateY(-2px);
}

/* Inset Recessed Price Box inside Product Card */
.bg-slate-800\/60 .bg-slate-900\/80,
.p-5 .bg-slate-900\/80 {
  background-color: var(--devence-soft) !important;
  border: 1px solid #c8e4dd !important;
  border-radius: 0.75rem !important;
  box-shadow: inset 0 1px 2px rgba(7, 91, 85, 0.03) !important;
}

/* Selling Price in Card */
.bg-slate-800\/60 .text-xl.font-extrabold,
.p-5 .text-xl.font-extrabold {
  color: var(--devence-teal-dark) !important;
}

/* Profit text colors */
.text-rose-400,
.text-rose-500 {
  color: #dc2626 !important;
}

/* Open (Abrir) action button */
button.bg-emerald-500\/10:hover,
button[class*="hover:bg-emerald-500"]:hover {
  background: linear-gradient(135deg, var(--devence-teal), var(--devence-teal-light)) !important;
  color: #ffffff !important;
  border-color: var(--devence-teal-dark) !important;
}

button.bg-emerald-500\/10:hover *,
button[class*="hover:bg-emerald-500"]:hover * {
  color: #ffffff !important;
}

/* Delete (Excluir) action button */
button[class*="hover:bg-rose-500"]:hover {
  background-color: #fef2f2 !important;
  color: #dc2626 !important;
}

button[class*="hover:bg-rose-500"]:hover * {
  color: #dc2626 !important;
}

/* Empty Catalog State */
.bg-slate-800\/20 {
  background-color: #ffffff !important;
  border: 1.5px dashed #cdd8d5 !important;
}

/* ==========================================================================
   Mobile Hamburger Button & Drawer for PrecificaPro
   ========================================================================== */
.precifica-btn-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0 !important;
  border-radius: 10px;
  border: 1px solid #c9d6d3;
  background: #ffffff;
  color: var(--devence-teal);
  cursor: pointer;
  transition: all .15s ease;
  flex-shrink: 0;
}

.precifica-btn-hamburger:hover {
  background: var(--devence-soft);
  border-color: var(--devence-soft-border);
}

@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  header.sticky {
    padding: .5rem .75rem !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  header.sticky .max-w-7xl {
    gap: .5rem !important;
  }

  /* Na navbar mobile, deixar apenas Logo + Nome e Instalar App + Hambúrguer */
  header.sticky a[href="/"] {
    display: none !important;
  }

  header.sticky button[title*="Começar novo"],
  header.sticky button[title*="começar novo"],
  header.sticky button[title*="Limpar formulário"] {
    display: none !important;
  }

  .precifica-btn-hamburger {
    display: inline-flex !important;
  }
}

/* Mobile Drawer Overlay */
.mobile-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  justify-content: flex-end;
  visibility: visible;
  transition: visibility .2s ease;
}

.mobile-drawer-overlay.hidden {
  visibility: hidden;
  pointer-events: none;
}

.mobile-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(25, 37, 36, .45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 1;
  transition: opacity .2s ease;
}

.mobile-drawer-overlay.hidden .mobile-drawer-backdrop {
  opacity: 0;
}

.mobile-drawer-sheet {
  position: relative;
  width: min(320px, 86vw);
  height: 100%;
  background: #ffffff;
  box-shadow: -4px 0 25px rgba(7, 91, 85, .15);
  display: flex;
  flex-direction: column;
  transform: translateX(0);
  transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
  z-index: 1001;
}

.mobile-drawer-overlay.hidden .mobile-drawer-sheet {
  transform: translateX(100%);
}

.mobile-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--devence-border);
}

.mobile-drawer-title {
  font-size: 1rem;
  font-weight: 850;
  color: var(--devence-text-main);
}

.mobile-drawer-close {
  background: transparent;
  border: none;
  font-size: 1.25rem;
  color: var(--devence-text-muted);
  cursor: pointer;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-drawer-close:hover {
  background: #f1f5f4;
  color: var(--devence-text-main);
}

.mobile-drawer-content {
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.mobile-drawer-section-label {
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--devence-text-muted);
  margin-bottom: .6rem;
}

.mobile-drawer-links {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.mobile-drawer-link {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem .85rem;
  border-radius: 12px;
  text-decoration: none;
  color: var(--devence-text-main);
  border: 1px solid transparent;
  transition: all .15s ease;
  background: #f8faf9;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.mobile-drawer-link:hover {
  background: var(--devence-soft);
  border-color: var(--devence-soft-border);
}

.mobile-drawer-link.highlight {
  background: linear-gradient(135deg, rgba(7, 91, 85, .07), rgba(13, 131, 120, .12));
  border-color: rgba(7, 91, 85, .2);
}

.mobile-drawer-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.mobile-drawer-link strong {
  display: block;
  font-size: .88rem;
  font-weight: 750;
  color: var(--devence-text-main);
}

.mobile-drawer-link small {
  display: block;
  font-size: .72rem;
  color: var(--devence-text-muted);
}

.precifica-desktop-hub {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .85rem;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #c9d6d3;
  color: var(--devence-teal);
  font-size: .84rem;
  font-weight: 700;
  text-decoration: none;
  transition: all .15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.precifica-desktop-hub:hover {
  background: var(--devence-soft);
  border-color: var(--devence-teal-light);
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .precifica-desktop-hub {
    display: none !important;
  }
}


/* Reverse-mode goal simulator: explicit light surfaces and responsive hierarchy. */
.reverse-goal {
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid #c8ded7;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(7, 91, 85, .06);
  display: grid;
  gap: 20px;
}
.reverse-goal > div:first-child { flex-wrap: wrap; gap: 12px; }
.reverse-goal h4 { font-size: 17px; line-height: 1.4; }
.reverse-goal p { line-height: 1.65; margin-top: 6px; font-size: 13px; }
.reverse-goal > div:first-child > span { background: #eef7f5; color: #075b55 !important; border-color: #c8ded7; }
.reverse-goal svg { color: #075b55 !important; flex-shrink: 0; }
.reverse-goal-controls { padding: 18px; background: #f4f8f6; border: 1px solid #e0eae5; border-radius: 16px; }
.reverse-goal-controls > div:first-child { flex-wrap: wrap; gap: 8px 16px; margin-bottom: 18px; }
.reverse-goal-controls > div:first-child > span:last-child { font-family: inherit; font-size: 24px; }
.reverse-goal-controls > div:first-child > span:last-child > span { display: block; font-size: 12px; margin-top: 2px; }
.reverse-goal-controls > div:last-child { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 16px; }
.reverse-goal-controls button { padding: 9px 0; min-height: 38px; font-size: 12px; box-shadow: none !important; }
.reverse-goal input[type="range"] { display: block; width: 100%; height: 8px; appearance: none; }
.reverse-goal input[type="range"]::-webkit-slider-thumb { appearance: none; width: 22px; height: 22px; margin-top: -7px; border: 3px solid white; border-radius: 50%; background: #075b55; box-shadow: 0 1px 5px #075b5555; }
.reverse-goal input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border: 3px solid white; border-radius: 50%; background: #075b55; }
.reverse-goal-result { display: grid; gap: 18px; padding: 20px; border-radius: 18px; background: #eef7f3; border: 1px solid #c8ded7; }
.reverse-goal-result > div:first-child { padding-bottom: 18px; border-color: #c8ded7; gap: 14px; }
.reverse-goal-result > div:first-child > div:first-child > span { color: #44645a !important; font-size: 11px; }
.reverse-goal-result > div:first-child > div:first-child > div { color: #075b55 !important; font-size: clamp(30px, 4vw, 38px); margin-top: 6px; }
.reverse-goal-result > div:nth-child(2) { grid-template-columns: 1fr; gap: 10px; }
.reverse-goal-result > div:nth-child(2) > div { padding: 16px; border-color: #dce8e1; box-shadow: none; }
.reverse-goal-result > div:nth-child(2) > div > span:first-child { margin-bottom: 6px; font-size: 12px; }
.reverse-goal-result > div:nth-child(2) > div:first-child > span:nth-child(2) { font-size: 20px; }
.reverse-goal-result > div:nth-child(2) > div:last-child > div { gap: 12px; flex-wrap: wrap; }
.reverse-goal-result input[type="number"] { width: 76px; min-height: 36px; font-family: inherit; font-size: 14px; }
.reverse-goal-result .text-rose-400 { color: #b42342 !important; }
.reverse-goal-result .text-amber-400 { color: #935600 !important; }
button.reverse-goal-apply, button.reverse-save {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 48px; padding: 14px 18px; border-radius: 12px;
  border: 1px solid #075b55 !important; background: #075b55 !important;
  color: #fff !important; font-size: 13px; font-weight: 700;
  box-shadow: 0 3px 8px rgba(7, 91, 85, .12) !important;
  transition: background .15s ease;
}
button.reverse-goal-apply *, button.reverse-save * { color: #fff !important; }
button.reverse-goal-apply svg { width: 18px; height: 18px; }
button.reverse-save > span:first-child { background: #ffffff20; }
button.reverse-save > span:last-child.ml-auto { display: none; }
button.reverse-save .leading-tight { gap: 5px; }
button.reverse-save .leading-tight > span:last-child { color: #d6ebe5 !important; }
button.reverse-goal-apply:hover, button.reverse-save:hover { background: #064943 !important; transform: none; }
.reverse-goal button:focus-visible, .reverse-goal input:focus-visible, button.reverse-save:focus-visible { outline: 3px solid #42a99a !important; outline-offset: 4px; }
/* ==========================================================================
   Rose & Amber: badges, pills e caixas de diagnóstico em cards claros
   (ReverseCalculator, ResultsSummary, MetricCard, FabricanteTab).
   Bug 2026-09-11: "Margem Real" quase invisível — bg+texto ficam no MESMO
   elemento (ex. "bg-amber-500/20 text-amber-300"), mas as regras acima pra
   amber/rose só cobriam UMA fração de opacidade (ex. /40) via combinador
   descendente ".pai .filho", que não bate quando as duas classes estão juntas
   no mesmo elemento. [class*=...] cobre qualquer fração (/10, /15, /20, /30,
   /40) de uma vez só — mesmo padrão já usado acima pra from-emerald-950 etc.
   Azul e roxo não têm esse problema: bg-blue-500/20 e bg-purple-500\/20 já
   fixam a cor do texto direto (mais acima).
   O Header (fundo escuro) usa essas MESMAS classes de propósito no selo de
   licença — as regras "header ..." abaixo, mais específicas, mantêm o Header
   como está. */
[class*="bg-amber-950/"] {
  background-color: #fffbeb !important;
  border-color: #fde68a !important;
  color: #92400e !important;
}
[class*="bg-rose-950/"] {
  background-color: #fef2f2 !important;
  border-color: #fecaca !important;
  color: #b91c1c !important;
}
[class*="bg-amber-500/"] {
  background-color: #fffbeb !important;
  border-color: #fde68a !important;
  color: #92400e !important;
}
[class*="bg-rose-500/"] {
  background-color: #fef2f2 !important;
  border-color: #fecaca !important;
  color: #b91c1c !important;
}

/* Fallback pra quando só o texto aparece, sem bg-amber/rose no mesmo elemento
   (ex.: preço de equilíbrio no diagnóstico do modo reverso). */
.text-amber-300,
.text-amber-400 {
  color: #92400e !important;
}
.text-rose-300 {
  color: #b91c1c !important;
}

/* Exceção: selo de licença no Header (fundo escuro intencional) — mantém as
   cores originais, mais claras, do Tailwind em vez da versão pro fundo branco
   acima (maior especificidade por causa do "header", então ganha sempre). */
header .bg-amber-500\/20 {
  background-color: rgba(245, 158, 11, 0.2) !important;
  border-color: rgba(245, 158, 11, 0.5) !important;
  color: #fcd34d !important;
}
header .bg-amber-500\/15 {
  background-color: rgba(245, 158, 11, 0.15) !important;
  border-color: rgba(245, 158, 11, 0.4) !important;
  color: #fcd34d !important;
}
header .bg-rose-500\/20 {
  background-color: rgba(244, 63, 94, 0.2) !important;
  border-color: rgba(244, 63, 94, 0.5) !important;
  color: #fda4af !important;
}

/* Previously uncovered dark utility variants used by reverse-mode panels. */
.bg-slate-900\/90, .bg-slate-900\/50, .bg-slate-950\/40 { background-color: #f4f8f6 !important; }
.bg-indigo-950\/40 { background-color: #f3f4fc !important; border-color: #d8dcf0 !important; }
.text-indigo-300, .text-indigo-400 { color: #515ca0 !important; }
@media (max-width: 480px) {
  .reverse-goal-result { padding: 14px; }
  .reverse-goal-controls { padding: 14px; }
  .reverse-goal-controls > div:last-child { gap: 4px; }
  .reverse-goal-controls button { font-size: 11px; }
}