/*
 * Novo layout do Clientar — tokens e componentes.
 * Spec: docs/spec-novo-layout.md
 * Carregado depois do style.css; usar só classes com prefixo "cl-".
 */

:root {
    --cl-laranja: #F7931E;
    --cl-laranja-escuro: #F26B1D;
    --cl-azul: #1570EF;
    --cl-azul-escuro: #0F5BD0;
    --cl-azul-login: #3D5BD6;
    --cl-texto: #0F1E4A;
    --cl-texto-suave: #5B6785;
    --cl-fundo: #F4F7FC;
    --cl-card: #FFFFFF;
    --cl-borda: #E3E8F2;
    --cl-verde: #22A06B;
    --cl-vermelho: #E5383B;
    --cl-raio: 12px;
    --cl-raio-campo: 8px;
    --cl-sombra: 0 4px 16px rgba(30, 58, 138, 0.08);
    --cl-fonte: 'Poppins', 'Segoe UI', Arial, sans-serif;
}

/* Botões */

.cl-btn {
    display: inline-block;
    font-family: var(--cl-fonte);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    padding: 13px 44px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .15s, transform .05s;
}

.cl-btn:active {
    transform: translateY(1px);
}

.cl-btn:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .6);
    outline-offset: 2px;
}

.cl-btn-laranja {
    background: var(--cl-laranja);
    color: #FFFFFF;
}

.cl-btn-laranja:hover {
    background: var(--cl-laranja-escuro);
}

/* Campo com ícone à esquerda */

.cl-campo-icone {
    position: relative;
}

.cl-campo-icone svg {
    position: absolute;
    left: 14px;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    fill: none;
    stroke: var(--cl-texto-suave);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.cl-campo-icone input {
    box-sizing: border-box;
    width: 100%;
    padding: 12px 14px 12px 44px;
    font-family: var(--cl-fonte);
    font-size: 15px;
    color: var(--cl-texto);
    background: #EAF0FD;
    border: 2px solid transparent;
    border-radius: var(--cl-raio-campo);
    outline: none;
    transition: border-color .15s, background-color .15s;
}

.cl-campo-icone input:focus {
    background: #FFFFFF;
    border-color: var(--cl-laranja);
}

/* Login */

.cl-login-body {
    margin: 0;
    font-family: var(--cl-fonte);
    background: var(--cl-fundo);
    color: var(--cl-texto);
}

.cl-login {
    display: flex;
    min-height: 100vh;
}

.cl-login-hero {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 5vh, 48px) 48px;
    background: #F7F9FD;
}

/* Tamanho acompanha largura e altura da tela (notebook com escala 125-150%) */
.cl-login-ilustracao {
    width: 100%;
    max-width: 560px;
    max-height: 55vh;
    object-fit: contain;
}

.cl-login-boasvindas {
    width: 100%;
    max-width: 560px;
    margin-top: clamp(4px, 2vh, 16px);
}

.cl-login-boasvindas h1 {
    margin: 0 0 6px 4px;
    font-size: clamp(18px, 3.6vh, 30px);
    font-weight: 500;
    color: #1B1B1B;
}

.cl-login-boasvindas img {
    display: block;
    width: auto;
    max-width: 100%;
    height: clamp(48px, 13vh, 104px);
}

.cl-login-painel {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 32px;
    background: var(--cl-azul-login);
    color: #FFFFFF;
}

.cl-login-conteudo {
    width: 100%;
    max-width: 420px;
}

.cl-login-marca {
    margin-bottom: clamp(16px, 5vh, 36px);
    text-align: center;
}

.cl-login-licenciado {
    display: block;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 500;
    opacity: .9;
}

.cl-login-logo {
    display: inline-block;
    padding: 14px 22px;
    background: #FFFFFF;
    border-radius: var(--cl-raio);
    box-shadow: 0 6px 20px rgba(15, 30, 74, .18);
}

.cl-login-logo img {
    display: block;
    max-width: 240px;
    max-height: 90px;
}

.cl-login-razao {
    font-size: 22px;
    font-weight: 600;
}

.cl-login-form label {
    display: block;
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 500;
}

.cl-login-form .cl-campo-icone {
    margin-bottom: clamp(12px, 2.6vh, 20px);
}

.cl-login-form .cl-btn {
    display: block;
    margin: 10px auto 0;
    min-width: 160px;
}

.cl-login-msg {
    min-height: 40px;
    margin-top: 16px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    color: #FFE0B2;
}

/* Tablet: ilustração menor */
@media (max-width: 1100px) {
    .cl-login-hero {
        padding: 32px;
    }

    .cl-login-boasvindas h1 {
        font-size: 24px;
    }
}

/* Celular e tablet em pé: empilha, sem ilustração */
@media (max-width: 860px) {
    .cl-login {
        flex-direction: column;
    }

    .cl-login-hero {
        flex: 0 0 auto;
        padding: 28px 24px 22px;
    }

    .cl-login-ilustracao {
        display: none;
    }

    .cl-login-boasvindas {
        max-width: 300px;
        margin: 0;
        text-align: center;
    }

    .cl-login-boasvindas img {
        height: auto;
        width: 100%;
    }

    .cl-login-boasvindas h1 {
        margin: 0 0 4px;
        font-size: 18px;
    }

    .cl-login-painel {
        flex: 1 0 auto;
        align-items: flex-start;
        padding: 32px 24px 40px;
    }

    .cl-login-marca {
        margin-bottom: 28px;
    }

    /* 16px evita zoom automático no iOS */
    .cl-campo-icone input {
        font-size: 16px;
    }
}

/* ==========================================================================
   Cabeçalho (template/topo.php) — todas as telas
   ========================================================================== */

/* acima dos cards que criam camada própria (ex.: filtro de família do dashboard, z-index 20), senão os submenus ficam por baixo */
.cl-header {
    position: relative;
    z-index: 50;
    margin: 0 0 20px;
    padding: 0 20px;
    background: var(--cl-laranja);
    box-shadow: 0 4px 14px rgba(242, 107, 29, .25);
    font-family: var(--cl-fonte);
}

.cl-header-barra {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 6px;
    min-height: 60px;
}

.cl-header-logo {
    order: 0;
    display: flex;
    align-items: center;
    margin-right: 10px;
    padding: 8px 0;
}

.cl-header-logo-cliente {
    display: flex;
    align-items: center;
    padding: 4px 10px;
    background: #FFFFFF;
    border-radius: 10px;
}

.cl-header-logo-cliente img {
    display: block;
    height: 36px;
    max-width: 150px;
    object-fit: contain;
}

.cl-header-logo-clientar,
.cl-header-logo-falha img {
    display: block;
    height: 28px;
}

/* Buscas rápidas (widget_short_action) */

.cl-header-busca {
    order: 1;
}

.cl-header .short_action {
    display: flex;
    gap: 8px;
    height: auto;
}

.cl-header .short_action div {
    float: none !important;
    width: auto !important;
    margin: 0;
}

.cl-header .short_action input {
    box-sizing: border-box;
    height: 34px;
    padding: 0 10px 0 32px;
    font-family: var(--cl-fonte);
    font-size: 12px;
    color: var(--cl-texto);
    border: 0;
    border-radius: 8px;
    background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6785' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 10px center / 15px;
}

.cl-header #short_action_cliente_name {
    width: 230px;
}

.cl-header #short_action_ped_numero {
    width: 150px;
}

.cl-header .short_action input.ui-autocomplete-loading {
    background: #FFFFFF url('/common/imagens/ajax-loader.gif') no-repeat right 8px center;
}

/* Menu (SmartMenus) */

.cl-header .main-nav,
.cl-header .sm-clientar {
    margin: 0;
    background: transparent;
}

.cl-header .main-menu-btn-icon,
.cl-header .main-menu-btn-icon:before,
.cl-header .main-menu-btn-icon:after {
    background: #FFFFFF;
}

.cl-header #main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon {
    background: transparent;
}

.cl-header .sm-clientar ul a {
    font-family: var(--cl-fonte);
    font-size: 13px;
    font-weight: 500;
    color: var(--cl-texto);
}

/* Avatar (item "perfil" do menu) */

.cl-header .cl-menu-perfil > a:before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 8px;
    vertical-align: middle;
    border-radius: 50%;
    background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230F1E4A'%3E%3Ccircle cx='12' cy='8.5' r='4'/%3E%3Cpath d='M4.5 20c0-4 3.4-6.5 7.5-6.5s7.5 2.5 7.5 6.5z'/%3E%3C/svg%3E") no-repeat center / 20px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .5);
}

/* Nome do usuário no topo do menu do avatar */
.cl-header .cl-menu-perfil-nome {
    padding: 8px 20px 8px;
    margin-bottom: 4px;
    font-family: var(--cl-fonte);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--cl-texto-suave);
    border-bottom: 1px solid var(--cl-borda);
}

/* Desktop e tablet: itens do menu viram irmãos das buscas/avatar na barra */
@media (min-width: 768px) {
    .cl-header .main-nav,
    .cl-header #main-menu-state:not(:checked) ~ #main-menu {
        display: contents;
    }

    .cl-header #main-menu > li {
        order: 4;
    }

    .cl-header #main-menu > li.cl-menu-perfil {
        order: 2;
        float: none !important;
    }

    /* quebra de linha entre a barra de cima e o menu */
    .cl-header-barra:after {
        content: '';
        order: 3;
        flex-basis: 100%;
        height: 0;
    }

    .cl-header-busca {
        margin-left: auto;
    }

    .cl-header .sm-clientar > li > a,
    .cl-header .sm-clientar > li > a:hover,
    .cl-header .sm-clientar > li > a:focus,
    .cl-header .sm-clientar > li > a:active,
    .cl-header .sm-clientar > li > a.highlighted {
        padding: 0 9px;
        font-family: var(--cl-fonte);
        font-size: 13px;
        font-weight: 500;
        line-height: 40px;
        color: #FFFFFF;
        border-radius: 8px;
    }

    .cl-header .sm-clientar > li > a.has-submenu {
        padding-right: 22px;
    }

    .cl-header .sm-clientar > li > a:hover,
    .cl-header .sm-clientar > li > a.highlighted,
    .cl-header .sm-clientar > li > a.current {
        background: rgba(255, 255, 255, .18);
    }

    .cl-header .sm-clientar > li > a span.sub-arrow {
        right: 9px;
        border-color: #FFFFFF transparent transparent transparent;
    }

    .cl-header .cl-menu-perfil > a,
    .cl-header .cl-menu-perfil > a:hover,
    .cl-header .cl-menu-perfil > a.highlighted {
        line-height: 52px;
        background: transparent;
    }

    .cl-header .sm-clientar ul {
        padding: 6px 0;
        border: 0;
        border-radius: 10px;
        box-shadow: 0 10px 30px rgba(15, 30, 74, .18);
    }

    .cl-header .sm-clientar > li > ul:before,
    .cl-header .sm-clientar > li > ul:after {
        display: none;
    }

    .cl-header .sm-clientar ul a,
    .cl-header .sm-clientar ul a:hover,
    .cl-header .sm-clientar ul a:focus,
    .cl-header .sm-clientar ul a:active,
    .cl-header .sm-clientar ul a.highlighted {
        line-height: 34px;
    }

    .cl-header .sm-clientar ul a:hover,
    .cl-header .sm-clientar ul a:focus,
    .cl-header .sm-clientar ul a.highlighted,
    .cl-header .sm-clientar ul a.current {
        background: #FFF4E8;
        color: var(--cl-laranja-escuro);
    }

    /* menu do avatar abre alinhado à direita */
    .cl-header .cl-menu-perfil > ul {
        left: auto !important;
        right: 0;
        margin-left: 0 !important;
    }
}

/* Telas largas: tudo numa linha só (logo | menu | buscas | avatar) */
@media (min-width: 1600px) {
    .cl-header #main-menu > li {
        order: 1;
    }

    .cl-header-busca {
        order: 2;
    }

    .cl-header #main-menu > li.cl-menu-perfil {
        order: 3;
    }

    .cl-header-barra:after {
        display: none;
    }
}

/* Telas médias: avatar sem o nome (nome fica no title) */
@media (min-width: 768px) and (max-width: 1599px) {
    .cl-header .cl-menu-perfil > a {
        font-size: 0 !important;
    }

    .cl-header .cl-menu-perfil > a:before {
        margin-right: 0;
    }
}

/* Celular: logo + botão do menu; buscas embaixo */
@media (max-width: 767px) {
    .cl-header {
        padding: 0 12px;
    }

    .cl-header .main-menu-btn {
        position: absolute;
        top: 14px;
        right: 0;
        margin: 0;
    }

    .cl-header-busca {
        order: 2;
        flex-basis: 100%;
        padding-bottom: 10px;
    }

    .cl-header .short_action div {
        flex: 1 1 0;
        min-width: 0;
    }

    .cl-header .short_action input,
    .cl-header #short_action_cliente_name,
    .cl-header #short_action_ped_numero {
        width: 100%;
        font-size: 16px;
    }

    .cl-header .main-nav {
        order: 3;
        flex-basis: 100%;
    }

    .cl-header #main-menu {
        margin-bottom: 10px;
        overflow: hidden;
        background: #FFFFFF;
        border-radius: 10px;
    }

    .cl-header .sm-clientar a {
        font-family: var(--cl-fonte);
        font-size: 14px;
        font-weight: 500;
        color: var(--cl-texto);
    }

    .cl-header .cl-menu-perfil > a:before {
        width: 26px;
        height: 26px;
        background-color: #FFF4E8;
        box-shadow: none;
    }
}

/* ==========================================================================
   Dashboard (template/principal.tpl.php)
   ========================================================================== */

#dashboard.cl-dash {
    display: grid;
    /* metade para cada lado; a esquerda cresce quando as tabelas precisam (ver #dashboard-left) */
    grid-template-columns: minmax(min-content, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    margin-bottom: 30px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    color: var(--cl-texto);
}

/* Aviso de fim de mês */

.cl-dash-aviso {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 12px 18px;
    font-size: 14px;
    background: #FFF4E8;
    border: 1px solid #FDE3C4;
    border-radius: var(--cl-raio);
}

.cl-dash-aviso-icone svg {
    display: block;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: var(--cl-laranja);
    stroke-width: 1.8;
    stroke-linecap: round;
}

.cl-dash-aviso-meta {
    margin-left: auto;
    color: var(--cl-texto-suave);
}

.cl-dash-aviso-meta b {
    color: var(--cl-texto);
}

/* Indicadores */

.cl-dash #dashboard-cards {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.cl-dash #dashboard-cards > div {
    --kpi-cor: var(--cl-azul);
    --kpi-fundo: #EAF2FE;
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 14px;
    margin: 0;
    padding: 16px 18px 14px 22px;
    overflow: hidden;
    font-size: 13px;
    color: var(--cl-texto);
    text-shadow: none;
    background: var(--cl-card);
    border-radius: var(--cl-raio);
    box-shadow: var(--cl-sombra);
}

.cl-dash #dashboard-cards > div:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 5px;
    background: var(--kpi-cor);
}

.cl-dash #dashboard-cards > #alerta-proposta-abertas    { --kpi-cor: var(--cl-laranja);  --kpi-fundo: #FFF4E8; }
.cl-dash #dashboard-cards > #alerta-ativo-sem-visita    { --kpi-cor: var(--cl-verde);    --kpi-fundo: #E8F6EF; }
.cl-dash #dashboard-cards > #alerta-inativo-sem-visita  { --kpi-cor: var(--cl-vermelho); --kpi-fundo: #FDECEC; }
.cl-dash #dashboard-cards > #alerta-prospect-sem-visita { --kpi-cor: var(--cl-azul);     --kpi-fundo: #EAF2FE; }

.cl-dash .cl-kpi-icone {
    grid-row: 1 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--kpi-fundo);
}

.cl-dash .cl-kpi-icone svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: var(--kpi-cor);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cl-dash #dashboard-cards .card-header {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    text-align: left;
    text-shadow: none;
    color: var(--kpi-cor);
}

.cl-dash #dashboard-cards .card-text {
    padding: 2px 0 0;
    text-align: left;
    text-shadow: none;
    color: var(--cl-texto-suave);
}

.cl-dash #dashboard-cards .card-link {
    grid-column: 1 / -1;
    margin-top: 8px;
    text-align: right;
}

.cl-dash #dashboard-cards .card-link a {
    font-weight: 600;
    text-decoration: none;
    text-shadow: none;
    color: var(--cl-azul);
}

.cl-dash #dashboard-cards .card-link a:hover {
    color: var(--cl-azul-escuro);
}

/* Coluna esquerda: cards */

.cl-dash #dashboard-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    /* teto do quanto a coluna esquerda pode tomar da direita (gráficos) para as tabelas caberem sem rolagem */
    max-width: 62vw;
}

.cl-dash #dashboard-left > .cl-card {
    margin: 0;
    padding: 18px 20px;
    overflow-x: auto;
    background: var(--cl-card);
    border-radius: var(--cl-raio);
    box-shadow: var(--cl-sombra);
}

.cl-dash .cl-card-titulo,
.cl-dash #tabela-meta-regiao-container > b:first-child {
    display: block;
    float: none;
    width: auto;
    margin: 0 0 10px;
    padding: 0;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    color: var(--cl-texto);
}

.cl-dash .cl-card-sua-meta {
    font-size: 14px;
    line-height: 1.7;
}

/* os widgets geram <br> para espaçar; o card já cuida disso */
.cl-dash #tabela-equipe-vendas-container > br,
.cl-dash #tabela-meta-regiao-container > br,
.cl-dash .cl-card-cotacoes > br {
    display: none;
}

/* Botões de abrir/fechar tabela viram título do card */
.cl-dash #button_hide_tabela_meta,
.cl-dash #button_hide_cotacoes_abertas {
    margin: 0 0 12px;
    padding: 0 0 0 30px;
    font-family: var(--cl-fonte);
    font-size: 15px;
    font-weight: 600;
    line-height: 24px;
    color: var(--cl-texto) !important;
    background: transparent no-repeat left center / 22px !important;
    border: 0 !important;
    box-shadow: none;
    cursor: pointer;
}

.cl-dash #button_hide_tabela_meta {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231570EF' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c0-3.6 2.9-6 6.5-6s6.5 2.4 6.5 6'/%3E%3Ccircle cx='17' cy='9' r='2.8'/%3E%3Cpath d='M16 14.2c3 .2 5.5 2.3 5.5 5.8'/%3E%3C/svg%3E") !important;
}

.cl-dash #button_hide_cotacoes_abertas {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231570EF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E") !important;
}

.cl-dash #select-equipe-rep,
.cl-dash .cl-card select {
    height: 30px;
    padding: 0 8px;
    font-family: var(--cl-fonte);
    font-size: 12px;
    color: var(--cl-texto);
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
    background-color: #FFFFFF;
    vertical-align: top;
}

/* Filtro de família (Chosen): barra de uma linha, sem rolagem — a lista abre por cima da página */

.cl-dash #dashboard-left > .cl-card-filtro {
    position: relative;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding: 12px 20px;
    overflow: visible;
}

.cl-dash .cl-card-filtro .cl-card-titulo {
    margin: 0;
    font-size: 14px;
}

.cl-dash .cl-card-filtro .chosen-container {
    flex: 1 1 260px;
}


.cl-dash .cl-card-filtro .chosen-container {
    width: auto !important;
    max-width: 550px;
    font-family: var(--cl-fonte);
    font-size: 13px;
}

.cl-dash .cl-card-filtro .chosen-container-multi .chosen-choices {
    min-height: 38px;
    padding: 3px 6px;
    background: #FFFFFF;
    background-image: none;
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
    box-shadow: none;
}

.cl-dash .cl-card-filtro .chosen-container-active .chosen-choices {
    border-color: var(--cl-laranja);
}

.cl-dash .cl-card-filtro .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
    height: 30px;
    font-family: var(--cl-fonte);
    color: var(--cl-texto-suave);
}

.cl-dash .cl-card-filtro .chosen-container-multi .chosen-choices li.search-choice {
    margin: 4px 5px 3px 0;
    padding: 5px 22px 5px 9px;
    color: var(--cl-azul-escuro);
    background: #EAF2FE;
    background-image: none;
    border: 0;
    border-radius: 6px;
    box-shadow: none;
}

.cl-dash .cl-card-filtro .chosen-container .chosen-drop {
    border: 1px solid var(--cl-borda);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 10px 24px rgba(15, 30, 74, .12);
}

.cl-dash .cl-card-filtro .chosen-container .chosen-results li.highlighted {
    background: var(--cl-azul);
    background-image: none;
}

/* Tabelas */

.cl-dash table.conteudo_rel_grid {
    width: 100%;
    border: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12.5px !important;
}

.cl-dash table.conteudo_rel_grid thead th {
    padding: 9px 26px 9px 10px;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    color: var(--cl-texto-suave);
    border: 0 !important;
    border-bottom: 1px solid var(--cl-borda) !important;
}

.cl-dash table.conteudo_rel_grid thead th:first-child { border-radius: 8px 0 0 0; }
.cl-dash table.conteudo_rel_grid thead th:last-child  { border-radius: 0 8px 0 0; }

.cl-dash .tablesorter .tablesorter-header {
    background: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==) no-repeat right 2px center, #F4F7FC !important;
}

.cl-dash .tablesorter .tablesorter-headerAsc {
    background: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7) no-repeat right 2px center, #EAF2FE !important;
}

.cl-dash .tablesorter .tablesorter-headerDesc {
    background: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7) no-repeat right 2px center, #EAF2FE !important;
}

.cl-dash table.conteudo_rel_grid tbody td {
    padding: 7px 10px;
    border-bottom: 1px solid #F0F3F8;
}

.cl-dash table.conteudo_rel_grid tbody tr:nth-child(2n+2) {
    background-color: #FBFCFE;
}

.cl-dash table.conteudo_rel_grid tbody tr:hover {
    background-color: #FFF8F0;
}

.cl-dash table.conteudo_rel_grid tfoot td {
    padding: 9px 10px;
    font-weight: 600;
    background: #F4F7FC;
    border: 0 !important;
}

/* Equipe de Vendas: conforme a configuração tem de 4 a 10 colunas (região, meta diária, clientes,
   rentabilidade). Células mais justas e nomes que quebram, para caber no card sem rolagem lateral. */
.cl-dash #tabelaVendas thead th {
    padding: 9px 17px 9px 6px;
    white-space: normal;
}

.cl-dash #tabelaVendas thead th:first-child {
    min-width: 90px;
    padding-left: 10px;
}

.cl-dash #tabelaVendas tbody td,
.cl-dash #tabelaVendas tfoot td {
    padding-left: 6px;
    padding-right: 6px;
    white-space: nowrap;
}

.cl-dash #tabelaVendas tbody td:first-child,
.cl-dash #tabelaVendas tfoot td:first-child {
    padding-left: 10px;
}

/* colunas de texto (apelido e região) não trazem style de alinhamento */
.cl-dash #tabelaVendas tbody td:not([style]) {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* em tela larga há folga para o apelido e a 2ª coluna (região, quando existe) não quebrarem no meio da palavra */
@media (min-width: 1340px) {
    .cl-dash #tabelaVendas thead th:first-child {
        min-width: 114px;
    }

    .cl-dash #tabelaVendas thead th:nth-child(2) {
        min-width: 80px;
    }
}

.cl-dash #vendido_no_ano {
    display: inline-block;
    margin-top: 14px;
    font-size: 13px;
    color: var(--cl-texto-suave);
}

.cl-dash #vendido_no_ano b {
    color: var(--cl-azul);
}

/* Botões de ação */

.cl-dash .cl-card-acoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.cl-dash .cl-card-acoes br,
.cl-dash .cl-card-acoes p {
    display: none;
}

.cl-dash .cl-card-acoes .ui-button {
    margin: 0;
    padding: 9px 18px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    font-weight: 600;
    color: #FFFFFF;
    background: var(--cl-azul);
    border: 0;
    border-radius: 8px;
    transition: background-color .15s;
}

.cl-dash .cl-card-acoes .ui-button:hover {
    color: #FFFFFF;
    background: var(--cl-azul-escuro);
}

/* Coluna direita: gráficos em cards */

.cl-dash #dashboard-right {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    min-width: 0;
}

.cl-dash #grafico-evolucao-regiao,
.cl-dash #grafico-evolucao,
.cl-dash #grafico-evolucao-peso,
.cl-dash #grafico-meta-mes,
.cl-dash #grafico-perfil-clientes,
.cl-dash #grafico-pedidos,
.cl-dash #grafico-abc6meses,
.cl-dash #grafico-subfamilias {
    margin: 0;
    overflow: hidden;
    background: var(--cl-card);
    border-radius: var(--cl-raio);
    box-shadow: var(--cl-sombra);
}

.cl-dash #grafico-evolucao-regiao,
.cl-dash #grafico-evolucao,
.cl-dash #grafico-evolucao-peso {
    flex: 1 1 100%;
    height: 290px;
}

.cl-dash #grafico-meta-mes,
.cl-dash #grafico-perfil-clientes,
.cl-dash #grafico-pedidos,
.cl-dash #grafico-abc6meses,
.cl-dash #grafico-subfamilias {
    flex: 1 1 calc(50% - 10px);
    min-width: 260px;
    height: 310px;
}

/* Notebook pequeno / tablet deitado: indicadores 2x2 */
@media (max-width: 1279px) {
    .cl-dash #dashboard-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Tablet em pé e celular: uma coluna */
@media (max-width: 1023px) {
    #dashboard.cl-dash {
        grid-template-columns: minmax(0, 1fr);
    }

    .cl-dash #dashboard-left {
        max-width: none;
    }
}

@media (max-width: 600px) {
    #dashboard.cl-dash {
        gap: 14px;
    }

    .cl-dash #dashboard-cards {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .cl-dash-aviso-meta {
        margin-left: 0;
    }

    .cl-dash #dashboard-left > .cl-card {
        padding: 14px;
    }

    .cl-dash .cl-card-acoes {
        justify-content: stretch;
    }

    .cl-dash .cl-card-acoes .ui-button {
        flex: 1 1 auto;
    }

    .cl-dash #grafico-meta-mes,
    .cl-dash #grafico-perfil-clientes,
    .cl-dash #grafico-pedidos,
    .cl-dash #grafico-abc6meses,
    .cl-dash #grafico-subfamilias {
        flex-basis: 100%;
        min-width: 0;
    }
}

/* ==========================================================================
   Páginas no novo layout (base comum) + Cadastro de Clientes (cliente.list.tpl.php)
   ========================================================================== */

.cl-pagina {
    font-family: var(--cl-fonte);
    font-size: 13px;
    color: var(--cl-texto);
}

.cl-pagina-titulo {
    margin: 4px 0 14px;
    font-size: 20px;
    font-weight: 700;
}

.cl-pagina-titulo a {
    color: var(--cl-azul);
    text-decoration: none;
}

.cl-pagina .cl-card {
    background: var(--cl-card);
    border-radius: var(--cl-raio);
    box-shadow: var(--cl-sombra);
}

/* Barra de filtros */

.cl-pagina .cl-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    margin-bottom: 18px;
    padding: 14px 18px;
}

/* o style.css global flutua e fixa a largura de todo <label> */
.cl-pagina .cl-filtros label {
    float: none;
    width: auto;
    padding: 0;
    text-align: left;
}

.cl-pagina .cl-filtro {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.cl-pagina .cl-filtro select,
.cl-pagina .cl-filtro input[type="text"] {
    box-sizing: border-box;
    height: 38px;
    padding: 0 12px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    color: var(--cl-texto);
    background-color: #FFFFFF;
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
}

.cl-pagina .cl-filtro select:focus,
.cl-pagina .cl-filtro input[type="text"]:focus {
    outline: none;
    border-color: var(--cl-laranja);
}

.cl-pagina .cl-filtro-pesquisa {
    flex: 1 1 280px;
}

.cl-pagina .cl-filtro-pesquisa input[type="text"] {
    flex: 1;
    min-width: 0;
    padding-left: 36px;
    background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6785' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px center / 16px;
}

.cl-pagina .cl-filtro-usuario select {
    width: 16em !important;
}

.cl-btn-acao {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 18px;
    font-family: var(--cl-fonte);
    font-size: 14px;
    font-weight: 600;
    color: #FFFFFF;
    text-decoration: none;
    background: var(--cl-azul);
    border-radius: 8px;
    transition: background-color .15s;
}

.cl-btn-acao:hover {
    background: var(--cl-azul-escuro);
}

.cl-btn-mais {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 16px;
    line-height: 1;
    color: var(--cl-azul);
    background: #FFFFFF;
    border-radius: 50%;
}

/* Tabela */

.cl-tabela-card {
    overflow: hidden;
}

.cl-tabela-rolagem {
    overflow-x: auto;
}

.cl-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.cl-tabela thead th {
    padding: 12px 14px;
    font-size: 12.5px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    color: var(--cl-texto);
    background: #F4F7FC;
    border: 0;
    border-bottom: 1px solid var(--cl-borda);
}

.cl-tabela tbody td {
    padding: 9px 14px;
    vertical-align: middle;
    border-bottom: 1px solid #EEF2F8;
}

.cl-tabela tbody tr:hover {
    background: #FFF8F0;
}

.cl-tabela .cl-col-cliente a {
    font-weight: 600;
    color: var(--cl-texto);
    text-decoration: none;
}

.cl-tabela .cl-col-cliente a:hover {
    color: var(--cl-laranja-escuro);
}

.cl-tabela .cl-nowrap {
    white-space: nowrap;
}

.cl-tabela .cl-col-acoes {
    text-align: center;
    white-space: nowrap;
}

.cl-tabela .cl-tabela-vazia {
    padding: 24px;
    text-align: center;
    color: var(--cl-texto-suave);
}

/* Badges */

.cl-badge {
    display: inline-block;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    border-radius: 999px;
}

.cl-badge-verde { color: #157A4E; background: #E3F5EC; }
.cl-badge-azul  { color: #1255C4; background: #E5EFFE; }
.cl-badge-cinza { color: #5B6785; background: #EEF1F6; }
.cl-badge-vermelho { color: #C42B2E; background: #FDE8E8; }

.cl-badge-agencia {
    margin-left: 6px;
    font-size: 10px;
    vertical-align: middle;
}

/* Ícones de ação */

.cl-icone-acao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    transition: background-color .15s;
}

.cl-icone-acao svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--cl-azul);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cl-icone-acao:hover {
    background: #EAF2FE;
}

.cl-icone-perigo svg {
    stroke: var(--cl-vermelho);
}

.cl-icone-perigo:hover {
    background: #FDE8E8;
}

/* Paginação (paginacaoNova em inc/funcoes.inc.php) */

.cl-paginacao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 18px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    color: var(--cl-texto-suave);
}

.cl-paginacao-paginas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cl-pag-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    box-sizing: border-box;
    font-weight: 500;
    color: var(--cl-texto);
    text-decoration: none;
    background: #FFFFFF;
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
}

a.cl-pag-item:hover {
    border-color: var(--cl-azul);
    color: var(--cl-azul);
}

.cl-pag-atual {
    color: #FFFFFF;
    background: var(--cl-azul);
    border-color: var(--cl-azul);
}

.cl-pag-seta {
    font-size: 18px;
}

.cl-pag-desativado {
    color: #C5CCDA;
    background: #F7F9FC;
}

.cl-pag-reticencias {
    align-self: center;
    padding: 0 2px;
}

@media (max-width: 767px) {
    .cl-pagina-titulo {
        font-size: 20px;
    }

    .cl-pagina .cl-filtros {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .cl-pagina .cl-filtros .cl-filtro {
        flex: none;
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
    }

    .cl-pagina .cl-filtro > span,
    .cl-pagina .cl-filtro > label {
        flex: 0 0 72px;
    }

    .cl-tabela .cl-col-cliente {
        min-width: 180px;
    }

    .cl-pagina .cl-filtro select,
    .cl-pagina .cl-filtro input[type="text"] {
        font-size: 16px;
    }

    .cl-pagina .cl-filtro-usuario select,
    .cl-pagina .cl-filtro-pesquisa input[type="text"] {
        flex: 1;
        width: auto !important;
    }

    .cl-btn-acao {
        justify-content: center;
    }

    .cl-paginacao {
        justify-content: center;
    }
}

/* ==========================================================================
   Formulários no novo layout + Cadastro de Usuários (usuario.tpl.php)
   ========================================================================== */

/* filtro com checkbox (ex.: "Exibir Bloqueados") */
.cl-pagina .cl-filtro-check {
    cursor: pointer;
}

.cl-pagina .cl-filtro-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--cl-azul);
}

/* formulários e listagens usam a largura toda da tela (decisão de 2026-10-02: sem espaço sobrando à direita) */
.cl-pagina .cl-form {
    box-sizing: border-box;
    margin-bottom: 18px;
    padding: 4px 24px 22px;
}

.cl-form-secao {
    margin: 0 0 14px;
    padding: 18px 0 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--cl-texto);
    border-bottom: 1px solid var(--cl-borda);
}

.cl-form-grade + .cl-form-secao {
    margin-top: 10px;
}

.cl-form-grade {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 20px;
}

.cl-campo {
    min-width: 0;
}

.cl-campo-2 {
    grid-column: span 2;
}

/* o style.css global flutua e fixa a largura de todo <label> */
.cl-pagina .cl-campo > label {
    display: block;
    float: none;
    width: auto;
    margin-bottom: 5px;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    color: var(--cl-texto-suave);
}

.cl-pagina .cl-campo-alerta > label {
    color: var(--cl-vermelho);
}

.cl-pagina .cl-campo > label .cl-badge {
    margin-left: 6px;
    padding: 1px 8px;
    font-size: 10px;
}

/* os combos vêm do PHP com largura fixa no style */
.cl-pagina .cl-campo > input[type="text"],
.cl-pagina .cl-campo-data > input[type="text"],
.cl-pagina .cl-campo > select {
    box-sizing: border-box;
    width: 100% !important;
    height: 38px;
    padding: 0 12px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    color: var(--cl-texto);
    background-color: #FFFFFF;
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
}

.cl-pagina .cl-campo > select[multiple] {
    height: auto;
    min-height: 90px;
    padding: 6px;
}

.cl-pagina .cl-campo > input[type="text"]:focus,
.cl-pagina .cl-campo-data > input[type="text"]:focus,
.cl-pagina .cl-campo > select:focus {
    border-color: var(--cl-laranja);
}

.cl-pagina .cl-campo > input[type="text"]:disabled {
    color: var(--cl-texto-suave);
    background-color: #F4F7FC;
}

/* campo de data: input + ícone do datepicker */
.cl-pagina .cl-campo-data {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cl-pagina .cl-campo-data > input[type="text"] {
    flex: 1;
    min-width: 0;
}

.cl-pagina .cl-campo-data .ui-datepicker-trigger {
    cursor: pointer;
}

/* selects com Chosen */
.cl-pagina .cl-campo .chosen-container {
    font-family: var(--cl-fonte);
    font-size: 13px;
}

.cl-pagina .cl-campo .chosen-container-multi .chosen-choices,
.cl-pagina .cl-campo .chosen-container-single .chosen-single {
    box-sizing: border-box;
    min-height: 38px;
    padding: 3px 6px;
    background: #FFFFFF;
    background-image: none;
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
    box-shadow: none;
}

.cl-pagina .cl-campo .chosen-container-active .chosen-choices,
.cl-pagina .cl-campo .chosen-container-active .chosen-single {
    border-color: var(--cl-laranja);
}

.cl-pagina .cl-campo .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
    height: 28px;
    font-family: var(--cl-fonte);
    color: var(--cl-texto-suave);
    border: 0;
}

.cl-pagina .cl-campo .chosen-container-multi .chosen-choices li.search-choice {
    margin: 3px 5px 3px 0;
    padding: 4px 22px 4px 8px;
    color: var(--cl-azul-escuro);
    background: #EAF2FE;
    background-image: none;
    border: 0;
    border-radius: 6px;
    box-shadow: none;
}

.cl-pagina .cl-campo .chosen-container .chosen-drop {
    border: 1px solid var(--cl-borda);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 10px 24px rgba(15, 30, 74, .12);
}

.cl-pagina .cl-campo .chosen-container .chosen-results li.highlighted {
    background: var(--cl-azul);
    background-image: none;
}

/* botões do formulário (o common.js aplica o .button() do jQuery UI no submit) */
/* texto de ajuda embaixo do campo */
.cl-pagina .cl-campo-ajuda {
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--cl-texto-suave);
}

.cl-form-acoes {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--cl-borda);
}

.cl-pagina input.cl-btn-salvar,
.cl-pagina input.cl-btn-salvar:hover,
.cl-pagina input.cl-btn-salvar:focus,
.cl-pagina input.cl-btn-salvar:active {
    min-width: 160px;
    height: 42px;
    padding: 0 26px;
    font-family: var(--cl-fonte);
    font-size: 15px;
    font-weight: 600;
    color: #FFFFFF;
    background: var(--cl-azul);
    border: 1.5px solid var(--cl-azul);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .15s;
}

.cl-pagina input.cl-btn-salvar:hover,
.cl-pagina input.cl-btn-salvar:active {
    background: var(--cl-azul-escuro);
    border-color: var(--cl-azul-escuro);
}

/* tabela dentro de um card de formulário (ex.: Usuários Vinculados) */
.cl-pagina .cl-form-vinculados {
    padding-bottom: 10px;
}

.cl-pagina .cl-form-vinculados .cl-form-secao {
    margin-bottom: 0;
    border-bottom: 0;
}

