/**
 * Crônicas do Aquém — folha de override do Kanka.
 *
 * Carregada DEPOIS do CSS do Kanka. Não reescreve o front: redefine tokens
 * e um punhado de componentes para que a ferramenta pareça o mesmo produto
 * da landing. Layout, rotas e JS permanecem intactos.
 */

/* ------------------------------------------------------------------ fontes */

@font-face {
    font-family: "Playfair Display";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("/fonts/playfair-display-var-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Playfair Display";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("/fonts/playfair-display-var-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Playfair Display";
    font-style: italic;
    font-weight: 400 900;
    font-display: swap;
    src: url("/fonts/playfair-display-var-italic-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Spectral";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/spectral-400-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Spectral";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/spectral-600-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Spectral";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/spectral-400-italic-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ tokens */

:root {
    --breu: #07090a;
    --fuligem: #0c1013;
    --pedra: #11171a;
    --neblina: #1a2126;
    --neblina-alta: #27313a;
    --lampiao: #f2b866;
    --lampiao-nucleo: #ffe3b6;
    --lampiao-halo: #8a5a24;
    --latao: #b89051;
    --latao-fosco: #7a5f36;
    --pergaminho: #efe9db;
    --dalun: #c8d1d6;
    --tianon: #8f2f27;
    --tianon-luz: #d1685c;
    --verdete: #58a189;
    --chapa-0: #07090a;
    --chapa-1: #0c1013;
    --chapa-2: #11171a;
    --chapa-3: #171f23;
    --texto-1: #efe9db;
    --texto-2: #b8b4a6;
    --texto-3: #928f84;
    --texto-4: #757266;
    --fio-1: rgba(214, 190, 142, 0.12);
    --fio-2: rgba(214, 190, 142, 0.06);
    --fio-3: rgba(214, 190, 142, 0.22);
    --fio-4: rgba(242, 184, 102, 0.5);
    --foco: #f2b866;
    --controle-fundo: #0a0e10;
    --controle-fundo-ativo: #141c20;
    --controle-fio: rgba(214, 190, 142, 0.22);
    --ok: #58a189;
    --aviso: #f2b866;
    --perigo: #d1685c;
    --info: #c8d1d6;
    --raio: 2px;
    --tempo-toque: 160ms;
    --tempo-troca: 320ms;
    --curva: cubic-bezier(0.22, 0.61, 0.24, 1);
    --curva-saida: cubic-bezier(0.16, 1, 0.3, 1);
    --face-exibicao: "Playfair Display", "Times New Roman", Georgia, serif;
    --face-texto: "Spectral", Georgia, "Times New Roman", serif;

    /* Mapeamento para os tokens semânticos do Kanka (HSL sem hsl()). */
    --p: 35 84% 67%;
    --pf: 35 64% 48%;
    --pc: 33 75% 5%;
    --s: 200 21% 8%;
    --sf: 200 18% 11%;
    --sc: 43 38% 90%;
    --a: 37 41% 52%;
    --af: 36 38% 35%;
    --ac: 43 38% 90%;
    --n: 200 16% 14%;
    --nf: 200 16% 10%;
    --nc: 47 11% 69%;
    --b1: 206 23% 6%;
    --b2: 200 21% 8%;
    --b3: 200 21% 11%;
    --bc: 43 38% 90%;
    --in: 201 14% 18%;
    --inc: 201 14% 81%;
    --wa: 35 40% 16%;
    --wac: 35 84% 67%;
    --er: 6 40% 16%;
    --erc: 6 56% 68%;
    --su: 160 25% 14%;
    --suc: 160 29% 62%;
    --si: 200 18% 3%;
    --sif: 200 20% 8%;
    --sic: 43 36% 90%;
    --content-wrapper-background: #07090a;
    --body-background: #07090a;
    --body-text: #efe9db;
    --link-text: #f2b866;
    --link-focus: #ffe3b6;
    --header-text: #efe9db;
    --sidebar-background: #07090a;
    --sidebar-text: #efe9db;
    --box-background: #0c1013;
    --box-border: 1px solid rgba(214, 190, 142, 0.12);
    --box-header-background: #11171a;
    --box-header-text: #efe9db;
    --box-footer-background: #0c1013;
    --rounded-btn: 2px;
    --rounded-badge: 2px;
    --tab-radius: 2px;
    --animation-btn: 0;
    --btn-focus-scale: 1;
    --kanka-boost-accent: 35 84% 67%;
    --boosted: 35 84% 67%;
    color-scheme: dark;
    accent-color: #f2b866;
}

html {
    color-scheme: dark;
    accent-color: var(--lampiao);
    font-size: 16px;
}

/* ----------------------------------------------------------- tipografia */

body,
a,
button,
input,
select,
textarea,
label,
.btn2,
.form-control,
.dropdown-menu,
.sidebar-menu,
.badge,
.nav-tabs {
    font-family: var(--face-texto);
}

body {
    font-size: 1rem;
    line-height: 1.65;
    letter-spacing: 0;
    color: var(--texto-2);
    background-color: var(--chapa-0);
}

h1,
h2,
h3 {
    font-family: var(--face-exibicao);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.15;
    color: var(--texto-1);
}

h1 {
    font-size: clamp(1.9rem, 3.2vw, 2.6rem);
}

h2 {
    font-size: clamp(1.5rem, 2.2vw, 1.9rem);
}

h3 {
    font-size: 1.4rem;
}

h4,
h5,
h6,
.panel-title {
    font-family: var(--face-texto);
    font-weight: 600;
    color: var(--texto-1);
}

.content-header h1 {
    font-family: var(--face-exibicao);
    font-weight: 600;
    font-size: clamp(1.5rem, 2.2vw, 1.9rem);
    letter-spacing: -0.015em;
}

.entity-content {
    max-width: 42rem;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--texto-2);
}

/* ----------------------------------------------------- forma e profundidade */

.rounded,
.rounded-sm,
.rounded-md,
.rounded-lg,
.rounded-xl,
.rounded-2xl,
.rounded-3xl,
.btn2,
.btn2.btn-circle,
.badge,
.box,
.panel,
.login-card,
.dropdown-menu,
dialog,
input,
textarea,
select,
.form-control,
.ts-wrapper,
.ts-control,
.nav-tabs > li > a {
    border-radius: var(--raio) !important;
}

.box,
.panel,
.dropdown-menu,
.login-card,
.btn2,
.main-sidebar,
#header,
.navigation-drawer,
dialog {
    box-shadow: none !important;
}

/* ----------------------------------------------------------- chrome */

#header,
.bg-navbar,
.bg-base-100 {
    background-color: var(--chapa-0) !important;
    color: var(--texto-1);
    border-bottom: 1px solid var(--fio-1);
}

.main-sidebar,
.bg-sidebar {
    background-color: var(--chapa-0) !important;
    color: var(--sic);
}

.main-sidebar-placeholder {
    background-image: var(--sidebar-placeholder, none) !important;
    background-size: var(--sidebar-width, 15rem) 13rem;
    background-repeat: no-repeat;
    background-position: top center;
}

.cronicas-marca,
.cronicas-marca-compacta {
    mix-blend-mode: screen;
}

.navigation-drawer .campaigns .campaign {
    background-image: url('/images/login-background.png') !important;
}

.content-wrapper,
.bg-wrapper,
#app.wrapper {
    background-color: var(--chapa-0) !important;
}

#app.wrapper {
    /* Cabeçalho fixo tem 3rem; min-h-screen + mt-12 estourava a viewport. */
    min-height: calc(100vh - 3rem) !important;
}

.main-footer {
    background-color: var(--chapa-0);
    color: var(--texto-3);
    border-top: 1px solid var(--fio-1);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.rodape-aquem {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem 1.75rem;
    width: 100%;
    min-height: 2.25rem;
    color: var(--texto-3);
}

.rodape-aquem__marca {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--face-exibicao);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    color: var(--texto-1);
    letter-spacing: -0.02em;
    text-decoration: none;
    white-space: nowrap;
}

.rodape-aquem__marca:hover,
.rodape-aquem__marca:focus-visible {
    color: var(--lampiao);
}

.rodape-aquem__marca:focus-visible {
    outline: 2px solid var(--foco);
    outline-offset: 3px;
}

.rodape-aquem__icone {
    display: block;
    width: 1.75rem;
    height: 1.75rem;
    object-fit: contain;
    mix-blend-mode: screen;
}

.rodape-aquem__elos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.15rem 1.5rem;
    margin: 0;
    padding: 0;
}

