/*
 * CRM Cerne: identidade v2 (marca/kit-v2) por cima do Krayin. Fonte: interno/crm/cerne/publico/tema.css
 * Segue o modelo de página clara de 04/10/2026: uma área escura só (o topo azul) e todo o resto em papel,
 * cartões brancos, coral só em ação e marcação. Vale só no modo claro; o modo escuro do Krayin fica como veio.
 * Os seletores apontam pras classes do Tailwind compilado do Krayin 2.2.7. Atualizou o Krayin, conferir as telas.
 */

:root {
    --cerne-azul: #021F94;
    --cerne-azul-escuro: #01156A;
    --cerne-papel: #F5F2F3;
    --cerne-coral: #FF6F59;
    --cerne-coral-claro: #FFA893;
    --cerne-tinta: #0A1240;
    --cerne-tinta-2: rgba(10, 18, 64, .72);
    --cerne-tinta-3: rgba(10, 18, 64, .52);
    --cerne-linha: rgba(2, 31, 148, .12);
    --cerne-linha-forte: rgba(2, 31, 148, .28);
    --cerne-titulo: "Bricolage Grotesque", Inter, system-ui, sans-serif;
    --cerne-grao: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");

    /* a cor de marca do Krayin (links, item ativo, bordas de destaque) vira o azul Imperial */
    --brand-color: #021F94;
}

/* ---------- base ---------- */

html:not(.dark) body {
    background: var(--cerne-papel);
    color: var(--cerne-tinta);
    font-family: Inter, system-ui, sans-serif;
}

/* borda padrão do Tailwind (sem cor na classe): linha azul fraca. :where() zera a especificidade */
:where(html:not(.dark)) *,
:where(html:not(.dark)) ::before,
:where(html:not(.dark)) ::after {
    border-color: var(--cerne-linha);
}

html:not(.dark) .border-gray-200,
html:not(.dark) .border-gray-300 { border-color: var(--cerne-linha); }
html:not(.dark) .hover\:border-gray-400:hover,
html:not(.dark) .focus\:border-gray-400:focus { border-color: var(--cerne-linha-forte); }

html:not(.dark) .text-gray-800,
html:not(.dark) .text-black { color: var(--cerne-tinta); }
html:not(.dark) .text-gray-600,
html:not(.dark) .text-gray-700 { color: var(--cerne-tinta-2); }
html:not(.dark) .text-gray-500,
html:not(.dark) .text-gray-400 { color: var(--cerne-tinta-3); }
html:not(.dark) .text-blue-600,
html:not(.dark) .text-blue-500 { color: var(--cerne-azul); }

html:not(.dark) .bg-gray-50,
html:not(.dark) .bg-gray-100 { background-color: var(--cerne-papel); }
html:not(.dark) .hover\:bg-gray-50:hover,
html:not(.dark) .hover\:bg-gray-100:hover,
html:not(.dark) .hover\:bg-gray-200:hover { background-color: rgba(2, 31, 148, .06); }

/* títulos de página, de modal e de cartão: Bricolage 500, como na página clara */
html:not(.dark) .text-xl.font-bold,
html:not(.dark) .text-xl.font-semibold,
html:not(.dark) .text-2xl.font-bold,
html:not(.dark) .text-2xl.font-semibold,
html:not(.dark) .text-3xl.font-bold,
html:not(.dark) .text-lg.font-semibold,
html:not(.dark) .text-lg.font-bold {
    font-family: var(--cerne-titulo);
    font-weight: 500;
    letter-spacing: -.02em;
}

/* ---------- botões ---------- */

/* ação: pílula coral, Inter 600 em caixa alta (cerne-botao) */
html:not(.dark) .primary-button {
    background: var(--cerne-coral);
    border-color: var(--cerne-coral);
    color: #1a0c08;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .5rem 1.05rem;
    transition: transform .15s, box-shadow .15s;
}
html:not(.dark) .primary-button:hover,
html:not(.dark) .primary-button:focus {
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(255, 111, 89, .35);
}

/* segunda ação da tela: sem cor de fundo, contorno azul */
html:not(.dark) .secondary-button {
    background: #fff;
    border-width: 1.5px;
    border-color: var(--cerne-linha-forte);
    color: var(--cerne-azul);
    border-radius: 999px;
    font-size: 12.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
}
html:not(.dark) .secondary-button:hover,
html:not(.dark) .secondary-button:focus { background: rgba(2, 31, 148, .05); border-color: var(--cerne-azul); }

html:not(.dark) .primary-button:focus-visible,
html:not(.dark) .secondary-button:focus-visible,
html:not(.dark) a:focus-visible { outline: 2px solid var(--cerne-azul); outline-offset: 2px; }

/* ---------- campos ---------- */

html:not(.dark) input:not([type=checkbox]):not([type=radio]):focus,
html:not(.dark) textarea:focus,
html:not(.dark) select:focus {
    border-color: var(--cerne-azul) !important;
    box-shadow: 0 0 0 3px rgba(2, 31, 148, .10);
    outline: none;
}
html:not(.dark) input[type=checkbox],
html:not(.dark) input[type=radio] { accent-color: var(--cerne-azul); }