@media (max-width: 1000px) {
    .cl-form-grade {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .cl-pagina .cl-filtro-check > span {
        flex: 1;
    }

    .cl-pagina .cl-form {
        padding: 0 16px 18px;
    }

    .cl-pagina .cl-campo > input[type="text"],
    .cl-pagina .cl-campo-data > input[type="text"],
    .cl-pagina .cl-campo > select {
        font-size: 16px;
    }

    .cl-pagina input.cl-btn-salvar {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .cl-form-grade {
        grid-template-columns: minmax(0, 1fr);
    }

    .cl-campo-2 {
        grid-column: auto;
    }
}

/* ==========================================================================
   Cadastro de Clientes — formulário (cliente.form.client.tpl.php)
   O HTML dos campos vem de ClienteCamposObrigatorios::montaFormulario() como
   tabela (<td>rótulo</td><td>campo</td>, dois campos por linha) e o JS da tela
   depende dessas <tr>/<td>. Por isso a grade é feita só com CSS: cada <tr>
   vira um grid de 2 colunas com o rótulo em cima do campo.
   ========================================================================== */

.cl-pagina table.cl-form-tabela,
.cl-pagina .cl-form-tabela > tbody {
    display: block;
    width: 100%;
}

.cl-pagina .cl-form-tabela > tbody > tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    column-gap: 20px;
}

.cl-pagina .cl-form-tabela > tbody > tr > td {
    display: block;
    min-width: 0;
    padding: 0;
}

/* rótulo (1ª e 3ª células) */
.cl-pagina .cl-form-tabela > tbody > tr > td:nth-child(odd) {
    margin-bottom: 5px;
    font-size: 12px;
    color: var(--cl-texto-suave);
}

.cl-pagina .cl-form-tabela > tbody > tr > td:nth-child(odd) > b {
    font-weight: 600;
}

/* campo (2ª e 4ª células): o input e o que vem junto dele (DDI, radios, botão, calendário) */
.cl-pagina .cl-form-tabela > tbody > tr > td:nth-child(even) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    min-height: 38px;
    margin-bottom: 14px;
    font-size: 13px;
}

/* células que ocupam a linha toda: título de seção, endereços, campo de comentário */
.cl-pagina .cl-form-tabela > tbody > tr > td[colspan] {
    grid-column: 1 / -1;
}

.cl-pagina .cl-form-tabela > tbody > tr > td[colspan="4"] {
    display: block;
    min-height: 0;
    margin-bottom: 0;
    font-size: 13px;
    color: var(--cl-texto);
}

/* campo de linha inteira com rótulo (comentário): fica abaixo do rótulo */
.cl-pagina .cl-form-tabela > tbody > tr > td[colspan="3"] {
    grid-row: 2;
}

/* segmentos em checkbox usam <br> e float próprios */
.cl-pagina .cl-form-tabela > tbody > tr > td#segmentos-check {
    display: block;
    line-height: 1.9;
}

/* quando o segmento é combo (um por cliente) em vez de checkboxes, ocupa a largura do campo como os demais */
.cl-pagina .cl-form-tabela > tbody > tr > td#segmentos-check > .chosen-container,
.cl-pagina .cl-form-tabela > tbody > tr > td#segmentos-check > select {
    width: 100% !important;
}

.cl-pagina .cl-form-tabela > tbody > tr > td#segmentos-check > div > div {
    margin-right: 28px;
}

.cl-pagina .cl-form-tabela > tbody > tr > td#segmentos-check input[type="checkbox"] {
    margin-right: 4px;
    vertical-align: middle;
}

.cl-pagina .cl-form-tabela h3 {
    margin: 0 0 14px;
    padding: 18px 0 10px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--cl-texto);
    background: none;
    border-bottom: 1px solid var(--cl-borda);
}

.cl-pagina .cl-form-tabela > tbody > tr > td input[type="text"],
.cl-pagina .cl-form-tabela > tbody > tr > td > select,
.cl-pagina .cl-form-tabela > tbody > tr > td > textarea {
    box-sizing: border-box;
    flex: 1 1 160px;
    min-width: 0;
    height: 38px;
    padding: 0 12px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    color: var(--cl-texto);
    background-color: #FFFFFF;
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
}

.cl-pagina .cl-form-tabela > tbody > tr > td > select {
    width: auto !important;
}

.cl-pagina .cl-form-tabela > tbody > tr > td > textarea {
    flex-basis: 100%;
    height: auto;
    min-height: 90px;
    padding: 10px 12px;
}

.cl-pagina .cl-form-tabela > tbody > tr > td input[type="text"]:focus,
.cl-pagina .cl-form-tabela > tbody > tr > td > select:focus,
.cl-pagina .cl-form-tabela > tbody > tr > td > textarea:focus {
    border-color: var(--cl-laranja);
}

.cl-pagina .cl-form-tabela > tbody > tr > td input[type="text"][readonly],
.cl-pagina .cl-form-tabela > tbody > tr > td input[type="text"]:disabled,
.cl-pagina .cl-form-tabela > tbody > tr > td > select:disabled {
    color: var(--cl-texto-suave);
    background-color: #F4F7FC;
}

/* DDI do telefone e CEP não esticam */
.cl-pagina .cl-form-tabela > tbody > tr > td > select[id^="ddi-"] {
    flex: 0 0 92px;
    padding: 0 6px;
}

.cl-pagina .cl-form-tabela > tbody > tr > td input.cep {
    flex: 0 1 150px;
}

.cl-pagina .cl-form-tabela > tbody > tr > td input[type="radio"],
.cl-pagina .cl-form-tabela > tbody > tr > td input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--cl-azul);
}

.cl-pagina .cl-form-tabela > tbody > tr > td > b {
    font-weight: 600;
}

.cl-pagina .cl-form-tabela .ui-datepicker-trigger {
    cursor: pointer;
}

/* selects com Chosen (a largura vem fixa do JS) */
.cl-pagina .cl-form-tabela > tbody > tr > td > .chosen-container {
    flex: 1 1 160px;
    width: auto !important;
    min-width: 0;
    font-family: var(--cl-fonte);
    font-size: 13px;
}

.cl-pagina .cl-form-tabela .chosen-container-single .chosen-single {
    box-sizing: border-box;
    height: 38px;
    padding: 0 12px;
    line-height: 36px;
    color: var(--cl-texto);
    background: #FFFFFF;
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
    box-shadow: none;
}

.cl-pagina .cl-form-tabela .chosen-container-single .chosen-single div b,
.cl-pagina .cl-form-tabela .chosen-container-single .chosen-single abbr {
    margin-top: 6px;
}

.cl-pagina .cl-form-tabela .chosen-container-active .chosen-single {
    border-color: var(--cl-laranja);
}

.cl-pagina .cl-form-tabela .chosen-container .chosen-search input[type="text"] {
    flex: none;
    height: 30px;
    border-radius: 6px;
}

.cl-pagina .cl-form-tabela .chosen-container .chosen-drop {
    border: 1px solid var(--cl-borda);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 10px 24px rgba(15, 30, 74, .12);
}

.cl-pagina .cl-form-tabela .chosen-container .chosen-results li.highlighted {
    background: var(--cl-azul);
    background-image: none;
}

/* botões dentro do formulário (Buscar CEP, Adicionar Endereço): azuis cheios; o jQuery UI aplica .button() */
.cl-pagina .cl-form-tabela input.button,
.cl-pagina .cl-form-tabela input.button:hover,
.cl-pagina .cl-form-tabela input.button:focus,
.cl-pagina .cl-form-tabela input.button:active {
    height: 38px;
    margin: 0 !important;
    padding: 0 16px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    font-weight: 600;
    color: #FFFFFF;
    background: var(--cl-azul);
    border: 1.5px solid var(--cl-azul);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .15s;
}

.cl-pagina .cl-form-tabela input.button:hover {
    background: var(--cl-azul-escuro);
    border-color: var(--cl-azul-escuro);
}

/* lista de endereços (edição) */
.cl-pagina .cl-form-tabela #tabelaEndereco {
    margin-bottom: 6px;
    border-collapse: collapse;
}

.cl-pagina .cl-form-tabela #tabelaEndereco td {
    padding: 9px 12px;
    font-size: 12.5px;
    text-align: left;
    border-bottom: 1px solid #EEF2F8;
}

.cl-pagina .cl-form-tabela #tabelaEndereco tr:first-child td {
    font-weight: 600;
    white-space: nowrap;
    background: #F4F7FC;
    border-bottom: 1px solid var(--cl-borda);
}

.cl-pagina .cl-form-tabela #tabelaEndereco td:first-child,
.cl-pagina .cl-form-tabela #tabelaEndereco td:last-child {
    text-align: center;
    white-space: nowrap;
}

/* as linhas de <hr> entre os endereços dão lugar à borda da linha */
.cl-pagina .cl-form-tabela #tabelaEndereco td[colspan] {
    padding: 0;
    border: 0;
}

.cl-pagina .cl-form-tabela #tabelaEndereco hr {
    display: none;
}

/* ativar / desativar cliente */
.cl-pagina #link_desativar_cliente {
    font-weight: 500;
    color: var(--cl-azul);
}

.cl-pagina #div_desativar_cliente {
    margin-top: 4px;
    line-height: 2;
}

.cl-pagina #div_desativar_cliente input[type="radio"] {
    margin: 0 6px 0 0;
    vertical-align: middle;
    accent-color: var(--cl-azul);
}

.cl-pagina #div_desativar_cliente b {
    margin-right: 16px;
    font-weight: 600;
}

/* inteligência de vendas: mantém a tabela própria, só ganha o card */
.cl-pagina table.cl-form-iv {
    display: block;
    padding-top: 16px;
}

/* busca antes do "Novo Cliente" (cliente.find.tpl.php) */
.cl-pagina .cl-filtros input.cl-btn-salvar,
.cl-pagina .cl-filtros input.cl-btn-salvar:hover,
.cl-pagina .cl-filtros input.cl-btn-salvar:focus,
.cl-pagina .cl-filtros input.cl-btn-salvar:active {
    min-width: 0;
    height: 38px;
    padding: 0 20px;
    font-size: 14px;
}

.cl-aviso-acao {
    margin-top: 18px;
}

.cl-aviso-acao p {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--cl-texto);
}

/* ==========================================================================
   Topo do cliente (cliente.topo.php): botões das telas do cliente + resumo.
   Também aparece em contatos, histórico, arquivos e follow up, que ainda não
   usam .cl-pagina; por isso não depende dela.
   ========================================================================== */

/* Uma linha só: quando falta espaço, o texto quebra dentro de cada bloco em vez de o bloco descer */
.cl-cli-topo {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 12px 28px;
    box-sizing: border-box;
    width: 90%;
    margin: 0 auto 14px;
    padding: 14px 18px;
    font-family: var(--cl-fonte);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--cl-texto);
    background: var(--cl-card);
    border-radius: var(--cl-raio);
    box-shadow: var(--cl-sombra);
}

.cl-pagina .cl-cli-topo {
    width: auto;
    margin: 0 0 18px;
}

.cl-cli-topo-botoes {
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
}

.cl-cli-topo a.button,
.cl-cli-topo a.button:hover,
.cl-cli-topo a.button:focus,
.cl-cli-topo a.button:active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    background: var(--cl-azul);
    border: 0;
    border-radius: 8px;
    transition: background-color .15s;
}

.cl-cli-topo a.button:hover {
    background: var(--cl-azul-escuro);
}

.cl-cli-topo-cliente {
    flex: 1 1 260px;
    min-width: 150px;
}

.cl-cli-topo-info {
    flex: 0 1 auto;
    min-width: 64px;
}

.cl-cli-topo b {
    font-weight: 600;
}

.cl-cli-topo-cliente > b:first-child,
.cl-cli-topo-info > b {
    font-size: 11.5px;
    color: var(--cl-texto-suave);
}

.cl-cli-topo #nome_cliente {
    font-size: 14px;
    color: var(--cl-texto);
}

.cl-cli-topo #nome_cliente:hover {
    color: var(--cl-laranja-escuro);
}

.cl-cli-topo-info:empty {
    display: none;
}

@media (max-width: 767px) {
    .cl-pagina .cl-form-tabela > tbody > tr {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-auto-flow: row;
    }

    .cl-pagina .cl-form-tabela > tbody > tr > td input[type="text"],
    .cl-pagina .cl-form-tabela > tbody > tr > td > select,
    .cl-pagina .cl-form-tabela > tbody > tr > td > textarea {
        font-size: 16px;
    }

    /* documento em linha própria, para os radios CNPJ/CPF/OUTRO não se separarem */
    .cl-pagina .cl-form-tabela > tbody > tr > td input#cli_documento {
        flex-basis: 100%;
    }

    .cl-pagina .cl-form-tabela #tabelaEndereco {
        display: block;
        overflow-x: auto;
    }

    .cl-cli-topo {
        flex-wrap: wrap;
        width: auto;
        margin-left: 8px;
        margin-right: 8px;
        gap: 10px 20px;
    }

    .cl-cli-topo-botoes {
        flex-wrap: wrap;
    }

    .cl-pagina .cl-cli-topo {
        margin-left: 0;
        margin-right: 0;
    }

    .cl-cli-topo-cliente {
        flex-basis: 100%;
    }
}

/* ==========================================================================
   Telas da ficha do cliente (contatos...)
   ========================================================================== */

.cl-pagina-acoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 18px;
}

/* botão secundário (contorno), com ícone opcional */
.cl-btn-acao.cl-btn-contorno {
    color: var(--cl-azul);
    background: #FFFFFF;
    border: 1.5px solid var(--cl-azul);
}

.cl-btn-acao.cl-btn-contorno:hover {
    background: #EAF2FE;
}

.cl-btn-acao svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* contatos: telefones (click to call + WhatsApp) e e-mails, um por linha */
.cl-tabela .cl-col-telefones,
.cl-tabela .cl-col-emails {
    line-height: 1.9;
}

.cl-tabela .cl-col-telefones {
    white-space: nowrap;
}

.cl-tabela .cl-col-telefones a {
    color: var(--cl-texto);
}

.cl-tabela .cl-col-telefones img {
    vertical-align: middle;
}

.cl-tabela .cl-col-emails {
    min-width: 170px;
    overflow-wrap: anywhere;
}

/* formulário: campo de linha inteira, área de texto e campo composto (DDI + número + ramal) */
.cl-campo-4 {
    grid-column: 1 / -1;
}

.cl-pagina .cl-campo-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.cl-pagina .cl-campo-linha input[type="text"],
.cl-pagina .cl-campo-linha > select,
.cl-pagina .cl-campo > textarea {
    box-sizing: border-box;
    min-width: 0;
    height: 38px;
    padding: 0 12px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    color: var(--cl-texto);
    background-color: #FFFFFF;
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
}

.cl-pagina .cl-campo-linha > input[type="text"] {
    flex: 1 1 140px;
}

.cl-pagina .cl-campo-linha > select {
    flex: 0 0 92px;
    padding: 0 6px;
}

/* rótulo + campo curto (ramal) andam juntos quando a linha quebra */
.cl-pagina .cl-campo-ramal {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.cl-pagina .cl-campo-linha input.cl-campo-curto {
    width: 84px;
}

.cl-pagina .cl-campo > textarea {
    display: block;
    width: 100%;
    height: auto;
    min-height: 84px;
    padding: 10px 12px;
    resize: vertical;
}

.cl-pagina .cl-campo-linha input[type="text"]:focus,
.cl-pagina .cl-campo-linha > select:focus,
.cl-pagina .cl-campo > textarea:focus {
    border-color: var(--cl-laranja);
}

.cl-pagina .cl-campo-rotulo {
    font-size: 12px;
    font-weight: 600;
    color: var(--cl-texto-suave);
}

.cl-form-aviso {
    margin: 16px 0 0;
    font-size: 13px;
    color: var(--cl-vermelho);
}

@media (max-width: 767px) {
    .cl-pagina.cl-leads .cl-filtro select[name="campanha"],
    .cl-pagina.cl-leads .cl-filtro select[name="representante"] {
        flex: 1;
        min-width: 0;
        width: auto !important;
    }

    .cl-pagina .cl-campo-linha input[type="text"],
    .cl-pagina .cl-campo-linha > select,
    .cl-pagina .cl-campo > textarea {
        font-size: 16px;
    }
}

/* ==========================================================================
   Histórico de Relacionamento — listagem (historico.rel.tpl.php, acao=0)
   ========================================================================== */

/* "Novo HR" é um <select> que funciona como botão: escolher o tipo já abre o lançamento.
   O style.css tem regra por id (#bt-novo-hr) com ícone e largura fixos, daí o id aqui também. */
.cl-pagina select.cl-select-acao,
.cl-pagina select#bt-novo-hr.cl-select-acao {
    box-sizing: border-box;
    width: auto;
    height: 38px;
    padding: 0 34px 0 16px;
    font-family: var(--cl-fonte);
    font-size: 14px;
    font-weight: 600;
    color: #FFFFFF;
    background: var(--cl-azul) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 16px;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color .15s;
}

/* Largura fixa: sem isso a combo fica do tamanho da opção mais comprida e muda de tenant para tenant. */
.cl-pagina select#bt-novo-hr.cl-select-acao {
    width: 150px;
}

.cl-pagina select.cl-select-acao:hover,
.cl-pagina select#bt-novo-hr.cl-select-acao:hover {
    background-color: var(--cl-azul-escuro);
}

.cl-pagina select.cl-select-acao:disabled {
    background-color: #9DB7E0;
    cursor: not-allowed;
}

.cl-pagina select.cl-select-acao option {
    font-weight: 400;
    color: var(--cl-texto);
    background: #FFFFFF;
}

.cl-pagina select.cl-select-acao option:disabled {
    color: #A0A8B8;
}

/* ícones de ação gerados a partir das imagens de HistoricoRel::listButtons() */
.cl-tabela .cl-col-acoes span.cl-icone-acao {
    vertical-align: middle;
    cursor: pointer;
}

.cl-icone-verde svg {
    stroke: var(--cl-verde);
}

.cl-icone-verde:hover {
    background: #E3F5EC;
}

@media (max-width: 767px) {
    .cl-pagina select.cl-select-acao,
    .cl-pagina select#bt-novo-hr.cl-select-acao {
        width: 100%;
        font-size: 16px;
    }
}

/* ==========================================================================
   Follow Up independente (follow.up.php?acao=pagina + follow.up.tpl.php)
   As listas vêm prontas de HistoricoRel::getFollowup(): <li> com número,
   checkbox, texto corrido e a lixeira.
   ========================================================================== */

.cl-pagina input.cl-btn-salvar:disabled {
    opacity: .6;
    cursor: default;
}

.cl-followup .cl-followup-lista {
    padding-bottom: 14px;
}

.cl-followup .cl-followup-lista .cl-form-secao {
    margin-bottom: 4px;
}

.cl-followup .followup {
    float: none !important;
}

.cl-followup .followup ul {
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: var(--cl-texto-suave);
}

.cl-followup .followup li {
    padding: 8px 10px;
    line-height: 1.7;
    color: var(--cl-texto);
    border-bottom: 1px solid #EEF2F8;
}

.cl-followup .followup li:last-child {
    border-bottom: 0;
}

.cl-followup .followup li:hover {
    background: #FFF8F0;
}

.cl-followup .followup li > b:first-child {
    display: inline-block;
    min-width: 22px;
    color: var(--cl-texto-suave);
}

.cl-followup .followup li b {
    font-weight: 600;
}

.cl-followup .followup li a {
    color: var(--cl-texto);
}

.cl-followup .followup li input.followup_check {
    width: 16px;
    height: 16px;
    margin: 0 2px 0 4px;
    vertical-align: middle;
    accent-color: var(--cl-azul);
    cursor: pointer;
}

.cl-followup .followup li .cl-icone-acao {
    width: 26px;
    height: 26px;
    vertical-align: middle;
}

/* follow up marcado como feito */
.cl-followup .followup li.checked {
    color: var(--cl-texto-suave);
    text-decoration: line-through;
    background: #FFF8F0;
}

/* ==========================================================================
   Peças comuns usadas a partir do cadastro de produtos
   ========================================================================== */

/* coluna numérica da tabela (preço, IPI...) */
.cl-tabela th.cl-col-num,
.cl-tabela td.cl-col-num {
    text-align: right;
    white-space: nowrap;
}

/* opções em radio/checkbox dentro de um campo do formulário (ex.: Ativo: Sim / Não) */
.cl-pagina .cl-campo-opcoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 20px;
    min-height: 38px;
}

.cl-pagina .cl-campo-opcoes label {
    display: inline-flex;
    float: none;
    align-items: center;
    gap: 6px;
    width: auto;
    padding: 0;
    font-size: 13px;
    text-align: left;
    color: var(--cl-texto);
    cursor: pointer;
}

.cl-pagina .cl-campo-opcoes input[type="radio"],
.cl-pagina .cl-campo-opcoes input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--cl-azul);
}

/* campo com conteúdo próprio (upload, imagem): só o rótulo segue o padrão */
.cl-pagina .cl-campo-livre {
    font-size: 13px;
    color: var(--cl-texto);
}

.cl-pagina .cl-campo-livre img {
    max-width: 100%;
    border-radius: 8px;
}

/* ==========================================================================
   Tabela de preços (tabela.valor.tpl.php) e peças comuns usadas nela
   ========================================================================== */

/* complemento do título da página (ex.: "Tabela de Preços - PADRÃO") */
.cl-pagina-titulo .cl-pagina-subtitulo {
    font-weight: 500;
    color: var(--cl-texto-suave);
}

/* tabela com linhas mais baixas, para listas longas */
.cl-tabela.cl-tabela-compacta tbody td {
    padding: 5px 14px;
}

/* campo de valor editável dentro da tabela */
.cl-tabela input.valor {
    box-sizing: border-box;
    width: 120px;
    height: 30px;
    padding: 0 8px;
    font-family: var(--cl-fonte);
    font-size: 12.5px;
    color: var(--cl-texto);
    background: #FFFFFF;
    border: 1px solid var(--cl-borda);
    border-radius: 6px;
}

.cl-tabela input.valor:focus {
    border-color: var(--cl-laranja);
}

.cl-tabela input.cl-check {
    width: 16px;
    height: 16px;
    margin: 0;
    vertical-align: middle;
    accent-color: var(--cl-azul);
    cursor: pointer;
}

/* filtro em bloco acima da tabela (família / subfamília vêm de Relatorio::filtroFamiliaSubfamilia) */
/* o HTML vem como "<b>rótulo</b><br>combo<br>..."; aqui fica tudo numa linha só: rótulo, combo, rótulo, combo, botão */
.cl-pagina .cl-filtro-bloco {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin-bottom: 18px;
    padding: 14px 18px;
    font-size: 13px;
}

.cl-pagina .cl-filtro-bloco br {
    display: none;
}

.cl-pagina .cl-filtro-bloco b {
    font-weight: 600;
    white-space: nowrap;
}

.cl-pagina .cl-filtro-bloco .chosen-container + b {
    margin-left: 10px;
}

.cl-pagina .cl-filtro-bloco .chosen-container {
    font-family: var(--cl-fonte);
    font-size: 13px;
}

.cl-pagina .cl-filtro-bloco .chosen-container-multi .chosen-choices {
    box-sizing: border-box;
    min-height: 38px;
    padding: 3px 6px;
    background: #FFFFFF;
    background-image: none;
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
    box-shadow: none;
}

.cl-pagina .cl-filtro-bloco .chosen-container-active .chosen-choices {
    border-color: var(--cl-laranja);
}

.cl-pagina .cl-filtro-bloco .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
    height: 28px;
    font-family: var(--cl-fonte);
    color: var(--cl-texto-suave);
}

.cl-pagina .cl-filtro-bloco .chosen-container-multi .chosen-choices li.search-choice {
    margin: 3px 5px 3px 0;
    padding: 4px 22px 4px 8px;
    color: var(--cl-azul-escuro);
    background: #EAF2FE;
    background-image: none;
    border: 0;
    border-radius: 6px;
    box-shadow: none;
}

.cl-pagina .cl-filtro-bloco .chosen-container .chosen-drop {
    border: 1px solid var(--cl-borda);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 10px 24px rgba(15, 30, 74, .12);
}

.cl-pagina .cl-filtro-bloco .chosen-container .chosen-results li.highlighted {
    background: var(--cl-azul);
    background-image: none;
}

.cl-pagina .cl-filtro-bloco input.cl-btn-salvar,
.cl-pagina .cl-filtro-bloco input.cl-btn-salvar:hover,
.cl-pagina .cl-filtro-bloco input.cl-btn-salvar:focus,
.cl-pagina .cl-filtro-bloco input.cl-btn-salvar:active {
    min-width: 0;
    height: 38px;
    margin-left: 6px;
    padding: 0 20px;
    font-size: 14px;
}

/* ==========================================================================
   Qualificar leads (template/import/qualificar.leads*.tpl.php) e peças comuns usadas nele
   ========================================================================== */

/* botão de ação destrutiva e botão de ação pequeno (dentro de tabela) */
.cl-btn-acao.cl-btn-perigo {
    background: var(--cl-vermelho);
}

.cl-btn-acao.cl-btn-perigo:hover {
    background: #C42B2E;
}

.cl-btn-acao.cl-btn-pequeno {
    height: 30px;
    padding: 0 14px;
    font-size: 12.5px;
    border-radius: 6px;
}

.cl-tabela .cl-col-lead b {
    font-weight: 600;
}

/* seis itens no filtro (Exibir, Pesquisar, Campanha, Representante, bloqueados, Excluir todos):
   combos e espaços menores para caber tudo numa linha em tela de notebook */
@media (min-width: 768px) {
    .cl-pagina.cl-leads .cl-filtros {
        gap: 10px 14px;
    }

    .cl-pagina.cl-leads .cl-filtro {
        gap: 6px;
    }

    .cl-pagina.cl-leads .cl-filtro select {
        padding: 0 8px;
    }

    .cl-pagina.cl-leads .cl-filtro select#campanha,
    .cl-pagina.cl-leads .cl-filtro select#representante,
    .cl-pagina.cl-leads .cl-filtro select[name="campanha"],
    .cl-pagina.cl-leads .cl-filtro select[name="representante"] {
        width: 10.5em !important;
    }

    .cl-pagina.cl-leads .cl-filtro-pesquisa {
        flex: 1 1 150px;
        min-width: 150px;
    }

    .cl-pagina.cl-leads .cl-filtros .cl-btn-acao {
        padding: 0 14px;
        white-space: nowrap;
    }

    .cl-pagina.cl-leads .cl-filtro-check {
        white-space: nowrap;
    }
}

/* tabela de "rótulo: valor" (dados do lead) */
.cl-tabela.cl-tabela-dados td:first-child {
    width: 220px;
    white-space: nowrap;
    color: var(--cl-texto-suave);
}

.cl-tabela.cl-tabela-dados b {
    font-weight: 600;
}

/* aviso informativo */
.cl-pagina .cl-aviso {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--cl-texto);
    background: #EAF2FE;
    border: 1px solid #CFE0FB;
    border-radius: 10px;
}

.cl-pagina .cl-aviso b {
    font-weight: 600;
}

/* cliente possivelmente repetido: linha de resumo + detalhes que abrem e fecham */
.cl-pagina .cl-repetido {
    margin-bottom: 14px;
    padding: 6px 18px 10px;
    overflow-x: auto;
}

.cl-pagina .cl-repetido table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.cl-pagina .cl-repetido td {
    padding: 6px 8px 6px 0;
    vertical-align: middle;
}

.cl-pagina .cl-repetido b {
    font-weight: 600;
}

.cl-pagina .cl-repetido .cl-repetido-topo td {
    padding: 10px 8px 10px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--cl-borda);
}

.cl-pagina .cl-repetido .cl-repetido-topo img {
    vertical-align: middle;
}

.cl-pagina .cl-repetido .cl-repetido-acao {
    text-align: right;
    white-space: nowrap;
}

.cl-pagina .cl-repetido .cl-repetido-contatos td {
    padding-top: 14px;
    color: var(--cl-texto-suave);
}

/* ==========================================================================
   Importações (leads, produtos) e campanhas — template/import/*.tpl.php
   ========================================================================== */

.cl-pagina .cl-campo input[type="file"] {
    display: block;
    max-width: 100%;
    padding: 0 0 6px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    color: var(--cl-texto);
    border: 0;
}

/* botão "Escolher arquivo" do próprio navegador, no padrão dos botões azuis */
.cl-pagina .cl-campo input[type="file"]::file-selector-button {
    height: 38px;
    margin-right: 12px;
    padding: 0 16px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    font-weight: 600;
    color: #FFFFFF;
    background: var(--cl-azul);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .15s;
}

.cl-pagina .cl-campo input[type="file"]::file-selector-button:hover {
    background: var(--cl-azul-escuro);
}

.cl-pagina .cl-form-nota {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--cl-texto-suave);
}

/* botão em <input> ao lado de um campo, na altura dele (ex.: "Criar nova campanha") */
.cl-pagina input.cl-btn-campo,
.cl-pagina input.cl-btn-campo:hover,
.cl-pagina input.cl-btn-campo:focus,
.cl-pagina input.cl-btn-campo:active {
    flex: 0 0 auto;
    height: 38px;
    padding: 0 16px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    font-weight: 600;
    color: #FFFFFF;
    background: var(--cl-azul);
    border: 1.5px solid var(--cl-azul);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .15s;
}

.cl-pagina input.cl-btn-campo:hover {
    background: var(--cl-azul-escuro);
    border-color: var(--cl-azul-escuro);
}

/* link-botão com a mesma altura do Salvar (ex.: Cancelar ao lado do Salvar) */
.cl-btn-acao.cl-btn-grande {
    justify-content: center;
    min-width: 160px;
    height: 42px;
    padding: 0 26px;
    font-size: 15px;
    box-sizing: border-box;
}

/* combo com Chosen dentro de um campo composto (combo + botão) */
.cl-pagina .cl-campo-linha > .chosen-container {
    flex: 1 1 200px;
    width: auto !important;
    min-width: 0;
}

.cl-pagina .cl-campo .chosen-container-single .chosen-single {
    height: 38px;
    padding: 0 12px;
    line-height: 36px;
    color: var(--cl-texto);
}

.cl-pagina .cl-campo .chosen-container-single .chosen-single div b,
.cl-pagina .cl-campo .chosen-container-single .chosen-single abbr {
    margin-top: 6px;
}

/* linha de resumo acima de uma tabela (fonte, campanha, arquivo) */
.cl-pagina .cl-resumo-linha {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 32px;
    margin-bottom: 18px;
    padding: 14px 18px;
    font-size: 13px;
}

.cl-pagina .cl-resumo-linha b {
    font-weight: 600;
    color: var(--cl-texto-suave);
}

/* tabela de mapeamento coluna do arquivo -> campo do sistema */
.cl-tabela select {
    box-sizing: border-box;
    min-width: 240px;
    height: 32px;
    padding: 0 8px;
    font-family: var(--cl-fonte);
    font-size: 12.5px;
    color: var(--cl-texto);
    background: #FFFFFF;
    border: 1px solid var(--cl-borda);
    border-radius: 6px;
}

.cl-tabela select:focus {
    border-color: var(--cl-laranja);
}

.cl-tabela.cl-tabela-mapa td:first-child {
    width: 45%;
}

.cl-tabela.cl-tabela-mapa b {
    font-weight: 600;
}

/* botões dentro de um card de tabela */
.cl-form-acoes.cl-form-acoes-card {
    margin-top: 0;
    padding: 16px 18px;
}

/* texto de ajuda com exemplo */
.cl-pagina .cl-ajuda {
    padding-top: 16px;
    font-size: 13px;
    line-height: 1.6;
}

.cl-pagina .cl-ajuda p {
    margin: 0 0 10px;
}

.cl-pagina .cl-ajuda b {
    font-weight: 600;
}

.cl-pagina .cl-ajuda img {
    display: block;
    max-width: 100%;
    margin-bottom: 12px;
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
}

.cl-pagina a.cl-link {
    font-weight: 600;
    color: var(--cl-azul);
}

.cl-pagina a.cl-link:hover {
    text-decoration: underline;
}

.cl-pagina .cl-aviso.cl-aviso-alerta {
    margin-top: 16px;
    background: #FFF4D6;
    border-color: #FFE49B;
}

/* ==========================================================================
   Configurações -> Clientes -> Campos do cadastro (cliente.campos.obrigatorios.tpl.php)
   A tabela vem pronta de ClienteCamposObrigatorios::paginaCamposObrigatorios(),
   que também atende o admin: aqui só CSS, a partir de .cl-campos-config.
   ========================================================================== */

.cl-campos-config fieldset {
    min-width: 0;
    margin: 0 0 18px;
    padding: 4px 16px 16px;
    background: var(--cl-card);
    border: 0;
    border-radius: var(--cl-raio);
    box-shadow: var(--cl-sombra);
}

.cl-campos-config fieldset h3 {
    margin: 0 0 6px;
    padding: 18px 0 10px;
    font-family: var(--cl-fonte);
    font-size: 15px;
    font-weight: 600;
    color: var(--cl-texto);
    background: none;
    border-bottom: 1px solid var(--cl-borda);
}

.cl-campos-config fieldset table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--cl-fonte);
    font-size: 13px;
    color: var(--cl-texto);
}

.cl-campos-config fieldset thead th {
    padding: 10px 8px;
    font-size: 12.5px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    color: var(--cl-texto);
    background: #F4F7FC;
    border: 0;
    border-bottom: 1px solid var(--cl-borda);
}

/* "Visualizar" e "Obrigatório" centralizados: 3 colunas para o gestor; 7 para o administrador
   (Posição, Campo, Visualizar, Obrigatório, Valor Padrão, Complemento, Campos Adicionais) */
.cl-campos-config fieldset thead th:first-child:nth-last-child(3) ~ th,
.cl-campos-config fieldset thead th:first-child:nth-last-child(7),
.cl-campos-config fieldset thead th:first-child:nth-last-child(7) ~ th:nth-child(3),
.cl-campos-config fieldset thead th:first-child:nth-last-child(7) ~ th:nth-child(4) {
    text-align: center;
}

.cl-campos-config fieldset tbody tr.tr-campo {
    background: transparent;
}

.cl-campos-config fieldset tbody tr.tr-campo:hover {
    background: #FFF8F0;
}

.cl-campos-config fieldset tbody td {
    padding: 4px 8px;
    vertical-align: middle;
    color: var(--cl-texto-suave);
    border-bottom: 1px solid #EEF2F8;
}

.cl-campos-config fieldset tbody td b {
    font-weight: 600;
    color: var(--cl-texto);
}

.cl-campos-config fieldset tbody td > select,
.cl-campos-config fieldset tbody td > input[type="text"] {
    box-sizing: border-box;
    height: 30px;
    padding: 0 8px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    color: var(--cl-texto);
    background: #FFFFFF;
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
}

/* colunas do administrador: valor padrão, complemento e campos adicionais */
.cl-campos-config fieldset tbody td > textarea {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-width: 110px;
    height: 34px;
    min-height: 30px;
    padding: 4px 8px;
    font-family: var(--cl-fonte);
    font-size: 12px;
    line-height: 1.35;
    color: var(--cl-texto);
    background: #FFFFFF;
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
}

.cl-campos-config fieldset tbody td > textarea:focus {
    outline: none;
    border-color: var(--cl-laranja);
}

.cl-campos-config fieldset tbody td > input[type="text"],
.cl-campos-config fieldset tbody td > select[style*="width"] {
    width: 100% !important;
    min-width: 110px;
}

/* visão do administrador (7 colunas): "Valor Padrão" estreita, para a tabela caber sem rolagem;
   o que sobra vai para Complemento e Campos Adicionais */
.cl-campos-config fieldset thead th:first-child:nth-last-child(7) ~ th:nth-child(5) {
    width: 150px;
}

.cl-campos-config fieldset thead th:first-child:nth-last-child(7),
.cl-campos-config fieldset thead th:first-child:nth-last-child(7) ~ th:nth-child(3),
.cl-campos-config fieldset thead th:first-child:nth-last-child(7) ~ th:nth-child(4) {
    width: 1%;
}

.cl-campos-config fieldset thead th:first-child:nth-last-child(7) ~ th:nth-child(3) {
    min-width: 128px;
}

.cl-campos-config fieldset tbody td:nth-child(5) > select {
    width: 100% !important;
    min-width: 110px;
}

/* a combo com busca (Chosen) nasce com 330px fixos: passa a acompanhar a coluna */
.cl-campos-config fieldset .chosen-container {
    width: 100% !important;
    min-width: 110px;
    max-width: 100%;
    font-family: var(--cl-fonte);
    font-size: 13px;
}

.cl-campos-config fieldset .chosen-container-single .chosen-single {
    height: 30px;
    line-height: 28px;
    color: var(--cl-texto);
    background: #FFFFFF;
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
    box-shadow: none;
}

.cl-campos-config fieldset .chosen-container-single .chosen-single div b {
    background-position: 0 5px;
}

.cl-campos-config fieldset tbody td > select:disabled {
    color: #A3ADC2;
    background: #F4F7FC;
}

.cl-campos-config fieldset tbody td > select:focus,
.cl-campos-config fieldset tbody td > input[type="text"]:focus {
    outline: none;
    border-color: var(--cl-laranja);
}

/* a tabela cabe a partir de 1280px; abaixo disso rola só para o lado (a rolagem para baixo é a do navegador) */
@media (max-width: 1279px) {
    .cl-campos-config fieldset {
        overflow-x: auto;
        overflow-y: hidden;
    }
}