.rodape-aquem__elos a {
    padding: 0.2rem 0;
    font-family: var(--face-texto);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    color: var(--texto-2);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--tempo-toque) var(--curva);
}

.rodape-aquem__elos a:hover,
.rodape-aquem__elos a:focus-visible {
    color: var(--lampiao);
}

.box,
.panel {
    background-color: var(--chapa-1);
    border: 1px solid var(--fio-1);
}

.dropdown-menu,
.dd-menu,
.navigation-drawer {
    background-color: var(--chapa-3) !important;
    color: var(--texto-1);
    border: 1px solid var(--fio-3);
}

dialog {
    background-color: var(--chapa-3);
    color: var(--texto-1);
    border: 1px solid var(--fio-3);
}

/* ----------------------------------------------------------- marca */

.cronicas-marca {
    display: block;
    object-fit: contain;
    height: 7rem;
    width: auto;
    max-width: 7rem;
}

.cronicas-marca-compacta {
    height: 2.25rem;
    max-width: 2.25rem;
}

a.cronicas-marca-link {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}

a.cronicas-marca-link:focus-visible {
    outline: 2px solid var(--foco);
    outline-offset: 3px;
}

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

.btn2 {
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    min-height: 2.75rem;
    padding: 0.7em 1.4em;
    border-width: 1px;
    transition: color var(--tempo-toque) var(--curva),
        background-color var(--tempo-toque) var(--curva),
        border-color var(--tempo-toque) var(--curva),
        box-shadow var(--tempo-toque) var(--curva);
    white-space: normal;
    animation: none;
}

