/* Identidade visual Doow — ver docs/identidade-visual/IDENTIDADE-VISUAL.md
   Carregado depois do Materialize e antes do CSS do template; usa !important só onde o legado já o usa. */

:root {
    --doow-900: #09363f;
    --doow-800: #0c3642;
    --doow-500: #0c7d8c;
    --doow-400: #4aa6b3;
    --doow-card: #f0f8fa;
    --doow-line: #a9d3d9;
    --doow-border: #d3e7ea;
    --doow-muted: #4f7580;
    --doow-pink: #ed1566;
    --doow-radius-btn: 7px;
    --doow-radius-card: 8px;
    --font-doow: 'Wix Madefor Display', ui-sans-serif, system-ui, sans-serif;
    --font-doow-text: 'Wix Madefor Text', ui-sans-serif, system-ui, sans-serif;
    --font-doow-title: 'Familjen Grotesk', ui-sans-serif, system-ui, sans-serif;
}

/* ---------- Tipografia ---------- */
html, body, input, select, textarea, button, table, .btn, .btn-large, .btn-small, .dropdown-content li > a {
    font-family: var(--font-doow);
}
body {
    color: var(--doow-900);
}
p, li, td, label, .card-content {
    font-family: var(--font-doow-text);
}
h1 {
    font-family: var(--font-doow-title);
    font-weight: 700;
    color: var(--doow-900);
}
h2, h3, h4, h5, h6 {
    font-family: var(--font-doow);
    color: var(--doow-900);
}
h2 {
    font-weight: 400;
    letter-spacing: -0.04em;
}
.material-icons,
i.material-icons {
    font-family: 'Material Icons' !important;
}

/* ---------- Links ---------- */
a {
    color: var(--doow-500);
}
a:hover {
    color: var(--doow-900);
}

/* ---------- Botões (7px, nunca pílula; hover → doow-900) ---------- */
.btn, .btn-large, .btn-small, .btn-flat, .btn-padrao, .btn-log, button.btn {
    border-radius: var(--doow-radius-btn) !important;
}
.btn, .btn-large, .btn-small, .btn-padrao {
    background-color: var(--doow-500);
    background-image: none;
    color: #fff;
    box-shadow: none;
    transition: background-color .2s ease-in-out;
}
.btn:hover, .btn-large:hover, .btn-small:hover, .btn-padrao:hover,
.btn:focus, .btn-large:focus, .btn-small:focus, .btn-padrao:focus {
    background-color: var(--doow-900) !important;
    background-image: none !important;
    box-shadow: none;
}
.btn-padrao {
    background-image: none !important;
    background-color: var(--doow-500) !important;
}
.btn-floating {
    background-color: var(--doow-500);
}
.btn-floating:hover {
    background-color: var(--doow-900);
}

/* ---------- Menu superior (claro e suave) e rodapé ---------- */
.nav-wrapper-menu {
    background-color: #cfe6ea !important;
    background-image: none !important;
    border-top: 1px solid var(--doow-line);
    border-bottom: 1px solid var(--doow-line);
    box-shadow: none;
}
footer.page-footer,
footer.page-footer.colorMenu {
    background-color: var(--doow-800) !important;
    background-image: none !important;
}
.nav-wrapper-menu .text-menu a,
.nav-wrapper-menu ul a {
    color: var(--doow-900);
    font-weight: 500;
    border-radius: var(--doow-radius-btn);
    margin: 8px 2px;
    line-height: 38px;
    height: 38px;
    padding: 0 14px;
    transition: background-color .2s ease, color .2s ease;
}
.nav-wrapper-menu .text-menu a:hover,
.nav-wrapper-menu ul a:hover,
.nav-wrapper-menu ul li.active a {
    background-color: var(--doow-500);
    color: #fff;
}
.nav-wrapper-menu ul li.active a .material-icons,
.nav-wrapper-menu ul a:hover .material-icons {
    color: #fff;
}
.nav-wrapper-menu .material-icons {
    color: var(--doow-500);
}
.logo-wrapper {
    height: auto !important;
    width: 150px;
    max-height: none;
}
.logo-mobile {
    height: 40px !important;
    width: auto;
}
.logo-sidenav img {
    height: auto !important;
    width: 140px;
}

