/* ===================================================
   TEMA DERMAA — Beleza & Autocuidados
   Paleta: #191919 fundo | #9D7E4D dourado | #928B83 texto
   =================================================== */

:root {
    --brand-bg:           #F0EAE4;
    --brand-bg-card:      #ffffff;
    --brand-bg-surface:   #e8ddd5;
    --brand-bg-hover:     #ede3da;
    --brand-gold:         #9D7E4D;
    --brand-gold-light:   #b8975f;
    --brand-gold-soft:    rgba(157, 126, 77, 0.15);
    --brand-gold-border:  rgba(157, 126, 77, 0.35);
    --brand-text:         #928B83;
    --brand-text-light:   #5c5652;
    --brand-text-heading: #191919;
    --brand-border:       rgba(157, 126, 77, 0.25);
    --brand-border-sub:   rgba(0, 0, 0, 0.08);
    --brand-success:      #6dbb8a;
    --brand-warning:      #c9a85c;
}

/* =====================================================
   FUNDO GERAL
   ===================================================== */
.gradient-bg {
    background: var(--brand-bg) !important;
    background-image: none !important;
}

/* =====================================================
   HERO SECTION
   ===================================================== */
.hero-gradient {
    background: var(--brand-bg-card) !important;
    background-image: none !important;
    border-color: var(--brand-gold-border) !important;
    box-shadow: none !important;
}

/* =====================================================
   CARDS / CONTAINERS COM GRADIENTE
   ===================================================== */
.gradient-bg div[class*="bg-gradient-to"],
.gradient-bg section[class*="bg-gradient-to"],
.gradient-bg a[class*="bg-gradient-to"] {
    background-image: none !important;
    background-color: var(--brand-bg-card) !important;
    border-color: var(--brand-border) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}

/* =====================================================
   TIPOGRAFIA
   ===================================================== */
.gradient-bg h1,
.gradient-bg h2,
.gradient-bg h3,
.gradient-bg h4 {
    color: var(--brand-text-heading) !important;
}

.gradient-bg p,
.gradient-bg span:not([class*="bg-"]):not([class*="text-green"]):not([class*="text-red"]):not([class*="text-yellow"]) {
    color: var(--brand-text) !important;
}

.gradient-bg .text-white {
    color: var(--brand-text-heading) !important;
}

/* =====================================================
   CARDS (elementos <a> com gradiente) — texto branco
   ===================================================== */
.gradient-bg a[class*="bg-gradient-to"] h1,
.gradient-bg a[class*="bg-gradient-to"] h2,
.gradient-bg a[class*="bg-gradient-to"] h3,
.gradient-bg a[class*="bg-gradient-to"] h4 {
    color: #ffffff !important;
}

.gradient-bg a[class*="bg-gradient-to"] p,
.gradient-bg a[class*="bg-gradient-to"] span:not([class*="text-green"]):not([class*="text-red"]):not([class*="text-yellow"]) {
    color: rgba(255, 255, 255, 0.80) !important;
}

.gradient-bg a[class*="bg-gradient-to"] .text-white {
    color: #ffffff !important;
}

.gradient-bg a[class*="bg-gradient-to"] .text-blue-200,
.gradient-bg a[class*="bg-gradient-to"] .text-blue-300,
.gradient-bg a[class*="bg-gradient-to"] .text-cyan-200,
.gradient-bg a[class*="bg-gradient-to"] .text-blue-100 {
    color: rgba(255, 255, 255, 0.70) !important;
}

.gradient-bg a[class*="bg-gradient-to"] .text-green-300 {
    color: #86efac !important;
}

/* Textos azuis → warm gray */
.gradient-bg .text-blue-100,
.gradient-bg .text-blue-200,
.gradient-bg .text-blue-300,
.gradient-bg .text-blue-400,
.gradient-bg .text-cyan-200,
.gradient-bg .text-cyan-300,
.gradient-bg .text-purple-200,
.gradient-bg .text-indigo-200 {
    color: var(--brand-text) !important;
}

/* Ícones/destaques → dourado */
.gradient-bg .text-blue-500,
.gradient-bg .text-blue-600,
.gradient-bg .text-blue-700,
.gradient-bg .text-indigo-400,
.gradient-bg .text-indigo-500 {
    color: var(--brand-gold) !important;
}