.btn2.btn-xs,
.btn2.btn-sm {
    font-size: 0.875rem;
    min-height: 2.5rem;
    padding: 0.55em 1em;
}

.btn2.btn-primary {
    background: linear-gradient(180deg, var(--lampiao-nucleo), var(--lampiao)) !important;
    color: #150d03 !important;
    border: 1px solid #ffe9c6 !important;
}

.btn2.btn-primary:hover,
.btn2.btn-primary:focus-visible {
    background: linear-gradient(180deg, var(--lampiao-nucleo), var(--lampiao)) !important;
    color: #150d03 !important;
    box-shadow: 0 0 36px -6px rgba(242, 184, 102, 0.6) !important;
}

.btn2.btn-secondary,
.btn2.btn-accent,
.btn2.btn-neutral {
    background: rgba(10, 14, 16, 0.72) !important;
    color: var(--texto-1) !important;
    border: 1px solid var(--controle-fio) !important;
}

.btn2.btn-secondary:hover,
.btn2.btn-accent:hover,
.btn2.btn-neutral:hover {
    background: var(--chapa-2) !important;
    color: var(--texto-1) !important;
}

.btn2.btn-error,
.btn2.btn-outline.btn-error {
    background: transparent !important;
    color: var(--perigo) !important;
    border: 1px solid rgba(209, 104, 92, 0.5) !important;
}

.btn2.btn-ghost {
    background: transparent !important;
    color: var(--texto-2) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.btn2.btn-ghost:hover {
    color: var(--texto-1) !important;
    background: transparent !important;
}

.login-card button[type="submit"] {
    background: linear-gradient(180deg, var(--lampiao-nucleo), var(--lampiao)) !important;
    color: #150d03 !important;
    border: 1px solid #ffe9c6 !important;
    font-family: var(--face-texto);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: var(--raio) !important;
    min-height: 2.75rem;
}

.login-card button[type="submit"]:hover {
    box-shadow: 0 0 36px -6px rgba(242, 184, 102, 0.6) !important;
}

/* ----------------------------------------------------------- formulários */

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
textarea,
select,
.form-control,
.ts-wrapper .ts-control {
    background-color: var(--controle-fundo) !important;
    color: var(--texto-1) !important;
    border: 1px solid var(--controle-fio) !important;
    border-radius: var(--raio) !important;
    min-height: 2.75rem;
    padding: 0.8em 1em;
    font-size: 1rem;
    box-shadow: none !important;
}

input:not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
select:focus,
.form-control:focus,
.ts-wrapper.focus .ts-control {
    border-color: var(--fio-4) !important;
    background-color: var(--controle-fundo-ativo) !important;
    outline: 2px solid var(--foco);
    outline-offset: 3px;
}

.help-block,
.form-text {
    color: var(--texto-3);
    font-size: 1rem;
}

.has-error input,
.has-error textarea,
.login-card .has-error input {
    border-color: var(--perigo) !important;
}

.text-red-500,
.text-red {
    color: var(--perigo) !important;
}

/* ----------------------------------------------------------- tabelas */

.table-striped tbody > tr:nth-of-type(odd) {
    background-color: transparent !important;
}

.table th,
.table thead th {
    background-color: var(--chapa-2);
    color: var(--texto-3);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--fio-1) !important;
}

.table td {
    border-bottom: 1px solid var(--fio-1) !important;
    color: var(--texto-2);
}

.table tbody tr:hover td {
    background-color: var(--chapa-1);
    transition: background-color var(--tempo-troca) var(--curva);
}

/* ----------------------------------------------------------- abas e nav */