/* ---------- Cartões, campos, abas ---------- */
.card, .card-panel, .collection, .modal {
    border-radius: var(--doow-radius-card);
}
.card, .card-panel {
    box-shadow: none;
    border: 1px solid var(--doow-border);
}
input:not([type]):focus:not([readonly]),
input[type=text]:not(.browser-default):focus:not([readonly]),
input[type=password]:not(.browser-default):focus:not([readonly]),
input[type=email]:not(.browser-default):focus:not([readonly]),
input[type=url]:not(.browser-default):focus:not([readonly]),
input[type=time]:not(.browser-default):focus:not([readonly]),
input[type=date]:not(.browser-default):focus:not([readonly]),
input[type=datetime]:not(.browser-default):focus:not([readonly]),
input[type=datetime-local]:not(.browser-default):focus:not([readonly]),
input[type=tel]:not(.browser-default):focus:not([readonly]),
input[type=number]:not(.browser-default):focus:not([readonly]),
input[type=search]:not(.browser-default):focus:not([readonly]) {
    border-bottom: 1px solid var(--doow-500);
    box-shadow: 0 1px 0 0 var(--doow-500);
}
input:not([type]):focus:not([readonly]) + label,
input[type=text]:not(.browser-default):focus:not([readonly]) + label,
input[type=password]:not(.browser-default):focus:not([readonly]) + label,
input[type=email]:not(.browser-default):focus:not([readonly]) + label,
input[type=tel]:not(.browser-default):focus:not([readonly]) + label,
input[type=number]:not(.browser-default):focus:not([readonly]) + label {
    color: var(--doow-500);
}
.tabs .tab a {
    color: var(--doow-900);
}
.tabs .tab a:hover,
.tabs .tab a.active {
    color: var(--doow-500);
}
.tabs .indicator {
    background-color: var(--doow-500);
}
::selection {
    background: var(--doow-line);
}

/* ---------- Rodapé sempre no fim da página (mesmo com conteúdo curto) ---------- */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body > * {
    flex-shrink: 0;
    width: 100%; /* itens com margin auto (ex.: .row) não esticam em coluna flex e encolhem ao conteúdo */
}
body > footer.page-footer,
body > footer {
    margin-top: auto !important;
}

/* ---------- Sino de notificações: fundo claro, ícone teal (a regra .btn-floating acima deixaria tudo teal) ---------- */
.btn-floating.btn-notification {
    background-color: var(--doow-card);
    border: 1px solid var(--doow-border);
}
.btn-floating.btn-notification:hover,
.btn-floating.btn-notification:focus {
    background-color: var(--doow-line) !important;
}

/* ---------- Alinhamento dos itens do menu superior ---------- */
.nav-wrapper-menu {
    height: 56px;
    line-height: normal;
}
.nav-wrapper-menu .content-nav-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    margin: 0 30px 0 55px;
}
.nav-wrapper-menu .content-nav-menu > ul {
    float: none !important;
    display: flex;
    align-items: center;
    height: 56px;
    margin: 0;
}
.nav-wrapper-menu .content-nav-menu > ul > li {
    float: none;
    display: flex;
    align-items: center;
    height: 56px;
}
.nav-wrapper-menu .text-menu a,
.nav-wrapper-menu ul a {
    display: flex;
    align-items: center;
    margin: 0 2px;
    height: 38px;
    line-height: 38px;
    padding: 0 12px;
}
.nav-wrapper-menu ul a i.material-icons {
    float: none;
    height: auto;
    line-height: 1;
    margin: 0;
}
.nav-wrapper-menu ul a i.material-icons.left {
    display: none;
}
.nav-wrapper-menu ul a i.material-icons.right {
    order: 2;
    margin-left: 2px;
}