@media (max-width: 767px) {
    .cl-campos-config fieldset {
        padding: 2px 12px 12px;
    }

    .cl-campos-config fieldset thead th,
    .cl-campos-config fieldset tbody td {
        padding: 6px 8px;
    }
}

/* ==========================================================================
   Lançamento / alteração de HR (historico.rel.php acao 1 e 5, .cl-hr-form)
   Parte comum a todos os tipos de HR: seções (.form-separador), fieldsets em card,
   campos, botões jQuery UI, Follow up e Inteligência em vendas. O formulário valida
   campos pela posição (valida_form): a marcação só ganhou contêineres, sem mudar a ordem.
   ========================================================================== */

.cl-hr-form .cl-hr-conteudo {
    font-size: 13px;
    color: var(--cl-texto);
}

/* títulos de seção (Histórico de Relacionamento, Follow up, Inteligência em vendas...) */
.cl-hr-form .form-separador {
    margin: 22px 0 10px;
    padding: 0;
    font-family: var(--cl-fonte);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--cl-texto);
    background: none;
}

.cl-hr-form form > .form-separador:first-of-type {
    margin-top: 4px;
}

/* Metas, Potencial e Ações de Vendas do cliente: barra cinza que abre/fecha o texto (só leitura),
   no mesmo visual da barra de usuário dos relatórios (.cl-rel-resultado h3.head1) */
.cl-hr-form .cl-hr-metas {
    margin: 14px 0 0;
}

.cl-hr-form .cl-hr-metas > summary {
    padding: 10px 40px 10px 14px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
    list-style: none;
    background: var(--cl-laranja) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat right 12px center / 18px;
    border-radius: 8px;
    cursor: pointer;
}

.cl-hr-form .cl-hr-metas > summary::-webkit-details-marker {
    display: none;
}

.cl-hr-form .cl-hr-metas[open] > summary {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.cl-hr-form .cl-hr-metas-texto {
    padding: 12px 14px 4px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--cl-texto);
    overflow-wrap: anywhere;
}

/* blocos (fieldset) em card */
.cl-hr-form fieldset {
    min-width: 0;
    margin: 0 0 14px;
    padding: 14px 20px 16px;
    background: var(--cl-card);
    border: 0;
    border-radius: var(--cl-raio);
    box-shadow: var(--cl-sombra);
}

.cl-hr-form fieldset legend {
    float: left;
    width: 100%;
    margin: 0 0 12px;
    padding: 0 0 10px;
    font-size: 14px;
    color: var(--cl-texto);
    border-bottom: 1px solid var(--cl-borda);
}

.cl-hr-form fieldset legend + * {
    clear: both;
}

.cl-hr-form fieldset legend b {
    font-weight: 600;
}

/* rótulos <b> */
.cl-hr-form b {
    font-weight: 600;
}

/* campos */
.cl-hr-form input[type="text"],
.cl-hr-form input[type="number"],
.cl-hr-form input[type="email"],
.cl-hr-form select:not([multiple]),
.cl-hr-form textarea {
    box-sizing: border-box;
    max-width: 100%;
    font-family: var(--cl-fonte);
    font-size: 13px;
    color: var(--cl-texto);
    background-color: #FFFFFF;
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
}

.cl-hr-form input[type="text"],
.cl-hr-form input[type="number"],
.cl-hr-form input[type="email"],
.cl-hr-form select:not([multiple]) {
    height: 36px;
    padding: 0 10px;
}

.cl-hr-form textarea {
    padding: 8px 10px;
    line-height: 1.5;
}

.cl-hr-form input[type="text"]:focus,
.cl-hr-form select:focus,
.cl-hr-form textarea:focus {
    outline: none;
    border-color: var(--cl-laranja);
}

.cl-hr-form input[readonly] {
    background-color: #F4F7FC;
}

.cl-hr-form input[type="checkbox"],
.cl-hr-form input[type="radio"] {
    accent-color: var(--cl-azul);
}

/* botões de ação dentro do formulário (o common.js aplica o .button() do jQuery UI) */
.cl-hr-form input.button,
.cl-hr-form input.button:hover,
.cl-hr-form input.button:focus,
.cl-hr-form input.button:active,
.cl-hr-form button.ui-button,
.cl-hr-form button.ui-button:hover,
.cl-hr-form button.ui-button:focus,
.cl-hr-form a.button.ui-button,
.cl-hr-form a.button.ui-button:hover {
    height: 36px;
    padding: 0 16px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    font-weight: 600;
    line-height: 34px;
    color: #FFFFFF;
    background: var(--cl-azul);
    border: 1px solid var(--cl-azul);
    border-radius: 8px;
    box-shadow: none;
    vertical-align: middle;
    cursor: pointer;
}

.cl-hr-form input.button:hover,
.cl-hr-form button.ui-button:hover,
.cl-hr-form a.button.ui-button:hover {
    background: var(--cl-azul-escuro);
    border-color: var(--cl-azul-escuro);
}

/* linha Data + Resultado */
.cl-hr-form .cl-hr-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 28px;
    margin-bottom: 12px;
}

.cl-hr-form .cl-hr-campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cl-hr-form .cl-hr-campo > b {
    font-size: 12.5px;
    color: var(--cl-texto-suave);
}

/* Data: rótulo em cima e campo + ícone do calendário embaixo, sem reservar a largura do rótulo ao lado */
.cl-hr-form .cl-hr-data {
    display: grid;
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    justify-content: start;
    align-items: center;
    gap: 6px 6px;
}

.cl-hr-form .cl-hr-data > b {
    grid-row: 1;
    grid-column: 1 / span 2;
}

.cl-hr-form .cl-hr-data > input,
.cl-hr-form .cl-hr-data > span,
.cl-hr-form .cl-hr-data > img.ui-datepicker-trigger {
    grid-row: 2;
}

.cl-hr-form .cl-hr-data input.data {
    width: 140px;
}

.cl-hr-form .cl-hr-resultado {
    align-self: flex-start;
    padding: 9px 14px;
    font-size: 12.5px;
}

/* sem nome do resultado (ex.: tipo sem permissão de criar), não mostra a pílula vazia */
.cl-hr-form .cl-hr-resultado:empty {
    display: none;
}

.cl-hr-form .cl-hr-valor {
    font-weight: 600;
    line-height: 36px;
}

/* dados do HR (data, resultado, representante, contato): um card */
.cl-hr-form .cl-hr-dados {
    margin-bottom: 14px;
    padding: 16px 20px 6px;
}

/* meio de contato vazio (configuração desligada) não ocupa espaço ao lado do Contato */
.cl-hr-form .cl-hr-meio-contato:not(:has(select)) {
    display: none;
}

.cl-hr-form .cl-hr-meio-contato {
    margin-right: 20px !important;
}

/* representante(s) e contato */
.cl-hr-form .hr-representantes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin: 0 0 12px !important;
    overflow: visible !important;
}

.cl-hr-form .hr-representantes > div {
    float: none;
    margin: 0;
}

.cl-hr-form .hr-representantes > div:empty {
    display: none;
}

.cl-hr-form .hr-representantes b,
.cl-hr-form .cl-hr-dados > div[style*="float"] > b {
    display: inline-block;
    font-size: 12.5px;
    color: var(--cl-texto-suave);
}

.cl-hr-form .hr-representantes select {
    min-width: 260px;
}

.cl-hr-form .cl-hr-dados > div[style*="float"] {
    margin-bottom: 14px;
}

.cl-hr-form #con_id {
    min-width: 260px;
}

/* dados do HR numa linha: Resultado, Data, Representante(s), Meio de contato, Contato (e Negócio /
   Tipo Venda quando existem). O HTML continua na ordem original (data antes do resultado); a ordem
   visual vem do flex + order. Linhas (cl-hr-linha) e representantes viram itens diretos (contents). */
.cl-hr-form .cl-hr-dados {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 24px;
    padding-bottom: 16px;
}

.cl-hr-form .cl-hr-dados > .cl-hr-linha,
.cl-hr-form .cl-hr-dados > .hr-representantes {
    display: contents;
}

.cl-hr-form .cl-hr-dados > br,
.cl-hr-form .cl-hr-dados > div[style*="clear"]:empty,
.cl-hr-form .cl-hr-dados > div[style*="clear: both;"]:not([class]) {
    display: none;
}

.cl-hr-form .cl-hr-dados .cl-hr-campo-resultado {
    order: -1;
}

.cl-hr-form .cl-hr-dados .cl-hr-resultado {
    align-self: flex-start;
}

/* cada bloco "rótulo + campo" vindo do HTML antigo (<b>, <br>, select, botão) vira uma grade:
   rótulo em cima ocupando a largura, campos (e o botão "Adicionar Novo Contato") lado a lado embaixo */
.cl-hr-form .cl-hr-dados .hr-representantes > div,
.cl-hr-form .cl-hr-dados > .cl-hr-meio-contato,
.cl-hr-form .cl-hr-dados > .cl-hr-contato,
.cl-hr-form .cl-hr-dados > .cl-hr-negocio,
.cl-hr-form .cl-hr-dados > .cl-hr-tipo-venda {
    display: grid;
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    justify-content: start;
    align-items: center;
    gap: 6px 8px;
    float: none !important;
    margin: 0 !important;
}

.cl-hr-form .cl-hr-dados .hr-representantes > div > b,
.cl-hr-form .cl-hr-dados > .cl-hr-meio-contato > b,
.cl-hr-form .cl-hr-dados > .cl-hr-contato > b,
.cl-hr-form .cl-hr-dados > .cl-hr-negocio > b,
.cl-hr-form .cl-hr-dados > .cl-hr-tipo-venda > b {
    grid-row: 1;
    grid-column: 1 / -1;
    margin: 0;
    font-size: 12.5px;
    color: var(--cl-texto-suave);
}

.cl-hr-form .cl-hr-dados .hr-representantes > div > br,
.cl-hr-form .cl-hr-dados > .cl-hr-meio-contato > br,
.cl-hr-form .cl-hr-dados > .cl-hr-contato > br {
    display: none;
}

.cl-hr-form .cl-hr-dados .hr-representantes > div:empty {
    display: none;
}

.cl-hr-form .cl-hr-dados > .cl-hr-contato > input.button {
    grid-row: 2;
}

.cl-hr-form .cl-hr-dados .hr-representantes select,
.cl-hr-form .cl-hr-dados #con_id {
    width: 240px !important;
    min-width: 0;
}

.cl-hr-form .cl-hr-dados > .cl-hr-meio-contato:not(:has(select)) {
    display: none;
}

/* Mensagens WhatsApp: bloco próprio depois do card de dados (configuração whatsapp), em formato de conversa.
   As mensagens vêm do buscaMensagensWhatsapp() do common.js (whatsapp-message-contato / -usuario). */
.cl-hr-form .cl-hr-whatsapp {
    margin-bottom: 14px;
    padding: 14px 20px 16px;
}

.cl-hr-form .cl-hr-whatsapp-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin-bottom: 12px;
}

.cl-hr-form .cl-hr-whatsapp-todas {
    display: flex;
    align-items: center;
    gap: 8px;
    float: none;
    width: auto;
    padding: 0;
    font-weight: 600;
    color: var(--cl-texto);
    cursor: pointer;
}

.cl-hr-form .cl-hr-whatsapp-todas input {
    width: 16px;
    height: 16px;
    margin: 0;
}

/* "Deletar mensagens selecionadas": ação que apaga, em vermelho (todos os estados do jQuery UI) */
.cl-hr-form #deletar_mensagens_selecionadas,
.cl-hr-form #deletar_mensagens_selecionadas:hover,
.cl-hr-form #deletar_mensagens_selecionadas:focus,
.cl-hr-form #deletar_mensagens_selecionadas:active {
    color: #FFFFFF;
    background: var(--cl-vermelho);
    border-color: var(--cl-vermelho);
}

.cl-hr-form #deletar_mensagens_selecionadas:hover {
    background: #C62828;
    border-color: #C62828;
}

.cl-hr-form #mensagens-whatsapp {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 520px;
    padding: 14px;
    overflow-y: auto;
    background: #F4F7FC;
    border-radius: 10px;
}

.cl-hr-form #mensagens-whatsapp:empty {
    display: none;
}

.cl-hr-form #mensagens-whatsapp > i {
    padding: 6px;
    color: var(--cl-texto-suave);
    text-align: center;
}

.cl-hr-form #mensagens-whatsapp .whatsapp-message {
    align-self: flex-start;
    max-width: 75%;
    margin: 0;
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--cl-texto);
    background: #FFFFFF;
    border: 1px solid var(--cl-borda);
    border-radius: 12px 12px 12px 4px;
    box-shadow: 0 1px 2px rgba(15, 30, 74, .05);
}

.cl-hr-form #mensagens-whatsapp .whatsapp-message-usuario {
    align-self: flex-end;
    background: #FFF3E6;
    border-color: #FBD9B5;
    border-radius: 12px 12px 4px 12px;
}

.cl-hr-form #mensagens-whatsapp .whatsapp-message:hover {
    background: #FFFFFF;
}

.cl-hr-form #mensagens-whatsapp .whatsapp-message-usuario:hover {
    background: #FFF3E6;
}

.cl-hr-form #mensagens-whatsapp .whatsapp-message input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin: 0 6px 0 0;
    vertical-align: -2px;
    transform: none;
}

.cl-hr-form #mensagens-whatsapp .whatsapp-message img {
    border-radius: 8px !important;
}

/* botão "Visualizar" dos anexos (estilo inline no common.js) */
.cl-hr-form #mensagens-whatsapp .whatsapp-message button {
    padding: 4px 10px !important;
    font-family: var(--cl-fonte);
    font-size: 12px !important;
    font-weight: 600;
    color: var(--cl-azul) !important;
    background: #EAF2FE !important;
    border-radius: 6px !important;
}

/* mensagens já gravadas no HR (Whatsapp::printMessagesView, na alteração) */
.cl-hr-form .cl-hr-whatsapp table {
    margin-top: 14px;
    font-family: var(--cl-fonte) !important;
    font-size: 13px !important;
}

.cl-hr-form .cl-hr-whatsapp fieldset {
    margin: 0;
    padding: 0;
    box-shadow: none;
}

@media (max-width: 767px) {
    .cl-hr-form .cl-hr-whatsapp {
        padding: 12px 14px 14px;
    }

    .cl-hr-form #mensagens-whatsapp .whatsapp-message {
        max-width: 92%;
    }
}

@media (max-width: 767px) {
    .cl-hr-form .cl-hr-dados .hr-representantes > div,
    .cl-hr-form .cl-hr-dados > .cl-hr-contato,
    .cl-hr-form .cl-hr-dados > .cl-hr-meio-contato,
    .cl-hr-form .cl-hr-dados > .cl-hr-negocio,
    .cl-hr-form .cl-hr-dados > .cl-hr-tipo-venda {
        flex: 1 1 100%;
        grid-auto-flow: row;
        grid-template-rows: none;
        grid-template-columns: minmax(0, 1fr);
        justify-content: stretch;
    }

    .cl-hr-form .cl-hr-dados .hr-representantes > div > b,
    .cl-hr-form .cl-hr-dados > .cl-hr-contato > b,
    .cl-hr-form .cl-hr-dados > .cl-hr-contato > input.button,
    .cl-hr-form .cl-hr-dados > .cl-hr-meio-contato > b {
        grid-row: auto;
    }

    .cl-hr-form .cl-hr-dados .hr-representantes select,
    .cl-hr-form .cl-hr-dados #con_id {
        width: 100% !important;
    }
}

/* bloco próprio do tipo de HR (ex.: Visita in loco) */
.cl-hr-form fieldset.cl-hr-bloco .cl-form-grade {
    margin-top: 2px;
}

.cl-hr-form fieldset.cl-hr-bloco textarea {
    min-height: 160px;
    resize: vertical;
}

/* Requisição de Amostra do atlasquimica/teste4 (clientes/<tenant>/template/requisicao.amostra.tpl.php)
   e ATL (atl.tpl.php): telas só desses tenants, no mesmo bloco em card dos outros tipos de HR. */
.cl-hr-form .form-separador.cl-ra-titulo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.cl-hr-form .cl-ra-codigo {
    font-size: 12px;
    font-weight: 500;
    color: var(--cl-texto-suave);
}

.cl-hr-form fieldset.cl-hr-bloco.cl-ra textarea {
    min-height: 84px;
}

.cl-hr-form .cl-ra .cl-campo > .cl-hr-texto {
    min-height: 20px;
}

/* opções geradas por FormHelper::buildField (input + texto solto, sem <label>) */
.cl-hr-form .cl-ra-opcoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    font-size: 13px;
    color: var(--cl-texto);
}

.cl-hr-form .cl-ra-opcoes input[type="radio"],
.cl-hr-form .cl-ra-opcoes input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--cl-azul);
}

.cl-hr-form .cl-ra-opcoes .cl-ra-sep {
    width: 14px;
}

.cl-hr-form .cl-ra-opcoes input[type="text"] {
    flex: 0 1 320px;
    width: auto;
    min-width: 0;
}

.cl-hr-form table.cl-ra-produtos {
    width: 100%;
    margin: 0;
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
    border-spacing: 0;
    border-collapse: separate;
    overflow: hidden;
    font-family: var(--cl-fonte);
    font-size: 13px;
}

.cl-hr-form table.cl-ra-produtos th {
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    color: var(--cl-texto-suave);
    background: #EEF1F6;
    border: 0;
    border-bottom: 1px solid var(--cl-borda);
}

.cl-hr-form table.cl-ra-produtos th.cl-ra-produtos-titulo {
    text-align: center;
    letter-spacing: .04em;
    color: var(--cl-texto);
}

.cl-hr-form table.cl-ra-produtos td {
    padding: 6px 10px;
    border: 0;
    border-bottom: 1px solid #EEF2F8;
    vertical-align: middle;
}

.cl-hr-form table.cl-ra-produtos tbody tr:last-child td {
    border-bottom: 0;
}

.cl-hr-form table.cl-ra-produtos td input[type="text"],
.cl-hr-form table.cl-ra-produtos td input:not([type]) {
    box-sizing: border-box;
    width: 100%;
    height: 34px;
}

/* o campo Descrição vem sem type no HTML e ficava fora do estilo dos campos de texto */
.cl-hr-form table.cl-ra-produtos td input:not([type]) {
    padding: 0 10px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    color: var(--cl-texto);
    background-color: #FFFFFF;
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
}

/* quantidade com unidade (ex.: "900 ml"): menos margem interna para o texto caber inteiro */
.cl-hr-form table.cl-ra-produtos .cl-ra-col-qtde input {
    padding-left: 4px;
    padding-right: 4px;
}

.cl-hr-form table.cl-ra-produtos .cl-ra-col-item {
    width: 70px;
    text-align: center;
}

.cl-hr-form table.cl-ra-produtos .cl-ra-col-codigo {
    width: 170px;
}

.cl-hr-form table.cl-ra-produtos .cl-ra-col-qtde {
    width: 110px;
    text-align: center;
}

.cl-hr-form table.cl-ra-produtos .cl-ra-col-item input,
.cl-hr-form table.cl-ra-produtos .cl-ra-col-qtde input {
    text-align: center;
}

.cl-hr-form table.cl-ra-acompanhamento {
    max-width: 720px;
}

.cl-hr-form .cl-ra-acoes {
    margin-top: 10px;
    text-align: right;
}

/* monferrato (Orçamento, template/orcamento.form.tpl.php): mesmas grades; cada opção de radio/checkbox
   vem num <label class="cl-ra-item"> e as listas longas (nível de inspeção) ficam uma opção por linha */
.cl-hr-form .cl-ra label.cl-ra-item {
    display: inline-flex;
    float: none;
    align-items: center;
    gap: 6px;
    width: auto;
    margin: 0 10px 0 0;
    padding: 0;
    font-size: 13px;
    font-weight: 400;
    text-align: left;
    color: var(--cl-texto);
    cursor: pointer;
}

.cl-hr-form .cl-ra-lista {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    padding-top: 4px;
}

.cl-hr-form .cl-ra-lista label.cl-ra-item {
    align-items: flex-start;
    margin: 0;
    line-height: 1.35;
}

.cl-hr-form .cl-ra-lista input[type="radio"] {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin: 1px 0 0;
    accent-color: var(--cl-azul);
}

.cl-hr-form .cl-ra-opcoes input[type="text"].cl-ra-curto {
    flex: 0 0 90px;
    width: 90px;
}

/* satpr (Liberação/Manutenção): usa os mesmos blocos; botão Adicionar alinhado com os campos
   e tabela dos itens já adicionados abaixo da grade */
.cl-hr-form .cl-ra .cl-ra-campo-botao {
    display: flex;
    align-items: flex-end;
}

.cl-hr-form table.cl-ra-produtos.cl-ra-itens {
    margin-top: 16px;
}

/* em tela estreita a tabela de itens (até 6 colunas) rola dentro do card em vez de alargar a página */
.cl-hr-form .cl-ra-rolagem {
    max-width: 100%;
    overflow-x: auto;
}

.cl-hr-form table.cl-ra-produtos.cl-ra-itens td img {
    vertical-align: middle;
}

.cl-hr-form .cl-ra-aviso {
    margin: 4px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--cl-vermelho);
}

/* ATL: editor de texto (CLEditor, tamanho de folha) centralizado no card */
.cl-hr-form fieldset.cl-atl .cl-atl-editor {
    display: flex;
    justify-content: center;
    overflow-x: auto;
}

@media (max-width: 767px) {
    .cl-hr-form table.cl-ra-produtos .cl-ra-col-item {
        width: 48px;
    }

    .cl-hr-form table.cl-ra-produtos .cl-ra-col-codigo {
        width: 96px;
    }

    .cl-hr-form table.cl-ra-produtos .cl-ra-col-qtde {
        width: 84px;
    }

    .cl-hr-form table.cl-ra-produtos th,
    .cl-hr-form table.cl-ra-produtos td {
        padding-left: 6px;
        padding-right: 6px;
    }
}

/* texto só leitura dentro do bloco do tipo de HR (visualização e resposta) */
.cl-hr-form .cl-hr-texto {
    font-size: 13px;
    line-height: 1.6;
    color: var(--cl-texto);
    overflow-wrap: anywhere;
}

/* Análise gerencial (acao=resposta): respostas anteriores em lista e a nova resposta no fim */
.cl-hr-form .cl-hr-respostas {
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
}

.cl-hr-form .cl-hr-resposta {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 4px 16px;
    padding: 10px 14px;
    border-bottom: 1px solid #EEF2F8;
}

.cl-hr-form .cl-hr-resposta:last-child {
    border-bottom: 0;
}

.cl-hr-form .cl-hr-resposta-quem {
    font-size: 13px;
    line-height: 1.6;
    color: var(--cl-texto-suave);
}

.cl-hr-form .cl-hr-resposta-quem b {
    color: var(--cl-texto);
}

.cl-hr-form fieldset.cl-hr-bloco .cl-hr-resposta-nova textarea {
    width: 100%;
    min-height: 90px;
}

@media (max-width: 700px) {
    .cl-hr-form .cl-hr-resposta {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Interações do HR (acao=2): lista das interações (mesmo quadro das respostas) e a nova interação no fim */
.cl-hr-form .cl-hr-interacao-nova {
    margin-top: 16px;
}

.cl-hr-form .cl-hr-subtitulo {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cl-texto);
}

.cl-hr-form fieldset.cl-hr-bloco .cl-hr-interacao-nova textarea {
    min-height: 90px;
}

.cl-hr-form .cl-hr-interacao-nova .cl-campo-linha > select {
    flex: 1 1 220px;
    width: auto !important;
}

.cl-hr-form .cl-hr-interacao-acao {
    margin-top: 10px;
}

/* Indicação: usuários que recebem a indicação, em tabela com rolagem própria */
.cl-hr-form .cl-hr-indicados {
    max-width: 760px;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
}

.cl-hr-form #tabela_indicados {
    width: 100%;
    border: 0;
    border-collapse: collapse;
}

.cl-hr-form #tabela_indicados th {
    position: sticky;
    top: 0;
    padding: 9px 12px;
    font-size: 12.5px;
    font-weight: 600;
    text-align: left;
    color: var(--cl-texto-suave);
    background: #F4F7FC;
    border-bottom: 1px solid var(--cl-borda);
}

.cl-hr-form #tabela_indicados td {
    padding: 7px 12px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    color: var(--cl-texto);
    border-bottom: 1px solid #EEF2F8;
}

.cl-hr-form #tabela_indicados tr:last-child td {
    border-bottom: 0;
}

.cl-hr-form #tabela_indicados tr:hover td {
    background: #FFF8F0;
}

.cl-hr-form #tabela_indicados th:last-child,
.cl-hr-form #tabela_indicados td:last-child {
    width: 70px;
    text-align: center;
}

.cl-hr-form #tabela_indicados input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    vertical-align: middle;
    accent-color: var(--cl-azul);
}

/* Sem pedido: motivos da visita em duas colunas (preenche a da esquerda primeiro, como antes) */
.cl-hr-form .cl-hr-motivos {
    columns: 2;
    column-gap: 32px;
    margin: 2px 0 16px;
}

.cl-hr-form .cl-hr-motivos label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    float: none;
    width: auto;
    padding: 5px 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--cl-texto);
    text-align: left;
    cursor: pointer;
    break-inside: avoid;
}

.cl-hr-form .cl-hr-motivos input[type="checkbox"] {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 1px 0 0;
    accent-color: var(--cl-azul);
}

.cl-hr-form fieldset.cl-hr-sem-pedido textarea {
    min-height: 90px;
}

/* visualização (acao 2): motivos gravados, só leitura */
.cl-hr-form ul.cl-hr-motivos-leitura {
    margin-bottom: 4px;
    padding: 0;
    list-style: none;
}

.cl-hr-form ul.cl-hr-motivos-leitura li {
    position: relative;
    padding: 5px 0 5px 16px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--cl-texto);
    break-inside: avoid;
}

.cl-hr-form ul.cl-hr-motivos-leitura li::before {
    content: "";
    position: absolute;
    top: 11px;
    left: 2px;
    width: 6px;
    height: 6px;
    background: var(--cl-laranja);
    border-radius: 50%;
}

@media (max-width: 700px) {
    .cl-hr-form .cl-hr-motivos {
        columns: 1;
    }
}

/* Follow up embutido (template/follow.up.tpl.php) */
.cl-hr-form #formFollowUp fieldset > div[style*="float"] {
    margin: 0 18px 10px 0;
}

.cl-hr-form #formFollowUp fieldset > div[style*="float"] > b {
    display: inline-block;
    margin-bottom: 6px;
    font-size: 12.5px;
    color: var(--cl-texto-suave);
}

.cl-hr-form #formFollowUp fieldset > br {
    display: none;
}

.cl-hr-form #formFollowUp fieldset > div[style*="center"] {
    clear: both;
    padding-top: 6px;
}

.cl-hr-form #formFollowUp font[color="red"] {
    color: var(--cl-vermelho);
}

.cl-hr-form #formFollowUp .followup {
    float: none !important;
}

.cl-hr-form #formFollowUp .followup ul {
    margin: 0;
    padding: 0 0 0 18px;
    line-height: 1.7;
}

/* Adicionar Follow Up (independente) e follow up simples do HR: grade de 4 colunas,
   1ª linha data / representante / contato / outro contato, 2ª linha assunto */
.cl-hr-form .cl-hr-fu .cl-hr-fu-grade {
    clear: both;
}

.cl-hr-form .cl-hr-fu .cl-campo select,
.cl-hr-form .cl-hr-fu .cl-campo input[type="text"] {
    width: 100% !important;
}

.cl-hr-form .cl-hr-fu .cl-campo-data input[type="text"] {
    width: auto !important;
}

.cl-hr-form .cl-hr-fu-acoes {
    display: flex;
    justify-content: center;
    margin-top: 14px;
}

/* Inteligência em vendas (template/inteligencia.vendas.tpl.php) */
.cl-hr-form .chosen-container {
    font-family: var(--cl-fonte);
    font-size: 13px;
}

.cl-hr-form .chosen-container-single .chosen-single {
    height: 36px;
    padding: 0 0 0 10px;
    line-height: 34px;
    color: var(--cl-texto);
    background: #FFFFFF;
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
    box-shadow: none;
}

.cl-hr-form .chosen-container-single .chosen-single div b {
    background-position: 0 8px;
}

.cl-hr-form .chosen-container-active .chosen-single {
    border-color: var(--cl-laranja);
}

.cl-hr-form .chosen-container .chosen-results li.highlighted {
    background: var(--cl-azul);
    background-image: none;
}

.cl-hr-form fieldset table {
    border-collapse: collapse;
}

.cl-hr-form fieldset table[style*="border"],
.cl-hr-form fieldset table[border="1"] {
    border: 1px solid var(--cl-borda) !important;
    border-radius: 8px;
}

.cl-hr-form fieldset table th {
    padding: 8px 10px;
    font-size: 12.5px;
    font-weight: 600;
    text-align: left;
    background: #F4F7FC;
    border: 0;
}

.cl-hr-form fieldset table td {
    padding: 6px 10px;
}

/* botão Salvar */
.cl-hr-form .cl-form-acoes {
    margin: 18px 0 8px;
}

@media (max-width: 767px) {
    .cl-hr-form fieldset {
        padding: 12px 14px 14px;
    }

    .cl-hr-form .hr-representantes select,
    .cl-hr-form #con_id {
        min-width: 0;
        width: 100%;
    }

    .cl-hr-form .cl-hr-dados > div[style*="float"],
    .cl-hr-form #formFollowUp fieldset > div[style*="float"] {
        float: none !important;
        width: 100%;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}

/* ==========================================================================
   Marketing — Filtro para Mala Direta e Emails (filtro.maladireta.php)
   Quadros de filtro (fieldset .filtro, mostrados pelo JavaScript) em cards lado a lado,
   com rolagem interna; estados e cidades são acrescentados por AJAX dentro de #estado / #cidade.
   ========================================================================== */

.cl-marketing fieldset {
    min-width: 0;
    margin: 0;
    border: 0;
}

.cl-marketing fieldset legend {
    float: left;
    width: 100%;
    margin: 0 0 8px;
    padding: 0 0 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cl-texto);
    border-bottom: 1px solid var(--cl-borda);
}

.cl-marketing fieldset legend + * {
    clear: both;
}

.cl-marketing fieldset label {
    display: flex;
    align-items: center;
    gap: 8px;
    float: none;
    width: auto;
    padding: 3px 0;
    font-size: 12.5px;
    line-height: 1.35;
    text-align: left;
    color: var(--cl-texto);
    cursor: pointer;
}

.cl-marketing fieldset label b {
    font-weight: 700;
}

.cl-marketing fieldset input[type="checkbox"] {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--cl-azul);
}

/* "Cadastros" (PJ / PF, sempre marcados): primeiro quadro da grade, igual aos outros */
.cl-marketing .cl-mkt-cadastros label {
    font-weight: 600;
    cursor: default;
}

/* quadros de filtro */
.cl-marketing .cl-mkt-filtros {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    align-items: start;
    gap: 14px;
}

/* ordem dos quadros (pedido em 2026-10-03): Perfil, País, Estado, Cidade, Usuário, Grupo, Segmento.
   Só visual (order); no HTML continuam na ordem original. */
.cl-marketing .cl-mkt-filtros > #cadastros { order: 0; }
.cl-marketing .cl-mkt-filtros > #perfil   { order: 1; }
.cl-marketing .cl-mkt-filtros > #pais     { order: 2; }
.cl-marketing .cl-mkt-filtros > #estado   { order: 3; }
.cl-marketing .cl-mkt-filtros > #cidade   { order: 4; }
.cl-marketing .cl-mkt-filtros > #usuario  { order: 5; }
.cl-marketing .cl-mkt-filtros > #grupo    { order: 6; }
.cl-marketing .cl-mkt-filtros > #segmento { order: 7; }
.cl-marketing .cl-mkt-filtros > #outros,
.cl-marketing .cl-mkt-filtros > #modulo   { order: 8; }

.cl-marketing .cl-mkt-filtros > fieldset {
    box-sizing: border-box;
    max-height: 340px;
    padding: 12px 14px 12px;
    overflow-y: auto;
    background: var(--cl-card);
    border-radius: var(--cl-raio);
    box-shadow: var(--cl-sombra);
}

/* "Todos ..." em destaque no topo de cada quadro */
.cl-marketing .cl-mkt-filtros > fieldset > label:has(.checa_todos) {
    margin-bottom: 4px;
    padding-bottom: 7px;
    font-weight: 600;
    border-bottom: 1px dashed var(--cl-borda);
}

/* título do país / estado acrescentado na lista (ex.: BRASIL) */
.cl-marketing .cl-mkt-filtros > fieldset > label:not(:has(input)) {
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--cl-texto-suave);
    cursor: default;
}

/* botão Filtrar e resultado */
.cl-marketing .cl-mkt-filtrar {
    display: flex;
    justify-content: center;
    margin: 18px 0;
}

.cl-marketing input.button,
.cl-marketing input.button:hover,
.cl-marketing input.button:focus,
.cl-marketing input.button:active,
.cl-marketing #download,
.cl-marketing #download:hover,
.cl-marketing #download:focus,
.cl-marketing #download:active {
    min-width: 180px;
    height: 42px;
    padding: 0 26px;
    font-family: var(--cl-fonte);
    font-size: 15px;
    font-weight: 600;
    color: #FFFFFF;
    background: var(--cl-azul);
    border: 1.5px solid var(--cl-azul);
    border-radius: 8px;
    box-shadow: none;
    cursor: pointer;
}

.cl-marketing input.button:hover,
.cl-marketing #download:hover {
    background: var(--cl-azul-escuro);
    border-color: var(--cl-azul-escuro);
}

.cl-marketing .cl-mkt-resultado {
    padding: 14px 20px 18px;
}

.cl-marketing #resultado h3 {
    margin: 4px 0 14px;
    padding: 14px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    color: var(--cl-texto);
    background: #F4F7FC;
    border-radius: 10px;
}

.cl-marketing #resultado:empty::before {
    content: "Escolha os filtros e clique em Filtrar Cadastros para ver quantos cadastros serão baixados.";
    display: block;
    margin: 4px 0 14px;
    font-size: 12.5px;
    text-align: center;
    color: var(--cl-texto-suave);
}

.cl-marketing .cl-mkt-download {
    display: flex;
    justify-content: center;
}

@media (max-width: 767px) {
    .cl-marketing .cl-mkt-filtros {
        grid-template-columns: minmax(0, 1fr);
    }

    .cl-marketing .cl-mkt-filtros > fieldset {
        max-height: 260px;
    }
}

/* ==========================================================================
   Agenda (agenda.php: calendar, form, invites, tasks, view)
   Abas em agenda.topo.tpl.php; calendário FullCalendar 2.0.1 com theme:true (classes do jQuery UI).
   ========================================================================== */

/* abas (reutilizável: .cl-abas / .cl-aba / .cl-aba-ativa) */
.cl-pagina .cl-abas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 16px;
    padding: 5px;
    background: #EAEFF7;
    border-radius: 10px;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
}

.cl-pagina .cl-aba {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cl-texto-suave);
    text-decoration: none;
    border-radius: 8px;
    transition: background-color .15s, color .15s;
}

.cl-pagina .cl-aba:hover {
    color: var(--cl-texto);
    background: rgba(255, 255, 255, .6);
}

.cl-pagina .cl-aba.cl-aba-ativa {
    color: var(--cl-azul);
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(15, 30, 74, .1);
}

.cl-pagina .cl-aba-contador {
    min-width: 18px;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    color: #FFFFFF;
    background: var(--cl-vermelho);
    border-radius: 999px;
}

/* botão secundário grande (contorno), ao lado do Salvar: Cancelar / Voltar */
.cl-pagina input.cl-btn-secundario-grande,
.cl-pagina input.cl-btn-secundario-grande:hover,
.cl-pagina input.cl-btn-secundario-grande:focus,
.cl-pagina input.cl-btn-secundario-grande:active {
    min-width: 140px;
    height: 42px;
    padding: 0 26px;
    font-family: var(--cl-fonte);
    font-size: 15px;
    font-weight: 600;
    color: var(--cl-azul);
    background: #FFFFFF;
    border: 1.5px solid var(--cl-azul);
    border-radius: 8px;
    cursor: pointer;
}

.cl-pagina input.cl-btn-secundario-grande:hover {
    background: #EAF2FE;
}

.cl-agenda .cl-form-acoes {
    gap: 12px;
}

/* Calendário: barra com legenda + usuário */
.cl-agenda .cl-agenda-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 22px;
    margin-bottom: 14px;
    padding: 12px 18px;
    font-size: 12.5px;
}

.cl-agenda .cl-agenda-legenda {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    float: none;
    width: auto;
    padding: 0;
    font-weight: 500;
    color: var(--cl-texto);
}

.cl-agenda .cl-agenda-cor {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
}

.cl-agenda .cl-agenda-cor-hoje {
    background: #FFF3E6;
    border: 1px solid #FBD9B5;
    box-sizing: border-box;
}

.cl-agenda .cl-agenda-followup {
    cursor: pointer;
}

.cl-agenda .cl-agenda-followup input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--cl-azul);
}

.cl-agenda .cl-agenda-usuario {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    float: none;
    width: auto;
    margin-left: auto;
    padding: 0;
    font-weight: 600;
    color: var(--cl-texto-suave);
}