/* Status verde/amarelo: manter semântica */
.gradient-bg .text-green-300,
.gradient-bg .text-green-200 {
    color: var(--brand-success) !important;
}

.gradient-bg .text-yellow-300,
.gradient-bg .text-yellow-200 {
    color: var(--brand-warning) !important;
}

.gradient-bg .text-orange-300 {
    color: var(--brand-gold) !important;
}

/* =====================================================
   FUNDOS SEMI-TRANSPARENTES
   ===================================================== */
.gradient-bg .bg-white\/5,
.gradient-bg .bg-white\/10 {
    background-color: rgba(0, 0, 0, 0.04) !important;
    background-image: none !important;
}

.gradient-bg .bg-white\/20 {
    background-color: rgba(0, 0, 0, 0.07) !important;
    background-image: none !important;
}

/* Badges azuis → dourado suave */
.gradient-bg .bg-blue-500\/20,
.gradient-bg .bg-blue-500\/30,
.gradient-bg .bg-blue-600\/20,
.gradient-bg .bg-blue-600\/30,
.gradient-bg .bg-blue-500\/10,
.gradient-bg .bg-indigo-600\/30,
.gradient-bg .bg-purple-600\/30,
.gradient-bg .bg-cyan-500\/20,
.gradient-bg .bg-cyan-600\/30,
.gradient-bg .bg-orange-500\/20 {
    background-color: var(--brand-gold-soft) !important;
    background-image: none !important;
}

/* Badges verdes → verde suave */
.gradient-bg .bg-green-500\/20,
.gradient-bg .bg-green-500\/30,
.gradient-bg .bg-green-400\/20 {
    background-color: rgba(109, 187, 138, 0.18) !important;
    background-image: none !important;
}

/* Badges amarelos → dourado suave */
.gradient-bg .bg-yellow-500\/20,
.gradient-bg .bg-yellow-500\/30,
.gradient-bg .bg-yellow-600\/30 {
    background-color: rgba(201, 168, 92, 0.18) !important;
    background-image: none !important;
}

/* Botão bg-white secundário (hero) */
.gradient-bg a.bg-white,
.gradient-bg a.hover\:bg-gray-50 {
    background-color: rgba(255, 255, 255, 0.07) !important;
    background-image: none !important;
    border-color: var(--brand-gold-border) !important;
    color: var(--brand-text-light) !important;
}

.gradient-bg a.bg-white:hover,
.gradient-bg a.hover\:bg-gray-50:hover {
    background-color: rgba(157, 126, 77, 0.12) !important;
    color: var(--brand-gold) !important;
}

/* =====================================================
   BORDAS
   ===================================================== */
.gradient-bg .border-white\/10,
.gradient-bg .border-white\/20,
.gradient-bg .border-white\/30 {
    border-color: var(--brand-border-sub) !important;
}

.gradient-bg .border-blue-400\/30,
.gradient-bg .border-blue-500\/30,
.gradient-bg .border-blue-600\/30,
.gradient-bg .border-indigo-400\/30,
.gradient-bg .border-cyan-400\/30,
.gradient-bg .border-purple-400\/30 {
    border-color: var(--brand-gold-border) !important;
}

.gradient-bg .border-green-400\/30,
.gradient-bg .border-green-500\/50 {
    border-color: rgba(109, 187, 138, 0.30) !important;
}

/* =====================================================
   BOTÕES PRIMÁRIOS (azul → dourado)
   ===================================================== */
.gradient-bg .bg-blue-600,
.gradient-bg a.bg-blue-600,
.gradient-bg button.bg-blue-600 {
    background-color: var(--brand-gold) !important;
    background-image: none !important;
    color: #191919 !important;
    font-weight: 700 !important;
    border-radius: 0.75rem !important;
}

.gradient-bg .bg-blue-600:hover,
.gradient-bg a.bg-blue-600:hover,
.gradient-bg button.bg-blue-600:hover,
.gradient-bg .hover\:bg-blue-700:hover {
    background-color: var(--brand-gold-light) !important;
}

/* Botão roxo de prova → dourado */
.gradient-bg .from-purple-500.to-pink-500,
.gradient-bg a[class*="from-purple-5"] {
    background-image: none !important;
    background-color: var(--brand-gold) !important;
    color: #191919 !important;
    font-weight: 700 !important;
}