/* ---------- Bloco "Prazos / Filtro de cobrança" alinhado à esquerda ---------- */
.acesso-fp {
    text-align: left;
}
.acesso-fp h5 {
    margin-left: 0;
}
.acesso-fp a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.acesso-fp a i.material-icons.left {
    float: none;
    margin: 0;
}

/* ---------- Área aberta (login / cadastro): visual do site doow.com.br/contato ----------
   fundo suave #f0f8fa, título grande Familjen Grotesk, cartão branco de 8px, botão padrão teal */
.container-login,
.container-cadastro,
.background-cadastro,
.background-login {
    background-color: var(--doow-card) !important;
    background-image: none !important;
    position: relative;
}
.container-login::before,
.container-cadastro::before {
    content: '';
    position: absolute;
    top: 28px;
    left: 56px;
    width: 116px;
    height: 22px;
    background: url('../../images/identidade/logo.svg') no-repeat left center / contain;
    z-index: 2;
}
.content-info-login h2,
.content-info-cadastro h1 {
    font-family: var(--font-doow-title) !important;
    font-weight: 700 !important;
    color: var(--doow-900) !important;
    letter-spacing: -0.02em;
}
.content-info-login p,
.content-info-cadastro p {
    color: var(--doow-900) !important;
    font-family: var(--font-doow-text) !important;
}
.content-login,
.login.face,
.content-cadastro {
    border-radius: var(--doow-radius-card) !important;
    box-shadow: none !important;
}
.content-login .login,
.login.face {
    background: #fff;
    border: 1px solid var(--doow-border);
}
.title-form-login {
    font-family: var(--font-doow) !important;
    color: var(--doow-900) !important;
}
.btn-border,
.btn-padrao-site {
    background: var(--doow-500) !important;
    border: 1px solid var(--doow-500) !important;
    border-radius: var(--doow-radius-btn) !important;
    color: #fff !important;
    height: 50px;
    line-height: 48px;
    font-size: 14px;
    font-weight: 400 !important;
    text-transform: none !important;
    box-shadow: none !important;
    transition: background-color .2s ease, border-color .2s ease !important;
}
.btn-border {
    padding: 0 40px !important;
}
.btn-border:hover,
.btn-border:focus,
.btn-padrao-site:hover,
.btn-padrao-site:focus {
    background: var(--doow-900) !important;
    border-color: var(--doow-900) !important;
    color: #fff !important;
}
.btn-border {
    margin: 35px 12px 35px 0 !important;
}
.col-formulario {
    background-color: #fff !important;
}

/* ---------- Fotografias na área aberta (no lugar das ilustrações do Enzo) ---------- */
@media only screen and (min-width: 993px) {
    /* login do cliente: foto atrás do cartão do formulário */
    .container-login .col-height + .col-height {
        width: calc(50% - 24px) !important;
        height: calc(100% - 48px);
        margin: 24px 24px 24px 0;
        border-radius: var(--doow-radius-card);
        background: url('../../images/identidade/fotos/home-hero.jpg') center top / cover no-repeat;
    }
    .container-login .col-height + .col-height .align-items-center {
        left: 40px !important;
        top: 50%;
        transform: translateY(-50%);
        width: 400px;
    }
    .container-login .col-height + .col-height .content-login {
        width: 100%;
        max-width: calc(100% - 40px);
    }
    /* "esqueci a senha": outra foto, ampliada para o rosto ficar à direita do cartão */
    .container-login .col-height + .col-height:has(.content-login.flip-vertical-left) {
        background-image: url('../../images/identidade/fotos/esqueci-senha.jpg');
        background-size: 140% auto;
        background-position: left top;
    }
    /* cadastro de correspondente: foto no painel de boas-vindas, texto sobre o degradê */
    .background-cadastro.l4 {
        background-image: linear-gradient(180deg, rgba(9, 54, 63, .55) 0%, rgba(9, 54, 63, .05) 16%, rgba(9, 54, 63, .05) 40%, rgba(9, 54, 63, .88) 100%),
            url('../../images/identidade/fotos/correspondente-banner.jpg') !important;
        background-size: cover !important;
        background-position: center top !important;
    }
    .background-cadastro.l4 .align-content-center {
        align-items: flex-end;
    }
    .background-cadastro.l4 .content-info-cadastro {
        padding-bottom: 32px;
    }
    .background-cadastro.l4 .content-info-cadastro h1,
    .background-cadastro.l4 .content-info-cadastro p {
        color: #fff !important;
    }
    .container-cadastro:has(.background-cadastro.l4)::before {
        filter: brightness(0) invert(1);
    }
}
.container-login .title-form-login {
    font-size: 1.6rem;
}