.cl-agenda .cl-agenda-usuario select {
    height: 36px;
    min-width: 200px;
    padding: 0 10px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    color: var(--cl-texto);
    background: #FFFFFF;
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
}

/* Calendário (FullCalendar 2, tema jQuery UI) */
.cl-agenda .cl-agenda-calendario {
    padding: 16px 18px 18px;
}

.cl-agenda .fc {
    font-family: var(--cl-fonte);
    font-size: 12.5px;
    color: var(--cl-texto);
}

.cl-agenda .fc-header-title h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--cl-texto);
    text-transform: capitalize;
}

/* botões do FullCalendar 2 (span.fc-button com classes de estado do jQuery UI) */
.cl-agenda .fc .fc-button.ui-state-default,
.cl-agenda .fc .fc-button.ui-state-default.ui-state-hover,
.cl-agenda .fc .fc-button.ui-state-default.ui-state-down {
    height: 34px;
    margin: 0 4px 0 0;
    padding: 0 12px;
    font-family: var(--cl-fonte);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 32px;
    text-transform: capitalize;
    color: var(--cl-azul);
    background: #FFFFFF;
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
    box-shadow: none;
}

.cl-agenda .fc .fc-button.ui-state-default.ui-state-hover {
    background: #EAF2FE;
}

.cl-agenda .fc .fc-button.ui-state-default.ui-state-active {
    color: #FFFFFF;
    background: var(--cl-azul);
    border-color: var(--cl-azul);
}

.cl-agenda .fc .fc-button.ui-state-default.ui-state-disabled {
    opacity: .45;
}

.cl-agenda .fc .fc-button .ui-icon {
    background-image: none;
    position: relative;
    text-indent: 0;
    overflow: visible;
}

.cl-agenda .fc .fc-button .ui-icon-circle-triangle-w::after,
.cl-agenda .fc .fc-button .ui-icon-circle-triangle-e::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    border-top: 2px solid var(--cl-azul);
    border-left: 2px solid var(--cl-azul);
}

.cl-agenda .fc .fc-button .ui-icon-circle-triangle-w::after {
    transform: translate(-30%, -50%) rotate(-45deg);
}

.cl-agenda .fc .fc-button .ui-icon-circle-triangle-e::after {
    transform: translate(-70%, -50%) rotate(135deg);
}

.cl-agenda .fc th.ui-widget-header,
.cl-agenda .fc .fc-widget-header {
    padding: 8px 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--cl-texto-suave);
    background: #F4F7FC;
    border-color: var(--cl-borda);
}

.cl-agenda .fc td.ui-widget-content,
.cl-agenda .fc .fc-widget-content {
    border-color: #E9EEF6;
}

.cl-agenda .fc .fc-day-number {
    padding: 4px 6px;
    font-size: 12px;
    color: var(--cl-texto-suave);
}

.cl-agenda .fc .fc-today.ui-state-highlight,
.cl-agenda .fc td.fc-today {
    background: #FFF3E6;
    border-color: #E9EEF6;
}

.cl-agenda .fc .fc-today .fc-day-number {
    font-weight: 700;
    color: var(--cl-laranja-escuro);
}

.cl-agenda .fc .fc-other-month .fc-day-number {
    color: #B4BCCB;
}

.cl-agenda .fc .fc-event {
    padding: 1px 4px;
    font-size: 11.5px;
    border-radius: 5px;
}

.cl-agenda .fc .fc-agenda-axis {
    font-size: 11.5px;
    color: var(--cl-texto-suave);
}

/* Novo compromisso */
.cl-agenda .cl-agenda-convidados select,
.cl-agenda .cl-agenda-contatos select {
    box-sizing: border-box;
    width: 100%;
    min-height: 150px;
    padding: 6px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    color: var(--cl-texto);
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
}

/* campo Cliente (input sem type, com autocomplete) e o link "Copiar endereço" embaixo */
.cl-agenda #cliente_name {
    box-sizing: border-box;
    width: 100%;
    height: 38px;
    padding: 0 12px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    color: var(--cl-texto);
    background: #FFFFFF;
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
}

.cl-agenda #cliente_name:focus {
    outline: none;
    border-color: var(--cl-laranja);
}

.cl-agenda .cl-agenda-copiar {
    display: inline-block;
}

/* Cliente | Local; Usuários convidados | Contatos do cliente; opções de convite na linha toda */
/* mesma altura nas duas listas (o .cl-campo > select[multiple] do layout usa height:auto) */
.cl-agenda .cl-agenda-convidados > select[multiple],
.cl-agenda .cl-agenda-contatos > select[multiple] {
    height: 180px;
}

.cl-agenda .cl-agenda-contatos select {
    min-height: 150px;
}

.cl-agenda .cl-agenda-opcoes {
    justify-content: flex-end;
}

.cl-agenda .cl-campo > label.cl-agenda-check {
    display: flex;
    margin: 0;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--cl-texto);
}

.cl-agenda .cl-ajuda-campo {
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--cl-texto-suave);
}

.cl-agenda .cl-agenda-copiar {
    margin-top: 6px;
    font-size: 12px;
}

.cl-agenda .cl-agenda-opcoes {
    gap: 8px;
}

.cl-agenda .cl-agenda-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    float: none;
    width: auto;
    padding: 0;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--cl-texto);
    text-align: left;
    cursor: pointer;
}

.cl-agenda .cl-agenda-check input {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 1px 0 0;
    accent-color: var(--cl-azul);
}

.cl-agenda .cl-agenda-check b {
    font-weight: 600;
}

.cl-agenda .cl-agenda-check i {
    color: var(--cl-texto-suave);
}

/* Tarefas: três listas + formulário */
.cl-agenda .cl-agenda-tarefas {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    gap: 14px;
}

.cl-agenda .cl-agenda-tarefas .todo-box {
    float: none;
    width: auto;
    margin: 0;
    padding: 14px 16px 16px;
    border: 0;
}

.cl-agenda .cl-agenda-lista-titulo {
    margin: 0 0 10px;
    padding: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--cl-texto);
    border-bottom: 3px solid var(--cl-borda);
}

.cl-agenda .cl-agenda-atraso .cl-agenda-lista-titulo { border-bottom-color: var(--cl-vermelho); }
.cl-agenda .cl-agenda-hoje .cl-agenda-lista-titulo   { border-bottom-color: var(--cl-laranja); }
.cl-agenda .cl-agenda-futuro .cl-agenda-lista-titulo { border-bottom-color: var(--cl-azul); }

.cl-agenda .cl-agenda-lista ul {
    min-height: 40px;
    margin: 0;
    padding: 0;
}

.cl-agenda .cl-agenda-lista ul:empty::before {
    content: "Nenhuma tarefa";
    display: block;
    padding: 6px 0;
    font-size: 12.5px;
    color: var(--cl-texto-suave);
}

.cl-agenda .cl-agenda-lista li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    font-size: 13px;
    list-style: none;
    border-bottom: 1px solid #EEF2F8;
}

.cl-agenda .cl-agenda-lista li:last-child {
    border-bottom: 0;
}

.cl-agenda .cl-agenda-lista li.checked {
    color: var(--cl-texto-suave);
    text-decoration: line-through;
}

.cl-agenda .cl-agenda-lista li input {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--cl-azul);
}

/* lápis de editar: aparece ao passar o mouse (o JavaScript troca a visibility) */
.cl-agenda .cl-agenda-lista li a {
    margin-left: auto;
    visibility: hidden;
}

.cl-agenda .cl-agenda-tarefa-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cl-agenda .cl-agenda-tarefa-acoes {
    display: flex;
    gap: 8px;
}

.cl-agenda .cl-agenda-tarefa-acoes input.button,
.cl-agenda .cl-agenda-tarefa-acoes input.button:hover,
.cl-agenda .cl-agenda-tarefa-acoes input.button:focus,
.cl-agenda .cl-agenda-tarefa-acoes input.button:active {
    flex: 1 1 0;
    height: 38px;
    padding: 0 12px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    font-weight: 600;
    color: #FFFFFF;
    background: var(--cl-azul);
    border: 1.5px solid var(--cl-azul);
    border-radius: 8px;
}

.cl-agenda .cl-agenda-tarefa-acoes input.button:hover {
    background: var(--cl-azul-escuro);
    border-color: var(--cl-azul-escuro);
}

/* Convite (visualizar) */
.cl-agenda .cl-agenda-dados .cl-campo > span {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--cl-texto);
}

.cl-agenda .cl-agenda-confirmar {
    align-items: center;
}

@media (max-width: 1100px) {
    .cl-agenda .cl-agenda-tarefas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .cl-agenda .cl-agenda-tarefas {
        grid-template-columns: minmax(0, 1fr);
    }


    .cl-agenda .cl-agenda-usuario {
        margin-left: 0;
    }

    .cl-agenda .cl-agenda-calendario {
        padding: 10px;
        overflow-x: auto;
    }

    .cl-agenda .fc {
        min-width: 640px;
    }
}

/* ==========================================================================
   Kanban (kanban.hrs.php) — barra de filtros + quadro com colunas por resultado do HR.
   As colunas e os cards são montados por JavaScript; a cor de cada coluna vem de
   kanbanCorColuna() (kanban-cor-*).
   ========================================================================== */

.cl-kanban .cl-filtros {
    flex-wrap: wrap;
}

.cl-kanban .cl-filtro-pesquisa {
    flex: 1 1 240px;
}

.cl-kanban .cl-kanban-usuario .cl-filtro-check {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 4px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--cl-texto-suave);
    white-space: nowrap;
}

.cl-kanban .cl-kanban-usuario select {
    max-width: 20em;
}

.cl-pagina.cl-kanban input.cl-btn-salvar,
.cl-pagina.cl-kanban input.cl-btn-salvar:hover,
.cl-pagina.cl-kanban input.cl-btn-salvar:focus,
.cl-pagina.cl-kanban input.cl-btn-salvar:active {
    min-width: 110px;
    height: 38px;
    font-size: 14px;
}

/* quadro */
.cl-kanban .kanban-board {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 0 0 12px;
    overflow-x: auto;
}

.cl-kanban .kanban-coluna {
    --kanban-cor: var(--cl-azul);
    display: flex;
    flex: 0 0 290px;
    flex-direction: column;
    max-height: calc(100vh - 250px);
    background: #EEF2F8;
    border-top: 4px solid var(--kanban-cor);
    border-radius: var(--cl-raio);
}

.cl-kanban .kanban-cor-azul     { --kanban-cor: var(--cl-azul); }
.cl-kanban .kanban-cor-verde    { --kanban-cor: var(--cl-verde); }
.cl-kanban .kanban-cor-vermelho { --kanban-cor: var(--cl-vermelho); }
.cl-kanban .kanban-cor-laranja  { --kanban-cor: var(--cl-laranja); }
.cl-kanban .kanban-cor-cinza    { --kanban-cor: #8A94A8; }
.cl-kanban .kanban-cor-padrao   { --kanban-cor: #6C8EBF; }

.cl-kanban .kanban-coluna-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px 10px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .2px;
    color: var(--cl-texto);
}

.cl-kanban .kanban-coluna-total {
    flex: 0 0 auto;
    min-width: 22px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    color: #FFFFFF;
    background: var(--kanban-cor);
    border-radius: 999px;
}

.cl-kanban .kanban-coluna-cards {
    flex: 1 1 auto;
    padding: 2px 10px 10px;
    overflow-y: auto;
}

.cl-kanban .kanban-card {
    display: block;
    margin-bottom: 10px;
    padding: 12px 14px;
    color: var(--cl-texto);
    text-decoration: none;
    background: #FFFFFF;
    border: 1px solid transparent;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(15, 30, 74, .08);
    transition: box-shadow .15s, border-color .15s, transform .15s;
}

.cl-kanban .kanban-card:hover {
    border-color: var(--kanban-cor);
    box-shadow: 0 6px 16px rgba(15, 30, 74, .12);
    transform: translateY(-1px);
}

.cl-kanban .kanban-card-cliente {
    margin-bottom: 6px;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.35;
}

.cl-kanban .kanban-card-info {
    margin-bottom: 2px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--cl-texto-suave);
}

.cl-kanban .kanban-card-followup-atrasado {
    font-weight: 600;
    color: var(--cl-vermelho);
}

.cl-kanban .kanban-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
}

.cl-kanban .kanban-card-badges:empty {
    display: none;
}

.cl-kanban .kanban-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .2px;
    text-transform: uppercase;
    color: #FFFFFF;
    border-radius: 999px;
}

.cl-kanban .kanban-badge-status {
    color: var(--cl-texto-suave);
    background: #EEF2F8;
}

.cl-kanban .kanban-loading,
.cl-kanban .kanban-vazio {
    padding: 12px;
    font-size: 13px;
    text-align: center;
    color: var(--cl-texto-suave);
}

.cl-kanban .kanban-vazio {
    flex: 1 1 100%;
    padding: 28px 12px;
    background: var(--cl-card);
    border-radius: var(--cl-raio);
    box-shadow: var(--cl-sombra);
}

@media (max-width: 767px) {
    .cl-kanban .kanban-coluna {
        flex-basis: 82vw;
        max-height: none;
    }

    .cl-kanban .cl-kanban-usuario {
        flex-wrap: wrap;
    }

    .cl-kanban #kanban_usu_id_wrap {
        flex: 1 1 0;
        min-width: 0;
    }

    .cl-kanban .cl-kanban-usuario select {
        width: 100% !important;
        max-width: none;
    }

    .cl-kanban .cl-kanban-usuario .cl-filtro-check {
        flex: 1 1 100%;
        margin-left: 0;
    }
}

/* ==========================================================================
   Relatórios (template/relatorio.topo.tpl.php, body.cl-rel) — filtro
   O filtro é o <form> filho direto de .tela_ini_rel; os resultados não são,
   então estas regras não afetam a tela de resultados.
   ========================================================================== */

body.cl-rel {
    margin: 0;
    padding: 16px 20px 24px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    color: var(--cl-texto);
    background: var(--cl-fundo);
}

.cl-rel .cl-rel-titulo {
    height: auto !important;
}

.cl-rel .cl-rel-titulo h2 {
    margin: 4px 0 14px;
    font-size: 20px;
    font-weight: 700;
    color: var(--cl-azul);
}

.cl-rel .tela_ini_rel {
    border: 0;
}

.cl-rel .tela_ini_rel > form {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    padding: 20px 4px 16px;
    background: var(--cl-card);
    border-radius: var(--cl-raio);
    box-shadow: var(--cl-sombra);
}

/* colunas (form padrão, usuários e a coluna própria de cada relatório) */
.cl-rel .tela_ini_rel > form > div {
    float: none !important;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 0 20px !important;
    border-left: 1px solid var(--cl-borda) !important;
}

.cl-rel .tela_ini_rel > form > div:first-of-type {
    border-left: 0 !important;
}

/* rótulos (<b>) e links "Selecionar todos" / "aplicar filtros" */
.cl-rel .tela_ini_rel > form b {
    display: inline-block;
    margin-top: 10px;
    margin-bottom: 4px;
    font-weight: 600;
    font-size: 13px;
}

.cl-rel .tela_ini_rel > form b a,
.cl-rel .tela_ini_rel > form a[onclick*="selectAllChosen"] {
    margin-left: 6px;
    font-size: 12px !important;
    font-weight: 500;
    color: var(--cl-azul) !important;
    text-decoration: none;
}

.cl-rel .tela_ini_rel > form b a:hover {
    text-decoration: underline;
}

.cl-rel .tela_ini_rel > form input[type="text"] {
    box-sizing: border-box;
    height: 36px;
    padding: 0 10px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    color: var(--cl-texto);
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
    background: #FFFFFF;
}

.cl-rel .tela_ini_rel > form input[type="text"]:focus {
    outline: none;
    border-color: var(--cl-laranja);
}

.cl-rel .tela_ini_rel > form input.data {
    width: 130px;
}

.cl-rel .tela_ini_rel > form input.valor {
    width: 120px;
}

/* select múltiplo sem Chosen (ex.: DDD) */
.cl-rel .tela_ini_rel > form select[multiple] {
    padding: 4px;
    font-family: var(--cl-fonte);
    font-size: 12.5px;
    color: var(--cl-texto);
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
}

.cl-rel .tela_ini_rel > form .ui-datepicker-trigger {
    margin: 0 8px 0 4px;
    vertical-align: middle;
    cursor: pointer;
}

.cl-rel .tela_ini_rel > form input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin: 0 6px 0 0;
    vertical-align: middle;
    accent-color: var(--cl-azul);
}

.cl-rel .tela_ini_rel > form select:not([multiple]) {
    height: 36px;
    padding: 0 8px;
    font-family: var(--cl-fonte);
    color: var(--cl-texto);
    background-color: #FFFFFF;
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
}

/* selects com Chosen */
.cl-rel .tela_ini_rel > form .chosen-container {
    font-family: var(--cl-fonte);
    font-size: 13px;
}

.cl-rel .tela_ini_rel > form .chosen-container-multi .chosen-choices,
.cl-rel .tela_ini_rel > form .chosen-container-single .chosen-single {
    min-height: 36px;
    padding: 3px 6px;
    background: #FFFFFF;
    background-image: none;
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
    box-shadow: none;
}

.cl-rel .tela_ini_rel > form .chosen-container-active .chosen-choices,
.cl-rel .tela_ini_rel > form .chosen-container-active .chosen-single {
    border-color: var(--cl-laranja);
}

.cl-rel .tela_ini_rel > form .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
    height: 28px;
    font-family: var(--cl-fonte);
    color: var(--cl-texto-suave);
    border: 0;
}

.cl-rel .tela_ini_rel > form .chosen-container-multi .chosen-choices li.search-choice {
    margin: 3px 5px 3px 0;
    padding: 4px 22px 4px 8px;
    color: var(--cl-azul-escuro);
    background: #EAF2FE;
    background-image: none;
    border: 0;
    border-radius: 6px;
    box-shadow: none;
}

.cl-rel .tela_ini_rel > form .chosen-container .chosen-drop {
    border: 1px solid var(--cl-borda);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 10px 24px rgba(15, 30, 74, .12);
}

.cl-rel .tela_ini_rel > form .chosen-container .chosen-results li.highlighted {
    background: var(--cl-azul);
    background-image: none;
}

/* caixa de usuários (relatorio.form.usuario.tpl.php) */
.cl-rel .tela_ini_rel > form .multiple-select-box {
    overflow: hidden;
    border: 1px solid var(--cl-borda) !important;
    border-radius: 8px;
}

.cl-rel .tela_ini_rel > form .multiple-select-box-control {
    padding: 8px 10px;
    background: #F7F9FD;
    border-bottom: 1px solid var(--cl-borda) !important;
}

.cl-rel .tela_ini_rel > form .multiple-select-box-itens {
    padding: 6px 10px;
    line-height: 26px;
}

.cl-rel .tela_ini_rel > form .multiple-select-box label {
    float: none;
    width: auto;
    padding: 0;
    text-align: left;
    cursor: pointer;
}

/* campos lado a lado, cada um com o rótulo em cima (ex.: mês/ano do Ranking de Vendedores) */
.cl-rel .tela_ini_rel > form > div.cl-rel-campos {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px 20px;
}

.cl-rel .tela_ini_rel > form .cl-rel-campo {
    flex: 0 0 auto;
    max-width: 100%;
}

.cl-rel .tela_ini_rel > form .cl-rel-campo > b {
    display: block;
    margin-top: 0;
}

.cl-rel .tela_ini_rel > form .cl-rel-campo select:not([multiple]) {
    background-color: #FFFFFF;
}

/* par que não se separa na quebra de linha (mês + ano) */
.cl-rel .tela_ini_rel > form .cl-rel-par {
    display: flex;
    gap: 12px;
}

/* área dos botões (div com clear: both no fim do form) */
.cl-rel .tela_ini_rel > form > div[style*="clear"] {
    display: flex;
    flex: 1 1 100%;
    justify-content: center;
    gap: 12px;
    margin-top: 18px !important;
    padding: 16px 20px 0 !important;
    border-left: 0 !important;
    border-top: 1px solid var(--cl-borda);
}

/* botões dentro de <center> (ex.: Evolução de Metas): o gap acima não chegava neles e, quebrando a
   linha no celular, ficavam grudados um sobre o outro */
.cl-rel .tela_ini_rel > form > div[style*="clear"] > center {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.cl-rel .tela_ini_rel > form input[type="submit"],
.cl-rel .tela_ini_rel > form input[type="button"] {
    min-width: 140px;
    height: 42px;
    padding: 0 26px;
    font-family: var(--cl-fonte);
    font-size: 15px;
    font-weight: 600;
    color: #FFFFFF;
    background: var(--cl-azul);
    border: 1.5px solid var(--cl-azul);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .15s;
}

.cl-rel .tela_ini_rel > form input[type="submit"]:hover {
    background: var(--cl-azul-escuro);
}

/* "Fechar" vem como <a><input type=submit></a>; fica azul como o "Enviar" */
.cl-rel .tela_ini_rel > form input[type="button"]:hover {
    background: var(--cl-azul-escuro);
}

@media (max-width: 900px) {
    body.cl-rel {
        padding: 12px;
    }

    .cl-rel .cl-rel-titulo {
        width: auto !important;
    }

    .cl-rel .tela_ini_rel > form {
        flex-direction: column;
        padding: 12px 0 16px;
    }

    .cl-rel .tela_ini_rel > form > div {
        padding: 6px 16px 10px !important;
        border-left: 0 !important;
        border-top: 1px solid var(--cl-borda) !important;
    }

    .cl-rel .tela_ini_rel > form > div:first-of-type {
        border-top: 0 !important;
    }

    .cl-rel .tela_ini_rel > form .chosen-container,
    .cl-rel .tela_ini_rel > form .multiple-select-box {
        width: 100% !important;
        max-width: 100%;
    }

    .cl-rel .tela_ini_rel > form input[type="text"] {
        font-size: 16px;
    }

    /* campo solto (ex.: Região) ocupa a linha toda; os pares mês + ano ficam embaixo */
    .cl-rel .tela_ini_rel > form .cl-rel-campos > .cl-rel-campo {
        flex: 1 1 100%;
    }

    /* nada do filtro pode alargar o card além da tela: um combo com largura fixa (País 330px) ou
       opção comprida (Motivo) deixava a página mais larga que a tela, e o Chrome do celular reduzia
       o zoom (card estreito, campos passando da borda) */
    .cl-rel .tela_ini_rel > form,
    .cl-rel .tela_ini_rel > form > div {
        min-width: 0;
        max-width: 100%;
    }

    .cl-rel .tela_ini_rel > form select,
    .cl-rel .tela_ini_rel > form input[type="text"] {
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* datas: as duas (com o ícone do calendário) cabem numa linha e "Data final" fica sobre a segunda */
    .cl-rel .tela_ini_rel > form input.data {
        width: calc(50% - 40px);
        min-width: 0;
        padding: 0 6px;
    }

    .cl-rel .tela_ini_rel > form input.data + .ui-datepicker-trigger {
        width: 22px;
        padding: 2px;
        margin: 0 4px 0 2px;
    }

    .cl-rel .tela_ini_rel > form b:has(+ span[style*="margin-left:30px"]),
    .cl-rel .tela_ini_rel > form b:has(+ label[style*="margin-left:30px"]) {
        width: calc(50% - 3px);
    }

    .cl-rel .tela_ini_rel > form span[style*="margin-left:30px"],
    .cl-rel .tela_ini_rel > form label[style*="margin-left:30px"] {
        margin-left: 0 !important;
    }

    /* Enviar e Fechar cabem lado a lado mesmo com o padding maior de algumas telas (Evolução de Metas) */
    .cl-rel .tela_ini_rel > form input[type="submit"],
    .cl-rel .tela_ini_rel > form input[type="button"] {
        min-width: 120px;
        padding: 0 18px;
    }

    /* produto com busca (Relatorio::comboProdutoBusca, celular sem chosen): busca e lista na largura toda */
    .cl-rel .tela_ini_rel > form #pro_id_busca,
    .cl-rel .tela_ini_rel > form select#pro_id {
        display: block;
        width: 100% !important;
    }

    .cl-rel .tela_ini_rel > form #pro_id_busca {
        height: 36px;
        margin-bottom: 6px;
        font-size: 16px;
    }
}

/* ==========================================================================
   Agenda do Dia (relatorio.followup.php, popup aberto no login) — body.cl-rel.cl-agenda-dia
   Filtro num card e as seções (aniversários, contatos, agenda, tarefas...) em cards numa grade.
   ========================================================================== */

.cl-agenda-dia .aviso-followup {
    margin: 0 0 14px;
    padding: 14px 18px;
    background: #FFF3E6;
    border: 1px solid #FBD9B5;
    border-radius: var(--cl-raio);
}

.cl-agenda-dia .aviso-followup h3 {
    margin: 0 0 6px;
    padding: 0;
    background: none;
    font-size: 14px;
    font-weight: 700;
    color: var(--cl-texto);
}

.cl-agenda-dia .aviso-followup-content {
    font-size: 13px;
    line-height: 1.5;
}

.cl-agenda-dia .followup {
    border: 0;
    padding: 0;
}

/* filtro */
.cl-agenda-dia .cl-agenda-dia-filtro {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
    margin-bottom: 14px;
    padding: 14px 18px;
    background: var(--cl-card);
    border-radius: var(--cl-raio);
    box-shadow: var(--cl-sombra);
}

.cl-agenda-dia .cl-agenda-dia-campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cl-agenda-dia .cl-agenda-dia-campo > b {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cl-texto-suave);
}

.cl-agenda-dia .cl-agenda-dia-usuario {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cl-agenda-dia .cl-agenda-dia-filtro select,
.cl-agenda-dia .cl-agenda-dia-filtro input[type="text"] {
    box-sizing: border-box;
    height: 36px;
    padding: 0 10px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    color: var(--cl-texto);
    background: #FFFFFF;
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
}

.cl-agenda-dia .cl-agenda-dia-filtro select {
    width: 225px;
    max-width: 100%;
}

.cl-agenda-dia .cl-agenda-dia-filtro input.data {
    width: 130px;
}

.cl-agenda-dia .cl-agenda-dia-filtro .ui-datepicker-trigger {
    margin-left: 4px;
}

.cl-agenda-dia .cl-agenda-dia-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    float: none;
    width: auto;
    padding: 0;
    font-size: 12.5px;
    color: var(--cl-texto-suave);
    white-space: nowrap;
    cursor: pointer;
}

.cl-agenda-dia .cl-agenda-dia-check input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--cl-azul);
}

.cl-agenda-dia input[type="submit"],
.cl-agenda-dia input[type="submit"]:hover,
.cl-agenda-dia input[type="submit"]:focus,
.cl-agenda-dia input[type="submit"]:active {
    min-width: 120px;
    height: 36px;
    padding: 0 22px;
    font-family: var(--cl-fonte);
    font-size: 14px;
    font-weight: 600;
    color: #FFFFFF;
    background: var(--cl-azul);
    border: 1.5px solid var(--cl-azul);
    border-radius: 8px;
    cursor: pointer;
}

.cl-agenda-dia input[type="submit"]:hover {
    background: var(--cl-azul-escuro);
    border-color: var(--cl-azul-escuro);
}

/* seções em cards, uma embaixo da outra (na ordem de antes) */
.cl-agenda-dia .cl-agenda-dia-secoes {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 14px;
}

.cl-agenda-dia .cl-agenda-dia-secoes > div {
    padding: 12px 16px 14px;
    background: var(--cl-card);
    border-radius: var(--cl-raio);
    box-shadow: var(--cl-sombra);
}

.cl-agenda-dia .cl-agenda-dia-secoes h4 {
    margin: 0 0 8px;
    padding: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--cl-texto);
    background: none;
    border-bottom: 1px solid var(--cl-borda);
}

.cl-agenda-dia .cl-agenda-dia-secoes ul {
    margin: 0;
    padding: 0;
}

/* os itens vêm do PHP com <b>, <div> e texto soltos: tudo na mesma linha, quebrando como texto */
.cl-agenda-dia .cl-agenda-dia-secoes li {
    display: block;
    padding: 7px 0;
    font-size: 12.5px;
    line-height: 1.5;
    list-style: none;
    color: var(--cl-texto);
    border-bottom: 1px solid #EEF2F8;
}

.cl-agenda-dia .cl-agenda-dia-secoes li:last-child {
    border-bottom: 0;
}

.cl-agenda-dia .cl-agenda-dia-secoes li div {
    display: inline;
}

.cl-agenda-dia .cl-agenda-dia-secoes li input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin: 0 6px 0 2px;
    vertical-align: -3px;
    accent-color: var(--cl-azul);
}

/* contato feito (marcado): riscado em fundo laranja claro */
.cl-agenda-dia .cl-agenda-dia-secoes li.checked {
    color: var(--cl-texto-suave);
    text-decoration: line-through;
    background: #FFF8F0;
}

.cl-agenda-dia .cl-agenda-dia-secoes a {
    color: var(--cl-texto);
    text-decoration: none;
}

.cl-agenda-dia .cl-agenda-dia-secoes a:hover {
    color: var(--cl-laranja-escuro);
}

.cl-agenda-dia .cl-agenda-dia-secoes b {
    font-weight: 600;
}

.cl-agenda-dia .cl-agenda-dia-fechar {
    display: flex;
    justify-content: center;
    margin: 18px 0 4px;
}

@media (max-width: 760px) {
    .cl-agenda-dia .cl-agenda-dia-usuario {
        flex-wrap: wrap;
    }
}

@media print {
    .cl-agenda-dia .cl-agenda-dia-secoes > div {
        box-shadow: none;
        border: 1px solid var(--cl-borda);
    }
}

/* ==========================================================================
   Relatórios — tela de resultados (body.cl-rel.cl-rel-resultado)
   Partes comuns a todos os relatórios: cabeçalho "Emitido por", barra do
   usuário (h3.head1), tabelas (conteudo_rel_grid), totais e botões do rodapé.
   ========================================================================== */

/* título + ícones de exportar/imprimir */
.cl-rel-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.cl-rel .cl-rel-topo .cl-rel-titulo h2 {
    margin: 4px 0;
}

.cl-rel-acoes {
    display: flex;
    gap: 8px;
}

.cl-rel-acao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: #FFFFFF;
    border: 1px solid var(--cl-borda);
    border-radius: 10px;
    transition: background-color .15s, border-color .15s;
}

.cl-rel-acao:hover {
    background: #FFF8F0;
    border-color: var(--cl-laranja);
}

.cl-rel-acao img {
    max-width: 28px;
    max-height: 28px;
}

.cl-rel-resultado .tela_ini_rel {
    padding: 18px 20px 20px;
    background: var(--cl-card);
    border-radius: var(--cl-raio);
    box-shadow: var(--cl-sombra);
}

/* quadro "Emitido por / Período / Filtros" (Relatorio::getHeader) */
.cl-rel-cabecalho {
    margin-bottom: 16px;
    padding: 12px 16px;
    line-height: 1.75;
    border: 1px solid #D5DCE9;
    border-radius: 10px;
}

.cl-rel-cabecalho b {
    font-weight: 600;
}

/* o texto termina sempre com uma quebra de linha sobrando */
.cl-rel-cabecalho > br:last-child {
    display: none;
}

/* barra de agrupamento (Usuário: ...), abre/fecha a tabela */
.cl-rel-resultado h3.head1 {
    margin: 18px 0 10px;
    padding: 10px 40px 10px 14px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--cl-texto);
    background: #EEF1F6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6785' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 18px;
    border-radius: 8px;
    cursor: pointer;
}

/* faixa de agrupamento sem abre/fecha (ex.: Ano / Usuário no painel de evolução de metas) */
.cl-rel .cl-rel-grupo {
    margin: 18px 0 10px;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--cl-texto);
    background: #EEF1F6;
    border-radius: 8px;
}

/* combo de ano acima da barra do usuário (painel.evolucao.metas, quem só vê os próprios dados) */
.cl-rel .cl-rel-ano {
    margin: 0 0 12px;
}

.cl-rel .cl-rel-ano form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.cl-rel .cl-rel-ano b {
    font-size: 13px;
    font-weight: 600;
    color: var(--cl-texto-suave);
}

.cl-rel .cl-rel-ano select {
    box-sizing: border-box;
    height: 38px;
    min-width: 110px;
    padding: 0 12px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    font-weight: 600;
    color: var(--cl-texto);
    background-color: #FFFFFF;
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
    cursor: pointer;
}

.cl-rel .cl-rel-ano select:focus {
    border-color: var(--cl-azul);
    outline: 2px solid rgba(21, 112, 239, .15);
}

@media print {
    .cl-rel .cl-rel-ano select {
        border: 0;
        padding: 0;
        -webkit-appearance: none;
        appearance: none;
    }
}

.cl-rel .cl-rel-grupo:first-child {
    margin-top: 0;
}

.cl-rel .cl-rel-grupo b {
    font-weight: 600;
}

.cl-rel .cl-rel-grupo form {
    margin: 0;
}

.cl-rel-resultado h3.head1.h3-fechado {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6785' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
}

.cl-rel-resultado h3.head1 b {
    font-weight: 600;
}

/* cabeçalho das tabelas: laranja no lugar do azul */
.cl-rel-resultado th {
    padding: 9px 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cl-texto);
    background: linear-gradient(180deg, #FBBF85 0%, #FDDBB9 100%);
}

.cl-rel-resultado .tablesorter .header,
.cl-rel-resultado .tablesorter .tablesorter-header {
    padding: 9px 26px 9px 10px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F1E4A' stroke-opacity='.45' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 10l4-4 4 4M8 14l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 6px center / 15px, linear-gradient(180deg, #FBBF85 0%, #FDDBB9 100%);
}

.cl-rel-resultado .tablesorter .headerSortUp,
.cl-rel-resultado .tablesorter .tablesorter-headerSortUp,
.cl-rel-resultado .tablesorter .tablesorter-headerAsc {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F1E4A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 14l4-4 4 4'/%3E%3C/svg%3E") no-repeat right 6px center / 15px, linear-gradient(180deg, #FBBF85 0%, #FDDBB9 100%);
}

.cl-rel-resultado .tablesorter .headerSortDown,
.cl-rel-resultado .tablesorter .tablesorter-headerSortDown,
.cl-rel-resultado .tablesorter .tablesorter-headerDesc {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F1E4A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 10l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 6px center / 15px, linear-gradient(180deg, #FBBF85 0%, #FDDBB9 100%);
}

/* o tablesorter repete a classe de ordenação na célula do rodapé */
.cl-rel-resultado .tablesorter tfoot .tablesorter-headerSortUp,
.cl-rel-resultado .tablesorter tfoot .tablesorter-headerSortDown,
.cl-rel-resultado .tablesorter tfoot .tablesorter-headerAsc,
.cl-rel-resultado .tablesorter tfoot .tablesorter-headerDesc {
    padding: 9px 10px;
    background: none;
}

.cl-rel-resultado thead th:first-child {
    border-top-left-radius: 8px;
}

.cl-rel-resultado thead th:last-child {
    border-top-right-radius: 8px;
}

/* linhas */
.cl-rel-resultado table.conteudo_rel_grid {
    border-collapse: collapse;
}

.cl-rel-resultado .conteudo_rel_grid td {
    padding: 7px 10px;
    font-size: 12.5px;
    border-bottom: 1px solid #EEF2F8;
}

.cl-rel-resultado .conteudo_rel_grid tbody tr:nth-child(2n+2) {
    background-color: #FAFBFD;
}

.cl-rel-resultado .conteudo_rel_grid tbody tr:not(.head2):not(.head2a):hover {
    background-color: #FFF8F0;
}

.cl-rel-resultado .conteudo_rel_grid a {
    color: var(--cl-texto);
}

.cl-rel-resultado .conteudo_rel_grid a:hover {
    color: var(--cl-laranja-escuro);
}

/* subtotais (mês / agência) e total do grupo */
.cl-rel-resultado .conteudo_rel_grid tr.head2,
.cl-rel-resultado .conteudo_rel_grid tr.head2a {
    height: auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--cl-texto);
    background-color: #FFF3E6;
}

.cl-rel-resultado .conteudo_rel_grid tr.head2a {
    background-color: #EEF1F6;
}

.cl-rel-resultado .conteudo_rel_grid tr.head2 td,
.cl-rel-resultado .conteudo_rel_grid tr.head2a td {
    font-size: 12px;
}

.cl-rel-resultado .conteudo_rel_grid tfoot tr,
.cl-rel-resultado .cl-rel-totais tfoot tr {
    background: #F4F7FC !important;
}

.cl-rel-resultado .conteudo_rel_grid tfoot td {
    padding: 9px 10px;
    font-size: 13px;
    border-top: 2px solid var(--cl-borda);
    border-bottom: 0;
}

/* totais gerais do relatório */
.cl-rel-resultado table.cl-rel-totais {
    margin: 24px 0 14px;
    border-collapse: collapse;
}

.cl-rel-resultado .cl-rel-totais td {
    padding: 11px 10px;
    font-size: 14px;
}

/* botões Voltar / Fechar, os dois azuis (o common.js aplica o .button() do jQuery UI) */
.cl-rel .noprint p {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 22px 0 0;
}

.cl-rel .noprint input.button,
.cl-rel .noprint input.button:hover,
.cl-rel .noprint input.button:focus,
.cl-rel .noprint input.button:active {
    min-width: 140px;
    height: 42px;
    padding: 0 26px;
    font-family: var(--cl-fonte);
    font-size: 15px;
    font-weight: 600;
    color: #FFFFFF;
    background: var(--cl-azul);
    border: 1.5px solid var(--cl-azul);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .15s;
}