/* Botão certificado âmbar → dourado */
.gradient-bg a[class*="from-amber-5"] {
    background-image: none !important;
    background-color: var(--brand-gold) !important;
    color: #191919 !important;
}

/* Botão secundário cinza */
.gradient-bg .bg-gray-500\/30 {
    background-color: rgba(146, 139, 131, 0.18) !important;
    background-image: none !important;
}

.gradient-bg .hover\:bg-gray-500\/50:hover {
    background-color: rgba(146, 139, 131, 0.28) !important;
}

/* Botões com gradiente azul/ciano/índigo/verde/roxo → dourado */
.gradient-bg button[class*="from-"],
.gradient-bg a[class*="from-"][class*="to-"] {
    background-image: none !important;
    background-color: var(--brand-gold) !important;
    color: #191919 !important;
    font-weight: 700 !important;
    border-radius: 0.75rem !important;
}

.gradient-bg button[class*="from-"]:hover,
.gradient-bg a[class*="from-"][class*="to-"]:hover {
    background-color: var(--brand-gold-light) !important;
}

/* =====================================================
   HOVER NOS CARDS
   ===================================================== */
.gradient-bg .card-hover:hover {
    box-shadow: 0 12px 32px rgba(157, 126, 77, 0.15) !important;
    border-color: var(--brand-gold-border) !important;
}

/* =====================================================
   BARRA DE PROGRESSO
   ===================================================== */
.gradient-bg .progress-bar {
    background: linear-gradient(90deg, var(--brand-gold) 0%, var(--brand-gold-light) 100%) !important;
}

.gradient-bg .from-green-400,
.gradient-bg .to-emerald-500 {
    background: linear-gradient(90deg, var(--brand-gold) 0%, var(--brand-gold-light) 100%) !important;
}

/* =====================================================
   NAVBAR
   ===================================================== */
.site-navbar {
    background-color: var(--brand-bg) !important;
    background-image: none !important;
    border-color: var(--brand-gold-border) !important;
}

.site-navbar *,
.gradient-bg .site-navbar *,
nav .text-white {
    color: var(--brand-text-light) !important;
}

.site-navbar a:hover,
.site-navbar button:hover,
nav .hover\:text-blue-300:hover {
    color: var(--brand-gold) !important;
    background-color: rgba(157, 126, 77, 0.10) !important;
}

.site-navbar .bg-blue-800,
.site-navbar .hover\:bg-blue-700,
nav div[id="navbar-mobile-menu"] {
    background-color: var(--brand-bg) !important;
    border-color: var(--brand-gold-border) !important;
}

nav .text-blue-300 {
    color: var(--brand-gold) !important;
}

/* Dropdown desktop */
nav div.absolute[class*="bg-blue"] {
    background-color: #1a1714 !important;
    border-color: var(--brand-gold-border) !important;
}

nav div.absolute a:hover {
    background-color: rgba(157, 126, 77, 0.12) !important;
    color: var(--brand-gold) !important;
}

/* Link ativo */
.site-navbar a.bg-blue-700 {
    background-color: rgba(157, 126, 77, 0.20) !important;
    color: var(--brand-gold) !important;
}

/* Sair: manter vermelho suave */
.site-navbar a[href*="logout"]:hover {
    color: #e07070 !important;
    background-color: rgba(220, 38, 38, 0.10) !important;
}

/* =====================================================
   FOOTER
   ===================================================== */
footer {
    background-color: #111111 !important;
    background-image: none !important;
    border-color: var(--brand-gold-border) !important;
}

footer p,
footer .text-blue-300,
footer span {
    color: var(--brand-text) !important;
}

footer a {
    color: var(--brand-text) !important;
}

footer a:hover,
footer .hover\:text-blue-100:hover {
    color: var(--brand-gold) !important;
}

/* =====================================================
   HERO BADGE / PILL
   ===================================================== */
.gradient-bg .bg-blue-50 {
    background-color: var(--brand-gold-soft) !important;
}

.gradient-bg .border-blue-200 {
    border-color: var(--brand-gold-border) !important;
}

/* =====================================================
   MODAL (perfil)
   ===================================================== */
.modal-content {
    background: var(--brand-bg-card) !important;
    border-color: var(--brand-gold-border) !important;
}

.modal-content h1,
.modal-content h2,
.modal-content h3,
.modal-content label {
    color: var(--brand-text-heading) !important;
}