/* cadastro de correspondente no celular/tablet: foto vertical mais fechada no topo da página */
@media only screen and (max-width: 992px) {
    .background-cadastro.l4 {
        background-image: linear-gradient(180deg, rgba(9, 54, 63, .55) 0%, rgba(9, 54, 63, .05) 16%, rgba(9, 54, 63, .05) 40%, rgba(9, 54, 63, .88) 100%),
            url('../../images/identidade/fotos/correspondente-mobile.jpg') !important;
        background-size: cover !important;
        background-position: center top !important;
        min-height: 520px;
    }
    .background-cadastro.l4 .align-content-center {
        align-items: flex-end;
    }
    .background-cadastro.l4 .content-info-cadastro h1,
    .background-cadastro.l4 .content-info-cadastro p {
        color: #fff !important;
    }
    .container-cadastro:has(.background-cadastro.l4)::before {
        filter: brightness(0) invert(1);
    }
}


/* modal "Cadastro enviado com sucesso" (correspondente): foto no topo no lugar da ilustração */
.modal-correspondente-confirmacao {
    background-image: none !important;
    background-color: #fff;
    border-radius: var(--doow-radius-card);
}
.modal-correspondente-confirmacao .content-curve-modal img {
    position: static !important;
    display: block;
    width: 100%;
    height: 300px !important;
    object-fit: cover;
    object-position: center 25%;
}

/* ---------- Topo das páginas internas do site (ex.: termos de uso): faixa #f0f8fa, título à esquerda e foto à direita ---------- */
.page-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    background: var(--doow-card);
    padding: 72px 8% 72px 12%;
}
.page-hero-text h1 {
    font-size: 4rem !important;
    line-height: 1.1;
    margin: 0 0 16px;
}
.page-hero-text p {
    font-size: 1.2rem;
    color: var(--doow-900);
    margin: 0;
}
.page-hero-photo {
    width: 340px;
    max-width: 40%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--doow-radius-card);
}
.container-page-default .position-card-form-default {
    width: 100%;
    max-width: 1100px;
    margin: 48px auto 0;
    padding: 0 24px 40px;
}
@media only screen and (max-width: 992px) {
    .page-hero {
        flex-direction: column;
        align-items: flex-start;
        padding: 40px 24px;
    }
    .page-hero-text h1 {
        font-size: 2.6rem;
    }
    .page-hero-photo {
        width: 100%;
        max-width: 100%;
        aspect-ratio: 4 / 3;
    }
}

/* ---------- Rodapés: admin mostra o CNPJ; cliente mostra as redes sociais ---------- */
.copy-cnpj {
    text-align: right;
}
@media only screen and (max-width: 992px) {
    .copy-cnpj {
        text-align: left;
    }
}
.footer-social {
    display: flex;
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-social li {
    margin: 0;
}
.footer-social img {
    display: block;
    height: 22px;
}

/* ---------- Preenchimento automático do navegador: sem o fundo azul padrão ---------- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    box-shadow: 0 0 0 1000px #fff inset !important;
    -webkit-text-fill-color: var(--doow-900) !important;
    caret-color: var(--doow-900);
    transition: background-color 9999s ease-in-out 0s;
}