.cl-rel .noprint input.button:hover {
    background: var(--cl-azul-escuro);
    border-color: var(--cl-azul-escuro);
}

@media (max-width: 900px) {
    .cl-rel-topo {
        flex-wrap: wrap;
    }

    .cl-rel-resultado .tela_ini_rel {
        padding: 14px 12px 16px;
        overflow-x: auto;
    }

    /* gráficos lado a lado (float 69% / 29%) passam a empilhar */
    .cl-rel-resultado div[id^="graf_"] {
        float: none !important;
        width: 100% !important;
    }
}

@media print {
    body.cl-rel {
        padding: 0;
        background: #FFFFFF;
    }

    .cl-rel-topo {
        margin-bottom: 6px;
    }

    .cl-rel-resultado .tela_ini_rel {
        padding: 0;
        border-radius: 0;
        box-shadow: none;
    }
}

/* ==========================================================================
   Resultados que vêm dentro de um <form> (Migrar Carteira, Exclusão em massa):
   a lista de clientes com caixas de seleção e, no fim, o quadro da ação.
   ========================================================================== */

/* o <form> do resultado também é filho direto de .tela_ini_rel: não é o card do filtro */
.cl-rel.cl-rel-resultado .tela_ini_rel > form {
    display: block;
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
}

/* dentro desse <form> as regras de rótulo e link do filtro (form b, form b a) não valem para a tabela:
   cliente em preto, com link e sem sublinhado, como nos outros relatórios */
.cl-rel.cl-rel-resultado .tela_ini_rel > form .conteudo_rel_grid b {
    display: inline;
    margin: 0;
    font-size: inherit;
    font-weight: 700;
}

.cl-rel.cl-rel-resultado .tela_ini_rel > form .conteudo_rel_grid b a,
.cl-rel.cl-rel-resultado .tela_ini_rel > form .conteudo_rel_grid b a:hover {
    margin-left: 0;
    font-size: inherit !important;
    font-weight: inherit;
    color: var(--cl-texto) !important;
    text-decoration: none;
}

.cl-rel.cl-rel-resultado .tela_ini_rel > form .conteudo_rel_grid b a:hover {
    color: var(--cl-laranja-escuro) !important;
}

.cl-rel-resultado .cl-rel-contagem {
    margin: 4px 0 10px;
    font-size: 13px;
    color: var(--cl-texto-suave);
}

.cl-rel-resultado fieldset.cl-rel-acao-final {
    min-width: 0;
    margin: 18px 0 4px;
    padding: 12px 18px 16px;
    background: #F7F9FD;
    border: 1px solid var(--cl-borda);
    border-radius: 10px;
}

.cl-rel-resultado fieldset.cl-rel-acao-final legend {
    padding: 0 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cl-texto);
}

.cl-rel-resultado fieldset.cl-rel-acao-final table {
    width: auto !important;
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 8px 6px;
}

.cl-rel-resultado fieldset.cl-rel-acao-final td {
    padding: 0;
    vertical-align: middle;
}

.cl-rel-resultado fieldset.cl-rel-acao-final td b {
    margin: 0;
}

.cl-rel-resultado fieldset.cl-rel-acao-final tr:last-child td {
    padding-top: 8px;
}

/* aviso de sucesso do Migrador de Leads (template/import/migrar.leads.form.tpl.php) */
.cl-rel .tela_ini_rel > form > .flash-message {
    flex: 1 1 100%;
    margin: 0 20px 14px !important;
    padding: 12px 16px !important;
    font-size: 13px;
    color: #0E6245;
    background: #E8F7EF;
    border: 1px solid #BFE8D2 !important;
    border-radius: 10px;
}

.cl-rel .tela_ini_rel > form > .flash-message b {
    margin: 0;
}

/* ação que apaga dados: quadro e botão em vermelho */
.cl-rel-resultado fieldset.cl-rel-acao-perigo {
    background: #FEF3F2;
    border-color: #F9CFCB;
}

.cl-rel-resultado fieldset.cl-rel-acao-perigo div[style*="color"] {
    margin-bottom: 4px;
    color: var(--cl-vermelho) !important;
}

.cl-rel .tela_ini_rel > form input[type="submit"].cl-btn-perigo,
.cl-rel .tela_ini_rel > form input[type="submit"].cl-btn-perigo:hover,
.cl-rel .tela_ini_rel > form input[type="submit"].cl-btn-perigo:focus,
.cl-rel .tela_ini_rel > form input[type="submit"].cl-btn-perigo:active {
    color: #FFFFFF;
    background: var(--cl-vermelho);
    border-color: var(--cl-vermelho);
}

.cl-rel .tela_ini_rel > form input[type="submit"].cl-btn-perigo:hover {
    background: #C62828;
    border-color: #C62828;
}

@media (max-width: 767px) {
    .cl-rel-resultado fieldset.cl-rel-acao-final table,
    .cl-rel-resultado fieldset.cl-rel-acao-final tbody,
    .cl-rel-resultado fieldset.cl-rel-acao-final tr,
    .cl-rel-resultado fieldset.cl-rel-acao-final td {
        display: block;
        width: 100% !important;
    }

    .cl-rel-resultado fieldset.cl-rel-acao-final select {
        width: 100% !important;
    }
}

/* ==========================================================================
   Resumo da Ópera (resumo.opera.php, body.cl-rel.cl-resumo)
   O HTML é montado em PHP com <p><font size=4> como título de cada seção e
   uma <table> por seção; o visual é dado aqui, sem classes por seção.
   ========================================================================== */

.cl-resumo .conteudo_rel {
    margin: 0;
    padding: 18px 20px 20px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    color: var(--cl-texto);
    background: var(--cl-card);
    border-radius: var(--cl-raio);
    box-shadow: var(--cl-sombra);
}

/* dados do cliente: razão social, endereços, contatos e comentário */
.cl-resumo .cl-resumo-cliente {
    margin: 0 0 4px;
    padding: 12px 16px;
    line-height: 1.75;
    border: 1px solid #D5DCE9;
    border-radius: 10px;
}

.cl-resumo .cl-resumo-cliente b {
    font-weight: 600;
}

.cl-resumo .cl-resumo-cliente font[size="4"] {
    font-size: 17px;
}

.cl-resumo .cl-resumo-cliente img {
    vertical-align: middle;
}

.cl-resumo .cl-resumo-cliente + table {
    margin-top: 14px;
}

/* título de cada seção, com a observação ao lado ("3 últimas") */
.cl-resumo .conteudo_rel > p:not(.cl-resumo-cliente) {
    margin: 22px 0 8px;
    font-size: 12px;
    color: var(--cl-texto-suave);
}

.cl-resumo .conteudo_rel font[size="4"] {
    font-size: 15px;
    font-weight: 600;
    color: var(--cl-texto);
}

.cl-resumo .conteudo_rel > p b {
    font-weight: 600;
}

/* tabelas das seções (algumas sem cabeçalho) */
.cl-resumo .conteudo_rel table {
    width: 100%;
    border: 1px solid var(--cl-borda) !important;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 8px;
    overflow: hidden;
}

.cl-resumo .conteudo_rel td {
    padding: 7px 10px;
    font-size: 12.5px;
    vertical-align: top;
    border-bottom: 1px solid #EEF2F8;
}

.cl-resumo .conteudo_rel tr:last-child > td {
    border-bottom: 0;
}

.cl-resumo .conteudo_rel tbody tr:hover {
    background: #FFF8F0;
}

.cl-resumo .conteudo_rel thead th:first-child {
    border-top-left-radius: 0;
}

.cl-resumo .conteudo_rel thead th:last-child {
    border-top-right-radius: 0;
}

.cl-resumo .conteudo_rel a {
    color: var(--cl-texto);
}

.cl-resumo .conteudo_rel a:hover {
    color: var(--cl-laranja-escuro);
}

.cl-resumo .conteudo_rel font[color] {
    color: var(--cl-vermelho);
}

@media (max-width: 900px) {
    .cl-resumo .conteudo_rel {
        padding: 14px 12px 16px;
        overflow-x: auto;
    }
}

@media print {
    .cl-resumo .conteudo_rel {
        padding: 0;
        border-radius: 0;
        box-shadow: none;
    }
}

/* ==========================================================================
   Avisos e janelas (jQuery UI dialog) — aviso de validação (#avisoValidaForm)
   e demais janelas abertas com .dialog(). Só a moldura (título, fechar, rodapé
   e botões); o conteúdo de cada janela continua com o estilo da própria tela.
   ========================================================================== */

.ui-dialog.ui-widget.ui-widget-content {
    padding: 0;
    font-family: var(--cl-fonte);
    font-size: 14px;
    color: var(--cl-texto);
    background: #FFFFFF;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(15, 30, 74, .28);
}

.ui-dialog .ui-dialog-titlebar {
    padding: 14px 52px 12px 20px;
    color: var(--cl-texto);
    background: #FFFFFF;
    border: 0;
    border-bottom: 1px solid var(--cl-borda);
    border-radius: 12px 12px 0 0;
}

.ui-dialog .ui-dialog-title {
    float: none;
    display: block;
    width: auto;
    margin: 0;
    font-family: var(--cl-fonte);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

.ui-dialog .ui-dialog-titlebar-close,
.ui-dialog .ui-dialog-titlebar-close:hover,
.ui-dialog .ui-dialog-titlebar-close:focus,
.ui-dialog .ui-dialog-titlebar-close:active {
    right: 12px;
    width: 30px;
    height: 30px;
    margin: -15px 0 0;
    padding: 0;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .15s;
}

.ui-dialog .ui-dialog-titlebar-close:hover,
.ui-dialog .ui-dialog-titlebar-close:focus {
    background-color: #EEF2F8;
}

.ui-dialog .ui-dialog-titlebar-close .ui-icon {
    display: none;
}

/* janela de endereço do cadastro de clientes (template/endereco.ajax.tpl.php): rótulos <b> + <br>, campos e "Buscar" */
.ui-dialog #adicionaEndereco b {
    display: inline-block;
    margin: 8px 0 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cl-texto-suave);
}

.ui-dialog #adicionaEndereco > b:first-child {
    margin-top: 0;
}

.ui-dialog #adicionaEndereco input[type="text"],
.ui-dialog #adicionaEndereco select {
    box-sizing: border-box;
    height: 36px;
    padding: 0 10px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    color: var(--cl-texto);
    background-color: #FFFFFF;
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
}

.ui-dialog #adicionaEndereco select {
    max-width: 100%;
}

.ui-dialog #adicionaEndereco input[type="text"]:focus,
.ui-dialog #adicionaEndereco select:focus {
    outline: none;
    border-color: var(--cl-laranja);
}

.ui-dialog #adicionaEndereco #botaoBuscarCep,
.ui-dialog #adicionaEndereco #botaoBuscarCep:hover,
.ui-dialog #adicionaEndereco #botaoBuscarCep:focus,
.ui-dialog #adicionaEndereco #botaoBuscarCep:active {
    height: 36px;
    margin: 0 0 0 6px !important;
    padding: 0 16px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    font-weight: 600;
    line-height: 34px;
    color: #FFFFFF;
    background: var(--cl-azul);
    border: 1px solid var(--cl-azul);
    border-radius: 8px;
    vertical-align: top;
    cursor: pointer;
}

.ui-dialog #adicionaEndereco #botaoBuscarCep:hover {
    background: var(--cl-azul-escuro);
    border-color: var(--cl-azul-escuro);
}

.ui-dialog #adicionaEndereco #divCheckEndPrincipal {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ui-dialog #adicionaEndereco #divCheckEndPrincipal b {
    margin: 0;
    color: var(--cl-texto);
}

.ui-dialog #adicionaEndereco #checkEndPrincipal {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--cl-azul);
}

.ui-dialog .ui-dialog-content {
    padding: 16px 20px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    line-height: 1.5;
    color: var(--cl-texto);
}

.ui-dialog .ui-dialog-buttonpane {
    margin-top: 0;
    padding: 12px 20px;
    background: #FFFFFF;
    border-color: var(--cl-borda);
    border-radius: 0 0 12px 12px;
}

.ui-dialog .ui-dialog-buttonpane button,
.ui-dialog .ui-dialog-buttonpane button:hover,
.ui-dialog .ui-dialog-buttonpane button:focus,
.ui-dialog .ui-dialog-buttonpane button:active {
    min-width: 88px;
    height: 38px;
    margin: 0 0 0 8px;
    padding: 0 18px;
    font-family: var(--cl-fonte);
    font-size: 14px;
    font-weight: 600;
    color: #FFFFFF;
    background: var(--cl-azul);
    border: 1.5px solid var(--cl-azul);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .15s;
}

.ui-dialog .ui-dialog-buttonpane button:hover {
    background: var(--cl-azul-escuro);
    border-color: var(--cl-azul-escuro);
}

/* o primeiro botão já abre com o foco: mantém o azul e só marca com um contorno */
.ui-dialog .ui-dialog-buttonpane button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(21, 112, 239, .25);
}

/* fundo das janelas modais */
.ui-widget-overlay {
    background: #0F1E4A;
    opacity: .45;
}

@media (max-width: 480px) {
    .ui-dialog.ui-widget.ui-widget-content {
        max-width: calc(100vw - 24px);
    }
}

/* ==========================================================================
   Listas de sugestões (jQuery UI autocomplete) — busca de cliente do Kanban,
   acesso rápido do topo e demais campos com .autocomplete(). Global, como os avisos.
   ========================================================================== */

.ui-autocomplete.ui-menu {
    max-width: calc(100vw - 24px);
    max-height: 320px;
    padding: 6px 0;
    overflow-x: hidden;
    overflow-y: auto;
    font-family: var(--cl-fonte);
    font-size: 13px;
    background: #FFFFFF;
    border: 1px solid var(--cl-borda);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(15, 30, 74, .16);
}

.ui-autocomplete.ui-menu .ui-menu-item-wrapper {
    padding: 7px 14px;
    color: var(--cl-texto);
    border: 0;
    border-radius: 0;
}

.ui-autocomplete.ui-menu .ui-menu-item-wrapper.ui-state-active {
    margin: 0;
    color: var(--cl-texto);
    background: #FFF3E6;
    border: 0;
}

/* ==========================================================================
   Calendário (jQuery UI datepicker) — todos os campos de data com .datepicker().
   Cabeçalho laranja, dias sem blocos azuis, hoje com contorno e dia escolhido em
   laranja. Global, como os avisos e as listas de sugestões.
   ========================================================================== */

/* ícone que abre o calendário (imagens/icones/calendario-laranja.svg, configCalendario no common.js) */
img.ui-datepicker-trigger {
    box-sizing: content-box;
    width: 20px;
    height: 20px;
    padding: 4px;
    vertical-align: middle;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color .15s;
}

img.ui-datepicker-trigger:hover {
    background: #FFF3E6;
}

.ui-datepicker.ui-widget.ui-widget-content {
    width: 272px;
    padding: 10px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    color: var(--cl-texto);
    background: #FFFFFF;
    border: 1px solid var(--cl-borda);
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(15, 30, 74, .18);
}

/* o jQuery UI põe z-index 1 inline no calendário; precisa ficar acima do menu (.cl-header, z-index 50) */
#ui-datepicker-div {
    z-index: 10000 !important;
}

.ui-datepicker .ui-datepicker-header.ui-widget-header {
    padding: 6px 0;
    color: #FFFFFF;
    background: var(--cl-laranja);
    border: 0;
    border-radius: 8px;
}

/* mês e ano */
.ui-datepicker .ui-datepicker-title {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 0 34px;
    line-height: 28px;
}

.ui-datepicker .ui-datepicker-title select.ui-datepicker-month,
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year {
    flex: 0 1 auto;
    width: auto;
    height: 28px;
    margin: 0;
    padding: 0 4px 0 8px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    font-weight: 600;
    color: var(--cl-texto);
    background-color: #FFFFFF;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

/* setas de mês anterior / próximo: chevron branco no lugar do ícone azul */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next,
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
    top: 6px;
    width: 28px;
    height: 28px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-prev-hover {
    left: 4px;
}

.ui-datepicker .ui-datepicker-next,
.ui-datepicker .ui-datepicker-next-hover {
    right: 4px;
}

.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
    background: rgba(255, 255, 255, .22);
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
    display: none;
}

.ui-datepicker .ui-datepicker-prev::after,
.ui-datepicker .ui-datepicker-next::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-top: 2px solid #FFFFFF;
    border-left: 2px solid #FFFFFF;
}

.ui-datepicker .ui-datepicker-prev::after {
    transform: translate(-30%, -50%) rotate(-45deg);
}

.ui-datepicker .ui-datepicker-next::after {
    transform: translate(-70%, -50%) rotate(135deg);
}

.ui-datepicker .ui-datepicker-prev.ui-state-disabled,
.ui-datepicker .ui-datepicker-next.ui-state-disabled {
    opacity: .35;
}

/* dias */
.ui-datepicker table {
    margin: 6px 0 0;
    font-size: 12.5px;
    border-collapse: collapse;
}

/* o th global dos relatórios/style.css tem fundo e borda: aqui fica limpo */
.ui-datepicker th,
.ui-datepicker thead th {
    padding: 6px 0 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--cl-texto-suave);
    background: none;
    border: 0;
}

.ui-datepicker td {
    padding: 1px;
}

.ui-datepicker td .ui-state-default {
    padding: 6px 0;
    text-align: center;
    color: var(--cl-texto);
    background: transparent;
    border: 0;
    border-radius: 6px;
}

.ui-datepicker td a.ui-state-default:hover,
.ui-datepicker td a.ui-state-default.ui-state-hover {
    color: var(--cl-laranja-escuro);
    background: #FFF3E6;
    border: 0;
}

/* hoje */
.ui-datepicker td.ui-datepicker-today .ui-state-default,
.ui-datepicker td .ui-state-default.ui-state-highlight {
    font-weight: 700;
    color: var(--cl-laranja-escuro);
    background: transparent;
    border: 0;
    box-shadow: inset 0 0 0 1.5px var(--cl-laranja);
}

/* dia escolhido */
.ui-datepicker td .ui-state-default.ui-state-active,
.ui-datepicker td .ui-state-default.ui-state-active:hover {
    font-weight: 700;
    color: #FFFFFF;
    background: var(--cl-laranja);
    border: 0;
    box-shadow: none;
}

.ui-datepicker td.ui-datepicker-other-month .ui-state-default,
.ui-datepicker td.ui-state-disabled .ui-state-default {
    color: #B4BCCB;
}

/* hora e minuto (jquery-ui-timepicker-addon, ex.: Novo compromisso da Agenda) */
.ui-datepicker .ui-timepicker-div {
    padding: 6px 4px 0;
    font-size: 12.5px;
}

.ui-datepicker .ui-timepicker-div dl dt {
    padding: 4px 0;
    color: var(--cl-texto-suave);
}

.ui-datepicker .ui-timepicker-div select {
    height: 28px;
    padding: 0 6px;
    font-family: var(--cl-fonte);
    font-size: 12.5px;
    color: var(--cl-texto);
    background: #FFFFFF;
    border: 1px solid var(--cl-borda);
    border-radius: 6px;
}

.ui-datepicker .ui_tpicker_time {
    font-weight: 600;
    color: var(--cl-texto);
}

/* rodapé (Hoje / Fechar), quando o campo usa showButtonPanel */
.ui-datepicker .ui-datepicker-buttonpane {
    margin: 8px 0 0;
    padding: 8px 0 0;
    border-color: var(--cl-borda);
}

.ui-datepicker .ui-datepicker-buttonpane button,
.ui-datepicker .ui-datepicker-buttonpane button:hover {
    margin: 0 0 0 6px;
    padding: 4px 12px;
    font-family: var(--cl-fonte);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cl-laranja-escuro);
    background: #FFF3E6;
    border: 0;
    border-radius: 6px;
    opacity: 1;
}

/* ==========================================================================
   Envio de arquivos (Fine Uploader, ArquivoUpload::campo) — botão "Fazer upload de
   arquivo" azul no padrão. Global: vale para HR, cliente, tabela de preços e demais
   telas com anexos. O fine-uploader.css é carregado depois, por isso o seletor mais forte.
   ========================================================================== */

.qq-uploader .qq-upload-button.qq-upload-button-selector {
    width: auto;
    height: auto;
    margin: 10px 12px 6px 0;
}

.qq-uploader .qq-upload-button.qq-upload-button-selector > div.ui-button {
    box-sizing: border-box;
    height: 36px;
    padding: 0 18px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    font-weight: 600;
    line-height: 34px;
    color: #FFFFFF;
    background: var(--cl-azul);
    border: 1px solid var(--cl-azul);
    border-radius: 8px;
    box-shadow: none;
    cursor: pointer;
    transition: background-color .15s;
}

.qq-uploader .qq-upload-button.qq-upload-button-hover > div.ui-button,
.qq-uploader .qq-upload-button.qq-upload-button-selector:hover > div.ui-button {
    background: var(--cl-azul-escuro);
    border-color: var(--cl-azul-escuro);
}

.qq-uploader .qq-upload-button.qq-upload-button-focus {
    outline: none;
}

.qq-uploader .qq-upload-button.qq-upload-button-focus > div.ui-button {
    box-shadow: 0 0 0 3px rgba(21, 112, 239, .25);
}

/* ==========================================================================
   Configurações — cadastros simples e telas com tabela montada no PHP
   ========================================================================== */

/* campos que não são type="text" (número, e-mail, senha, hora, data) seguem o mesmo visual */
.cl-pagina .cl-campo > input[type="number"],
.cl-pagina .cl-campo > input[type="email"],
.cl-pagina .cl-campo > input[type="password"],
.cl-pagina .cl-campo > input[type="time"],
.cl-pagina .cl-campo > input[type="date"],
.cl-pagina .cl-campo > input[type="url"],
.cl-pagina .cl-campo-linha > input[type="number"],
.cl-pagina .cl-campo-linha > input[type="time"] {
    box-sizing: border-box;
    width: 100%;
    height: 38px;
    padding: 0 12px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    color: var(--cl-texto);
    background-color: #FFFFFF;
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
}

.cl-pagina .cl-campo > input[type="number"]:focus,
.cl-pagina .cl-campo > input[type="email"]:focus,
.cl-pagina .cl-campo > input[type="password"]:focus,
.cl-pagina .cl-campo > input[type="time"]:focus,
.cl-pagina .cl-campo > input[type="date"]:focus,
.cl-pagina .cl-campo > input[type="url"]:focus {
    border-color: var(--cl-laranja);
}

.cl-pagina .cl-campo > input[readonly] {
    color: var(--cl-texto-suave);
    background-color: #F4F7FC;
}

/* botão na mesma linha dos campos (alinha pela base dos inputs) */
.cl-pagina .cl-campo-botao {
    align-self: end;
}

/* botão menor, do tamanho de um campo (Buscar, Adicionar...), quando é <input> */
.cl-pagina input.cl-btn-campo,
.cl-pagina input.cl-btn-campo:hover,
.cl-pagina input.cl-btn-campo:focus,
.cl-pagina input.cl-btn-campo:active {
    min-width: 0;
    height: 38px;
    padding: 0 18px;
    font-family: var(--cl-fonte);
    font-size: 14px;
    font-weight: 600;
    color: #FFFFFF;
    background: var(--cl-azul);
    border: 1.5px solid var(--cl-azul);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .15s;
}

.cl-pagina input.cl-btn-campo:hover,
.cl-pagina input.cl-btn-campo:active {
    background: var(--cl-azul-escuro);
    border-color: var(--cl-azul-escuro);
}

.cl-pagina .cl-form > .cl-campo-ajuda {
    display: block;
    margin-top: 10px;
}

.cl-pagina .cl-form .cl-form-acoes + .cl-form-secao {
    margin-top: 22px;
}

/* valor só de leitura no lugar do campo (ex.: usuários ativos, espaço utilizado) */
.cl-pagina .cl-campo-valor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    min-height: 38px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cl-texto);
}

.cl-pagina .cl-campo-valor label {
    display: inline-flex;
    float: none;
    align-items: center;
    gap: 6px;
    width: auto;
    padding: 0;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
}

.cl-pagina .cl-campo-valor input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--cl-azul);
}

/* linha que separa grupos dentro de uma tabela (ex.: objeto na matriz de permissões) */
.cl-tabela tbody tr.cl-tabela-grupo td,
.cl-tabela tbody tr.cl-tabela-grupo:hover td {
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 600;
    text-align: left;
    text-transform: capitalize;
    color: var(--cl-texto);
    background: #EEF1F6;
}

.cl-pagina.cl-permissoes .cl-tabela td select {
    width: 86px;
    min-width: 0;
    height: 30px;
    padding: 0 4px;
    font-size: 12.5px;
}

.cl-permissoes .cl-tabela thead th:not(:first-child),
.cl-permissoes .cl-tabela tbody tr:not(.cl-tabela-grupo) td:not(:first-child) {
    padding: 6px 5px;
}

/* tabela com colunas centralizadas (linhas vindas do PHP com align="center") */
.cl-tabela.cl-tabela-centro thead th {
    text-align: center;
}

.cl-tabela.cl-tabela-centro tbody td {
    text-align: center;
}

.cl-tabela.cl-tabela-centro thead th:first-child,
.cl-tabela.cl-tabela-centro tbody td:first-child {
    text-align: left;
}

.cl-tabela.cl-tabela-centro tbody td:first-child:not([colspan]) {
    font-weight: 600;
}

/* lista com altura limitada e rolagem (ex.: RCs que recebem o aviso) */
.cl-pagina .cl-tabela-altura {
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--cl-borda);
    border-radius: 10px;
}

.cl-pagina .cl-tabela-altura thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.cl-pagina .cl-tabela input[type="checkbox"],
.cl-pagina .cl-tabela input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--cl-azul);
}

/* campos dentro de tabela (ex.: valores de comissão por faixa) */
.cl-pagina .cl-tabela td input[type="text"],
.cl-pagina .cl-tabela td input[type="number"],
.cl-pagina .cl-tabela td select {
    box-sizing: border-box;
    height: 34px;
    padding: 0 10px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    color: var(--cl-texto);
    background-color: #FFFFFF;
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
}

.cl-pagina .cl-tabela td input[type="text"]:focus,
.cl-pagina .cl-tabela td input[type="number"]:focus {
    border-color: var(--cl-laranja);
}

.cl-pagina .cl-tabela-campos td input[type="text"] {
    width: 100%;
    min-width: 80px;
}

/* ícones antigos (lápis e lixeira em PNG) que ainda vêm prontos do PHP: trocados pelo traço novo */
.cl-pagina img[src*="pencil-blue-16.png"],
.cl-pagina img[src*="trash-blue-16.png"] {
    box-sizing: content-box;
    width: 18px;
    height: 18px;
    padding: 6px;
    vertical-align: middle;
    border-radius: 8px;
    cursor: pointer;
}

.cl-pagina img[src*="pencil-blue-16.png"] {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231570EF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4l10.5-10.5a2.1 2.1 0 0 0-4-4L4 16v4z'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E");
}

.cl-pagina img[src*="trash-blue-16.png"] {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E5383B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4h6v3'/%3E%3C/svg%3E");
}

.cl-pagina img[src*="pencil-blue-16.png"]:hover {
    background: #EAF2FE;
}

.cl-pagina img[src*="trash-blue-16.png"]:hover {
    background: #FDE8E8;
}

/* Permissões: a matriz (uma coluna por usuário) é mais larga que a tela. Em vez de rolar dentro do card
   (a barra ficava lá embaixo), o card cresce com a tabela e quem rola é o navegador; a coluna da ação
   e a linha dos usuários ficam paradas. */
.cl-permissoes .cl-tabela-card {
    width: max-content;
    min-width: 100%;
    overflow: visible;
}

.cl-permissoes .cl-tabela-rolagem {
    overflow: visible;
}

.cl-permissoes .cl-tabela thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.cl-permissoes .cl-tabela thead tr th:first-child {
    z-index: 3;
}

/* nomes de usuário quebram em vez de alargar a coluna (a coluna da ação fica na largura do texto) */
.cl-permissoes .cl-tabela thead th:not(:first-child) {
    box-sizing: border-box;
    width: 96px;
    min-width: 96px;
    max-width: 96px;
    font-size: 11.5px;
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
    vertical-align: bottom;
}

/* o nome do grupo acompanha a rolagem para o lado (a célula ocupa a largura toda da matriz) */
.cl-permissoes .cl-tabela-grupo-nome {
    position: sticky;
    left: 14px;
    display: inline-block;
}

/* Permissões: a coluna da ação fica parada quando a matriz rola para o lado (uma coluna por usuário) */
.cl-permissoes .cl-tabela thead th:first-child,
.cl-permissoes .cl-tabela tbody tr:not(.cl-tabela-grupo) td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #FFFFFF;
}

.cl-permissoes .cl-tabela thead th:first-child {
    background: #F4F7FC;
}

.cl-permissoes .cl-tabela thead th:first-child,
.cl-permissoes .cl-tabela tbody tr:not(.cl-tabela-grupo) td:first-child {
    border-right: 1px solid var(--cl-borda);
}

.cl-desconto-comissao .cl-campo .chosen-container {
    width: 100% !important;
}

/* Dias e horários de acesso dos módulos (cliente.user.php?acao=gerenciar.horarios) */
.cl-horarios .cl-tabela td {
    white-space: nowrap;
}

.cl-horarios .cl-tabela td:first-child {
    font-weight: 600;
}

.cl-horarios button.dia_semana,
.cl-horarios button.dia_semana:hover,
.cl-horarios button.dia_semana:focus {
    width: 32px;
    height: 32px;
    margin-right: 4px;
    padding: 0;
    font-family: var(--cl-fonte);
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
}

.cl-horarios button.dia_semana.desativado {
    color: var(--cl-laranja-escuro);
    background: #FFFFFF;
    border: 1px solid var(--cl-laranja);
}

.cl-horarios button.dia_semana.ativado {
    color: #FFFFFF;
    background: var(--cl-laranja);
    border: 1px solid var(--cl-laranja);
}

.cl-horarios button.dia_semana input[type="checkbox"] {
    display: none;
}

.cl-horarios .cl-tabela td select {
    width: 68px !important;
    min-width: 0;
    padding: 0 6px;
    text-align: center;
}

.cl-horarios button.salvar_acesso,
.cl-horarios button.resetar_acesso {
    height: 34px;
    padding: 0 16px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    font-weight: 600;
    color: #FFFFFF;
    background: var(--cl-azul);
    border: 1.5px solid var(--cl-azul);
    border-radius: 8px;
    cursor: pointer;
}

.cl-horarios button.salvar_acesso:hover,
.cl-horarios button.resetar_acesso:hover {
    background: var(--cl-azul-escuro);
    border-color: var(--cl-azul-escuro);
}

/* Dados da instituição: logo ao lado do botão */
.cl-instituicao .cl-instituicao-logo img {
    max-width: 220px;
    height: 60px;
    object-fit: contain;
    padding: 4px;
    background: #FFFFFF;
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
}

/* Avisos: editor de texto (cleditor) na largura do card */
.cl-avisos .cl-campo-editor .cleditorMain {
    max-width: 100%;
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
    overflow: hidden;
}

/* Metas do usuário e da região: as tabelas (cabeçalho, 12 meses de campos e quadro de metas) continuam
   as mesmas do template, só com o visual novo */
.cl-metas .cl-metas-lista td a {
    font-weight: 600;
    color: var(--cl-texto);
    text-decoration: none;
}

.cl-metas .cl-metas-lista td a:hover {
    color: var(--cl-laranja-escuro);
}

.cl-metas .cl-metas-tabela {
    width: 100%;
    margin: 0 0 16px;
    border-collapse: collapse;
    font-size: 12.5px;
    color: var(--cl-texto);
}

.cl-metas .cl-metas-tabela td {
    padding: 7px 6px;
    vertical-align: middle;
    border-bottom: 1px solid #EEF2F8;
}

.cl-metas .cl-metas-tabela tr:last-child td {
    border-bottom: 0;
}

.cl-metas .cl-metas-tabela td b {
    font-weight: 600;
}

.cl-metas .cl-metas-tabela h3 {
    margin: 4px 0 0;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    color: var(--cl-texto);
}

.cl-metas .cl-metas-tabela select {
    height: 38px;
    margin-left: 6px;
    padding: 0 12px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    color: var(--cl-texto);
    background: #FFFFFF;
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
}

.cl-metas .cl-metas-tabela input.meta-input {
    box-sizing: border-box;
    width: 100%;
    min-width: 62px;
    height: 34px;
    padding: 0 8px;
    font-family: var(--cl-fonte);
    font-size: 12.5px;
    text-align: right;
    color: var(--cl-texto);
    background: #FFFFFF;
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
    box-shadow: none;
}

.cl-metas .cl-metas-tabela input.meta-input:focus {
    border-color: var(--cl-laranja);
    outline: 0;
}

.cl-metas .cl-metas-tabela input.meta-input.error {
    border-color: var(--cl-vermelho);
    background-color: #FFF3F3;
}

.cl-metas .cl-metas-orientacoes {
    margin: 0;
    line-height: 1.7;
}

/* quadro de metas: números à direita, linha dos meses em destaque */
.cl-metas .cl-metas-quadro td {
    text-align: right;
    white-space: nowrap;
}

.cl-metas .cl-metas-quadro td:first-child {
    text-align: left;
}

.cl-metas .cl-metas-quadro tr:first-child td {
    border-bottom: 0;
}

.cl-metas .cl-metas-quadro tr:nth-child(2) td {
    background: #F4F7FC;
    border-bottom: 1px solid var(--cl-borda);
}

.cl-metas .cl-metas-form {
    overflow-x: auto;
}

/* Controle de datas (feriados): duas listas lado a lado */
.cl-controle-datas .cl-datas-colunas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}

.cl-controle-datas .cl-datas-titulo {
    margin: 0;
    padding: 14px 16px 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--cl-texto);
}

.cl-controle-datas .cl-tabela td a {
    cursor: pointer;
}

.cl-controle-datas .cl-form-acoes .cl-btn-acao {
    height: 42px;
    padding: 0 26px;
    font-size: 15px;
}

@media (max-width: 800px) {
    .cl-controle-datas .cl-datas-colunas {
        grid-template-columns: 1fr;
    }
}

/* Vídeos */
.cl-videos .cl-videos-card {
    padding: 16px 18px;
}

.cl-videos .cl-videos-tabela img {
    max-height: 60px;
    border-radius: 6px;
}

.cl-pagina input.cl-btn-salvar.cl-btn-perigo,
.cl-pagina input.cl-btn-salvar.cl-btn-perigo:focus {
    background: var(--cl-vermelho);
    border-color: var(--cl-vermelho);
}

.cl-pagina input.cl-btn-salvar.cl-btn-perigo:hover,
.cl-pagina input.cl-btn-salvar.cl-btn-perigo:active {
    background: #C92A2D;
    border-color: #C92A2D;
}

/* Desconto comissão: a lista vem por AJAX, um <fieldset> com tabela por grupo */
.cl-desconto-comissao #desconto-comissao fieldset {
    min-width: 0;
    margin: 0 0 6px;
    padding: 12px 16px 6px;
    border: 1px solid var(--cl-borda);
    border-radius: 10px;
}

.cl-desconto-comissao #desconto-comissao fieldset > b {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cl-texto);
}

.cl-desconto-comissao #desconto-comissao table {
    width: 100%;
    margin-top: 6px;
    border-collapse: collapse;
    font-size: 12.5px;
}

.cl-desconto-comissao #desconto-comissao th {
    padding: 9px 12px;
    font-weight: 600;
    color: var(--cl-texto);
    background: #F4F7FC;
    border: 0;
    border-bottom: 1px solid var(--cl-borda);
}

.cl-desconto-comissao #desconto-comissao td {
    padding: 6px 12px;
    background: #fff;
    border-bottom: 1px solid #EEF2F8;
}

/* ==========================================================================
   ABC de Clientes (painel.abc.clientes.php) — resultado
   Verde, azul e vermelho são as faixas A, B e C do cálculo de Pareto
   (mesmas cores do gráfico).
   ========================================================================== */
.cl-rel-resultado .cl-abc-rolagem {
    max-width: 100%;
    margin: 6px 0 12px;
    overflow-x: auto;
    border: 1px solid var(--cl-borda);
    border-radius: 10px;
}

.cl-rel-resultado table.cl-abc {
    /* largura das colunas vem dos <col> (iguais nas tabelas A, B, C e Total Geral) */
    table-layout: fixed;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
    color: var(--cl-texto);
}

.cl-rel-resultado table.cl-abc td {
    padding: 6px 5px;
    border-bottom: 1px solid #EEF1F6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cl-rel-resultado table.cl-abc tr:last-child td {
    border-bottom: 0;
}

.cl-rel-resultado table.cl-abc col.cl-abc-col-par {
    background: #F7F9FC;
}

.cl-rel-resultado table.cl-abc td:last-child {
    padding-right: 10px;
}

/* o nome do cliente fica parado quando a tabela rola para o lado (períodos longos) */
.cl-rel-resultado table.cl-abc td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    padding-left: 10px;
}

.cl-rel-resultado table.cl-abc tr.cl-abc-a:not(.cl-abc-cab) td:first-child,
.cl-rel-resultado table.cl-abc tr.cl-abc-b:not(.cl-abc-cab) td:first-child,
.cl-rel-resultado table.cl-abc tr.cl-abc-c:not(.cl-abc-cab) td:first-child {
    background: #fff;
}