.modal-content p,
.modal-content .text-white {
    color: var(--brand-text) !important;
}

.modal-content .bg-blue-600,
.modal-content button.bg-blue-600 {
    background-color: var(--brand-gold) !important;
    color: #191919 !important;
}

.modal-content input,
.modal-content select,
.modal-content textarea {
    background-color: var(--brand-bg-card) !important;
    border-color: var(--brand-gold-border) !important;
    color: var(--brand-text-heading) !important;
}

.modal-content .border-white\/20 {
    border-color: var(--brand-gold-border) !important;
}

/* =====================================================
   PÁGINAS SEM gradient-bg (login, register)
   ===================================================== */
body {
    background-color: var(--brand-bg) !important;
}

/* Card central login/register */
body .bg-white.rounded-2xl {
    background-color: var(--brand-bg-card) !important;
    border-color: var(--brand-gold-border) !important;
}

body .text-gray-900 {
    color: var(--brand-text-heading) !important;
}

body .text-gray-700,
body .text-gray-600,
body .text-gray-500 {
    color: var(--brand-text) !important;
}

body .text-gray-400 {
    color: rgba(146, 139, 131, 0.60) !important;
}

body input.bg-gray-50,
body input[class*="bg-gray"],
body textarea[class*="bg-gray"],
body select[class*="bg-gray"] {
    background-color: var(--brand-bg-card) !important;
    border-color: var(--brand-gold-border) !important;
    color: var(--brand-text-heading) !important;
}

body input::placeholder,
body textarea::placeholder {
    color: rgba(146, 139, 131, 0.50) !important;
}

body .border-gray-200,
body .border-gray-300 {
    border-color: var(--brand-gold-border) !important;
}

/* Botão login/register */
body .bg-blue-600:not(.site-navbar *) {
    background-color: var(--brand-gold) !important;
    background-image: none !important;
    color: #191919 !important;
    font-weight: 700 !important;
    border-radius: 0.75rem !important;
}

body .bg-blue-600:hover:not(.site-navbar *),
body .hover\:bg-blue-700:hover:not(.site-navbar *) {
    background-color: var(--brand-gold-light) !important;
}

body .text-blue-600:not(.site-navbar *) {
    color: var(--brand-gold) !important;
}

body .hover\:text-blue-700:hover:not(.site-navbar *) {
    color: var(--brand-gold-light) !important;
}

.input-focus:focus {
    border-color: var(--brand-gold) !important;
    box-shadow: 0 0 0 3px rgba(157, 126, 77, 0.20) !important;
}

body .border-gray-300.text-gray-600 {
    border-color: var(--brand-gold-border) !important;
    color: var(--brand-text) !important;
    background-color: transparent !important;
}

body .hover\:bg-gray-100:hover {
    background-color: rgba(157, 126, 77, 0.10) !important;
}

/* Alertas login */
body .bg-red-50     { background-color: rgba(220, 38, 38, 0.12)  !important; }
body .border-red-200{ border-color: rgba(220, 38, 38, 0.30)       !important; }
body .bg-green-50   { background-color: rgba(109, 187, 138, 0.12) !important; }
body .border-green-200 { border-color: rgba(109, 187, 138, 0.30) !important; }
body .bg-blue-50    { background-color: var(--brand-gold-soft)    !important; }
body .border-blue-200 { border-color: var(--brand-gold-border)    !important; }

/* =====================================================
   RADIO / CHECKBOXES (exam)
   ===================================================== */
.option-label:hover {
    background-color: rgba(157, 126, 77, 0.10) !important;
}

input[type="radio"]:checked + .option-text {
    background-color: rgba(157, 126, 77, 0.18) !important;
    border-color: var(--brand-gold) !important;
}

/* =====================================================
   INPUTS INTERNOS (profile, etc.)
   ===================================================== */
.gradient-bg input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
.gradient-bg textarea,
.gradient-bg select {
    background-color: var(--brand-bg-card) !important;
    border-color: var(--brand-gold-border) !important;
    color: var(--brand-text-heading) !important;
}

.gradient-bg input::placeholder,
.gradient-bg textarea::placeholder {
    color: rgba(146, 139, 131, 0.50) !important;
}

/* =====================================================
   SCROLLBAR DISCRETA
   ===================================================== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--brand-bg); }
::-webkit-scrollbar-thumb { background: var(--brand-gold-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-gold); }