/* ---------- topo azul ---------- */

html:not(.dark) #app > header {
    background: var(--cerne-azul);
    border-bottom-color: transparent;
    color: var(--cerne-papel);
}
/* grão de impressão em todo fundo escuro, 13% em overlay */
html:not(.dark) #app > header::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .13;
    mix-blend-mode: overlay;
    background-image: var(--cerne-grao);
}
html:not(.dark) #app > header #logo-image { height: 30px; width: auto; }

/* ícones e busca do topo em off-white; os painéis que abrem por cima (.absolute) continuam claros */
html:not(.dark) #app > header [class*="icon-"]:not(.absolute *) { color: var(--cerne-papel); }
html:not(.dark) #app > header .hover\:bg-gray-100:hover:not(.absolute *) { background-color: rgba(255, 255, 255, .12); }
html:not(.dark) #app > header input:not(.absolute *) {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .22);
    color: var(--cerne-papel);
}
html:not(.dark) #app > header input:not(.absolute *)::placeholder { color: rgba(245, 242, 243, .72); }
html:not(.dark) #app > header input:not(.absolute *):hover { border-color: rgba(255, 255, 255, .4); }
html:not(.dark) #app > header input:not(.absolute *):focus {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .6) !important;
    box-shadow: none;
}

/* criação rápida (o + do topo) e avatar: coral, porque azul some no azul */
html:not(.dark) #app > header .bg-brandColor:not(.absolute *),
html:not(.dark) #app > header .bg-pink-400 {
    background: var(--cerne-coral);
    color: #1a0c08;
}
html:not(.dark) #app > header .bg-brandColor:not(.absolute *) [class*="icon-"] { color: #1a0c08; }

/* o menu da conta mostra a logo em 24 px, espremida; lá ela não precisa aparecer */
html:not(.dark) #app > header .absolute #logo-image { display: none; }

/* ---------- menu lateral ---------- */

html:not(.dark) #admin-sidebar {
    background: #fff;
    border-color: var(--cerne-linha);
}
html:not(.dark) #admin-sidebar .sidebar-rounded::before,
html:not(.dark) #admin-sidebar .sidebar-rounded::after { display: none; }

/* item ativo: azul, texto off-white e a marcação coral na borda */
html:not(.dark) #admin-sidebar a.bg-brandColor {
    box-shadow: inset 3px 0 0 var(--cerne-coral);
}
html:not(.dark) #admin-sidebar a.bg-brandColor,
html:not(.dark) #admin-sidebar a.bg-brandColor * { color: var(--cerne-papel) !important; }
html:not(.dark) #admin-sidebar a:not(.bg-brandColor) [class*="icon-"] { color: var(--cerne-azul); }

/* ---------- caixas ---------- */

/* cabeçalho de cada tela (título + botão) */
html:not(.dark) .scroll-reactive-sticky {
    border-radius: 16px;
    border-color: var(--cerne-linha);
    box-shadow: 0 1px 2px rgba(10, 18, 64, .04);
}

html:not(.dark) .box-shadow { box-shadow: 0 1px 2px rgba(10, 18, 64, .05); }

/* quadro de leads: colunas brancas, cartões em papel com borda azul fraca */
html:not(.dark) .min-w-\[275px\].rounded-lg { border-radius: 16px; }
html:not(.dark) .lead-item {
    background: var(--cerne-papel);
    border-color: var(--cerne-linha);
    border-radius: 12px;
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
}
html:not(.dark) .lead-item:hover {
    border-color: var(--cerne-linha-forte);
    box-shadow: 0 6px 18px rgba(2, 31, 148, .08);
}

/* etiquetas em pílula: azul fraco com texto azul */
html:not(.dark) .rounded-xl.bg-gray-200 {
    background: rgba(2, 31, 148, .07);
    color: var(--cerne-azul);
}

/* ---------- modo embutido (lead e contato abertos na gaveta das Conversas) ---------- */

html.cerne-embutido #app > header,
html.cerne-embutido #admin-sidebar,
html.cerne-embutido #app .fixed.bottom-0.left-0.right-0 { display: none !important; }
html.cerne-embutido #app [class*="pl-[215px]"],
html.cerne-embutido #app [class*="pl-[85px]"] { padding-left: 16px !important; }
html.cerne-embutido #app [class*="pb-[72px]"] { padding-bottom: 16px !important; }
html.cerne-embutido #app .sticky[class*="top-[60px]"],
html.cerne-embutido #app .scroll-reactive-sticky { top: 0 !important; }
html.cerne-embutido #app [class*="min-h-[calc(100vh-62px)]"] { min-height: 100vh; }

/* ---------- rolagem ---------- */

html:not(.dark) .journal-scroll::-webkit-scrollbar-thumb { background-color: rgba(2, 31, 148, .18); }