.cl-rel-resultado table.cl-abc tr.cl-abc-media td:first-child {
    position: static;
}

/* cabeçalho de cada faixa */
.cl-rel-resultado table.cl-abc tr.cl-abc-cab td {
    padding-top: 8px;
    padding-bottom: 8px;
    border-bottom: 0;
    color: #fff;
    font-weight: 600;
}

.cl-rel-resultado table.cl-abc tr.cl-abc-cab.cl-abc-a td { background: #4CAF50; }
.cl-rel-resultado table.cl-abc tr.cl-abc-cab.cl-abc-b td { background: #1976D2; }
.cl-rel-resultado table.cl-abc tr.cl-abc-cab.cl-abc-c td { background: #F44336; }

/* linhas dos clientes na cor da faixa (tom mais escuro, para leitura) */
.cl-rel-resultado table.cl-abc tr.cl-abc-a:not(.cl-abc-cab) td,
.cl-rel-resultado table.cl-abc tr.cl-abc-a:not(.cl-abc-cab) td a { color: #2E7D32; }
.cl-rel-resultado table.cl-abc tr.cl-abc-b:not(.cl-abc-cab) td,
.cl-rel-resultado table.cl-abc tr.cl-abc-b:not(.cl-abc-cab) td a { color: #1565C0; }
.cl-rel-resultado table.cl-abc tr.cl-abc-c:not(.cl-abc-cab) td,
.cl-rel-resultado table.cl-abc tr.cl-abc-c:not(.cl-abc-cab) td a { color: #D32F2F; }

.cl-rel-resultado table.cl-abc tr:not(.cl-abc-cab) td a {
    font-weight: 600;
    text-decoration: none;
}

.cl-rel-resultado table.cl-abc tr:not(.cl-abc-cab) td a:hover {
    text-decoration: underline;
}

.cl-rel-resultado table.cl-abc tr.cl-abc-a:not(.cl-abc-cab):hover td,
.cl-rel-resultado table.cl-abc tr.cl-abc-b:not(.cl-abc-cab):hover td,
.cl-rel-resultado table.cl-abc tr.cl-abc-c:not(.cl-abc-cab):hover td {
    background: #FFF6EA;
}

.cl-rel-resultado table.cl-abc tr.cl-abc-total td,
.cl-rel-resultado table.cl-abc tr.cl-abc-media td {
    background: #EEF1F6;
    border-bottom: 0;
    font-weight: 600;
}

.cl-rel-resultado table.cl-abc tr.cl-abc-media td {
    padding-top: 0;
    padding-bottom: 10px;
}

.cl-rel-resultado table.cl-abc tr.cl-abc-geral td {
    padding-top: 11px;
    padding-bottom: 11px;
    background: #FFF3E2;
    border-bottom: 0;
    font-weight: 700;
}

/* Ranking de Vendedores: a 1ª coluna é a posição (não precisa ficar parada) e o Total Geral tem duas linhas */
.cl-rel-resultado table.cl-abc-ranking tr.cl-abc-geral + tr.cl-abc-geral td {
    padding-top: 0;
}

/* Bloco de um grupo (usuário, produto...) que a seta do .head1 abre e fecha.
   Fechado, some inteiro: tabela, linha de totais do grupo, gráficos e espaçamento.
   Totais gerais ficam fora do bloco. */
.cl-rel-resultado .cl-rel-recolhivel {
    padding-bottom: 28px;
}

.cl-rel-resultado .cl-rel-recolhivel.cl-rel-fechado {
    display: none;
}

/* usuários fechados ficam encostados (10px); aberto, o respiro vem do bloco acima */
.cl-rel-resultado .cl-rel-recolhivel + h3.head1 {
    margin-top: 8px;
}

/* contagem por faixa */
.cl-rel-resultado .cl-abc-resumo {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
    font-size: 12.5px;
}

.cl-rel-resultado .cl-abc-resumo span {
    padding: 5px 12px;
    background: #EEF1F6;
    border-radius: 999px;
    color: var(--cl-texto);
}

.cl-rel-resultado .cl-abc-resumo span.cl-abc-a { background: #E6F4E7; color: #2E7D32; }
.cl-rel-resultado .cl-abc-resumo span.cl-abc-b { background: #E3EFFB; color: #1565C0; }
.cl-rel-resultado .cl-abc-resumo span.cl-abc-c { background: #FDE7E5; color: #D32F2F; }

@media print {
    .cl-rel-resultado .cl-abc-rolagem {
        overflow: visible;
        border: 0;
    }

    .cl-rel-resultado table.cl-abc tr.cl-abc-cab td {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ==========================================================================
   Cotação / Pedido no lançamento de HR (template/pedido.tpl.php, blocos cl-ped-*)
   Cada campo fica em .cl-ped-campo (rótulo em cima, controle embaixo) dentro de uma .cl-ped-linha
   que quebra sozinha; campos, ids e ordem são os de antes (o JS do pedido acha tudo por id).
   As regras por id (#pedido-itens, #tabelaParcela) e a da caixa cinza valem também para os
   pedido.tpl.php próprios de tenant, que ainda não têm os blocos novos.
   ========================================================================== */

.cl-hr-form .cl-ped-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 20px;
    margin: 0 0 16px;
}

.cl-hr-form .cl-ped-linha:empty {
    display: none;
}

.cl-hr-form .cl-ped-campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.cl-hr-form .cl-ped-campo > b {
    font-size: 12.5px;
    color: var(--cl-texto-suave);
}

.cl-hr-form .cl-ped-ctl {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
}

.cl-hr-form .cl-ped-campo-largo {
    flex: 1 1 100%;
}

.cl-hr-form .cl-ped-campo-largo > textarea,
.cl-hr-form .cl-ped-campo-largo > input[type="text"],
.cl-hr-form .cl-ped-campo-largo .cl-ped-ctl > select {
    width: 100% !important;
}

/* campo de texto médio (pedido.tpl.php de tenant: fabricante, qualidade, unidade/embalagem) */
.cl-hr-form .cl-ped-campo-medio input[type="text"],
.cl-hr-form .cl-ped-produto .cl-ped-campo-medio input[type="text"] {
    width: 260px;
    max-width: 100%;
}

.cl-hr-form .cl-ped-valor {
    font-weight: 600;
}

.cl-hr-form label.cl-ped-check {
    display: flex;
    align-items: center;
    gap: 8px;
    float: none;
    width: auto;
    height: 36px;
    padding: 0;
    cursor: pointer;
}

.cl-hr-form .cl-ped-forecast select {
    width: 72px;
}

.cl-hr-form .cl-ped-forecast input {
    width: 64px;
}

.cl-hr-form .cl-ped-perdido {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 16px;
}

/* botões do pedido (transformar em pedido, autorizar, cancelar, status) */
.cl-hr-form .pedido-botoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin: 0 0 16px;
    padding: 0;
}

.cl-hr-form .pedido-botoes > br {
    display: none;
}

/* os ícones antigos (cifrão, lupa, polegar) dentro dos botões saem: no
   layout novo os botões de ação são só texto */
.cl-hr-form a.button:not(.button-img-only) img {
    display: none;
}

/* caixa "Buscar produto + quantidade + valor + Adicionar" */
.cl-hr-form .cl-ped-produto,
.cl-hr-form fieldset div[style*="background-color: #DDD"] {
    margin: 0 0 18px;
    padding: 14px 16px 2px;
    background: var(--cl-fundo) !important;
    border: 1px solid var(--cl-borda);
    border-radius: 10px;
}

.cl-hr-form fieldset div[style*="background-color: #DDD"] {
    padding-bottom: 14px !important;
}

.cl-hr-form .cl-ped-produto .cl-ped-linha {
    margin-bottom: 12px;
}

.cl-hr-form .cl-ped-busca {
    flex: 1 1 320px;
    max-width: 620px;
}

.cl-hr-form .cl-ped-busca .chosen-container,
.cl-hr-form .cl-ped-busca > select,
.cl-hr-form .cl-ped-busca > input[type="text"] {
    width: 100% !important;
}

.cl-hr-form .cl-ped-produto input[type="text"] {
    max-width: 150px;
}

.cl-hr-form .cl-ped-produto .cl-ped-busca input[type="text"] {
    max-width: none;
}

/* itens */
.cl-hr-form .cl-ped-subtitulo,
.cl-hr-form fieldset center > h3 {
    margin: 0 0 8px;
    padding: 0;
    font-family: var(--cl-fonte);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    color: var(--cl-texto);
    background: none;
    border: 0;
}

.cl-hr-form .cl-ped-itens {
    margin: 0 0 16px;
    overflow-x: auto;
    border: 1px solid var(--cl-borda);
    border-radius: 10px;
}

.cl-hr-form #pedido-itens,
.cl-hr-form #tabelaParcela {
    border: 0;
    border-collapse: collapse;
    font-size: 12.5px;
}

.cl-hr-form #pedido-itens thead th,
.cl-hr-form #tabelaParcela th {
    padding: 10px 8px;
    font-size: 12.5px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    color: var(--cl-texto);
    background: #F4F7FC;
    border: 0;
    border-bottom: 1px solid var(--cl-borda);
}

.cl-hr-form #pedido-itens tbody td,
.cl-hr-form #tabelaParcela td {
    padding: 6px 8px;
    vertical-align: middle;
    border: 0;
    border-bottom: 1px solid #EEF2F8;
}

/* com muitas colunas (impostos, peso, entrega...) a tabela precisa caber sem rolagem lateral:
   células justas e o nome do produto com largura mínima */
.cl-hr-form #pedido-itens thead th,
.cl-hr-form #pedido-itens tbody td {
    padding-left: 4px;
    padding-right: 4px;
}

.cl-hr-form #pedido-itens thead th {
    white-space: normal;
    line-height: 1.25;
    vertical-align: bottom;
}

.cl-hr-form #pedido-itens thead th:first-child,
.cl-hr-form #pedido-itens tbody td:first-child {
    padding-left: 10px;
}

.cl-hr-form #pedido-itens tbody td:nth-child(2) {
    min-width: 150px;
}

.cl-hr-form #pedido-itens tbody tr,
.cl-hr-form #pedido-itens tbody tr:nth-child(even) {
    background: #FFFFFF;
}

.cl-hr-form #pedido-itens tbody tr:hover {
    background: #FFF8F0;
}

.cl-hr-form #pedido-itens tbody tr:last-child td {
    border-bottom: 0;
}

.cl-hr-form #pedido-itens tbody input[type="text"] {
    width: 100%;
    min-width: 50px;
    height: 32px;
    padding: 0 4px;
    font-size: 12px;
}

.cl-hr-form #pedido-itens img[src*="trash-blue-16.png"],
.cl-hr-form #tabelaParcela img[src*="trash-blue-16.png"] {
    box-sizing: content-box;
    width: 18px;
    height: 18px;
    padding: 6px;
    vertical-align: middle;
    border-radius: 8px;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E5383B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4h6v3'/%3E%3C/svg%3E");
}

.cl-hr-form #pedido-itens img[src*="trash-blue-16.png"]:hover,
.cl-hr-form #tabelaParcela img[src*="trash-blue-16.png"]:hover {
    background: #FDE8E8;
}

.cl-hr-form #tb_desconto_cascata {
    margin: 0 0 14px;
}

/* totais: à esquerda (pedido do user), total geral em destaque */
.cl-hr-form .cl-ped-totais {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 12px 14px;
    margin: 0 0 18px;
}

.cl-hr-form .cl-ped-totais input[type="text"] {
    width: 108px;
    font-weight: 600;
    text-align: right;
}

.cl-hr-form .cl-ped-totais .cl-ped-total-geral input[type="text"] {
    width: 150px;
    font-size: 15px;
    font-weight: 700;
    background-color: #FFF4E5;
    border-color: #F9C98A;
}

/* parcelas: quadro dentro do card do pedido */
.cl-hr-form .cl-ped-parcelas fieldset {
    margin: 0 0 16px;
    padding: 12px 16px 14px;
    border: 1px solid var(--cl-borda);
    border-radius: 10px;
    box-shadow: none;
}

.cl-hr-form #tabelaParcela {
    margin: 0 0 10px;
}

.cl-hr-form .cl-ped-customizado {
    margin: 0 0 16px;
}

.cl-hr-form .cl-ped-observacoes {
    margin: 0;
}

@media (max-width: 640px) {
    .cl-hr-form .cl-ped-campo,
    .cl-hr-form .cl-ped-busca {
        flex: 1 1 100%;
        max-width: none;
    }

    .cl-hr-form .cl-ped-ctl > input[type="text"],
    .cl-hr-form .cl-ped-ctl > select,
    .cl-hr-form .cl-ped-ctl > .chosen-container {
        width: 100% !important;
        max-width: none;
    }

    .cl-hr-form .cl-ped-produto input[type="text"] {
        max-width: none;
    }

    .cl-hr-form .cl-ped-totais {
        justify-content: stretch;
    }

    .cl-hr-form .cl-ped-totais input[type="text"],
    .cl-hr-form .cl-ped-totais .cl-ped-total-geral input[type="text"] {
        width: 100%;
    }
}

/* ==========================================================================
   Visualização de cotação/pedido (pedido.php?acao=3, template/topo_visualizacao_hr.php, body.cl-vis)
   O corpo vem do pedido.visualizacao.php, que também é o HTML do e-mail e tem versão própria em
   vários tenants: por isso nada muda na marcação e as regras são por elemento. Os usuários imprimem
   esta tela em PDF para mandar ao cliente, então o desenho é compacto (fontes de 8 a 9pt, linhas
   justas, sem as linhas <hr> que ocupavam altura) e vale também na impressão; só o fundo e o cartão
   ficam restritos à tela.
   ========================================================================== */

body.cl-vis {
    font-family: var(--cl-fonte);
    color: var(--cl-texto);
}

body.cl-vis .cl-vis-folha table,
body.cl-vis .cl-vis-folha td,
body.cl-vis .cl-vis-folha th,
body.cl-vis .cl-vis-folha p,
body.cl-vis .cl-vis-folha span,
body.cl-vis .cl-vis-folha font,
body.cl-vis .cl-vis-folha h3 {
    font-family: var(--cl-fonte) !important;
    color: var(--cl-texto);
}

body.cl-vis .cl-vis-folha table {
    border-collapse: collapse;
    background: transparent;
}

body.cl-vis .cl-vis-folha a {
    color: var(--cl-azul);
}

/* cabeçalho da empresa (logo + dados): faixa laranja fina embaixo */
body.cl-vis .cl-vis-folha > div:first-of-type {
    padding-bottom: 6px;
    border-bottom: 2px solid var(--cl-laranja);
}

body.cl-vis .cl-vis-folha > div:first-of-type p {
    margin: 0;
    line-height: 1.35;
}

body.cl-vis .cl-vis-folha > div:first-of-type br:first-child {
    display: none;
}

/* as linhas <hr> viram borda da linha seguinte (não ocupam altura) */
body.cl-vis .cl-vis-folha hr {
    display: none;
}

body.cl-vis .cl-vis-folha tr:has(> td > hr:only-child) > td {
    height: 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
}

body.cl-vis .cl-vis-folha tr:has(> td > hr:only-child) + tr {
    border-top: 1px solid var(--cl-borda);
}

body.cl-vis .cl-vis-folha > div > br,
body.cl-vis .cl-vis-folha > br {
    display: none;
}

/* dados do pedido (rótulo à direita, valor à esquerda) */
body.cl-vis .cl-vis-folha > div > table[width="100%"] {
    margin: 4px 0 8px;
}

body.cl-vis .cl-vis-folha > div > table[width="100%"] td {
    padding: 2px 6px;
    line-height: 1.35;
    vertical-align: top;
}

body.cl-vis .cl-vis-folha > div > table[width="100%"] td[align="right"] {
    width: 17%;
    white-space: nowrap;
}

body.cl-vis .cl-vis-folha > div > table[width="100%"] td[align="right"] span {
    margin: 0;
    font-size: 8.5pt !important;
    font-weight: 600;
    line-height: 1.35;
    color: var(--cl-texto-suave);
}

body.cl-vis .cl-vis-folha > div > table[width="100%"] td[align="right"] span b {
    font-weight: 600;
}

body.cl-vis .cl-vis-folha > div > table[width="100%"] td[align="left"] font,
body.cl-vis .cl-vis-folha > div > table[width="100%"] td[align="left"] span {
    margin: 0;
    font-size: 9pt !important;
    line-height: 1.35;
}

/* itens: cabeçalho cinza claro, linhas finas, total em destaque */
body.cl-vis .cl-vis-folha > table[cellpadding="2"] {
    margin: 6px 0 4px;
    font-size: 8.5pt !important;
    line-height: 1.3 !important;
}

body.cl-vis .cl-vis-folha > table[cellpadding="2"] th {
    padding: 5px 4px;
    font-size: 7.5pt !important;
    font-weight: 600;
    line-height: 1.2;
    vertical-align: bottom;
    color: var(--cl-texto-suave);
    background-color: #F4F7FC !important;
    border-bottom: 1px solid var(--cl-borda);
}

body.cl-vis .cl-vis-folha > table[cellpadding="2"] td {
    padding: 3px 4px;
    vertical-align: middle;
    border-bottom: 1px solid #EEF2F8;
}

body.cl-vis .cl-vis-folha > table[cellpadding="2"] tr:has(> td > hr:only-child),
body.cl-vis .cl-vis-folha > table[cellpadding="2"] tr:has(> td > hr:only-child) + tr {
    border-top: 0;
}

body.cl-vis .cl-vis-folha > table[cellpadding="2"] tr:has(> td > hr:only-child) > td {
    border-bottom: 0;
}

body.cl-vis .cl-vis-folha > table[cellpadding="2"] td font {
    font-size: 7pt !important;
    color: var(--cl-texto-suave);
}

body.cl-vis .cl-vis-folha tr[bgcolor] > td {
    padding: 5px 4px;
    font-size: 9pt;
    background: #EEF1F6;
    border-top: 1px solid var(--cl-borda) !important;
    border-bottom: 0 !important;
}

/* visualização de tenant com moldura grossa no próprio HTML (revistamobile: table com border:2px solid
   e th com border:1px solid): troca pela borda fina e cantos do layout novo */
body.cl-vis .cl-vis-folha > table[style*="border:2px solid"] {
    border: 1px solid var(--cl-borda) !important;
    border-radius: 8px;
    border-spacing: 0;
    overflow: hidden;
}

body.cl-vis .cl-vis-folha > table[style*="border:2px solid"] th[style*="border:1px solid"] {
    border: 0 !important;
    border-bottom: 1px solid var(--cl-borda) !important;
    background-color: #F4F7FC !important;
}

body.cl-vis .cl-vis-folha > table[style*="border:2px solid"] tr:last-child > td {
    border-bottom: 0;
}

/* blocos depois dos itens (totais com frete/desconto, parcelas, outras informações) */
body.cl-vis .cl-vis-folha > table[cellpadding="1"] td,
body.cl-vis .cl-vis-folha > div > table[align="center"] td {
    padding: 3px 6px;
    font-size: 9pt !important;
    line-height: 1.4;
}

body.cl-vis .cl-vis-folha > div > table[align="center"] {
    width: 100%;
    margin-top: 6px;
    border-top: 1px solid var(--cl-borda);
}

body.cl-vis .cl-vis-folha > div > table[align="center"] td > font:first-child {
    font-size: 8.5pt !important;
    color: var(--cl-texto-suave);
}

body.cl-vis .cl-vis-folha h3[style*="border"] {
    padding: 4px 8px;
    border-color: var(--cl-borda) !important;
    border-radius: 6px;
    background: #F4F7FC;
}

body.cl-vis .cl-vis-folha th,
body.cl-vis .cl-vis-folha tr[bgcolor] > td,
body.cl-vis .cl-vis-folha h3[style*="border"] {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

@media screen {
    body.cl-vis {
        margin: 0;
        padding: 16px;
        background: var(--cl-fundo);
    }

    /* tabela de itens mais larga que a janela: o cartão cresce junto e quem rola é o navegador */
    body.cl-vis .cl-vis-folha {
        display: inline-block;
        box-sizing: border-box;
        min-width: 100%;
        padding: 18px 22px 20px;
        background: var(--cl-card);
        border-radius: var(--cl-raio);
        box-shadow: var(--cl-sombra);
    }
}

/* Visualização de HR em popup (historico.rel.php?acao=view, HistoricoRel::renderView com $tela):
   mesma moldura da visualização do pedido; o corpo é o mesmo do e-mail, por isso as regras são por elemento */
body.cl-vis-hr .cl-vis-folha table,
body.cl-vis-hr .cl-vis-folha td {
    font-size: 9pt !important;
    line-height: 1.5 !important;
}

body.cl-vis-hr .cl-vis-folha table {
    padding-left: 0 !important;
}

body.cl-vis-hr .cl-vis-folha td {
    padding: 2px 6px;
    vertical-align: top;
}

body.cl-vis-hr .cl-vis-folha td b {
    font-weight: 600;
}

body.cl-vis-hr .cl-vis-folha h3[style*="border"] {
    margin: 14px 0 8px !important;
    font-size: 9.5pt !important;
    font-weight: 600 !important;
    text-align: left !important;
}

body.cl-vis-hr .cl-vis-folha fieldset {
    margin: 8px 0;
    padding: 6px 12px 10px;
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
}

body.cl-vis-hr .cl-vis-folha fieldset legend {
    padding: 0 6px;
    font-family: var(--cl-fonte);
    font-size: 9pt;
    font-weight: 600;
    color: var(--cl-texto-suave);
}

body.cl-vis-hr .cl-vis-folha fieldset td {
    padding: 8px 6px !important;
    border-color: #EEF2F8 !important;
}

/* Arquivos anexados nas visualizações (ArquivoUpload::renderView): quadro igual ao do
   "Whatsapp - mensagens gravadas", que é um fieldset. O título (span ou h3) faz o papel da legend. */
body.cl-vis .cl-vis-folha fieldset,
body.cl-vis .cl-vis-folha .cl-vis-arquivos,
body.cl-vis-hr .cl-vis-folha .cl-vis-arquivos {
    margin: 8px 0;
    padding: 6px 12px 10px;
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
}

body.cl-vis .cl-vis-folha .cl-vis-arquivos,
body.cl-vis-hr .cl-vis-folha .cl-vis-arquivos {
    position: relative;
    margin: 16px 1px 8px;
    padding-top: 12px;
}

/* nas visualizações de HR o fieldset do WhatsApp fica 8px para dentro (célula da tabela que o envolve) */
body.cl-vis-hr .cl-vis-folha .cl-vis-arquivos {
    margin-left: 8px;
    margin-right: 8px;
}

body.cl-vis .cl-vis-folha .cl-vis-arquivos > hr,
body.cl-vis-hr .cl-vis-folha .cl-vis-arquivos > hr {
    display: none;
}

body.cl-vis .cl-vis-folha fieldset legend,
body.cl-vis .cl-vis-folha .cl-vis-arquivos > span,
body.cl-vis .cl-vis-folha .cl-vis-arquivos > h3,
body.cl-vis-hr .cl-vis-folha .cl-vis-arquivos > span,
body.cl-vis-hr .cl-vis-folha .cl-vis-arquivos > h3 {
    padding: 0 6px;
    font-family: var(--cl-fonte);
    font-size: 9pt !important;
    font-weight: 600 !important;
    color: var(--cl-texto-suave) !important;
}

body.cl-vis .cl-vis-folha .cl-vis-arquivos > span,
body.cl-vis .cl-vis-folha .cl-vis-arquivos > h3,
body.cl-vis-hr .cl-vis-folha .cl-vis-arquivos > span,
body.cl-vis-hr .cl-vis-folha .cl-vis-arquivos > h3 {
    position: absolute;
    top: -0.75em;
    left: 12px;
    margin: 0 !important;
    line-height: 1.5;
    border: 0 !important;
    background: #FFFFFF;
}

body.cl-vis .cl-vis-folha .cl-vis-arquivos > table,
body.cl-vis-hr .cl-vis-folha .cl-vis-arquivos > table {
    padding-left: 0 !important;
}

/* janelas de cancelamento de pedido e de cotação perdida (template/pedido.cancelamento.tpl.php):
   o jQuery UI leva o conteúdo para fora do formulário, por isso as regras são por id */
#msg textarea,
#div_finaliza_cotacao textarea {
    box-sizing: border-box;
    width: 100%;
    margin-top: 6px;
    padding: 8px 10px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    color: var(--cl-texto);
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
}

#msg textarea:focus,
#div_finaliza_cotacao textarea:focus {
    outline: none;
    border-color: var(--cl-laranja);
}

#div_finaliza_cotacao input[type="checkbox"] {
    margin: 4px 8px 4px 0;
    vertical-align: middle;
    accent-color: var(--cl-azul);
}

/* campo que começa uma linha nova da grade (ex.: Inadimplência em três linhas) */
.cl-form-grade > .cl-campo-inicio {
    grid-column-start: 1;
}

.cl-form-grade > .cl-campo-inicio.cl-campo-2 {
    grid-column: 1 / span 2;
}

/* ==========================================================================
   Negócios (negocio.php) e quadro de arquivos (ArquivoUpload::campo) fora do lançamento de HR
   ========================================================================== */

/* campo de data com o ícone do calendário ao lado */
.cl-pagina .cl-campo .cl-campo-data {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cl-pagina .cl-campo .cl-campo-data > input[type="text"] {
    box-sizing: border-box;
    width: 150px;
    height: 38px;
    padding: 0 12px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    color: var(--cl-texto);
    background: #FFFFFF;
    border: 1px solid var(--cl-borda);
    border-radius: var(--cl-raio-campo);
}

.cl-pagina .cl-campo .cl-campo-data > input[type="text"]:focus {
    outline: none;
    border-color: var(--cl-laranja);
}

/* blocos da alteração: clientes, histórico e interações, um card cada */
.cl-pagina .cl-neg-bloco {
    margin-top: 16px;
}

.cl-pagina .cl-neg-bloco .cl-tabela-rolagem {
    border: 1px solid var(--cl-borda);
    border-radius: 10px;
}

.cl-pagina .cl-neg-adicionar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 12px;
    margin: 0 0 14px;
}

.cl-pagina .cl-neg-adicionar > .cl-campo {
    flex: 0 1 420px;
}

.cl-pagina .cl-neg-adicionar > .cl-campo .chosen-container {
    width: 100% !important;
}

.cl-pagina .cl-neg-interacao > .cl-campo {
    flex: 1 1 420px;
}

.cl-pagina .cl-neg-adicionar input.cl-btn-salvar,
.cl-pagina .cl-neg-adicionar input.cl-btn-salvar:hover,
.cl-pagina .cl-neg-adicionar input.cl-btn-salvar:focus,
.cl-pagina .cl-neg-adicionar input.cl-btn-salvar:active {
    min-width: 0;
    height: 38px;
    padding: 0 20px;
    font-size: 14px;
}

/* quadro "Arquivos" em card (cliente e negócio); no lançamento de HR o fieldset já é card */
.cl-pagina .cl-arquivos fieldset {
    min-width: 0;
    margin: 16px 0 0;
    padding: 16px 20px 18px;
    background: var(--cl-card);
    border: 0;
    border-radius: var(--cl-raio);
    box-shadow: var(--cl-sombra);
}

.cl-pagina .cl-arquivos fieldset legend {
    float: left;
    width: 100%;
    margin: 0 0 12px;
    padding: 0 0 10px;
    font-size: 15px;
    color: var(--cl-texto);
    border-bottom: 1px solid var(--cl-borda);
}

.cl-pagina .cl-arquivos fieldset legend b {
    font-weight: 600;
}

.cl-pagina .cl-arquivos fieldset legend + * {
    clear: both;
}

/* lista de arquivos do Fine Uploader (vale em todas as telas novas com anexos) */
.cl-pagina .qq-uploader {
    font-family: var(--cl-fonte);
    font-size: 13px;
    color: var(--cl-texto);
}

.cl-pagina .qq-uploader::after {
    content: "";
    display: block;
    clear: both;
}

.cl-pagina .qq-upload-list li,
.cl-pagina .qq-upload-list li:nth-child(odd) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    padding: 8px 4px;
    line-height: 1.4;
    background: none;
    border-bottom: 1px solid #EEF2F8;
}

.cl-pagina .qq-upload-list li .qq-upload-file {
    flex: 1 1 220px;
    width: auto;
    margin: 0;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.cl-pagina .qq-upload-list li .qq-upload-size {
    margin: 0;
    color: var(--cl-texto-suave);
}

.cl-pagina .qq-upload-list li .qq-hide,
.cl-pagina .qq-upload-list li input.qq-edit-filename:not(.qq-editing) {
    display: none;
}

.cl-pagina .qq-upload-list li .qq-upload-status-text:empty {
    display: none;
}

.cl-pagina .qq-upload-list li img[src*="lens-blue-16.png"],
.cl-pagina .qq-upload-list li img[src*="icones/download.png"] {
    box-sizing: content-box;
    width: 18px;
    height: 18px;
    padding: 6px;
    vertical-align: middle;
    border-radius: 8px;
    cursor: pointer;
}

.cl-pagina .qq-upload-list li img[src*="lens-blue-16.png"] {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231570EF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
}

.cl-pagina .qq-upload-list li img[src*="icones/download.png"] {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231570EF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E");
}

.cl-pagina .qq-upload-list li img[src*="lens-blue-16.png"]:hover,
.cl-pagina .qq-upload-list li img[src*="icones/download.png"]:hover {
    background: #EAF2FE;
}

.cl-pagina .qq-uploader > div[style*="float:right"] {
    margin-top: 18px;
    font-size: 12.5px;
    color: var(--cl-texto-suave);
}

/* ==========================================================================
   Painel de Bordo — telas de lançamento (Comissão, Despesa de viagem, Projeção de vendas):
   formulário em card e itens em tabela. As linhas da tabela vêm prontas do PHP (e voltam por
   AJAX no mesmo formato, com width/align nos <td>), por isso o estilo é por elemento.
   ========================================================================== */

.cl-painel-lanc .cl-tabela-card {
    margin-top: 16px;
}

/* o card do formulário não tem título de seção: dá o respiro de cima */
.cl-painel-lanc .cl-card.cl-form {
    padding-top: 20px;
}

/* linhas de total vêm com align="right" e colspan */
.cl-painel-lanc .cl-tabela tbody td[colspan][align="right"] {
    text-align: right;
}

.cl-painel-lanc .cl-tabela-card > .cl-form-secao {
    margin: 0;
    padding: 16px 20px 12px;
    border-bottom: 0;
}

.cl-tabela th.cl-col-centro,
.cl-tabela td.cl-col-centro {
    text-align: center;
}

.cl-painel-lanc .cl-tabela tbody td h3 {
    margin: 0;
    padding: 0;
    font-family: var(--cl-fonte);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--cl-texto);
    background: none;
    border: 0;
}

/* linha de total da comissão (vem com style="background:#eee") */
.cl-painel-lanc .cl-tabela tbody tr[style*="background"] {
    background: #EEF1F6 !important;
}

.cl-painel-lanc .cl-tabela tbody td input[type="button"],
.cl-painel-lanc .cl-tabela tbody td input[type="button"]:hover {
    height: 36px;
    margin: 6px 0;
    padding: 0 18px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    font-weight: 600;
    color: #FFFFFF;
    background: var(--cl-azul);
    border: 1px solid var(--cl-azul);
    border-radius: 8px;
    cursor: pointer;
}

.cl-painel-lanc .cl-tabela tbody td input[type="button"]:hover {
    background: var(--cl-azul-escuro);
    border-color: var(--cl-azul-escuro);
}

/* instruções da despesa de viagem */
.cl-painel-lanc .cl-painel-aviso {
    margin: 0 0 16px;
    padding: 12px 16px 12px 32px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #7A4B00;
    background: #FFF4E5;
    border: 1px solid #F9D9A8;
    border-radius: 10px;
}

.cl-painel-lanc .cl-painel-aviso li + li {
    margin-top: 4px;
}

/* ==========================================================================
   Quadro Metas (Margem) — relatorio.quadro.metas.margem.php, janela própria (não usa o relatorio.topo):
   body.cl-rel.cl-rel-resultado.cl-quadro-margem. As tabelas (conteudo_rel_grid) vêm montadas no template.
   ========================================================================== */

.cl-quadro-margem .cl-quadro-filtro {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
    margin: 0 0 14px;
    padding: 14px 20px;
    background: var(--cl-card);
    border-radius: var(--cl-raio);
    box-shadow: var(--cl-sombra);
}

.cl-quadro-margem .cl-quadro-campo {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cl-quadro-margem .cl-quadro-campo > b {
    font-size: 12px;
    font-weight: 600;
    color: var(--cl-texto-suave);
}

.cl-quadro-margem .cl-quadro-filtro select {
    box-sizing: border-box;
    min-width: 150px;
    height: 38px;
    padding: 0 12px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    color: var(--cl-texto);
    background-color: #FFFFFF;
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
}

.cl-quadro-margem input[type="submit"],
.cl-quadro-margem input[type="submit"]:hover,
.cl-quadro-margem input[type="submit"]:focus {
    height: 38px;
    padding: 0 22px;
    font-family: var(--cl-fonte);
    font-size: 14px;
    font-weight: 600;
    color: #FFFFFF;
    background: var(--cl-azul);
    border: 1px solid var(--cl-azul);
    border-radius: 8px;
    cursor: pointer;
}

.cl-quadro-margem input[type="submit"]:hover {
    background: var(--cl-azul-escuro);
    border-color: var(--cl-azul-escuro);
}

.cl-quadro-margem .cl-quadro-conteudo {
    padding: 6px 20px 18px;
    font-size: 13px;
    background: var(--cl-card);
    border-radius: var(--cl-raio);
    box-shadow: var(--cl-sombra);
}

.cl-quadro-margem .cl-quadro-conteudo table.conteudo_rel_grid {
    margin: 8px 0 18px;
    border: 1px solid var(--cl-borda) !important;
}

/* as três tabelas com o mesmo cabeçalho laranja dos relatórios (uma vinha com ui-widget-header, as outras não) */
.cl-quadro-margem .cl-quadro-conteudo table.conteudo_rel_grid thead th,
.cl-quadro-margem .cl-quadro-conteudo table.conteudo_rel_grid thead td {
    padding: 9px 10px;
    font-weight: 600;
    color: #FFFFFF !important;
    background: var(--cl-laranja) !important;
    border: 0 !important;
    border-radius: 0 !important;
}

/* cantos arredondados nos três quadros (pedido do user): a tabela recorta o cabeçalho e o rodapé */
.cl-quadro-margem .cl-quadro-conteudo table.conteudo_rel_grid {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 10px;
    overflow: hidden;
}

/* os quadros da equipe de vendas vêm num <div style="padding: 20px">: sem o recuo, ficam na mesma
   largura e alinhamento do quadro das regiões */
.cl-quadro-margem .cl-quadro-conteudo > div[style*="padding"] {
    padding: 0 !important;
}

.cl-quadro-margem .cl-quadro-fechar {
    margin: 16px 0 6px;
}

@media print {
    .cl-quadro-margem .cl-quadro-conteudo {
        padding: 0;
        box-shadow: none;
    }
}

/* Relatório de Despesas de Viagem (relatorio.despesa.viagem.php): valores à direita e os três totais do
   usuário (receita, despesa, saldo) no rodapé da tabela */
.cl-rel-resultado .conteudo_rel_grid th.cl-col-num,
.cl-rel-resultado .conteudo_rel_grid td.cl-col-num {
    text-align: right;
}

.cl-rel-resultado table.cl-rel-despesa tfoot td {
    padding-top: 6px;
    padding-bottom: 6px;
}

/* ==========================================================================
   Barra do administrador (template/footer.tpl.php, só aparece para usuario_admin): usuário, ambiente,
   debug e exibição de erros. Global: o rodapé entra em todas as telas internas.
   ========================================================================== */

.cl-admin-barra {
    margin: 28px 0 8px;
    padding: 12px 16px;
    font-family: var(--cl-fonte);
    background: var(--cl-card);
    border: 1px dashed #C9D3E6;
    border-radius: var(--cl-raio);
}

.cl-admin-barra form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 14px;
    margin: 0;
}

/* no login o rodapé não mostra os combos: sem eles a barra some */
.cl-admin-barra:not(:has(select)) {
    display: none;
}

.cl-admin-barra label.cl-admin-campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    text-align: left;
}

.cl-admin-barra label.cl-admin-campo > span {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--cl-texto-suave);
}

.cl-admin-barra select {
    box-sizing: border-box;
    height: 34px;
    max-width: 240px;
    padding: 0 10px;
    font-family: var(--cl-fonte);
    font-size: 12.5px;
    color: var(--cl-texto);
    background-color: #FFFFFF;
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
}

.cl-admin-barra select:focus {
    outline: none;
    border-color: var(--cl-laranja);
}

.cl-admin-barra input[type="submit"],
.cl-admin-barra input[type="submit"]:hover,
.cl-admin-barra input[type="submit"]:focus {
    height: 34px;
    padding: 0 18px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    font-weight: 600;
    color: #FFFFFF;
    background: var(--cl-azul);
    border: 1px solid var(--cl-azul);
    border-radius: 8px;
    box-shadow: none;
    cursor: pointer;
}

.cl-admin-barra input[type="submit"]:hover {
    background: var(--cl-azul-escuro);
    border-color: var(--cl-azul-escuro);
}

@media print {
    .cl-admin-barra {
        display: none;
    }
}

