/* ================================================================
   PHS.Web — Tema da MARCA ("Carvão & Latão")

   Sobrescreve os design tokens neutros do Core
   (css/tema.css). DEVE ser carregado DEPOIS
   do tema do Core — a ordem é o que faz o app vencer.

   Identidade: phs clássica — carvão, latão, couro, mármore.
   Assinatura: o FIO DE LATÃO (item de menu ativo, rodapé do appbar,
   traço sob os títulos de página).
   ================================================================ */

:root {
    /* ---- Cores da marca (vencem os neutros do Core) ---- */
    --cor-primaria:             #1A1A1A;   /* carvão  */
    --cor-primaria-contraste:   #F5F1EA;   /* marfim  */
    --cor-secundaria:           #7B3F2E;   /* mogno   */
    --cor-secundaria-contraste: #F5F1EA;
    --cor-acento:               #B08D57;   /* latão   */
    --cor-assinatura:           #B08D57;   /* latão — a assinatura */
    --cor-superficie:           #FFFFFF;
    --cor-superficie-2:         #FBF8F3;
    --cor-fundo:                #F5F1EA;   /* marfim  */
    --cor-texto:                #1A1A1A;
    --cor-texto-suave:          #5C5249;
    --cor-borda:                rgba(42, 37, 32, .14);
    --cor-sucesso:              #5B8A5A;
    --cor-erro:                 #C0392B;
    --cor-aviso:                #D08C34;
    --cor-info:                 #41607A;

    /* ---- Tipografia da marca ---- */
    --fonte-titulo: "Oswald", system-ui, sans-serif;
    --fonte-corpo:  "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
}

/* Fundo da página em marfim (substitui o gradiente azul antigo) */
body {
    background: var(--cor-fundo);
}

/* ================================================================
   Assinatura — o fio de latão
   ================================================================ */

/* Rodapé do appbar com fio de latão */
.mud-appbar {
    border-bottom: 2px solid var(--cor-assinatura);
}

/* Item de menu ativo: barra de latão à esquerda + leve realce quente */
.mud-nav-link.active {
    box-shadow: inset 3px 0 0 0 var(--cor-assinatura);
    background-color: rgba(176, 141, 87, .12);
    font-weight: 600;
}

.mud-nav-link.active .mud-nav-link-icon {
    color: var(--cor-assinatura);
}

/* ================================================================
   Telas de login / onboarding — painel de marca
   ================================================================ */
.brand-panel {
    background: linear-gradient(150deg, #1A1A1A 0%, #241F1B 55%, #3A2F25 100%);
    color: var(--cor-primaria-contraste);
    position: relative;
}

/* Fio de latão no topo do painel de marca */
.brand-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--cor-assinatura), #d9b87e);
}

.brand-icon-circle {
    background: rgba(176, 141, 87, .22);
    color: var(--cor-assinatura);
}

/* Realce de latão nos rótulos "overline" do painel de marca */
.brand-panel .mud-typography-overline {
    color: var(--cor-assinatura);
}

/* ================================================================
   Filtro de empresa das telas do painel
   Antes o seletor era global, no appbar carvão, e precisava de cor
   própria. Agora nasce dentro da tela, sobre superfície clara, e
   herda o tema — só o destaque de foco é da marca.
   ================================================================ */
.empresa-filtro:focus-within .mud-input-outlined-border {
    border-color: var(--cor-assinatura) !important;
}