.nav-tabs > li > a {
    background: transparent !important;
    color: var(--texto-2) !important;
    border: 0 !important;
    border-bottom: 1px solid transparent !important;
    border-radius: 0 !important;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.nav-tabs > li > a:hover {
    color: var(--texto-1) !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: var(--texto-1) !important;
    background: transparent !important;
    border-bottom: 1px solid var(--lampiao) !important;
}

.sidebar-menu li.active > a,
.sidebar-menu li.active.sidebar-section {
    background: transparent !important;
    box-shadow: inset 2px 0 0 var(--lampiao);
    color: var(--texto-1) !important;
}

.sidebar-menu li a:hover {
    background: var(--chapa-1) !important;
    color: var(--texto-1) !important;
}

/* ----------------------------------------------------------- alertas e selos */

.alert {
    background-color: var(--chapa-1) !important;
    color: var(--texto-1) !important;
    border: 1px solid var(--fio-1);
    border-left-width: 2px;
    border-radius: var(--raio);
    box-shadow: none !important;
}

.alert-success {
    border-left-color: var(--ok);
    color: var(--texto-1) !important;
}

.alert-error {
    border-left-color: var(--perigo);
    color: var(--texto-1) !important;
}

.alert-warning {
    border-left-color: var(--aviso);
    color: var(--texto-1) !important;
}

.alert-info {
    border-left-color: var(--info);
    color: var(--texto-1) !important;
}

.badge,
.badge-primary,
.badge-secondary,
.badge-accent {
    background: transparent !important;
    border: 1px solid var(--fio-3) !important;
    color: var(--texto-2) !important;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    height: auto;
    padding: 0.2em 0.55em;
}

/* ----------------------------------------------------------- elos e foco */

.entity-content a,
.text-link,
a.text-link {
    color: var(--lampiao);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.entity-content a:hover,
.text-link:hover {
    color: var(--lampiao-nucleo);
}

a:focus,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn2:focus-visible,
.skip-nav-link:focus {
    outline: 2px solid var(--foco) !important;
    outline-offset: 3px;
}

a:hover,
a:active {
    outline: none;
}

.skip-nav-link:focus {
    z-index: 1000;
}

/* ----------------------------------------------------------- auth */

.login-page,
.register-page {
    background-color: var(--chapa-0);
    color: var(--texto-2);
}

.login-card {
    background: var(--chapa-1);
    border: 1px solid var(--fio-3);
    color: var(--texto-2);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.login-card h1 {
    color: var(--texto-1);
    font-family: var(--face-exibicao);
}

.login-logo-img {
    width: 130px;
    height: 130px;
    object-fit: contain;
}

/* ----------------------------------------------------------- front / erros */

body#page-top,
#page-top {
    background-color: var(--chapa-0);
    color: var(--texto-2);
    font-family: var(--face-texto);
}

.bg-purple,
.bg-dark,
.bg-blue {
    background-color: var(--chapa-0) !important;
}

.bg-light,
.bg-switcher {
    background-color: var(--chapa-2) !important;
}

.text-dark,
.text-nav,
.link,
.link-light,
.link-blue {
    color: var(--texto-1) !important;
}

.link:hover,
.link-light:hover,
.hover\:text-blue:hover,
.hover\:text-light:hover {
    color: var(--lampiao) !important;
}

.btn-login,
.btn-register,
.btn-round {
    background: rgba(10, 14, 16, 0.72);
    color: var(--texto-1) !important;
    border: 1px solid var(--controle-fio);
    border-radius: var(--raio) !important;
    font-family: var(--face-texto);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.btn-register {
    background: linear-gradient(180deg, var(--lampiao-nucleo), var(--lampiao));
    color: #150d03 !important;
    border-color: #ffe9c6;
}

.mobile-menu {
    background-color: var(--chapa-0) !important;
    color: var(--texto-1);
}

/* ----------------------------------------------------------- movimento */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    body,
    .content-wrapper,
    #app.wrapper,
    .box,
    .panel {
        background: #fff !important;
        color: #111 !important;
        box-shadow: none !important;
    }

    .rodape-aquem,
    #footer,
    .main-footer {
        display: none !important;
    }
}

/* CTA SaaS residual (galeria, ficha, docs Owlchester) */
a[href*="kanka.io"],
a[href*="plugins.kanka.io"] {
    display: none !important;
}

body.campaign-gallery a[href*="settings/premium"],
body.campaign-gallery a[href*="settings/subscription"] {
    display: none !important;
}

/* Galeria: "Upload files" hardcoded no Vue compilado */
.fa-image + span {
    font-size: 0 !important;
}

.fa-image + span::after {
    content: "Enviar arquivos";
    font-size: 1rem;
    font-family: var(--face-texto);
    font-weight: 600;
    letter-spacing: 0.04em;
}