/* Relatório de Integração (relatorio.integracao.php): cada registro tem duas linhas (data/motivo/arquivo e
   importação/códigos); a primeira fica em faixa clara e uma linha fina separa os registros */
.cl-rel-resultado table.cl-rel-integracao {
    border-collapse: collapse;
    font-size: 12.5px;
}

.cl-rel-resultado table.cl-rel-integracao td {
    padding: 7px 10px;
    vertical-align: top;
    border: 0;
}

.cl-rel-resultado table.cl-rel-integracao td font {
    font-size: 12.5px;
}

.cl-rel-resultado table.cl-rel-integracao tr.cl-rel-int-cab td {
    background: #F4F7FC;
}

.cl-rel-resultado table.cl-rel-integracao tr.cl-rel-int-sep td {
    height: 8px;
    padding: 0;
    border-top: 1px solid var(--cl-borda);
}

.cl-rel-resultado .conteudo_rel_grid th.cl-col-centro,
.cl-rel-resultado .conteudo_rel_grid td.cl-col-centro {
    text-align: center;
}

/* linha de subgrupo dentro da tabela (ex.: cliente no relatório de famílias do mix): mesma cor em todas,
   sem alternar com o zebrado */
.cl-rel-resultado .conteudo_rel_grid tbody tr.head2 > td {
    background: #FFF3E6 !important;
}

/* tabela do resultado nunca passa do card (ex.: Cotação em janela de 1150px, com códigos longos sem espaço):
   o texto pode quebrar dentro da célula em vez de alargar a tabela */
.cl-rel-resultado table.conteudo_rel_grid {
    max-width: 100%;
}

/* quebrar no meio da palavra deixava datas e códigos cortados; em vez disso, na janela padrão dos relatórios
   (1150px) as células ficam mais justas e só palavras realmente longas quebram */
.cl-rel-resultado table.conteudo_rel_grid td {
    overflow-wrap: break-word;
}

@media (max-width: 1250px) {
    .cl-rel-resultado table.conteudo_rel_grid th,
    .cl-rel-resultado table.conteudo_rel_grid td {
        padding-left: 6px;
        padding-right: 6px;
    }
}

/* ==========================================================================
   Faixas de mensagem (FlashMessages e .flash-message avulsas) — globais: valem em todas as telas
   ========================================================================== */

.flash-message,
.flash-messages {
    box-sizing: border-box;
    width: auto;
    max-width: 100%;
    margin: 12px 0;
    padding: 12px 16px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
    color: var(--cl-texto);
    background: #EAF2FE;
    border: 1px solid #CFE0FB;
    border-radius: 10px;
}

.flash-messages p {
    margin: 2px 0 !important;
    padding: 0 !important;
    font-size: 13px;
    line-height: 1.5;
    background: none !important;
}

.flash-message.success,
.flash-messages.success {
    color: #157A4E;
    background: #E3F5EC;
    border-color: #BFE6D2;
}

.flash-messages.success p {
    color: #157A4E !important;
}

.flash-message.error,
.flash-messages.error {
    color: #C42B2E !important;
    background: #FDE8E8;
    border-color: #F6C6C6;
}

.flash-messages.error p {
    color: #C42B2E !important;
}

.flash-message.info,
.flash-messages.info,
.flash-messages.warning {
    color: #7A4B00;
    background: #FFF4E5;
    border-color: #F9D9A8;
}

.flash-messages a,
.flash-message a {
    color: var(--cl-azul) !important;
}

/* Distribuir leads (migrar.leads.list): quantidades por usuário */
.cl-migrar-leads .cl-tabela-card {
    margin-bottom: 16px;
}

.cl-migrar-leads .cl-migrar-quantidades {
    max-width: 640px;
}

.cl-migrar-leads input.quantidade {
    box-sizing: border-box;
    width: 120px;
    height: 34px;
    padding: 0 10px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    text-align: right;
    color: var(--cl-texto);
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
}

.cl-migrar-leads input.quantidade:focus {
    outline: none;
    border-color: var(--cl-laranja);
}

.cl-migrar-leads tr.cl-migrar-total td {
    background: #EEF1F6;
}

.cl-migrar-leads .cl-form-acoes {
    max-width: 640px;
    border-top: 0;
}

/* Galeria de vídeos (Dicas, Tutorial e Vídeos da empresa): player responsivo e miniaturas em grade */
.cl-videos .vid-container {
    width: min(860px, 100%);
    height: auto;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
}

.cl-videos .vid-container iframe {
    display: block;
    margin: 0 !important;
    border-radius: 10px;
}

.cl-videos .vid-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px;
    width: auto;
    margin: 0;
    padding: 20px 0 0;
}

.cl-videos .vid-list > div[style*="clear"] {
    display: none;
}

.cl-videos .vid-item {
    float: none;
    width: auto;
    height: auto;
    padding: 8px;
    background: #FFFFFF;
    border: 1px solid var(--cl-borda);
    border-radius: 10px;
    transition: border-color .15s, box-shadow .15s;
}

.cl-videos .vid-item:hover {
    border-color: var(--cl-laranja);
    box-shadow: var(--cl-sombra);
}

.cl-videos .vid-item .thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 6px;
}

.cl-videos .vid-item .desc {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--cl-texto);
}

/* ==========================================================================
   Biblioteca (biblioteca.php, .cl-pagina.cl-biblioteca): a tela tem CSS próprio (biblioteca.css, carregado
   depois) com abas, pastas coloridas (dl/dt/dd) e tabelas; aqui só o visual, por seletor mais forte.
   ========================================================================== */

.cl-pagina.cl-biblioteca .container {
    width: 100%;
    margin: 0;
}

.cl-pagina.cl-biblioteca ul.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    float: none;
    width: auto;
    height: auto;
    margin: 0 0 12px;
    padding: 0;
    border: 0;
}

.cl-pagina.cl-biblioteca ul.tabs li {
    float: none;
    height: auto;
    margin: 0;
    line-height: 1;
    background: #FFFFFF;
    border: 1px solid var(--cl-borda);
    border-radius: 999px;
}

.cl-pagina.cl-biblioteca ul.tabs li a {
    padding: 10px 18px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    font-weight: 600;
    color: var(--cl-texto);
    border: 0;
    border-radius: 999px;
}

.cl-pagina.cl-biblioteca ul.tabs li a:hover {
    background: #FFF8F0;
}

.cl-pagina.cl-biblioteca ul.tabs li.active,
.cl-pagina.cl-biblioteca ul.tabs li.active a,
.cl-pagina.cl-biblioteca ul.tabs li.active a:hover {
    color: #FFFFFF;
    background: var(--cl-laranja);
    border-color: var(--cl-laranja);
}

.cl-pagina.cl-biblioteca .tab_container,
.cl-pagina.cl-biblioteca > center,
.cl-pagina.cl-biblioteca > .container > .tab_content {
    float: none;
    width: auto;
    background: var(--cl-card);
    border: 0;
    border-radius: var(--cl-raio);
    box-shadow: var(--cl-sombra);
}

.cl-pagina.cl-biblioteca > center {
    display: block;
    padding: 20px;
    text-align: left;
}

.cl-pagina.cl-biblioteca .tab_content {
    padding: 18px 20px;
    font-size: 13px;
    color: var(--cl-texto);
}

.cl-pagina.cl-biblioteca .tab_content h2 {
    margin: 4px 0 12px;
    padding: 0 0 10px;
    font-size: 15px;
    font-weight: 600;
    border-bottom: 1px solid var(--cl-borda);
}

.cl-pagina.cl-biblioteca p.help {
    margin: 0 0 14px;
    padding: 12px 16px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--cl-texto);
    background: #EAF2FE;
    border: 1px solid #CFE0FB;
    border-radius: 10px;
}

/* botões (Inserir Arquivos, Criar Pasta, enviar) */
.cl-pagina.cl-biblioteca a.ui-button,
.cl-pagina.cl-biblioteca input[type="submit"] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 18px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: #FFFFFF;
    text-decoration: none;
    background: var(--cl-azul);
    border: 1px solid var(--cl-azul);
    border-radius: 8px;
    cursor: pointer;
}

.cl-pagina.cl-biblioteca a.ui-button:hover,
.cl-pagina.cl-biblioteca input[type="submit"]:hover {
    background: var(--cl-azul-escuro);
    border-color: var(--cl-azul-escuro);
}

.cl-pagina.cl-biblioteca a.ui-button img {
    display: none;
}

.cl-pagina.cl-biblioteca a.ui-button::before {
    content: "+";
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
}

.cl-pagina.cl-biblioteca input[type="text"] {
    box-sizing: border-box;
    max-width: 100%;
    height: 38px;
    padding: 0 12px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    color: var(--cl-texto);
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
}

/* tabelas de arquivos e de usuários */
.cl-pagina.cl-biblioteca table.gerenciador_arquivo {
    border-collapse: collapse;
    font-size: 12.5px;
    text-align: left;
}

.cl-pagina.cl-biblioteca table.gerenciador_arquivo th {
    padding: 10px 12px;
    font-weight: 600;
    text-align: left;
    color: var(--cl-texto);
    background: #F4F7FC;
    border: 0;
    border-bottom: 1px solid var(--cl-borda);
}

.cl-pagina.cl-biblioteca table.gerenciador_arquivo td {
    padding: 8px 12px;
    border: 0;
    border-bottom: 1px solid #EEF2F8;
}

.cl-pagina.cl-biblioteca table.gerenciador_arquivo tr.alt {
    background: none;
}

.cl-pagina.cl-biblioteca table.gerenciador_arquivo tr td a {
    padding-left: 0;
    color: var(--cl-azul);
}

.cl-pagina.cl-biblioteca table.gerenciador_arquivo td.editar {
    width: 70px;
    white-space: nowrap;
}

/* pastas: a cor da pasta fica (cor1..corN do biblioteca.css), com cantos e espaçamento novos */
.cl-pagina.cl-biblioteca div.tab_content dl dt {
    margin-top: 8px;
    padding: 10px 14px;
    font-weight: 600;
    border-radius: 10px;
}

.cl-pagina.cl-biblioteca div.tab_content dl dd {
    margin: 6px 0 10px;
    border: 1px solid var(--cl-borda);
    border-radius: 10px;
    overflow: hidden;
}

/* ícones brancos em PNG (lápis, lixeira, pessoas) dentro das faixas coloridas ficam; os azuis seguem a regra geral */

/* ==========================================================================
   JivoChat (jivo.leads.php: entradas e conversa) e ativação do WhatsApp (whatsapp.php)
   ========================================================================== */

.cl-jivo button {
    height: 32px;
    padding: 0 14px;
    font-family: var(--cl-fonte);
    font-size: 12.5px;
    font-weight: 600;
    color: #FFFFFF;
    background: var(--cl-azul);
    border: 1px solid var(--cl-azul);
    border-radius: 8px;
    cursor: pointer;
}

.cl-jivo button:hover {
    background: var(--cl-azul-escuro);
    border-color: var(--cl-azul-escuro);
}

.cl-jivo .cl-tabela td[align="center"] {
    text-align: center;
}

.cl-jivo button.removerLead,
.cl-jivo button.removerLead:hover {
    height: auto;
    padding: 0;
    background: transparent !important;
    border: 0;
}

.cl-jivo-chat form.cl-card {
    padding: 18px 20px;
    font-size: 13px;
    color: var(--cl-texto);
}

.cl-jivo-chat #historicoChat table {
    width: 100%;
    border-collapse: collapse;
}

.cl-jivo-chat #historicoChat td {
    padding: 6px 10px;
    vertical-align: top;
    line-height: 1.5;
}

.cl-jivo-chat #historicoChat td:first-child {
    width: 240px;
    font-weight: 600;
    color: var(--cl-texto-suave);
    white-space: nowrap;
}

.cl-jivo-chat #historicoChat button {
    margin-right: 8px;
}

.cl-jivo-chat #historicoChat #remover_conversas {
    background: var(--cl-vermelho);
    border-color: var(--cl-vermelho);
}

.cl-whatsapp-ativar .cl-whats-codigo {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 6px 0 14px;
    padding: 14px 28px;
    background: #E3F5EC;
    border: 1px solid #BFE6D2;
    border-radius: 12px;
}

.cl-whatsapp-ativar .cl-whats-codigo span {
    font-size: 12.5px;
    font-weight: 600;
    color: #157A4E;
}

.cl-whatsapp-ativar .cl-whats-codigo b {
    font-size: 28px;
    letter-spacing: 3px;
    color: #157A4E;
}

.cl-whatsapp-ativar .cl-whats-instrucoes {
    max-width: 720px;
    margin: 0 auto;
    padding: 12px 16px;
    font-size: 12.5px;
    line-height: 1.6;
    text-align: left;
    color: #7A4B00;
    background: #FFF4E5;
    border: 1px solid #F9D9A8;
    border-radius: 10px;
}

.cl-whatsapp-ativar .cl-whats-instrucoes b {
    font-weight: 500;
}

.cl-whatsapp-ativar .cl-whats-timer {
    margin-top: 14px;
    font-size: 15px;
    font-weight: 600;
    color: var(--cl-azul);
}

/* Resultado da importação do Dinamize (contato.dinamize.tpl.php): as linhas vêm com bgcolor e input de e-mail */
.cl-dinamize-contatos .cl-tabela tbody tr[bgcolor] {
    background: none;
}

.cl-dinamize-contatos .cl-tabela td[align="center"] {
    text-align: center;
}

.cl-dinamize-contatos .cl-tabela input[type="text"] {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 200px;
    height: 34px;
    padding: 0 10px;
    font-family: var(--cl-fonte);
    font-size: 12.5px;
    color: var(--cl-texto);
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
}

.cl-pagina button.cl-btn-acao {
    font-family: var(--cl-fonte);
    cursor: pointer;
}

/* filtro de e-mails: as opções do quadro E-Mails são caixas soltas (sem <label>) */
.cl-marketing .cl-mkt-cadastros > input[type="checkbox"] {
    margin: 0 6px 0 10px;
    vertical-align: middle;
}

.cl-marketing .cl-mkt-cadastros > input[type="checkbox"]:first-of-type {
    margin-left: 0;
}

/* Janelas de e-mail do HR (template/email.ajax.tpl.php e responderEmail.ajax.tpl.php): Novo Email e Responder Email.
   O estilo ficava embutido nos dois templates; a moldura da janela é a regra geral do .ui-dialog. */
.email-form {
    box-sizing: border-box;
    padding: 14px 18px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    color: var(--cl-texto);
    background-color: #FFFFFF;
}

.email-form label {
    display: block;
    float: none;
    width: auto;
    margin: 0 0 4px;
    padding: 0 !important;
    font-size: 12.5px;
    font-weight: 600;
    text-align: left !important;
    color: var(--cl-texto-suave);
}

.email-form label + br {
    display: none;
}

.email-form input[type="text"],
.email-form textarea,
.email-form select {
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 12px;
    padding: 8px 12px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    line-height: 1.4;
    color: var(--cl-texto);
    background-color: #FFFFFF;
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
}

.email-form input[type="text"] {
    height: 38px;
    padding: 0 12px;
}

.email-form textarea {
    min-height: 130px;
    resize: vertical;
}

.email-form input[type="text"]:focus,
.email-form textarea:focus {
    outline: none;
    border-color: var(--cl-laranja);
}

.email-form input[type="text"][readonly] {
    color: var(--cl-texto-suave);
    background-color: var(--cl-fundo);
}

.email-form .select2-container {
    width: 100% !important;
    margin: 0 0 12px;
    font-size: 13px;
}

.email-form .select2-container--default .select2-selection--single,
.email-form .select2-container--default .select2-selection--multiple {
    min-height: 38px;
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
}

.email-form .select2-container--default .select2-selection--single {
    height: 38px;
}

.email-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 12px;
    line-height: 36px;
    color: var(--cl-texto);
}

.email-form .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px;
}

.email-form .select2-container--default.select2-container--focus .select2-selection--multiple,
.email-form .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--cl-laranja);
}

.email-form .select2-container--default.select2-container--disabled .select2-selection--single,
.email-form .select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: var(--cl-fundo);
}

.email-form input[type="file"] {
    max-width: 100%;
    margin: 0 0 8px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    color: var(--cl-texto);
}

.email-form input[type="file"]::file-selector-button {
    margin-right: 10px;
    padding: 8px 16px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    font-weight: 600;
    color: #FFFFFF;
    background-color: var(--cl-azul);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}

.email-form input[type="file"]::file-selector-button:hover {
    background-color: var(--cl-azul-escuro);
}

/* Inteligência em vendas (template/inteligencia.vendas.tpl.php): bloco do lançamento/visualização do HR e do
   cadastro do cliente (table.cl-form-iv). As tabelas vêm prontas por AJAX (produto, concorrente e
   categoria.produto, acao=8), com borda embutida; aqui só o visual. */
.cl-pagina .cl-iv .cl-campo-linha .chosen-container {
    flex: 0 1 330px;
    max-width: 100%;
}

.cl-pagina .cl-iv .cl-form-grade .chosen-container {
    width: 100% !important;
}

.cl-pagina .cl-iv-tabela {
    margin-top: 14px;
    font-size: 13px;
    color: var(--cl-texto-suave);
}

.cl-pagina .cl-iv-tabela > br {
    display: none;
}

.cl-pagina .cl-iv-tabela table {
    width: 100%;
    border: 1px solid var(--cl-borda) !important;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 8px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    color: var(--cl-texto);
    overflow: hidden;
}

.cl-pagina .cl-iv-tabela th {
    padding: 8px 12px;
    font-size: 12.5px;
    color: var(--cl-texto-suave);
    background: #EEF1F6;
}

.cl-pagina .cl-iv-tabela th b {
    font-weight: 600;
}

.cl-pagina .cl-iv-tabela td {
    padding: 8px 12px;
    line-height: 1.5;
    border-top: 1px solid #EEF2F8;
    overflow-wrap: anywhere;
}

.cl-pagina .cl-iv-tabela td img {
    vertical-align: middle;
}

/* celular: o script do template troca o conteúdo de #tipo_combo_produto_mix por busca + combo simples */
.cl-pagina .cl-iv #tipo_combo_produto_mix > b {
    display: block;
    margin: 8px 0 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cl-texto-suave);
}

.cl-pagina .cl-iv #tipo_combo_produto_mix > br {
    display: none;
}

.cl-pagina .cl-iv #tipo_combo_produto_mix > input[type="text"],
.cl-pagina .cl-iv #tipo_combo_produto_mix > select {
    width: 100% !important;
}

/* no cadastro do cliente o bloco fica dentro de um card só: as partes viram seções, sem card próprio */
.cl-pagina table.cl-form-iv fieldset {
    min-width: 0;
    margin: 0 0 20px;
    padding: 0;
    border: 0;
}

.cl-pagina table.cl-form-iv fieldset legend {
    float: left;
    width: 100%;
    margin: 0 0 12px;
    padding: 0 0 10px;
    font-size: 14px;
    color: var(--cl-texto);
    border-bottom: 1px solid var(--cl-borda);
}

.cl-pagina table.cl-form-iv fieldset legend + * {
    clear: both;
}

.cl-pagina table.cl-form-iv fieldset legend b {
    font-weight: 600;
}

.cl-pagina table.cl-form-iv .cl-iv a.button,
.cl-pagina table.cl-form-iv .cl-iv a.button:hover {
    height: 36px;
    padding: 0 16px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    font-weight: 600;
    line-height: 34px;
    color: #FFFFFF;
    text-decoration: none;
    background: var(--cl-azul);
    border: 1px solid var(--cl-azul);
    border-radius: 8px;
    box-shadow: none;
    vertical-align: middle;
    cursor: pointer;
}

.cl-pagina table.cl-form-iv .cl-iv a.button:hover {
    background: var(--cl-azul-escuro);
    border-color: var(--cl-azul-escuro);
}


/* ==========================================================================
   IA — Configuração do Assistente IA (configuracao.prompt.usuario.php)
   A tela tem contrato de marcação próprio (ids #wo_*, prefixos .cfgia- e .wo-, testes em
   common/tests) e um <style> embutido. Por isso aqui só há CSS: todo seletor leva `.cl-ia` na
   frente, o que basta para vencer as regras embutidas, e os blocos com style="" inline são
   alcançados por atributo.
   ========================================================================== */
.cl-pagina.cl-ia {
    font-family: var(--cl-fonte);
    font-size: 13px;
    color: var(--cl-texto);
}

.cl-ia > h2 {
    margin: 4px 0 14px;
    font-family: var(--cl-fonte);
    font-size: 20px;
    font-weight: 700;
    color: var(--cl-azul);
}

/* avisos de sucesso, erro e atenção (div com cor de fundo inline) */
.cl-ia div[style*="#d4edda"],
.cl-ia div[style*="#f8d7da"],
.cl-ia div[style*="#fff3cd"],
.cl-ia .wo-alerta,
.cl-ia .wo-aguardando,
.cl-ia .wo-dialogo-aviso {
    margin: 0 0 14px !important;
    padding: 12px 16px !important;
    font-size: 13px;
    line-height: 1.5;
    border-radius: 10px !important;
}

/* Observações importantes */
.cl-ia div[style*="border-left:4px solid #2196F3"] {
    margin: 0 0 14px !important;
    padding: 14px 18px !important;
    line-height: 1.75;
    color: var(--cl-texto);
    background-color: #EEF4FD !important;
    border-left-color: var(--cl-azul) !important;
    border-radius: 10px;
}

/* formulário do nome/telefone, seletor de canal, bloco do canal oficial e pareamento: cards */
.cl-ia > form,
.cl-ia > .cfgia-canais-card,
.cl-ia .wo-bloco,
.cl-ia #qr-status-box {
    margin: 0 0 14px !important;
    padding: 18px 20px !important;
    background: var(--cl-card) !important;
    border: 0 !important;
    border-radius: var(--cl-raio) !important;
    box-shadow: var(--cl-sombra);
}

/* dentro do formulário (canal Não oficial) o seletor é um quadro interno, sem sombra */
.cl-ia > form .cfgia-canais-card {
    margin: 4px 0 16px;
    padding: 14px 16px;
    background: #F8FAFD;
    border: 1px solid var(--cl-borda);
    border-radius: 10px;
}

/* o style.css flutua e fixa a largura de todo <label> */
.cl-ia > form label {
    float: none;
    width: auto;
    margin: 0 0 5px;
    padding: 0;
    font-size: 12px;
    font-weight: 600 !important;
    text-align: left;
    color: var(--cl-texto-suave);
}

.cl-ia > form input[type="text"] {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 520px;
    height: 38px;
    padding: 0 12px !important;
    font-family: var(--cl-fonte);
    font-size: 13px;
    color: var(--cl-texto);
    background: #FFFFFF;
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
}

.cl-ia > form input[type="text"]:focus {
    border-color: var(--cl-azul);
    outline: 2px solid rgba(21, 112, 239, .15);
}

.cl-ia > form small,
.cl-ia .wo-nota,
.cl-ia .cfgia-canais-sub,
.cl-ia .cfgia-ch-desc {
    font-size: 12px;
    color: var(--cl-texto-suave) !important;
}

.cl-ia > form div > small {
    display: block;
    margin-top: 5px;
}

/* botões do formulário (o common.js os transforma em .ui-button): azul cheio */
.cl-ia > form button[type="submit"],
.cl-ia > form button[type="submit"].ui-button {
    height: 38px;
    margin: 0;
    padding: 0 18px !important;
    font-family: var(--cl-fonte);
    font-size: 13px;
    font-weight: 600;
    line-height: 38px;
    color: #FFFFFF !important;
    background: var(--cl-azul) !important;
    border: 0;
    border-radius: 8px;
    box-shadow: none;
    cursor: pointer;
}

.cl-ia > form button[type="submit"] .ui-button-text {
    padding: 0;
    line-height: inherit;
}

.cl-ia > form button[type="submit"]:hover,
.cl-ia > form button[type="submit"]:focus {
    color: #FFFFFF !important;
    background: var(--cl-azul-escuro) !important;
}

.cl-ia > form button[value="parear"],
.cl-ia > form button[value="parear"].ui-button {
    background: var(--cl-verde) !important;
}

.cl-ia > form button[value="parear"]:hover,
.cl-ia > form button[value="parear"]:focus {
    background: #1B8A5A !important;
}

.cl-ia > form button[value="desconectar"],
.cl-ia > form button[value="desconectar"].ui-button {
    background: var(--cl-vermelho) !important;
}

.cl-ia > form button[value="desconectar"]:hover,
.cl-ia > form button[value="desconectar"]:focus {
    background: #C62828 !important;
}

.cl-ia > form button[disabled] {
    opacity: .6;
    cursor: default;
}

/* seletor de canal */
.cl-ia .cfgia-canais-tit {
    font-size: 14px;
    font-weight: 600;
    color: var(--cl-texto);
}

.cl-ia .cfgia-canais {
    gap: 14px;
    margin-top: 12px;
}

.cl-ia .cfgia-ch {
    padding: 14px 16px;
    color: var(--cl-texto);
    border: 1px solid var(--cl-borda);
    border-radius: 10px;
    transition: border-color .15s, background-color .15s;
}

.cl-ia .cfgia-ch:hover {
    border-color: #B9C6DC;
}

.cl-ia .cfgia-ch[aria-pressed="true"] {
    padding: 13px 15px;
    background: #EEF4FD;
    border: 2px solid var(--cl-azul);
}

.cl-ia .cfgia-ch-nome {
    font-weight: 600;
}

.cl-ia .cfgia-ch[aria-pressed="true"] .cfgia-pill {
    background: var(--cl-azul);
}

/* bloco do canal Oficial (Meta): o título é a legend do fieldset */
.cl-ia .wo-bloco > legend {
    float: left;
    width: 100%;
    margin: 0 0 12px;
    padding: 0 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--cl-texto);
    border-bottom: 1px solid var(--cl-borda);
}

.cl-ia .wo-bloco > legend + * {
    clear: both;
}

.cl-ia .wo-lead,
.cl-ia .wo-passos > li,
.cl-ia .wo-dialogo-texto {
    color: var(--cl-texto);
}

.cl-ia .wo-passos > li::before {
    color: var(--cl-azul);
    background: #EEF4FD;
}

.cl-ia .wo-campo > label {
    color: var(--cl-texto-suave);
}

.cl-ia .wo-valor {
    font-weight: 600;
    color: var(--cl-texto);
}

.cl-ia button.wo-btn,
.cl-ia button.wo-remover {
    font-family: var(--cl-fonte);
    font-weight: 600;
    border-radius: 8px;
}

.cl-ia button.wo-btn-primario,
.cl-ia button.wo-btn-primario:link,
.cl-ia button.wo-btn-primario:visited,
.cl-ia button.wo-btn-primario[disabled] {
    color: #FFFFFF;
    background: var(--cl-azul);
    border-color: var(--cl-azul);
}

.cl-ia button.wo-btn-primario:hover:not([disabled]),
.cl-ia button.wo-btn-primario:focus:not([disabled]),
.cl-ia button.wo-btn-primario:active:not([disabled]) {
    color: #FFFFFF;
    font-weight: 600;
    background: var(--cl-azul-escuro);
    border-color: var(--cl-azul-escuro);
}

.cl-ia .wo-dialogo {
    font-family: var(--cl-fonte);
    color: var(--cl-texto);
    border: 0;
    border-radius: 14px;
}

.cl-ia .wo-dialogo-cabecalho {
    background: #F4F7FC;
    border-radius: 14px 14px 0 0;
}

.cl-ia .wo-dialogo-titulo {
    font-weight: 600;
    color: var(--cl-azul);
}

.cl-ia .wo-opcao-modo {
    border-radius: 10px;
}

.cl-ia .wo-opcao-modo:has(> input:checked) {
    background: #EEF4FD;
    border-color: var(--cl-azul);
    box-shadow: inset 0 0 0 1px var(--cl-azul);
}

.cl-ia input.wo-input-pin:focus {
    border-color: var(--cl-azul);
}

.cl-ia #qr-status-box h3 {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--cl-texto);
}

@media (max-width: 767px) {
    .cl-ia > form,
    .cl-ia > .cfgia-canais-card,
    .cl-ia .wo-bloco,
    .cl-ia #qr-status-box {
        padding: 14px !important;
    }

    .cl-ia .wo-campo {
        flex-direction: column;
        gap: 2px;
    }

    .cl-ia .wo-campo > label {
        flex: 0 0 auto;
    }
}


/* --------------------------------------------------------------------------
   IA — Prompts por tipo de cliente (configuracao.prompt.php, acao 0 a 3)
   Mesma regra da tela anterior: só CSS, com `.cl-ia-prompt` na frente. O formulário é um
   fieldset com rótulos flutuantes de 420px (style inline) seguidos do campo e de <br>.
   -------------------------------------------------------------------------- */

.cl-pagina.cl-ia-prompt {
    font-family: var(--cl-fonte);
    font-size: 13px;
    color: var(--cl-texto);
}

/* avisos de sucesso, erro e atenção (div com cor de fundo inline) */
.cl-ia-prompt div[style*="#d4edda"],
.cl-ia-prompt div[style*="#f8d7da"],
.cl-ia-prompt div[style*="#fff3cd"] {
    padding: 12px 16px !important;
    font-size: 13px;
    line-height: 1.5;
    border-radius: 10px !important;
}

/* o fieldset é o card; a legend ("Clientes Ativos - AC_IA") sobe e vira o título da página */
.cl-ia-prompt form[name="grupo"] > fieldset {
    position: relative;
    min-width: 0;
    margin: 54px 0 0;
    padding: 18px 20px 20px;
    background: var(--cl-card);
    border: 0;
    border-radius: var(--cl-raio);
    box-shadow: var(--cl-sombra);
}

.cl-ia-prompt form[name="grupo"] > fieldset > legend {
    position: absolute;
    top: -44px;
    left: 0;
    padding: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--cl-azul);
}

.cl-ia-prompt form[name="grupo"] > fieldset > legend b {
    font-weight: 700;
}

/* quebras de linha usadas só para dar espaço */
.cl-ia-prompt form[name="grupo"] > fieldset > legend + br,
.cl-ia-prompt form[name="grupo"] > fieldset > div + br,
.cl-ia-prompt form[name="grupo"] > fieldset > label + br,
.cl-ia-prompt form[name="grupo"] > fieldset > br + br {
    display: none;
}

.cl-ia-prompt fieldset div[style*="border-left: 4px solid #2196F3"] {
    margin: 0 0 4px;
    padding: 14px 18px !important;
    line-height: 1.75;
    color: var(--cl-texto);
    background-color: #EEF4FD !important;
    border-left-color: var(--cl-azul) !important;
    border-radius: 10px;
}

.cl-ia-prompt fieldset h4 {
    margin: 22px 0 12px;
    padding: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--cl-texto);
    border-bottom: 1px solid var(--cl-borda);
}

/* rótulo em cima do campo (o style inline fixa 420px e o style.css flutua e alinha à direita) */
.cl-ia-prompt fieldset label[style*="width: 420px"] {
    display: block;
    float: none;
    width: auto !important;
    margin: 12px 0 5px;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    color: var(--cl-texto-suave);
}

.cl-ia-prompt fieldset h4 + label[style*="width: 420px"] {
    margin-top: 0;
}

.cl-ia-prompt fieldset select:not([multiple]),
.cl-ia-prompt fieldset input[type="number"],
.cl-ia-prompt fieldset input[type="text"] {
    box-sizing: border-box;
    height: 38px;
    padding: 0 12px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    color: var(--cl-texto);
    background-color: #FFFFFF;
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
}

.cl-ia-prompt fieldset input[type="number"] {
    width: 120px;
}

.cl-ia-prompt fieldset input[type="text"] {
    width: 150px;
}

.cl-ia-prompt fieldset select:not([multiple]) {
    min-width: 160px;
}

.cl-ia-prompt fieldset textarea {
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    padding: 10px 12px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    line-height: 1.55;
    color: var(--cl-texto);
    background: #FFFFFF;
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
    resize: vertical;
}

.cl-ia-prompt fieldset select:focus,
.cl-ia-prompt fieldset input[type="number"]:focus,
.cl-ia-prompt fieldset input[type="text"]:focus,
.cl-ia-prompt fieldset textarea:focus {
    border-color: var(--cl-azul);
    outline: 2px solid rgba(21, 112, 239, .15);
}

.cl-ia-prompt fieldset small {
    font-size: 12px;
    line-height: 1.5;
    color: var(--cl-texto-suave);
}

.cl-ia-prompt fieldset > small {
    display: block;
    margin-top: 5px;
}

/* seletor múltiplo de usuários (Chosen) */
.cl-ia-prompt .chosen-container-multi .chosen-choices {
    min-height: 38px;
    padding: 3px 6px;
    font-family: var(--cl-fonte);
    background: #FFFFFF;
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
    box-shadow: none;
}

.cl-ia-prompt .chosen-container-multi.chosen-container-active .chosen-choices {
    border-color: var(--cl-azul);
}

.cl-ia-prompt .chosen-container-multi .chosen-choices li.search-choice {
    margin: 4px 5px 3px 0;
    padding: 5px 22px 5px 8px;
    font-size: 12.5px;
    color: var(--cl-texto);
    background: #EEF4FD;
    border: 1px solid #D5E3F8;
    border-radius: 6px;
    box-shadow: none;
}

.cl-ia-prompt .chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
    top: 7px;
}

.cl-ia-prompt .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
    width: auto;
    height: 28px;
    padding: 0 4px;
    border: 0;
}

.cl-ia-prompt .chosen-container .chosen-drop {
    font-family: var(--cl-fonte);
    font-size: 13px;
    border-color: var(--cl-borda);
    border-radius: 0 0 8px 8px;
}

/* painel de limite de disparos: três linhas "rótulo: valor" num quadro */
.cl-ia-prompt .ac_ia_limite_painel {
    box-sizing: border-box;
    max-width: 640px !important;
    margin: 12px 0 0;
    padding: 12px 16px;
    background: #F8FAFD;
    border: 1px solid var(--cl-borda);
    border-radius: 10px;
}

.cl-ia-prompt .ac_ia_limite_painel > small {
    display: flex !important;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    font-size: 13px;
    color: var(--cl-texto);
}

.cl-ia-prompt .ac_ia_limite_painel > small > label[style*="width: 420px"] {
    display: inline;
    margin: 0;
    font-size: 13px;
    font-weight: 400;
}

.cl-ia-prompt .ac_ia_limite_painel > small > span {
    font-weight: 600;
}

.cl-ia-prompt .ac_ia_limite_painel > div[role] {
    margin: 10px 0 0 !important;
}

.cl-ia-prompt .ac_ia_aviso_oficial {
    border-radius: 8px !important;
}

/* botões (o common.js transforma em .ui-button): azul cheio */
.cl-ia-prompt #ac_ia_btn_testar,
.cl-ia-prompt #ac_ia_btn_salvar,
.cl-ia-prompt fieldset button.ui-button,
.cl-ia-prompt fieldset input[type="submit"].ui-button {
    height: 38px;
    padding: 0 18px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    font-weight: 600;
    line-height: 38px;
    color: #FFFFFF;
    background: var(--cl-azul);
    border: 0;
    border-radius: 8px;
    box-shadow: none;
    cursor: pointer;
}

.cl-ia-prompt fieldset button.ui-button .ui-button-text {
    padding: 0;
    line-height: inherit;
}

.cl-ia-prompt #ac_ia_btn_testar:hover,
.cl-ia-prompt #ac_ia_btn_salvar:hover,
.cl-ia-prompt fieldset button.ui-button:hover,
.cl-ia-prompt fieldset input[type="submit"].ui-button:hover {
    color: #FFFFFF;
    background: var(--cl-azul-escuro);
}

.cl-ia-prompt #ac_ia_btn_salvar {
    height: 42px;
    margin-top: 6px;
    padding: 0 26px;
    font-size: 14px;
    line-height: 42px;
}

.cl-ia-prompt fieldset > center {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--cl-borda);
}

@media (max-width: 767px) {
    .cl-ia-prompt form[name="grupo"] > fieldset {
        padding: 14px;
    }

    .cl-ia-prompt form[name="grupo"] > fieldset > legend {
        font-size: 18px;
    }

    .cl-ia-prompt #conf_ac_ia_usuarios + .chosen-container {
        width: 100% !important;
    }
}


/* --------------------------------------------------------------------------
   IA — Templates do número oficial (whatsapp.templates.php)
   A tela já tem desenho próprio sob o prefixo `.wt-` (<style> embutido). Aqui só se troca
   fonte, paleta, cantos e sombras, com `.cl-ia-wt` na frente para vencer as regras embutidas.
   -------------------------------------------------------------------------- */
.cl-pagina.cl-ia-wt {
    font-family: var(--cl-fonte);
    font-size: 13px;
    color: var(--cl-texto);
}

.cl-ia-wt .wt-cabecalho {
    margin: 4px 0 14px;
}

.cl-ia-wt .wt-cabecalho > .page-title {
    padding: 0;
    font-family: var(--cl-fonte);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--cl-azul);
    background: none;
    border: 0;
}

.cl-ia-wt .wt-subtitulo,
.cl-ia-wt .wt-nota,
.cl-ia-wt .wt-barra-nota,
.cl-ia-wt .wt-campo > .wt-dica,
.cl-ia-wt .wt-painel-dica {
    color: var(--cl-texto-suave);
}

.cl-ia-wt .wt-resultado,
.cl-ia-wt .wt-alerta,
.cl-ia-wt .wt-ajuda,
.cl-ia-wt .wt-vazio {
    border-radius: 10px;
}

.cl-ia-wt .wt-resultado {
    margin: 0 0 14px;
}

/* cartão */
.cl-ia-wt .wt-bloco {
    margin: 0 0 14px;
    padding: 0 0 18px;
    background: var(--cl-card);
    border: 0;
    border-radius: var(--cl-raio);
    box-shadow: var(--cl-sombra);
}

.cl-ia-wt .wt-bloco > legend {
    padding: 16px 20px 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--cl-texto);
    background: none;
    border-bottom: 1px solid var(--cl-borda);
    border-radius: var(--cl-raio) var(--cl-raio) 0 0;
}

.cl-ia-wt .wt-bloco > legend b {
    font-weight: 600;
}

.cl-ia-wt .wt-barra,
.cl-ia-wt .wt-form {
    margin-left: 20px;
    margin-right: 20px;
}

.cl-ia-wt .wt-bloco > .wt-alerta,
.cl-ia-wt .wt-bloco > p,
.cl-ia-wt .wt-nota,
.cl-ia-wt .wt-vazio {
    margin-left: 20px;
    margin-right: 20px;
}

.cl-ia-wt a.wt-link {
    color: var(--cl-azul);
}

/* tabela */
.cl-ia-wt .wt-tabela {
    font-family: var(--cl-fonte);
}

.cl-ia-wt .wt-tabela thead th {
    padding: 10px 14px;
    font-weight: 600;
    color: var(--cl-texto-suave);
    background: #F4F7FC;
    border-bottom: 1px solid var(--cl-borda);
}

.cl-ia-wt .wt-tabela thead th:first-child,
.cl-ia-wt .wt-tabela tbody td:first-child {
    padding-left: 20px;
}

.cl-ia-wt .wt-tabela thead th:last-child,
.cl-ia-wt .wt-tabela tbody td:last-child {
    padding-right: 20px;
}

.cl-ia-wt .wt-tabela tbody td {
    padding: 12px 14px;
    color: var(--cl-texto);
    border-bottom: 1px solid #EEF2F8;
}

.cl-ia-wt .wt-linha:hover > td {
    background: #F8FAFD;
}

.cl-ia-wt .wt-nome {
    font-weight: 600;
    color: var(--cl-texto);
}

.cl-ia-wt .wt-etiqueta {
    font-weight: 600;
}

/* ações da linha: duas colunas em tela larga, para a linha não ficar tão alta */
@media (min-width: 1100px) {
    .cl-ia-wt .wt-acoes-pilha {
        display: grid;
        /* max-content: o botão com o selo "falta preencher" define a largura da coluna em vez de vazar */
        grid-template-columns: repeat(2, minmax(max-content, 1fr));
        gap: 6px;
        min-width: 0;
    }

    .cl-ia-wt .wt-acoes-pilha > details.wt-ressubmissao {
        grid-column: 1 / -1;
    }
}

/* botões: mesma matriz de estados do <style> da tela, com a paleta nova */
.cl-ia-wt button.wt-btn {
    font-family: var(--cl-fonte);
    font-weight: 600;
    border-radius: 8px;
}

.cl-ia-wt button.wt-btn-primario,
.cl-ia-wt button.wt-btn-primario:link,
.cl-ia-wt button.wt-btn-primario:visited,
.cl-ia-wt button.wt-btn-primario[disabled] {
    color: #FFFFFF;
    font-weight: 600;
    background: var(--cl-azul);
    border-color: var(--cl-azul);
}

.cl-ia-wt button.wt-btn-primario:hover:not([disabled]),
.cl-ia-wt button.wt-btn-primario:focus:not([disabled]),
.cl-ia-wt button.wt-btn-primario:active:not([disabled]) {
    color: #FFFFFF;
    font-weight: 600;
    background: var(--cl-azul-escuro);
    border-color: var(--cl-azul-escuro);
}

.cl-ia-wt button.wt-btn-neutro,
.cl-ia-wt button.wt-btn-neutro:link,
.cl-ia-wt button.wt-btn-neutro:visited,
.cl-ia-wt button.wt-btn-neutro[disabled] {
    color: var(--cl-azul);
    font-weight: 600;
    background: #EEF4FD;
    border-color: #D5E3F8;
}

.cl-ia-wt button.wt-btn-neutro:hover:not([disabled]),
.cl-ia-wt button.wt-btn-neutro:focus:not([disabled]),
.cl-ia-wt button.wt-btn-neutro:active:not([disabled]) {
    color: var(--cl-azul-escuro);
    font-weight: 600;
    background: #DFEBFB;
    border-color: #C3D7F5;
}

.cl-ia-wt button.wt-btn-perigo,
.cl-ia-wt button.wt-btn-perigo:link,
.cl-ia-wt button.wt-btn-perigo:visited {
    color: var(--cl-vermelho);
    font-weight: 600;
    background: #FDECEC;
    border-color: #F6CACA;
}

.cl-ia-wt button.wt-btn-perigo:hover:not([disabled]),
.cl-ia-wt button.wt-btn-perigo:focus:not([disabled]),
.cl-ia-wt button.wt-btn-perigo:active:not([disabled]) {
    color: #C62828;
    font-weight: 600;
    background: #FBDADA;
    border-color: #F0B4B4;
}

/* campos (formulário de criação, ressubmissão e variáveis) */
.cl-ia-wt .wt-campo > label {
    font-weight: 600;
    color: var(--cl-texto-suave);
}

.cl-ia-wt .wt-campo input[type="text"],
.cl-ia-wt .wt-campo select,
.cl-ia-wt .wt-campo textarea,
.cl-ia-wt .wt-variavel-linha select,
.cl-ia-wt .wt-variavel-linha input[type="text"] {
    font-family: var(--cl-fonte);
    font-size: 13px;
    color: var(--cl-texto);
    border-color: var(--cl-borda);
    border-radius: 8px;
}

.cl-ia-wt .wt-campo input[type="text"]:focus,
.cl-ia-wt .wt-campo select:focus,
.cl-ia-wt .wt-campo textarea:focus,
.cl-ia-wt .wt-variavel-linha select:focus,
.cl-ia-wt .wt-variavel-linha input[type="text"]:focus {
    border-color: var(--cl-azul);
    outline: 2px solid rgba(21, 112, 239, .15);
}

.cl-ia-wt .wt-variavel-posicao,
.cl-ia-wt h4.wt-painel-titulo,
.cl-ia-wt button.wt-painel-item code,
.cl-ia-wt .wt-ajuda code,
.cl-ia-wt details.wt-ressubmissao > summary {
    color: var(--cl-azul);
}

.cl-ia-wt .wt-painel-variaveis,
.cl-ia-wt details.wt-ressubmissao {
    background: #F8FAFD;
    border-color: var(--cl-borda);
    border-radius: 10px;
}

.cl-ia-wt button.wt-painel-item {
    font-family: var(--cl-fonte);
    border-radius: 6px;
}

.cl-ia-wt .wt-confirmacao fieldset {
    border-radius: 10px;
}

/* janelas (<dialog>) */
.cl-ia-wt .wt-dialogo {
    font-family: var(--cl-fonte);
    color: var(--cl-texto);
    border: 0;
    border-radius: 14px;
}

.cl-ia-wt .wt-dialogo-cabecalho {
    padding: 14px 18px;
    background: #F4F7FC;
    border-radius: 14px 14px 0 0;
}

.cl-ia-wt .wt-dialogo-titulo {
    font-size: 15px;
    font-weight: 600;
    color: var(--cl-azul);
}

.cl-ia-wt .wt-dialogo .wt-rodape {
    background: #F8FAFD;
    border-radius: 0 0 14px 14px;
}

.cl-ia-wt .wt-form > .wt-ajuda:first-child {
    margin: 0 0 14px;
}


/* --------------------------------------------------------------------------
   IA — Calculadora de Custos do WhatsApp (ia.calculadora.custos.php)
   A tela já é toda em cartões sob o prefixo `.calc-`; aqui só entram fonte, paleta, cantos
   e sombras. As cores de categoria continuam vindo das variáveis --calc-cor/--calc-fundo.
   -------------------------------------------------------------------------- */
.cl-pagina.cl-ia-calc {
    font-family: var(--cl-fonte);
    font-size: 13px;
    color: var(--cl-texto);
}

.cl-ia-calc .calc-marketing {
    --calc-cor: var(--cl-azul);
    --calc-fundo: #EEF4FD;
}

.cl-ia-calc .calc-cabecalho {
    margin: 4px 0 0;
}

.cl-ia-calc .calc-cabecalho > .page-title {
    padding: 0;
    font-family: var(--cl-fonte);
    font-size: 20px;
    font-weight: 700;
    color: var(--cl-azul);
    background: none;
    border: 0;
}

.cl-ia-calc .calc-subtitulo,
.cl-ia-calc .calc-categoria-desc,
.cl-ia-calc .calc-custo-rotulo,
.cl-ia-calc .calc-total-rotulo,
.cl-ia-calc .calc-lista-participacao,
.cl-ia-calc .calc-fonte,
.cl-ia-calc .calc-subtitulo-secao {
    color: var(--cl-texto-suave);
}

.cl-ia-calc .calc-secao-titulo {
    font-size: 15px;
    font-weight: 600;
    color: var(--cl-texto);
}

.cl-ia-calc .calc-alerta {
    border-radius: 10px;
}

/* cartões: categoria, resumo e tópicos da explicação */
.cl-ia-calc .calc-categoria {
    padding: 16px 18px;
    background: var(--cl-card);
    border: 0;
    border-left: 4px solid var(--calc-cor);
    border-radius: var(--cl-raio);
    box-shadow: var(--cl-sombra);
}

.cl-ia-calc .calc-categoria:focus-within {
    border-color: transparent;
    border-left-color: var(--calc-cor);
    box-shadow: 0 4px 16px rgba(21, 112, 239, .12);
}

.cl-ia-calc .calc-categoria-nome,
.cl-ia-calc .calc-custo-valor,
.cl-ia-calc .calc-lista-custo {
    font-weight: 600;
    color: var(--cl-texto);
}

.cl-ia-calc .calc-volume {
    height: 38px;
    padding: 0 12px;
    font-family: var(--cl-fonte);
    font-size: 14px;
    color: var(--cl-texto);
    border-color: var(--cl-borda);
    border-radius: 8px;
}

.cl-ia-calc .calc-volume:focus {
    border-color: var(--cl-azul);
    outline: 2px solid rgba(21, 112, 239, .15);
}

.cl-ia-calc .calc-resumo-cartao {
    padding: 18px 20px 20px;
    background: var(--cl-card);
    border: 0;
    border-top: 4px solid var(--cl-azul);
    border-radius: var(--cl-raio);
    box-shadow: var(--cl-sombra);
}

.cl-ia-calc .calc-total-valor {
    font-weight: 700;
    color: var(--cl-azul);
}

.cl-ia-calc .calc-barra {
    background: #EEF1F6;
}

.cl-ia-calc .calc-lista > li + li {
    border-top-color: var(--cl-borda);
}

.cl-ia-calc .calc-lista-nome {
    color: var(--cl-texto);
}

.cl-ia-calc .calc-nota {
    padding: 10px 12px;
    color: var(--cl-texto);
    background: #EEF4FD;
    border-left-color: var(--cl-azul);
    border-radius: 0 8px 8px 0;
}

.cl-ia-calc .calc-nota > strong,
.cl-ia-calc a.calc-link {
    color: var(--cl-azul);
}

.cl-ia-calc a.calc-link:hover,
.cl-ia-calc a.calc-link:focus {
    color: var(--cl-azul-escuro);
}

.cl-ia-calc .calc-explicacao {
    border-top-color: var(--cl-borda);
}

.cl-ia-calc .calc-topico {
    background: var(--cl-card);
    border: 0;
    border-radius: var(--cl-raio);
    box-shadow: var(--cl-sombra);
}

.cl-ia-calc .calc-topico-titulo {
    padding: 12px 16px;
    font-weight: 600;
    color: var(--cl-texto);
    background: none;
    border-bottom: 1px solid var(--cl-borda);
    border-radius: var(--cl-raio) var(--cl-raio) 0 0;
}

.cl-ia-calc .calc-topico-texto {
    padding: 12px 16px 14px;
    color: var(--cl-texto);
}


/* --------------------------------------------------------------------------
   IA — Atendimentos da IA (ia.atendimentos.php)
   Mensageiro com desenho próprio sob o prefixo `.ia-` (arranjo do v2). Aqui só entram fonte,
   paleta, cantos e sombras; alturas, colunas e rolagens continuam as do <style> da tela.
   -------------------------------------------------------------------------- */
.cl-pagina.cl-ia-atend {
    font-family: var(--cl-fonte);
    font-size: 13px;
    color: var(--cl-texto);
}

.cl-ia-atend .ia-cabecalho {
    margin: 4px 0 0;
}

.cl-ia-atend .ia-cabecalho > .page-title {
    padding: 0;
    font-family: var(--cl-fonte);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--cl-azul);
    background: none;
    border: 0;
}

.cl-ia-atend .ia-subtitulo {
    color: var(--cl-texto-suave);
}

.cl-ia-atend .ia-canal-ativo,
.cl-ia-atend .ia-etiqueta-ia {
    font-weight: 600;
    color: var(--cl-azul);
    background: #EEF4FD;
    border-color: #D5E3F8;
}

.cl-ia-atend .ia-etiqueta {
    font-weight: 600;
}

.cl-ia-atend .ia-resultado,
.cl-ia-atend .ia-alerta,
.cl-ia-atend .ia-composer-erro {
    border-radius: 10px;
}

/* painel: um card só, sem moldura */
.cl-ia-atend .ia-painel {
    background: var(--cl-card);
    border: 0;
    border-radius: var(--cl-raio);
    box-shadow: var(--cl-sombra);
}

.cl-ia-atend .ia-coluna {
    border-right-color: var(--cl-borda);
}

.cl-ia-atend .ia-busca {
    padding: 14px 14px 8px;
}

.cl-ia-atend .ia-busca input,
.cl-ia-atend .ia-campo select,
.cl-ia-atend .ia-campo textarea {
    font-family: var(--cl-fonte);
    font-size: 13px;
    color: var(--cl-texto);
    border-color: var(--cl-borda);
    border-radius: 8px;
}

.cl-ia-atend .ia-busca input {
    height: 38px;
    padding: 0 12px;
}

.cl-ia-atend .ia-busca input:focus,
.cl-ia-atend .ia-campo select:focus,
.cl-ia-atend .ia-campo textarea:focus {
    border-color: var(--cl-azul);
    outline: 2px solid rgba(21, 112, 239, .15);
}

/* lista de conversas */
.cl-ia-atend a.ia-item {
    padding: 12px 14px;
    color: var(--cl-texto);
    border-bottom-color: #EEF2F8;
}

.cl-ia-atend a.ia-item:hover,
.cl-ia-atend a.ia-item:focus {
    color: var(--cl-texto);
    background: #F8FAFD;
}

.cl-ia-atend a.ia-item-aberto,
.cl-ia-atend a.ia-item-aberto:hover,
.cl-ia-atend a.ia-item-aberto:focus {
    background: #EEF4FD;
    border-left-color: var(--cl-azul);
}

.cl-ia-atend a.ia-item-falha,
.cl-ia-atend a.ia-item-falha:hover,
.cl-ia-atend a.ia-item-falha:focus {
    border-left-color: var(--cl-vermelho);
}

.cl-ia-atend .ia-item-nome {
    font-weight: 600;
    color: var(--cl-texto);
}

.cl-ia-atend .ia-item-previa {
    color: var(--cl-texto-suave);
}

.cl-ia-atend .ia-item-motivo,
.cl-ia-atend .ia-entrega-motivo {
    color: var(--cl-vermelho);
}

.cl-ia-atend .ia-lista-estado,
.cl-ia-atend .ia-bloqueio {
    color: var(--cl-texto-suave);
    background: #F8FAFD;
    border-color: var(--cl-borda);
    border-radius: 10px;
}

.cl-ia-atend .ia-carregando {
    background: #F8FAFD;
    border-top-color: var(--cl-borda);
}

/* conversa aberta */
.cl-ia-atend .ia-conversa-cabecalho {
    padding: 12px 18px;
    background: #FFFFFF;
    border-bottom-color: var(--cl-borda);
}

.cl-ia-atend .ia-conversa-nome {
    font-size: 15px;
    font-weight: 600;
    color: var(--cl-texto);
}

.cl-ia-atend .ia-conversa-linha {
    color: var(--cl-texto-suave);
}

.cl-ia-atend .ia-conversa-telefone {
    font-family: var(--cl-fonte);
}

.cl-ia-atend .ia-janela-aberta {
    color: var(--cl-verde);
}

.cl-ia-atend .ia-thread {
    padding: 16px 18px 20px;
    background: #F4F7FC;
}

.cl-ia-atend .ia-dia > span {
    color: var(--cl-texto-suave);
}

.cl-ia-atend .ia-balao {
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}

.cl-ia-atend .ia-balao-recebida .ia-balao {
    border-top-left-radius: 4px;
}

.cl-ia-atend .ia-balao-enviada .ia-balao {
    background: #E3EEFD;
    border-top-right-radius: 4px;
}

.cl-ia-atend .ia-balao-texto {
    font-size: 13px;
    color: var(--cl-texto);
}

/* campo de resposta */
.cl-ia-atend .ia-composer {
    padding: 12px 18px;
    border-top-color: var(--cl-borda);
}

.cl-ia-atend .ia-pilula {
    border-color: var(--cl-borda);
}

.cl-ia-atend .ia-pilula:focus-within {
    border-color: var(--cl-azul);
}

.cl-ia-atend .ia-pilula textarea {
    font-family: var(--cl-fonte);
    font-size: 13px;
    color: var(--cl-texto);
}

.cl-ia-atend button.ia-enviar,
.cl-ia-atend button.ia-enviar[disabled] {
    color: #FFFFFF;
    background: var(--cl-azul);
    border-color: var(--cl-azul);
}

.cl-ia-atend button.ia-enviar:hover:not([disabled]),
.cl-ia-atend button.ia-enviar:focus:not([disabled]),
.cl-ia-atend button.ia-enviar:active:not([disabled]) {
    color: #FFFFFF;
    background: var(--cl-azul-escuro);
    border-color: var(--cl-azul-escuro);
}

/* botões das ações: mesma matriz de estados do <style> da tela, com a paleta nova */
.cl-ia-atend button.ia-btn {
    padding: 6px 14px;
    font-family: var(--cl-fonte);
    font-weight: 600;
    border-radius: 8px;
}

.cl-ia-atend button.ia-btn-primario,
.cl-ia-atend button.ia-btn-primario:link,
.cl-ia-atend button.ia-btn-primario:visited {
    color: #FFFFFF;
    font-weight: 600;
    background: var(--cl-azul);
    border-color: var(--cl-azul);
}

.cl-ia-atend button.ia-btn-primario:hover:not([disabled]),
.cl-ia-atend button.ia-btn-primario:focus:not([disabled]),
.cl-ia-atend button.ia-btn-primario:active:not([disabled]) {
    color: #FFFFFF;
    font-weight: 600;
    background: var(--cl-azul-escuro);
    border-color: var(--cl-azul-escuro);
}

.cl-ia-atend button.ia-btn-neutro,
.cl-ia-atend button.ia-btn-neutro:link,
.cl-ia-atend button.ia-btn-neutro:visited,
.cl-ia-atend button.ia-btn-neutro[disabled] {
    color: var(--cl-azul);
    font-weight: 600;
    background: #EEF4FD;
    border-color: #D5E3F8;
}

.cl-ia-atend button.ia-btn-neutro:hover:not([disabled]),
.cl-ia-atend button.ia-btn-neutro:focus:not([disabled]),
.cl-ia-atend button.ia-btn-neutro:active:not([disabled]) {
    color: var(--cl-azul-escuro);
    font-weight: 600;
    background: #DFEBFB;
    border-color: #C3D7F5;
}

.cl-ia-atend button.ia-btn-perigo,
.cl-ia-atend button.ia-btn-perigo:link,
.cl-ia-atend button.ia-btn-perigo:visited,
.cl-ia-atend details.ia-encerrar > summary {
    color: var(--cl-vermelho);
    font-weight: 600;
    background: #FDECEC;
    border-color: #F6CACA;
    border-radius: 8px;
}

.cl-ia-atend button.ia-btn-perigo:hover:not([disabled]),
.cl-ia-atend button.ia-btn-perigo:focus:not([disabled]),
.cl-ia-atend button.ia-btn-perigo:active:not([disabled]) {
    color: #C62828;
    font-weight: 600;
    background: #FBDADA;
    border-color: #F0B4B4;
}

.cl-ia-atend details.ia-encerrar > summary {
    padding: 6px 14px;
    font-family: var(--cl-fonte);
    line-height: 1.4;
}

.cl-ia-atend details.ia-encerrar > form {
    border-radius: 10px;
}

.cl-ia-atend .ia-campo > label {
    font-weight: 600;
    color: var(--cl-texto-suave);
}

@media (max-width: 900px) {
    .cl-ia-atend .ia-coluna {
        border-bottom-color: var(--cl-borda);
    }
}


/* --------------------------------------------------------------------------
   Follow up: hora e minuto ao lado da data (template/follow.up.tpl.php, página e bloco do HR)
   -------------------------------------------------------------------------- */
/* hora e minuto sempre ao lado da data: o campo da data é estreito e encolhe antes de a linha quebrar */
.cl-pagina .cl-campo-data-hora {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
}

.cl-pagina .cl-campo-data-hora > .cl-campo-data {
    flex: 0 1 150px;
    min-width: 118px;
}

/* com quatro colunas, a da data não fica menor que data + hora + minuto */
@media (min-width: 1001px) {
    .cl-pagina .cl-form-grade:has(> .cl-campo:first-child > .cl-campo-data-hora) {
        grid-template-columns: minmax(270px, 1fr) repeat(3, minmax(0, 1fr));
    }
}

.cl-pagina .cl-campo-data-hora > .cl-campo-data > input[type="text"] {
    flex: 1 1 0;
    width: 0 !important;
    min-width: 0;
    padding: 0 8px;
}

.cl-pagina .cl-campo-data-hora > .cl-campo-data .ui-datepicker-trigger {
    flex: none;
}

.cl-pagina .cl-hora {
    display: flex;
    flex: none;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    color: var(--cl-texto-suave);
}

.cl-pagina .cl-hora input[type="number"] {
    box-sizing: border-box;
    width: 62px;
    height: 38px;
    padding: 0 4px 0 10px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    color: var(--cl-texto);
    background: #FFFFFF;
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
}

.cl-pagina .cl-hora input[type="number"]:focus {
    border-color: var(--cl-azul);
    outline: 2px solid rgba(21, 112, 239, .15);
}

/* Em telas de alta densidade o Chosen impõe a imagem do sprite com
   !important; os campos de texto do layout zeram a posição do fundo e o
   sprite inteiro aparecia na caixa de busca da combo. */
.chosen-container-single .chosen-search input[type="text"] {
    background-repeat: no-repeat !important;
    background-position: 100% -20px !important;
}

/* Formulário padrão dos relatórios: botões pequenos ao lado do rótulo
   ("Aplicar filtros" da combo de clientes, "Selecionar todos") e o "?" que
   abre a explicação ao clicar */
.cl-rel .tela_ini_rel > form a.cl-filtro-cli-btn,
.cl-filtro-cli-btn {
    display: inline-block;
    margin-left: 6px;
    padding: 0 10px;
    height: 22px;
    line-height: 22px;
    font-family: var(--cl-fonte);
    font-size: 11.5px !important;
    font-weight: 600;
    color: #FFFFFF !important;
    text-decoration: none !important;
    background: var(--cl-azul);
    border-radius: 6px;
    vertical-align: middle;
}

.cl-filtro-cli-btn:hover {
    filter: brightness(.92);
}

.cl-filtro-cli-ajuda {
    position: relative;
    display: inline-block;
    margin-left: 4px;
    vertical-align: middle;
}

.cl-filtro-cli-ajuda-icone {
    display: inline-block;
    width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 12px !important;
    font-weight: 700;
    text-align: center;
    color: var(--cl-azul) !important;
    text-decoration: none !important;
    background: #EAF0FD;
    border-radius: 50%;
}

.cl-filtro-cli-ajuda-texto {
    display: none;
    position: absolute;
    z-index: 50;
    top: 26px;
    left: -60px;
    width: 280px;
    padding: 10px 12px;
    font-family: var(--cl-fonte);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--cl-texto);
    background: #FFFFFF;
    border: 1px solid var(--cl-borda);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(15, 30, 74, .12);
}

.cl-filtro-cli-ajuda.cl-aberta .cl-filtro-cli-ajuda-texto {
    display: block;
}

/* "Cotação/Proposta Perdida" e "Cancelar Pedido" em vermelho, para se
   diferenciarem das ações azuis */
.cl-hr-form a.button.ui-button[href*="FinalizarCotacao"],
.cl-hr-form a.button[href*="FinalizarCotacao"],
.cl-hr-form a.button.ui-button[href*="cancelarPedido"],
.cl-hr-form a.button[href*="cancelarPedido"] {
    background: var(--cl-vermelho);
    border-color: var(--cl-vermelho);
}

.cl-hr-form a.button.ui-button[href*="FinalizarCotacao"]:hover,
.cl-hr-form a.button[href*="FinalizarCotacao"]:hover,
.cl-hr-form a.button.ui-button[href*="cancelarPedido"]:hover,
.cl-hr-form a.button[href*="cancelarPedido"]:hover {
    background: #C42B2E;
    border-color: #C42B2E;
}

/* "Transformar em Pedido" em verde; "em Pedido Pendente" continua azul */
.cl-hr-form a.button.ui-button.cl-btn-sucesso,
.cl-hr-form a.button.cl-btn-sucesso {
    background: var(--cl-verde);
    border-color: var(--cl-verde);
}

.cl-hr-form a.button.ui-button.cl-btn-sucesso:hover,
.cl-hr-form a.button.cl-btn-sucesso:hover {
    background: #1B8457;
    border-color: #1B8457;
}

/* Disparo em massa por WhatsApp a partir de relatório */
[data-wa="dialogo"] .cl-pagina {
    margin: 0;
    padding: 4px;
    min-width: 0;
}
[data-wa="dialogo"] .cl-btn-acao:disabled {
    opacity: .6;
    cursor: default;
}
[data-wa="dialogo"] .cl-campo > select[multiple] {
    height: auto;
    min-height: 110px;
}
[data-wa="dialogo"] .cl-badge-marketing {
    color: var(--cl-texto);
    background: var(--cl-laranja);
}
[data-wa="dialogo"] .cl-campo {
    margin-bottom: 16px;
    min-width: 0;
}
[data-wa="dialogo"] .flash-message {
    margin: 0 0 16px;
}
[data-wa="dialogo"] .cl-form-acoes {
    margin-top: 20px;
    flex-wrap: wrap;
}
[data-wa="dialogo"] select,
[data-wa="dialogo"] button {
    box-sizing: border-box;
    max-width: 100%;
}

/* Relatórios diretos: leitura completa dos campos no celular, sem rolagem lateral. */
.cl-rel-lista-ordenacao { display: none; }
@media screen and (max-width: 600px) {
    .cl-rel-lista-ordenacao {
        display: block;
        margin: 0 0 12px;
        color: var(--cl-texto);
        font-size: 12px;
    }

    .cl-rel-lista-ordenacao summary { cursor: pointer; }

    .cl-rel-lista-ordenacao button {
        margin: 8px 4px 0 0;
        padding: 7px 10px;
        font: inherit;
        color: var(--cl-texto);
        background: #FFF3E6;
        border: 1px solid var(--cl-borda);
        border-radius: var(--cl-raio-campo);
        cursor: pointer;
    }

    /* coluna da ordenação atual (relatorio.topo.tpl.php, evento sortEnd) */
    .cl-rel-lista-ordenacao button.cl-rel-ordem-ativa {
        color: #FFFFFF;
        background: var(--cl-laranja, #F28C28);
        border-color: var(--cl-laranja, #F28C28);
        font-weight: 600;
    }

    .cl-rel-lista-mobile td[data-label]:last-child:nth-child(even) {
        grid-column: 1 / -1;
    }

    .cl-rel-resultado table.cl-rel-lista-mobile,
    .cl-rel-lista-mobile tbody,
    .cl-rel-lista-mobile tfoot {
        display: block;
        width: 100%;
    }

    .cl-rel-lista-mobile thead {
        display: none;
    }

    .cl-rel-lista-mobile tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        margin-bottom: 12px;
        padding: 8px 0;
        border-bottom: 1px solid var(--cl-borda);
    }

    .cl-rel-resultado .cl-rel-lista-mobile td[data-label] {
        min-width: 0;
        padding: 8px 6px;
        text-align: left;
        overflow-wrap: anywhere;
        border: 0;
    }

    .cl-rel-lista-mobile td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 3px;
        font-size: 12px;
        font-weight: 600;
        color: var(--cl-texto-suave);
    }

    .cl-rel-lista-mobile td.cl-rel-lista-cliente {
        grid-column: 1 / -1;
        grid-row: 1;
        background: #FFF3E6;
        border-radius: var(--cl-raio-campo);
    }

    .cl-rel-lista-mobile td.cl-rel-lista-cliente a {
        font-size: 14px;
    }

    .cl-rel-lista-mobile tbody tr.head2,
    .cl-rel-lista-mobile tbody tr.head2a,
    .cl-rel-lista-mobile tfoot tr {
        display: block;
        margin-bottom: 0;
    }

    .cl-rel-lista-mobile td[colspan] {
        display: block;
        grid-column: 1 / -1;
        overflow-wrap: anywhere;
    }

    .cl-rel-resultado .cl-rel-lista-mobile tbody tr:not(.head2):not(.head2a) td[colspan] {
        border: 0;
    }

    /* Subtotal e rodapé: rótulo na primeira linha, totais alinhados à direita. */
    .cl-rel-resultado .cl-rel-lista-mobile tbody tr.head2a,
    .cl-rel-resultado .cl-rel-lista-mobile tbody tr.head2,
    .cl-rel-resultado .cl-rel-lista-mobile tfoot tr {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 8px;
    }

    .cl-rel-resultado .cl-rel-lista-mobile tbody tr.head2a > td,
    .cl-rel-resultado .cl-rel-lista-mobile tbody tr.head2 > td,
    .cl-rel-resultado .cl-rel-lista-mobile tfoot tr > td {
        padding: 6px 4px;
        border: 0;
    }

    .cl-rel-resultado .cl-rel-lista-mobile tbody tr.head2a > td:first-child,
    .cl-rel-resultado .cl-rel-lista-mobile tbody tr.head2 > td:first-child,
    .cl-rel-resultado .cl-rel-lista-mobile tfoot tr > td:first-child {
        flex: 1 1 100%;
    }

    /* Depois do rótulo da faixa, as células vêm em pares rótulo/valor: um par por linha. */
    .cl-rel-resultado .cl-rel-lista-mobile tbody tr.head2a > td:nth-child(even),
    .cl-rel-resultado .cl-rel-lista-mobile tbody tr.head2 > td:nth-child(even),
    .cl-rel-resultado .cl-rel-lista-mobile tfoot tr > td:nth-child(even) {
        flex: 1 1 55%;
        text-align: left;
    }

    .cl-rel-resultado .cl-rel-lista-mobile tbody tr.head2a > td:nth-child(odd):not(:first-child),
    .cl-rel-resultado .cl-rel-lista-mobile tbody tr.head2 > td:nth-child(odd):not(:first-child),
    .cl-rel-resultado .cl-rel-lista-mobile tfoot tr > td:nth-child(odd):not(:first-child) {
        margin-left: auto;
        text-align: right;
    }

    /* Célula vazia da faixa de subtotal não reserva espaço; o total final fecha a linha à direita. */
    .cl-rel-resultado .cl-rel-lista-mobile tbody tr.head2a > td:empty,
    .cl-rel-resultado .cl-rel-lista-mobile tbody tr.head2 > td:empty,
    .cl-rel-resultado .cl-rel-lista-mobile tfoot tr > td:empty {
        display: none;
    }

    .cl-rel-resultado .cl-rel-lista-mobile tbody tr.head2a > td:nth-child(even):last-child:not(:first-child),
    .cl-rel-resultado .cl-rel-lista-mobile tbody tr.head2 > td:nth-child(even):last-child:not(:first-child),
    .cl-rel-resultado .cl-rel-lista-mobile tfoot tr > td:nth-child(even):last-child:not(:first-child) {
        flex: 0 0 auto;
        margin-left: auto;
        text-align: right;
    }

    /* Campo sem valor não mostra rótulo solto no cartão. */
    .cl-rel-resultado .cl-rel-lista-mobile td[data-label]:empty {
        display: none;
    }
}

/* ==========================================================================
   Avisos por WhatsApp — empresa (aviso.whatsapp.configuracao.tpl.php)
   e perfil do vendedor (usuario.aviso.whatsapp.tpl.php)
   ========================================================================== */

.cl-pagina .cl-wa-msg-ok {
    background: #E7F6EF;
    border-color: #BFE6D3;
}

.cl-pagina .cl-wa-msg-erro {
    color: #9B1C1F;
    background: #FDECEC;
    border-color: #F7C7C8;
}

.cl-wa-opcoes {
    display: flex;
    flex-direction: column;
}

/* a linha inteira é um <label>: anula o float/largura fixa do style.css global */
.cl-pagina label.cl-wa-opcao {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    float: none;
    width: 100%;
    margin: 0;
    padding: 14px 0;
    text-align: left;
    cursor: pointer;
    border-bottom: 1px solid var(--cl-borda);
}

.cl-pagina label.cl-wa-opcao:last-child {
    border-bottom: 0;
}

.cl-wa-opcao-texto {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.cl-wa-opcao-titulo {
    font-size: 14px;
    font-weight: 600;
    color: var(--cl-texto);
}

/* interruptor: checkbox nativo redesenhado (continua enviando o name/value no POST) */
.cl-pagina input.cl-interruptor {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    flex: 0 0 auto;
    float: none;
    width: 44px;
    height: 24px;
    margin: 0;
    background: #C9D2E3;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .15s ease;
}

.cl-pagina input.cl-interruptor::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(15, 30, 74, .25);
    transition: transform .15s ease;
}

.cl-pagina input.cl-interruptor:checked {
    background: var(--cl-verde);
}

.cl-pagina input.cl-interruptor:checked::before {
    transform: translateX(20px);
}

.cl-pagina input.cl-interruptor:focus-visible {
    outline: 2px solid var(--cl-azul);
    outline-offset: 2px;
}

/* perfil: caixas de seleção com o texto à direita */
.cl-pagina label.cl-wa-check {
    justify-content: flex-start;
    gap: 12px;
}

.cl-pagina label.cl-wa-check input[type="checkbox"] {
    flex: 0 0 auto;
    float: none;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--cl-azul);
    cursor: pointer;
}

.cl-pagina .cl-wa-antecedencia {
    max-width: 380px;
}

.cl-pagina .cl-wa-antecedencia input[type="number"] {
    box-sizing: border-box;
    width: 120px;
    height: 38px;
    padding: 0 12px;
    font-family: var(--cl-fonte);
    font-size: 13px;
    color: var(--cl-texto);
    background-color: #FFFFFF;
    border: 1px solid var(--cl-borda);
    border-radius: var(--cl-raio-campo);
}

.cl-pagina .cl-wa-antecedencia input[type="number"]:focus {
    border-color: var(--cl-laranja);
    outline: 0;
}

.cl-pagina .cl-wa-antecedencia .cl-campo-ajuda {
    display: block;
    margin-top: 5px;
}

.cl-pagina .cl-campo-erro input[type="number"] {
    border-color: var(--cl-vermelho);
}

.cl-pagina .cl-campo-erro-msg {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: var(--cl-vermelho);
}

/* estados indisponível / vazio: uma frase centralizada no card */
.cl-pagina .cl-wa-estado {
    margin: 0;
    /* compensa o padding assimétrico do .cl-form (4px em cima, 22px embaixo) */
    padding: 46px 8px 28px;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    color: var(--cl-texto-suave);
}

@media (max-width: 767px) {
    .cl-pagina .cl-wa-antecedencia {
        max-width: none;
    }

    .cl-pagina .cl-wa-antecedencia input[type="number"] {
        font-size: 16px;
    }
}

/* Relatório de cotação: status/filtro/perdida numa linha e localização (+ internacional) noutra,
   centralizadas abaixo do gráfico de barras + pizza (relatorio.cotacao.tpl.php) */
.cl-graf-linha {
    clear: both;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.cl-graf-linha > div {
    float: none !important;
}

/* Relatórios com gráficos lado a lado (cotação, pedido, devolução, clientes, HR...): no celular os
   gráficos lado a lado (32%, 69%/29%... com float no style) ficavam estreitos demais para a pizza
   de 200px do Highcharts e se sobrepunham; empilha um por linha */
@media (max-width: 767px) {
    [id^="graf_bar_"],
    [id^="graf_pie_"],
    [id^="grafico_status_"],
    [id^="grafico_filtro_"],
    [id^="grafico_finalizada_"],
    [id^="graf_estado_"],
    [id^="graf_internacional_"],
    [id^="graf_origem_"],
    [id^="graf_destino_"],
    [id^="graf_grupo_"],
    [id^="graf_segmento_"],
    [id^="graf_paises_"],
    [id^="graf_line_"],
    [id^="grafico_pie_"] {
        width: 100% !important;
        float: none !important;
    }
}