* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --fundo: #07110f;
    --sidebar: #081612;
    --painel: #0d1c18;
    --painel-claro: #11231e;
    --borda: #1d342d;

    --verde: #19b978;
    --verde-claro: #39d996;
    --verde-escuro: #0d8f5b;
    --verde-principal: #19b978;

    --dourado: #d5b56d;

    --texto: #f5f7f6;
    --texto-secundario: #91a49e;
    --texto-fraco: #657a73;
    --texto-suave: #91a49e;

    --vermelho: #e75b62;

    --sidebar-largura: 250px;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: var(--fundo);
    color: var(--texto);
    min-height: 100vh;
}

button {
    font-family: inherit;
}

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

/* =========================
   MENU LATERAL
========================= */

.sidebar {
    width: var(--sidebar-largura);
    min-height: 100vh;
    background: var(--sidebar);
    border-right: 1px solid var(--borda);

    display: flex;
    flex-direction: column;

    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;

    z-index: 10;
}

.logo {

    background: linear-gradient(135deg, #071712 0%, #0d211a 65%, #17150d 100%);

    height: 90px;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 0 24px;

    border-bottom: 1px solid rgba(212, 175, 55, 0.28);
}

.logo img {
    width: 190px;
    height: auto;
    object-fit: contain;
}

.logo-icon {
    width: 42px;
    height: 42px;

    border-radius: 11px;

    background: linear-gradient(
        135deg,
        var(--verde-claro),
        var(--verde-escuro)
    );

    display: flex;
    align-items: center;
    justify-content: center;

    color: #06100d;

    font-size: 22px;
    font-weight: 900;

    box-shadow: 0 0 30px rgba(25, 185, 120, 0.18);
}

.logo h1 {
    font-size: 18px;
    letter-spacing: 2px;
    line-height: 1;
}

.logo span {
    display: block;

    margin-top: 5px;

    color: var(--dourado);

    font-size: 10px;
    letter-spacing: 4px;
    font-weight: bold;
}

.menu {
    padding: 20px 12px;

    display: flex;
    flex-direction: column;
    gap: 5px;

    flex: 1;

    overflow-y: auto;
    overflow-x: hidden;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.menu::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.menu-item {
    min-height: 46px;

    padding: 0 14px;

    display: flex;
    align-items: center;
    gap: 13px;

    border-radius: 99px;

    color: var(--texto-secundario);

    text-decoration: none;

    font-size: 14px;
    font-weight: 600;

    transition: 0.2s;
}

.menu-item span {
    width: 20px;

    text-align: center;

    font-size: 17px;
}

.menu-item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--texto);
}

.menu-item.ativo {
    background: rgba(25, 185, 120, 0.11);

    color: var(--verde-claro);

    border: 1px solid rgba(25, 185, 120, 0.16);
}

.sidebar-footer {
    padding: 18px;

    border-top: 1px solid var(--borda);
}

.status-sistema {
    display: flex;
    align-items: center;
    gap: 10px;
}

.status-sistema strong,
.status-sistema small {
    display: block;
}

.status-sistema strong {
    font-size: 11px;
    margin-bottom: 3px;
}

.status-sistema small {
    font-size: 10px;
    color: var(--texto-fraco);
}

.status-bolinha {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--verde-claro);

    box-shadow: 0 0 10px rgba(57, 217, 150, 0.65);

    flex-shrink: 0;
}

/* =========================
   CONTEÚDO E PÁGINAS
========================= */

.conteudo {
    width: calc(100% - var(--sidebar-largura));

    margin-left: var(--sidebar-largura);

    min-height: 100vh;
}

.pagina {
    display: none;
}

.pagina.ativa {
    display: block;
}

.pagina-interna {
    padding: 32px;
    max-width: 1600px;
    margin: 0 auto;
}

.pagina-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 30px;
}

.pagina-cabecalho h3 {
    font-size: 27px;
    margin-bottom: 8px;
}

.pagina-descricao {
    color: var(--texto-secundario);
    font-size: 13px;
}

.acoes-cabecalho {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar {
    min-height: 90px;

    padding: 0 32px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid var(--borda);

    background: rgba(7, 17, 15, 0.92);
}

.pagina-label {
    color: var(--verde);

    font-size: 10px;
    font-weight: bold;

    letter-spacing: 2px;

    margin-bottom: 6px;
}

.topbar h2 {
    font-size: 24px;
}

.topbar-direita {
    display: flex;
    align-items: center;
    gap: 28px;
}

.status-operacao {
    display: flex;
    align-items: center;
    gap: 8px;

    color: var(--texto-secundario);

    font-size: 12px;
}

.usuario {
    display: flex;
    align-items: center;
    gap: 10px;
}

.avatar {
    width: 38px;
    height: 38px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--painel-claro);

    border: 1px solid var(--borda);

    color: var(--dourado);

    font-size: 12px;
    font-weight: bold;
}

.usuario strong,
.usuario small {
    display: block;
}

.usuario strong {
    font-size: 12px;
    margin-bottom: 3px;
}

.usuario small {
    color: var(--texto-fraco);
    font-size: 10px;
}

/* =========================
   BOTÕES E AÇÕES
========================= */

.botao-principal {
    border: none;

    padding: 13px 20px;

    border-radius: 8px;

    background: var(--verde);

    color: #04100c;

    font-weight: 800;

    cursor: pointer;

    transition: 0.2s;
}

.botao-principal:hover {
    background: var(--verde-claro);

    transform: translateY(-1px);
}

.botao-principal.pequeno {
    padding: 10px 15px;

    font-size: 11px;

    margin-top: 5px;
}

.botao-secundario {
    padding: 8px 12px;

    border-radius: 7px;

    border: 1px solid var(--borda);

    background: transparent;

    color: var(--texto-secundario);

    font-size: 11px;

    cursor: pointer;
    transition: 0.2s;
}

.botao-secundario:hover {
    color: var(--texto);

    border-color: #36564c;
}

.botao-voltar {
    background: transparent;
    border: none;
    color: var(--verde-claro);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 12px;
    padding: 0;
    display: inline-flex;
    align-items: center;

    transition: 0.2s;
}

.botao-voltar:hover {
    color: var(--verde);
}

.botao-excluir-base,
.botao-excluir-campanha {
    padding: 7px 12px;
    background: rgba(231, 91, 98, 0.1);
    border: 1px solid rgba(231, 91, 98, 0.25);
    color: var(--vermelho);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.botao-excluir-base:hover,
.botao-excluir-campanha:hover {
    background: var(--vermelho);
    color: #ffffff;
}

.botao-perigo {
    padding: 7px 12px;
    background: transparent;
    border: 1px solid rgba(231, 91, 98, 0.45);
    border-radius: 6px;
    color: var(--vermelho);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.botao-perigo:hover {
    background: rgba(231, 91, 98, 0.12);
    border-color: var(--vermelho);
    color: #ffffff;
}

.botao-iniciar {
    padding: 7px 12px;
    background: rgba(25, 185, 120, 0.12);
    border: 1px solid rgba(25, 185, 120, 0.25);
    color: var(--verde-claro);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.botao-iniciar:hover {
    background: var(--verde);
    color: #04100c;
}

.botao-cancelar {
    padding: 12px 18px;
    background: transparent;
    border: 1px solid var(--borda);
    border-radius: 8px;
    color: var(--texto-secundario);
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.botao-cancelar:hover {
    color: var(--texto);
    border-color: #36564c;
}

/* =========================
   DASHBOARD
========================= */

.dashboard {
    padding: 32px;

    max-width: 1600px;

    margin: 0 auto;
}

.boas-vindas {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    margin-bottom: 30px;
}

.boas-vindas h3 {
    font-size: 27px;

    margin-bottom: 8px;
}

.boas-vindas > div > p:last-child {
    color: var(--texto-secundario);

    font-size: 13px;
}

/* =========================
   CARDS
========================= */

.cards {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 16px;

    margin-bottom: 16px;
}

.card {
    min-height: 145px;

    padding: 20px;

    border-radius: 12px;

    background: var(--painel);

    border: 1px solid var(--borda);

    transition: 0.2s;
}

.card:hover {
    border-color: #2b4b40;

    transform: translateY(-2px);
}

.card-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 17px;

    color: var(--texto-secundario);

    font-size: 12px;
}

.card-icon {
    width: 30px;
    height: 30px;

    border-radius: 7px;

    background: rgba(25, 185, 120, 0.1);

    color: var(--verde-claro);

    display: flex;
    align-items: center;
    justify-content: center;
}

.numero {
    display: block;

    font-size: 30px;

    margin-bottom: 8px;
}

.numero.numero-texto {
    font-size: 20px;
    font-weight: bold;

    color: var(--verde-claro);
}

.numero span {
    color: var(--texto-fraco);

    font-size: 17px;
}

.card small {
    color: var(--texto-fraco);

    font-size: 10px;
}

/* =========================
   PAINÉIS
========================= */

.grid-dashboard {
    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 16px;
}

.painel {
    min-height: 200px;

    padding: 22px;

    border-radius: 12px;

    background: var(--painel);

    border: 1px solid var(--borda);

    margin-bottom: 16px;
}

.painel-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-bottom: 17px;

    border-bottom: 1px solid var(--borda);
}

.painel-titulo h4 {
    font-size: 14px;

    margin-bottom: 5px;
}

.painel-titulo p {
    color: var(--texto-fraco);

    font-size: 10px;
}

/* LISTAGEM DE CAMPANHAS E ITEM DA LISTA */
.lista-campanhas {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.campanha-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: var(--painel-claro);
    border: 1px solid var(--borda);
    border-radius: 10px;
    gap: 16px;
    transition: 0.2s;
}

.campanha-item:hover {
    border-color: #2b4b40;
}

.campanha-principal {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex: 2;
    min-width: 260px;
}

.campanha-icone {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(25, 185, 120, 0.1);
    color: var(--verde-claro);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.campanha-nome-linha {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.campanha-nome-linha h5 {
    font-size: 15px;
    color: var(--texto);
}

.status-execucao {
    padding: 3px 8px;
    border-radius: 12px;
    background: rgba(25, 185, 120, 0.15);
    color: var(--verde-claro);
    font-size: 10px;
    font-weight: 700;
}

.status-rascunho {
    padding: 3px 8px;
    border-radius: 12px;
    background: rgba(213, 181, 109, 0.15);
    color: var(--dourado);
    font-size: 10px;
    font-weight: 700;
}

.badge-base-indisponivel {
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(231, 91, 98, 0.15);
    color: var(--vermelho);
    font-size: 10px;
}

.campanha-principal p {
    font-size: 12px;
    color: var(--texto-secundario);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.campanha-detalhes-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
    font-size: 11px;
    color: var(--texto-fraco);
}

.campanha-detalhes-grid span {
    color: var(--texto-secundario);
}

.campanha-dados {
    display: flex;
    gap: 20px;
    flex: 1;
    justify-content: center;
}

.campanha-dados > div {
    text-align: center;
}

.campanha-dados strong {
    display: block;
    font-size: 16px;
    color: var(--texto);
}

.campanha-dados span {
    font-size: 10px;
    color: var(--texto-fraco);
}

.campanha-acoes {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* =========================
   ESTADO VAZIO
========================= */

.estado-vazio {
    min-height: 220px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

.estado-vazio-icon {
    width: 42px;
    height: 42px;

    border-radius: 50%;

    background: rgba(25, 185, 120, 0.08);

    color: var(--verde);

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 13px;

    font-size: 18px;
}

.estado-vazio h5 {
    font-size: 13px;

    margin-bottom: 7px;
}

.estado-vazio p {
    max-width: 280px;

    color: var(--texto-fraco);

    font-size: 10px;

    line-height: 1.6;

    margin-bottom: 10px;
}

/* =========================
   CANAIS & BADGES STATUS
========================= */

.badge-online {
    padding: 5px 9px;

    border-radius: 20px;

    background: rgba(25, 185, 120, 0.09);

    color: var(--verde-claro);

    font-size: 9px;
}

.badge-desconectado {
    background: rgba(231, 91, 98, 0.1);

    color: var(--vermelho);
}

.canais-resumo {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 32px;

    padding: 28px 0 23px;
}

.circulo-canais {
    width: 105px;
    height: 105px;

    border-radius: 50%;

    border: 8px solid #19342b;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.circulo-canais strong {
    font-size: 28px;
}

.circulo-canais span {
    color: var(--texto-fraco);

    font-size: 10px;
}

.canais-info {
    display: flex;
    flex-direction: column;

    gap: 15px;
}

.canais-info > div {
    display: flex;
    align-items: center;

    gap: 9px;
}

.legenda {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    flex-shrink: 0;
}

.legenda.livre {
    background: var(--verde-claro);
}

.legenda.ocupado {
    background: var(--dourado);
}

.canais-info p {
    color: var(--texto-fraco);

    font-size: 9px;
}

.canais-info strong {
    display: block;

    color: var(--texto);

    font-size: 13px;

    margin-bottom: 2px;
}

.barra-canais {
    width: 100%;
    height: 5px;

    background: #193027;

    border-radius: 20px;

    overflow: hidden;

    margin-bottom: 8px;
}

.barra-uso {
    width: 0%;
    height: 100%;

    background: var(--verde);
}

.capacidade {
    display: block;

    color: var(--texto-fraco);

    text-align: right;

    font-size: 9px;
}

/* =========================
   ATIVIDADE
========================= */

.atividade {
    grid-column: 1 / -1;

    min-height: 250px;
}

.atividade-vazia {
    min-height: 170px;
}

/* =========================
   DETALHES DA BASE & TABELAS
========================= */

.busca-contatos {
    margin-bottom: 16px;
}

.busca-contatos input {
    width: 100%;
    padding: 12px 16px;
    background: var(--painel-claro);
    border: 1px solid var(--borda);
    border-radius: 8px;
    color: var(--texto);
    font-size: 13px;
    outline: none;

    transition: 0.2s;
}

.busca-contatos input:focus {
    border-color: var(--verde);
}

.contato-base-cabecalho {
    display: grid;
    grid-template-columns: 2fr 3fr 80px;
    padding: 12px 16px;
    background: var(--painel-claro);
    border: 1px solid var(--borda);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--texto-secundario);
    text-transform: uppercase;

    letter-spacing: 1px;
    margin-bottom: 8px;
}

.lista-contatos-corpo {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.contato-base-item {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(360px, 1.6fr) 50px;
    align-items: center;
    gap: 20px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid var(--borda);
    border-radius: 8px;
    font-size: 13px;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.contato-base-item:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(25, 185, 120, 0.35);
}

.contato-base-nome strong {
    display: block;
    color: var(--texto);
    font-size: 13px;
    font-weight: 600;
}

.contato-base-nome span {
    font-size: 10px;
    color: var(--texto-fraco);
}

.contato-base-telefones {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.contato-base-telefones span {
    padding: 3px 8px;
    background: rgba(25, 185, 120, 0.08);
    border: 1px solid rgba(25, 185, 120, 0.2);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--verde-claro);
}

.contato-base-quantidade {
    text-align: right;
    font-weight: 700;
    color: var(--texto-secundario);
}

.paginacao-contatos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--borda);
}

.paginacao-contatos button {
    padding: 8px 14px;
    background: var(--painel-claro);
    border: 1px solid var(--borda);
    border-radius: 6px;
    color: var(--texto-secundario);
    font-size: 12px;
    cursor: pointer;
}

.paginacao-contatos button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.paginacao-contatos button:not(:disabled):hover {
    border-color: var(--verde);
    color: var(--texto);
}

.paginacao-contatos span {
    font-size: 12px;
    color: var(--texto-secundario);
}

/* =========================
   PÁGINA CONTATOS (V1)
========================= */

.painel-contatos-filtros {
    min-height: auto;
    padding: 18px 22px;
    margin-bottom: 16px;
}

.filtros-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 16px;
    align-items: flex-end;
}

.filtros-grid .busca-larga {
    grid-column: auto;
}

.filtros-avancados-contatos {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr)) auto;
    gap: 12px;
    align-items: end;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--borda);
}

.filtro-multiplo {
    position: relative;
}

.filtro-multiplo summary {
    min-height: 43px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: var(--painel-claro);
    color: var(--texto);
    font-size: 12px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.filtro-multiplo summary::-webkit-details-marker {
    display: none;
}

.filtro-multiplo summary::after {
    content: "⌄";
    color: var(--texto-fraco);
    font-size: 14px;
}

.filtro-multiplo[open] summary {
    border-color: rgba(25, 185, 120, 0.45);
}

.filtro-multiplo-opcoes {
    position: absolute;
    z-index: 40;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 230px;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: var(--painel-claro);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.32);
}

.filtro-multiplo-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 8px;
    border-radius: 6px;
    color: var(--texto-secundario);
    font-size: 12px;
    cursor: pointer;
}

.filtro-multiplo-item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--texto);
}

.filtro-multiplo-item input,
.checkbox-contato-campanha,
#checkboxSelecionarTodosFiltrados {
    accent-color: var(--verde);
    cursor: pointer;
}

.filtro-multiplo-vazio {
    display: block;
    padding: 10px 8px;
    color: var(--texto-fraco);
    font-size: 11px;
}

.filtro-acoes {
    display: flex;
    align-items: flex-end;
}

.filtro-acoes .botao-secundario {
    min-height: 43px;
    white-space: nowrap;
}

.barra-selecao-contatos {
    min-height: 64px;
    margin-bottom: 16px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid rgba(25, 185, 120, 0.25);
    border-radius: 10px;
    background: rgba(25, 185, 120, 0.07);
}

.barra-selecao-contatos[hidden] {
    display: none;
}

.barra-selecao-contatos > div:first-child {
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: var(--texto-secundario);
    font-size: 12px;
}

.barra-selecao-contatos strong {
    color: var(--verde-claro);
    font-size: 18px;
}

.barra-selecao-acoes {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.contato-cel-selecao {
    width: 44px;
    text-align: center;
}

.contato-selecionado td {
    background: rgba(25, 185, 120, 0.05);
}

.contato-tags-resumo {
    color: var(--verde-claro) !important;
}

.ajuda-campo,
.resumo-selecao-campanha {
    display: block;
    margin-top: 6px;
    color: var(--texto-fraco);
    font-size: 10px;
    line-height: 1.4;
}

.filtros-grid-relatorios {
    grid-template-columns: 180px 180px 1fr 1fr;
}

/* TABELA DE CONTATOS */
.tabela-contatos-wrapper {
    overflow-x: auto;
}

.tabela-contatos {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 13px;
}

.tabela-contatos th {
    padding: 14px 16px;
    background: var(--painel-claro);
    color: var(--texto-secundario);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--borda);
}

.tabela-contatos td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--borda);
    color: var(--texto);
    vertical-align: middle;
}

.tabela-contatos th:nth-child(7),
.tabela-contatos td:nth-child(7) {
    text-align: center;
}



.tabela-contatos tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.contato-cel-nome strong {
    display: block;
    font-size: 14px;
    color: var(--texto);
}

.contato-cel-nome small {
    display: block;
    font-size: 10px;
    color: var(--texto-fraco);
    margin-top: 2px;
}

.badge-base-tag {
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--painel-claro);
    border: 1px solid var(--borda);
    font-size: 11px;
    color: var(--dourado);
    display: inline-block;
}

.status-contato {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.status-contato.ativo {
    background: var(--verde-claro);
    box-shadow: 0 0 8px rgba(57, 217, 150, 0.65);
}

.status-contato.inativo {
    background: var(--vermelho);
    box-shadow: 0 0 8px rgba(231, 91, 98, 0.55);
}

.badge-tipo-tel {
    font-size: 9px;
    padding: 2px 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--texto-secundario);
    margin-left: 4px;
    text-transform: uppercase;
}

/* =========================
   MÓDULOS ESPECÍFICOS (INTEGRAÇÕES & CONFIGURAÇÕES)
========================= */

.integracao-descricao {
    color: var(--texto-secundario);
    font-size: 12px;
    line-height: 1.6;
    margin: 16px 0 20px 0;
}

.painel-rodape-acoes {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--borda);
}

/* =========================
   FICHA DO CONTATO - MODAL LARGO
========================= */

.modal-largo {
    max-width: 820px;
}

.modal-corpo-scroll {
    padding: 24px 26px;
    max-height: 65vh;
    overflow-y: auto;
}

.secao-titulo {
    font-size: 13px;
    color: var(--verde-claro);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.origem-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    background: var(--painel-claro);
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--borda);
    margin-bottom: 16px;
}

.origem-grid small {
    display: block;
    font-size: 10px;
    color: var(--texto-fraco);
    margin-bottom: 4px;
}

.origem-grid strong {
    font-size: 13px;
    color: var(--texto);
}

.origem-telefones {
    background: var(--painel-claro);
    padding: 14px 16px;
    border-radius: 8px;
    border: 1px solid var(--borda);
}

.origem-telefones small {
    display: block;
    font-size: 10px;
    color: var(--texto-fraco);
    margin-bottom: 8px;
}

.tags-telefones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-tel {
    padding: 0 6px;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    letter-spacing: 0.5px;
    color: var(--texto);
    display: flex;
    align-items: center;
}

.divisor-ficha {
    border: 0;
    height: 1px;
    background: var(--borda);
    margin: 24px 0;
}

textarea {
    font-family: inherit;
    background: var(--painel-claro);
    border: 1px solid var(--borda);
    border-radius: 8px;
    color: var(--texto);
    padding: 12px;
    font-size: 13px;
    outline: none;
    resize: vertical;
}

textarea:focus {
    border-color: var(--verde);
}

/* =========================
   MODAL - FORMULÁRIOS & GERAL
========================= */

.modal-overlay {
    position: fixed;
    inset: 0;

    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(4px);

    display: none;
    align-items: center;
    justify-content: center;

    padding: 30px;

    z-index: 1000;
}

.modal-overlay.aberto {
    display: flex;
}

.modal {
    width: 100%;
    max-width: 720px;

    max-height: 90vh;
    overflow-y: auto;

    background: #0d1c18;

    border: 1px solid #29463c;
    border-radius: 16px;

    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.modal-pequeno {
    max-width: 480px;
}

.modal-corpo {
    padding: 24px 26px;
    color: var(--texto-secundario);
    font-size: 14px;
    line-height: 1.6;
}

.modal-header {
    padding: 24px 26px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    border-bottom: 1px solid var(--borda);
}

.modal-header h3 {
    font-size: 20px;
    margin-bottom: 4px;
}

.modal-header p {
    color: var(--texto-secundario);
    font-size: 12px;
}

.modal-fechar {
    background: transparent;
    border: none;

    color: var(--texto-secundario);

    font-size: 24px;
    line-height: 1;

    cursor: pointer;

    padding: 0;
    margin-left: 10px;
}

.modal-fechar:hover {
    color: var(--texto);
}

.form-grid {
    padding: 24px 26px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.status-ficha {
    margin: 0 26px 18px;
}

.form-grupo {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-largo {
    grid-column: 1 / -1;
}

.form-grupo label {
    font-size: 12px;
    font-weight: bold;
    color: var(--texto-secundario);
}

.form-grupo input,
.form-grupo select {
    height: 44px;

    padding: 0 14px;

    background: var(--painel-claro);

    border: 1px solid var(--borda);
    border-radius: 8px;

    color: var(--texto);

    font-size: 13px;

    outline: none;

    transition: 0.2s;
}

.form-grupo input:focus,
.form-grupo select:focus {
    border-color: var(--verde);
}

#compStatus {
    font-weight: 700;
    margin: 12px 26px 18px;
}

#compStatus.status-ativo {
    border-color: var(--verde);
    color: var(--verde-claro);
    background: rgba(25, 185, 120, 0.08);
}

#compStatus.status-inativo {
    border-color: var(--vermelho);
    color: var(--vermelho);
    background: rgba(231, 91, 98, 0.08);
}

#compStatus option {
    color: var(--texto);
    background: var(--painel-claro);
}


#compStatus.status-ativo {
    border-color: var(--verde);
    color: var(--verde-claro);
    background: rgba(25, 185, 120, 0.08);
}

#compStatus.status-inativo {
    border-color: var(--vermelho);
    color: var(--vermelho);
    background: rgba(231, 91, 98, 0.08);
}

.form-grupo small {
    color: var(--texto-fraco);
    font-size: 10px;
}

.horarios {
    display: flex;
    align-items: center;
    gap: 10px;
}

.horarios input {
    flex: 1;
}

.horarios span {
    color: var(--texto-fraco);
    font-size: 12px;
}

.input-unidade {
    position: relative;
    display: flex;
    align-items: center;
}

.input-unidade input {
    width: 100%;
    padding-right: 45px;
}

.input-unidade span {
    position: absolute;
    right: 14px;
    color: var(--texto-fraco);
    font-size: 12px;
    pointer-events: none;
}

.modal-aviso {
    margin: 0 26px 20px;
    padding: 12px 16px;

    background: rgba(213, 181, 109, 0.08);

    border: 1px solid rgba(213, 181, 109, 0.2);
    border-radius: 8px;

    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.modal-aviso span {
    width: 18px;
    height: 18px;

    border-radius: 50%;

    background: var(--dourado);

    color: #0d1c18;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 11px;
    font-weight: bold;

    flex-shrink: 0;

    margin-top: 1px;
}

.modal-aviso p {
    color: var(--dourado);
    font-size: 11px;
    line-height: 1.5;
}

.modal-footer {
    padding: 18px 26px;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;

    border-top: 1px solid var(--borda);

    background: rgba(0, 0, 0, 0.15);
}

/* MODAL IMPORTAÇÃO DA BASE */
.importacao-analise {
    margin: 0 26px 20px;
    padding: 16px;
    background: var(--painel-claro);
    border: 1px solid var(--borda);
    border-radius: 10px;
}

.importacao-status {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    background: rgba(213, 181, 109, 0.15);
    color: var(--dourado);
    font-size: 10px;
    font-weight: 700;
    margin-bottom: 8px;
}

.importacao-analise h4 {
    font-size: 14px;
    margin-bottom: 4px;
}

.importacao-analise p {
    font-size: 11px;
    color: var(--texto-secundario);
    margin-bottom: 14px;
}

.layout-vanguard {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.layout-campo {
    padding: 6px 10px;
    background: var(--painel);
    border: 1px solid var(--borda);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
}

.layout-campo span {
    font-size: 9px;
    color: var(--texto-fraco);
}

.layout-campo strong {
    font-size: 11px;
    color: var(--verde-claro);
}

.importacao-resumo {
    margin: 0 26px 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.resumo-item {
    padding: 12px;
    background: var(--painel-claro);
    border: 1px solid var(--borda);
    border-radius: 8px;
    text-align: center;
}

.resumo-item span {
    display: block;
    font-size: 10px;
    color: var(--texto-secundario);
    margin-bottom: 4px;
}

.resumo-item strong {
    font-size: 18px;
    color: var(--verde-claro);
}

.detalhes-base-cabecalho {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.detalhes-base-cabecalho .botao-voltar {
    margin-left: auto;
    flex-shrink: 0;
}

.arquivo-upload {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
}

.arquivo-upload input[type="file"] {
    display: none;
}

.arquivo-upload-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border: 1px solid var(--verde);
    border-radius: 8px;
    background: rgba(0, 255, 153, 0.08);
    color: var(--verde);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.arquivo-upload-botao:hover {
    background: rgba(0, 255, 153, 0.14);
}

.arquivo-upload-nome {
    color: var(--texto-secundario);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.importacao-analise-topo-compacto > div {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.layout-vanguard-descricao {
    font-size: 12px;
    color: var(--texto-secundario);
}

.layout-vanguard-compacto {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.layout-vanguard-compacto span {
    padding: 7px 10px;
    border: 1px solid var(--borda);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--verde);
}

/* =========================
   RESPONSIVIDADE
========================= */

@media (max-width: 1100px) {

    .cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-dashboard {
        grid-template-columns: 1fr;
    }

    .atividade {
        grid-column: auto;
    }

    .filtros-grid {
        grid-template-columns: 1fr;
    }

    .filtros-avancados-contatos {
        grid-template-columns: 1fr 1fr;
    }

    .barra-selecao-contatos {
        align-items: flex-start;
        flex-direction: column;
    }

    .barra-selecao-acoes {
        width: 100%;
        justify-content: flex-start;
    }

    .origem-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 760px) {

    :root {
        --sidebar-largura: 75px;
    }

    .logo {
        justify-content: center;
        padding: 0;
    }

    .logo > div:last-child {
        display: none;
    }

    .menu-item {
        justify-content: center;
        padding: 0;
        font-size: 0;
    }

    .menu-item span {
        font-size: 18px;
    }

    .sidebar-footer {
        display: none;
    }

    .dashboard {
        padding: 20px;
    }

    .topbar {
        padding: 0 20px;
    }

    .status-operacao {
        display: none;
    }

    .usuario > div:last-child {
        display: none;
    }

    .boas-vindas {
        align-items: flex-start;
        gap: 20px;
        flex-direction: column;
    }

    .pagina-cabecalho {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .cards {
        grid-template-columns: 1fr;
    }

    .pagina-interna {
        padding: 16px;
    }

}

input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.8);
    cursor: pointer;
}

.sidebar,
.conteudo {
    transition: width 0.25s ease, margin-left 0.25s ease;
}

.sidebar-toggle {
    position: absolute;
    top: 98px;
    right: -14px;

    width: 28px;
    height: 28px;

    border-radius: 50%;
    border: 1px solid var(--borda);

    background: var(--painel);
    color: var(--verde-claro);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 20px;
    cursor: pointer;

    z-index: 20;
}

.sidebar-toggle:hover {
    border-color: var(--verde);
}

.app.sidebar-recolhida {
    --sidebar-largura: 72px;
}

.app.sidebar-recolhida .logo {
    padding: 0 10px;
    justify-content: center;
}

.app.sidebar-recolhida .logo img {
    width: 52px;
}

.app.sidebar-recolhida .menu {
    padding-left: 8px;
    padding-right: 8px;
}

.app.sidebar-recolhida .menu-item {
    justify-content: center;
    padding: 0;
    font-size: 0;
    gap: 0;
}

.app.sidebar-recolhida .menu-item span {
    width: auto;
    font-size: 17px;
}

.app.sidebar-recolhida .sidebar-footer {
    display: none;
}

.app.sidebar-recolhida .sidebar-toggle {
    transform: rotate(180deg);
}.sidebar,
.conteudo {
    transition: width 0.25s ease, margin-left 0.25s ease;
}

.sidebar-toggle {
    position: absolute;
    top: 98px;
    right: -14px;

    width: 28px;
    height: 28px;

    border-radius: 50%;
    border: 1px solid var(--borda);

    background: var(--painel);
    color: var(--verde-claro);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 20px;
    cursor: pointer;

    z-index: 20;
}

.sidebar-toggle:hover {
    border-color: var(--verde);
}

.app.sidebar-recolhida {
    --sidebar-largura: 72px;
}

.app.sidebar-recolhida .logo {
    padding: 0 10px;
    justify-content: center;
}

.app.sidebar-recolhida .logo img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    object-position: left center;
}

.app.sidebar-recolhida .menu {
    padding-left: 8px;
    padding-right: 8px;
}

.app.sidebar-recolhida .menu-item {
    justify-content: center;
    padding: 0;
    font-size: 0;
    gap: 0;
}

.app.sidebar-recolhida .menu-item span {
    width: auto;
    font-size: 17px;
}

.app.sidebar-recolhida .sidebar-footer {
    display: none;
}

.app.sidebar-recolhida .sidebar-toggle {
    transform: rotate(180deg);
}

@media (max-width: 760px) {
    .filtros-avancados-contatos {
        grid-template-columns: 1fr;
    }

    .barra-selecao-acoes {
        flex-direction: column;
        align-items: stretch;
    }

    .barra-selecao-acoes button {
        width: 100%;
    }
}


/* ==========================================
   TAGS CADASTRADAS / PADRONIZAÇÃO
   ========================================== */
.cadastro-tag-linha {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
}

.tags-cadastradas-bloco {
    margin-top: 22px;
}

.tags-cadastradas-bloco > strong {
    display: block;
    margin-bottom: 10px;
}

.lista-tags-cadastradas {
    display: grid;
    gap: 8px;
}

.tag-cadastrada-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px;
    border: 1px solid var(--borda);
    border-radius: 9px;
    background: rgba(255,255,255,0.015);
}

.tag-cadastrada-item > div {
    display: grid;
    gap: 2px;
}

.tag-cadastrada-item small {
    color: var(--texto-secundario);
    font-size: 10px;
}

.botao-tag-remover {
    border: 1px solid rgba(239, 68, 68, 0.38);
    color: #f87171;
    background: transparent;
    border-radius: 7px;
    padding: 7px 10px;
    cursor: pointer;
    font-size: 10px;
}

.botao-tag-remover:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.selecao-tags-cadastradas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px;
    min-height: 40px;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: #10251f;
}

.tag-opcao-cadastrada {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 7px;
    border: 1px solid #29483f;
    border-radius: 6px;
    cursor: pointer;
    font-size: 10px;
    line-height: 1;
    user-select: none;
    white-space: nowrap;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tag-opcao-cadastrada:hover {
    border-color: #3b6659;
}

.tag-opcao-cadastrada:has(input:checked) {
    border-color: var(--verde);
    background: rgba(16, 185, 129, 0.08);
    color: var(--verde-claro);
}

.tag-opcao-cadastrada input {
    width: 13px;
    height: 13px;
    margin: 0;
    accent-color: var(--verde);
}

.selecao-tags-vazia {
    color: #fbbf24;
    font-size: 11px;
}

@media (max-width: 700px) {
    .cadastro-tag-linha {
        grid-template-columns: 1fr;
    }
}


/* Cidade controlada por UF / IBGE */
input[list]:disabled {
    opacity: 0.62;
    cursor: not-allowed;
}

/* ==========================================================
   VALTUM VOICE — TEMA CLARO MODERNO / TECNOLÓGICO
   2026-10-03
   Apenas apresentação visual. Regras e funcionalidades intactas.
   ========================================================== */

:root {
    --fundo: #f4f7fb;
    --sidebar: #ffffff;
    --painel: #ffffff;
    --painel-claro: #f7faff;
    --borda: #dde7f2;

    /* Mantemos os nomes legados para não tocar no JavaScript/HTML. */
    --verde: #1683ff;
    --verde-claro: #238cff;
    --verde-escuro: #0a63d8;
    --verde-principal: #1683ff;
    --dourado: #7c3aed;

    --texto: #10213f;
    --texto-secundario: #60708a;
    --texto-fraco: #8b9ab0;
    --texto-suave: #718198;
    --vermelho: #ef4444;

    --azul-suave: #eaf4ff;
    --azul-muito-suave: #f6faff;
    --azul-borda: #cfe2fb;
    --azul-marinho: #10213f;
    --sucesso: #10b981;
    --alerta: #f59e0b;
    --violeta: #7c3aed;

    --sombra-card: 0 8px 26px rgba(26, 57, 99, 0.055);
    --sombra-flutuante: 0 18px 48px rgba(34, 61, 96, 0.14);
    --sidebar-largura: 250px;
}

html {
    color-scheme: light;
}

body {
    font-family: "Segoe UI Variable", "Segoe UI", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    background:
        radial-gradient(circle at 82% 0%, rgba(22, 131, 255, 0.055), transparent 30%),
        linear-gradient(180deg, #f9fbfe 0%, var(--fundo) 100%);
    color: var(--texto);
    letter-spacing: -0.01em;
}

button,
input,
select,
textarea,
summary {
    font: inherit;
}

::selection {
    background: rgba(22, 131, 255, 0.16);
    color: var(--texto);
}

/* ---------- Sidebar ---------- */
.sidebar {
    background: rgba(255, 255, 255, 0.97);
    border-right: 1px solid #e4ebf4;
    box-shadow: 5px 0 24px rgba(31, 60, 92, 0.035);
}

.logo {
    height: 96px;
    padding: 0 22px;
    background: #ffffff;
    border-bottom: 1px solid #edf2f7;
}

.logo img {
    width: 194px;
    max-height: 66px;
    object-fit: contain;
}

.menu {
    padding: 18px 12px;
    gap: 5px;
}

.menu-item {
    position: relative;
    min-height: 46px;
    padding: 0 14px;
    border-radius: 10px;
    color: #475b78;
    font-size: 14px;
    font-weight: 580;
    letter-spacing: -0.01em;
    border: 1px solid transparent;
    transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}

.menu-item span {
    color: #315982;
    opacity: .92;
}

.menu-item:hover {
    color: #0b5ec4;
    background: #f3f8fe;
    border-color: #e8f1fb;
}

.menu-item.ativo {
    color: #0868d7;
    background: linear-gradient(90deg, #e8f4ff 0%, #eef7ff 100%);
    border-color: #d9ebff;
    font-weight: 680;
}

.menu-item.ativo::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: #1683ff;
}

.menu-item.ativo span {
    color: #1683ff;
}

.sidebar-footer {
    padding: 16px;
    border-top: 1px solid #edf2f7;
}

.status-sistema {
    padding: 12px 13px;
    border: 1px solid #e7edf5;
    border-radius: 12px;
    background: #fbfdff;
}

.status-sistema strong {
    color: var(--texto);
    font-weight: 650;
}

.status-sistema small {
    color: #7d8ca1;
}

.status-bolinha {
    background: var(--sucesso);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.08), 0 0 12px rgba(16, 185, 129, 0.22);
}

.sidebar-toggle {
    top: 101px;
    right: -14px;
    background: #ffffff;
    border-color: #dce7f2;
    color: #3479c8;
    box-shadow: 0 5px 14px rgba(30, 72, 116, 0.08);
}

.sidebar-toggle:hover {
    border-color: #a9cffb;
    background: #f5faff;
}

/* ---------- Conteúdo / Topbar ---------- */
.conteudo {
    background: transparent;
}

.topbar {
    min-height: 82px;
    padding: 0 32px;
    background: rgba(255, 255, 255, 0.86);
    border-bottom: 1px solid #e8eef6;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .75);
    backdrop-filter: blur(12px);
}

.pagina-label {
    color: #456787;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2.1px;
}

.topbar h2 {
    color: var(--azul-marinho);
    font-size: 22px;
    line-height: 1.15;
    font-weight: 720;
    letter-spacing: -0.025em;
}

.status-operacao {
    color: #3f5672;
    font-size: 12px;
    font-weight: 550;
}

.usuario {
    padding-left: 2px;
}

.avatar {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #eaf5ff, #d9ebff);
    border: 1px solid #cfe3fa;
    color: #0872e5;
    font-weight: 750;
}

.usuario strong {
    color: #172944;
    font-weight: 680;
}

.usuario small {
    color: #7e8da1;
}

.dashboard,
.pagina-interna {
    padding: 28px 32px 38px;
}

.pagina-cabecalho,
.boas-vindas {
    margin-bottom: 24px;
}

.pagina-cabecalho h3,
.boas-vindas h3 {
    color: #0f2141;
    font-size: 28px;
    line-height: 1.12;
    font-weight: 730;
    letter-spacing: -0.035em;
}

.pagina-descricao,
.boas-vindas > div > p:last-child {
    color: #667994;
    font-size: 13px;
}

/* ---------- Botões ---------- */
.botao-principal {
    min-height: 42px;
    padding: 11px 18px;
    border-radius: 9px;
    background: linear-gradient(180deg, #1c8cff 0%, #0d76eb 100%);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(22, 131, 255, 0.18);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.botao-principal:hover {
    background: linear-gradient(180deg, #167fe9 0%, #0a67d1 100%);
    box-shadow: 0 10px 22px rgba(22, 131, 255, 0.23);
}

.botao-secundario,
.botao-cancelar {
    color: #48617f;
    background: #ffffff;
    border: 1px solid #d8e4f0;
    border-radius: 8px;
    font-weight: 600;
}

.botao-secundario:hover,
.botao-cancelar:hover {
    color: #0d6fdd;
    background: #f7fbff;
    border-color: #b8d8fa;
}

.botao-voltar {
    color: #1377df;
}

.botao-voltar:hover {
    color: #075fb9;
}

.botao-excluir-base,
.botao-excluir-campanha,
.botao-perigo {
    background: #fff7f7;
    border-color: #fecaca;
    color: #dc3545;
    border-radius: 8px;
}

.botao-excluir-base:hover,
.botao-excluir-campanha:hover,
.botao-perigo:hover {
    background: #ef4444;
    border-color: #ef4444;
    color: #ffffff;
}

/* ---------- Cards / Painéis ---------- */
.cards {
    gap: 14px;
    margin-bottom: 14px;
}

.card,
.painel {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid #e0e8f2;
    box-shadow: var(--sombra-card);
}

.card {
    min-height: 136px;
    padding: 18px 19px;
    border-radius: 13px;
}

.card:hover {
    border-color: #c7dcf2;
    box-shadow: 0 12px 30px rgba(30, 66, 105, 0.075);
    transform: translateY(-1px);
}

.card-topo {
    margin-bottom: 14px;
    color: #50647f;
    font-size: 11px;
    font-weight: 600;
}

.card-icon,
.campanha-icone,
.estado-vazio-icon {
    background: #eaf4ff;
    color: #087bf2;
}

.card:nth-child(2) .card-icon {
    background: #e9fbf4;
    color: #10a66f;
}

.card:nth-child(3) .card-icon {
    background: #eef4ff;
    color: #2878db;
}

.card:nth-child(4) .card-icon {
    background: #f3edff;
    color: #7c3aed;
}

.numero {
    color: #0b1f43;
    font-size: 29px;
    font-weight: 740;
    letter-spacing: -0.04em;
}

.numero.numero-texto {
    color: #10213f;
    font-size: 20px;
}

.card small {
    color: #73839a;
}

.painel {
    border-radius: 13px;
    padding: 20px;
    margin-bottom: 14px;
}

.painel-titulo {
    border-bottom-color: #e8eef5;
}

.painel-titulo h4 {
    color: #142746;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.painel-titulo p {
    color: #8795a7;
}

/* ---------- Campanhas / listas ---------- */
.campanha-item,
.contato-base-item,
.origem-grid,
.origem-telefones,
.resumo-item,
.importacao-analise,
.tag-cadastrada-item {
    background: #fbfdff;
    border-color: #e1eaf3;
}

.campanha-item,
.contato-base-item {
    border-radius: 10px;
}

.campanha-item:hover,
.contato-base-item:hover {
    background: #f7fbff;
    border-color: #c7dcf2;
}

.campanha-nome-linha h5,
.campanha-dados strong,
.contato-base-nome strong {
    color: #132744;
}

.status-execucao,
.badge-online {
    color: #078a5f;
    background: #e9fbf4;
}

.status-rascunho,
.importacao-status {
    color: #6d3dd1;
    background: #f3edff;
}

/* ---------- Filtros / inputs ---------- */
.busca-contatos input,
.form-grupo input,
.form-grupo select,
textarea,
.filtro-multiplo summary,
.selecao-tags-cadastradas,
input[list] {
    background: #ffffff;
    border-color: #d9e5f0;
    color: #172944;
    box-shadow: inset 0 1px 1px rgba(20, 49, 80, 0.015);
}

.busca-contatos input::placeholder,
.form-grupo input::placeholder,
textarea::placeholder,
input[list]::placeholder {
    color: #9aa8ba;
}

.busca-contatos input:focus,
.form-grupo input:focus,
.form-grupo select:focus,
textarea:focus,
.filtro-multiplo[open] summary,
input[list]:focus {
    border-color: #78b7fa;
    box-shadow: 0 0 0 3px rgba(22, 131, 255, 0.09);
}

.filtros-avancados-contatos {
    border-top-color: #e8eef5;
}

.filtro-multiplo-opcoes {
    background: #ffffff;
    border-color: #dbe6f1;
    box-shadow: var(--sombra-flutuante);
}

.filtro-multiplo-item {
    color: #4d617c;
}

.filtro-multiplo-item:hover {
    background: #f1f7ff;
    color: #0f66c8;
}

.filtro-multiplo-item input,
.checkbox-contato-campanha,
#checkboxSelecionarTodosFiltrados,
.tag-opcao-cadastrada input {
    accent-color: #1683ff;
}

.barra-selecao-contatos {
    min-height: 58px;
    border-color: #d5e8fb;
    background: linear-gradient(90deg, #eff7ff 0%, #f7fbff 100%);
    border-radius: 10px;
}

.barra-selecao-contatos strong {
    color: #0b77e6;
}

.contato-selecionado td {
    background: #f3f9ff;
}

.contato-tags-resumo {
    color: #0879e8 !important;
    font-weight: 650;
}

/* ---------- Tabelas ---------- */
.tabela-contatos-wrapper {
    border-radius: 10px;
}

.tabela-contatos {
    color: #1b2e4b;
}

.tabela-contatos th,
.contato-base-cabecalho {
    background: #f6f9fd;
    color: #526882;
    border-color: #e2eaf3;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .08em;
}

.tabela-contatos td {
    color: #1c2e49;
    border-bottom-color: #e8eef5;
}

.tabela-contatos tr:hover td {
    background: #f8fbff;
}

.contato-cel-nome strong {
    color: #122542;
    font-weight: 690;
}

.contato-cel-nome small {
    color: #74859b;
}

.badge-base-tag {
    background: #fff7e7;
    border-color: #f7e6bf;
    color: #8c6419;
}

.status-contato.ativo {
    background: var(--sucesso);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.08);
}

.status-contato.inativo {
    background: #94a3b8;
    box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.10);
}

.paginacao-contatos button {
    background: #ffffff;
    color: #55708e;
    border-color: #dce6f0;
}

.paginacao-contatos button:not(:disabled):hover {
    color: #0b6ed9;
    border-color: #b9d8f8;
    background: #f5faff;
}

.paginacao-contatos span {
    color: #63768e;
}

/* ---------- Ficha do contato / Tags ---------- */
.modal-largo .secao-titulo {
    color: #2d608e;
    font-size: 11px;
    font-weight: 780;
    letter-spacing: 1.35px;
}

.selecao-tags-cadastradas {
    padding: 8px;
    min-height: 42px;
    border-radius: 8px;
    gap: 6px;
}

.tag-opcao-cadastrada {
    padding: 5px 8px;
    border: 1px solid #d9e4ef;
    border-radius: 5px;
    background: #ffffff;
    color: #5a6c82;
    font-size: 10px;
    font-weight: 650;
}

.tag-opcao-cadastrada:hover {
    border-color: #9ecbfa;
    background: #f7fbff;
}

.tag-opcao-cadastrada:has(input:checked) {
    border-color: #75b9fb;
    background: #edf6ff;
    color: #086ed8;
}

.tag-cadastrada-item {
    box-shadow: 0 3px 12px rgba(35, 68, 104, 0.025);
}

/* ---------- Modal ---------- */
.modal-overlay {
    background: rgba(20, 35, 57, 0.34);
    backdrop-filter: blur(7px);
}

.modal {
    background: #ffffff;
    border-color: #dce6f0;
    box-shadow: 0 32px 80px rgba(28, 54, 87, 0.22);
}

.modal-header {
    border-bottom-color: #e7edf4;
}

.modal-header h3 {
    color: #122440;
    font-weight: 720;
    letter-spacing: -0.025em;
}

.modal-header p,
.modal-corpo {
    color: #65778e;
}

.modal-fechar {
    color: #75869c;
}

.modal-fechar:hover {
    color: #1f3c62;
}

.modal-footer {
    border-top-color: #e7edf4;
    background: #fbfdff;
}

#compStatus.status-ativo {
    border-color: #7bd8b5;
    color: #078a5f;
    background: #f0fbf7;
}

#compStatus.status-inativo {
    border-color: #f5a5a9;
    color: #d83b45;
    background: #fff7f7;
}

#compStatus option {
    color: #172944;
    background: #ffffff;
}

.modal-aviso {
    background: #f5f0ff;
    border-color: #ded1fb;
}

.modal-aviso span {
    background: #7c3aed;
    color: #ffffff;
}

.modal-aviso p {
    color: #6742ae;
}

/* ---------- Importação ---------- */
.importacao-analise,
.resumo-item {
    background: #f9fbfe;
    border-color: #dfe8f2;
}

.layout-campo {
    background: #ffffff;
    border-color: #dfe8f2;
}

.layout-campo strong,
.layout-vanguard-compacto span,
.resumo-item strong {
    color: #0879e8;
}

.arquivo-upload-botao {
    border-color: #8ec4fb;
    background: #eef7ff;
    color: #0879e8;
}

.arquivo-upload-botao:hover {
    background: #e3f1ff;
}

/* ---------- Módulos específicos ---------- */
.circulo-canais {
    border-color: #dce9f6;
    box-shadow: inset 0 0 0 1px #eef4fa;
}

.barra-canais {
    background: #e8eff6;
}

.barra-uso {
    background: #1683ff;
}

.legenda.livre {
    background: var(--sucesso);
}

.legenda.ocupado {
    background: #7c3aed;
}

.integracao-descricao {
    color: #667991;
}

.painel-rodape-acoes,
.divisor-ficha {
    border-color: #e7edf4;
    background-color: #e7edf4;
}

/* ---------- Estados vazios ---------- */
.estado-vazio-icon {
    background: #edf6ff;
}

.estado-vazio p {
    color: #8291a5;
}

/* ---------- Scrollbar ---------- */
* {
    scrollbar-color: #c9d8e8 transparent;
    scrollbar-width: thin;
}

*::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: #cbd9e8;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: #afc3d8;
    background-clip: padding-box;
}

/* ---------- Calendar / selects ---------- */
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: none;
    opacity: .65;
}

select option {
    background: #ffffff;
    color: #172944;
}

/* ---------- Responsividade do tema ---------- */
@media (max-width: 1100px) {
    .dashboard,
    .pagina-interna {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (max-width: 760px) {
    .dashboard,
    .pagina-interna {
        padding: 18px 16px 28px;
    }

    .topbar {
        padding-left: 18px;
        padding-right: 18px;
    }

    .logo {
        height: 84px;
    }
}

/* ==========================================================
   VALTUM VOICE — REFINAMENTO VISUAL FIX8
   2026-10-03
   Somente apresentação visual. HTML/JS e funcionalidades intactos.
   ========================================================== */

:root {
    --vv-azul: #1683f3;
    --vv-azul-hover: #0e6fd8;
    --vv-azul-escuro: #0d2a57;
    --vv-azul-claro: #eaf4ff;
    --vv-fundo: #f5f8fc;
    --vv-card: #ffffff;
    --vv-borda: #c9d8ea;
    --vv-borda-hover: #9ebde0;
    --vv-borda-suave: #e3eaf3;
    --vv-texto: #172b4d;
    --vv-texto-secundario: #5f718b;
    --vv-placeholder: #8798ae;
    --vv-sucesso: #16b87a;
    --vv-alerta: #f5a700;
    --vv-erro: #e5484d;
    --vv-danger-bg: #fff3f3;
    --vv-danger-border: #f4b7b9;
    --vv-radius: 12px;
    --vv-shadow-card: 0 4px 14px rgba(13, 42, 87, 0.06);
    --vv-shadow-modal: 0 18px 50px rgba(13, 42, 87, 0.16);

    /* Compatibilidade com os nomes legados já usados pelo sistema. */
    --fundo: var(--vv-fundo);
    --sidebar: var(--vv-card);
    --painel: var(--vv-card);
    --painel-claro: #f8fbff;
    --borda: var(--vv-borda);
    --verde: var(--vv-azul);
    --verde-claro: #2e91f6;
    --verde-escuro: var(--vv-azul-hover);
    --verde-principal: var(--vv-azul);
    --texto: var(--vv-texto);
    --texto-secundario: var(--vv-texto-secundario);
    --texto-fraco: var(--vv-placeholder);
    --texto-suave: #71829a;
    --vermelho: var(--vv-erro);
    --azul-suave: var(--vv-azul-claro);
    --azul-muito-suave: #f7fbff;
    --azul-borda: #d4e6f8;
    --azul-marinho: var(--vv-azul-escuro);
    --sucesso: var(--vv-sucesso);
    --alerta: var(--vv-alerta);
    --sombra-card: var(--vv-shadow-card);
    --sombra-flutuante: 0 14px 36px rgba(13, 42, 87, 0.14);
}

body {
    font-family: Inter, "Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    background: var(--vv-fundo);
    color: var(--vv-texto);
    letter-spacing: -0.012em;
}

/* ---------- Tipografia e contraste ---------- */
.topbar h2,
.pagina-cabecalho h3,
.boas-vindas h3,
.modal-header h3,
.painel-titulo h4,
.campanha-nome-linha h5,
.contato-cel-nome strong,
.contato-base-nome strong,
.numero {
    color: var(--vv-azul-escuro);
}

.pagina-cabecalho h3,
.boas-vindas h3 {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.035em;
}

.topbar h2,
.modal-header h3 {
    font-weight: 700;
}

.pagina-descricao,
.boas-vindas > div > p:last-child,
.card small,
.painel-titulo p,
.modal-header p,
.modal-corpo,
.integracao-descricao,
.contato-cel-nome small,
.paginacao-contatos span,
.status-sistema small {
    color: var(--vv-texto-secundario);
}

label,
.form-grupo > label,
.busca-contatos label,
.filtro-multiplo-label {
    color: #405a7b;
    font-weight: 600;
}

input::placeholder,
textarea::placeholder,
.busca-contatos input::placeholder,
.form-grupo input::placeholder,
input[list]::placeholder {
    color: var(--vv-placeholder) !important;
    opacity: 1;
}

/* ---------- Estrutura, cards e painéis ---------- */
.sidebar,
.topbar,
.card,
.painel,
.modal,
.campanha-item,
.contato-base-item,
.importacao-analise,
.resumo-item,
.tag-cadastrada-item,
.origem-grid,
.origem-telefones {
    border-color: var(--vv-borda-suave);
}

.card,
.painel {
    background: var(--vv-card);
    border: 1px solid var(--vv-borda-suave);
    box-shadow: var(--vv-shadow-card);
    border-radius: var(--vv-radius);
}

.card {
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.card:hover {
    border-color: #c8d9eb;
    box-shadow: 0 8px 22px rgba(13, 42, 87, 0.08);
    transform: translateY(-1px);
}

.painel,
.importacao-analise,
.campanha-item,
.contato-base-item,
.tag-cadastrada-item,
.origem-grid,
.origem-telefones,
.resumo-item {
    border-radius: var(--vv-radius);
}

.painel-titulo,
.modal-header,
.modal-footer,
.filtros-avancados-contatos,
.tabela-contatos td,
.painel-rodape-acoes,
.divisor-ficha {
    border-color: var(--vv-borda-suave);
}

/* ---------- Inputs, selects, textarea e filtros ---------- */
.busca-contatos input,
.form-grupo input,
.form-grupo select,
textarea,
.filtro-multiplo summary,
.selecao-tags-cadastradas,
input[list],
select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"] {
    background: #ffffff;
    color: var(--vv-texto);
    border-color: var(--vv-borda);
    box-shadow: none;
    border-radius: 9px;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.busca-contatos input:hover,
.form-grupo input:hover,
.form-grupo select:hover,
textarea:hover,
.filtro-multiplo summary:hover,
.selecao-tags-cadastradas:hover,
input[list]:hover,
select:hover,
input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="number"]:hover,
input[type="date"]:hover {
    border-color: var(--vv-borda-hover);
}

.busca-contatos input:focus,
.form-grupo input:focus,
.form-grupo select:focus,
textarea:focus,
.filtro-multiplo[open] summary,
.selecao-tags-cadastradas:focus-within,
input[list]:focus,
select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus {
    border-color: var(--vv-azul);
    box-shadow: 0 0 0 3px rgba(22, 131, 243, 0.10);
    outline: none;
}

input:disabled,
select:disabled,
textarea:disabled,
input[list]:disabled {
    background: #f4f7fb;
    border-color: #dbe5ef;
    color: #7f8ea3;
}

.filtro-multiplo-opcoes {
    background: #fff;
    border-color: var(--vv-borda);
    box-shadow: var(--sombra-flutuante);
    border-radius: 10px;
}

.filtro-multiplo-item {
    color: #435b7a;
}

.filtro-multiplo-item:hover {
    background: var(--vv-azul-claro);
    color: var(--vv-azul-hover);
}

/* ---------- Botões ---------- */
.botao-principal {
    background: var(--vv-azul);
    color: #fff;
    border: 1px solid var(--vv-azul);
    border-radius: 9px;
    box-shadow: 0 6px 14px rgba(22, 131, 243, 0.16);
    font-weight: 700;
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.botao-principal:hover {
    background: var(--vv-azul-hover);
    border-color: var(--vv-azul-hover);
    box-shadow: 0 8px 18px rgba(22, 131, 243, 0.20);
    transform: translateY(-1px);
}

.botao-principal:active {
    transform: translateY(0);
}

.botao-secundario,
.botao-cancelar,
.paginacao-contatos button {
    background: #fff;
    color: #24446b;
    border-color: var(--vv-borda);
}

.botao-secundario:hover,
.botao-cancelar:hover,
.paginacao-contatos button:not(:disabled):hover {
    background: #f7fbff;
    color: var(--vv-azul-hover);
    border-color: var(--vv-borda-hover);
}

.botao-excluir-base,
.botao-excluir-campanha,
.botao-perigo {
    background: var(--vv-danger-bg);
    border-color: var(--vv-danger-border);
    color: #d9363e;
}

.botao-excluir-base:hover,
.botao-excluir-campanha:hover,
.botao-perigo:hover {
    background: #ffe9e9;
    border-color: #ea8d92;
    color: #c42f37;
}

/* ---------- Sidebar ---------- */
.sidebar {
    background: #fff;
    border-right: 1px solid var(--vv-borda-suave);
    box-shadow: 4px 0 18px rgba(13, 42, 87, 0.035);
}

.logo {
    background: #fff;
    border-bottom-color: var(--vv-borda-suave);
}

.menu-item {
    color: #425b7b;
    border-radius: 10px;
}

.menu-item span {
    color: #315982;
}

.menu-item:hover {
    color: var(--vv-azul-hover);
    background: #f5f9fe;
    border-color: #e4eef8;
}

.menu-item.ativo {
    color: var(--vv-azul-hover);
    background: var(--vv-azul-claro);
    border-color: #cee3fa;
}

.menu-item.ativo::before {
    background: var(--vv-azul);
}

.menu-item.ativo span {
    color: var(--vv-azul);
}

.status-sistema {
    background: #fbfdff;
    border-color: var(--vv-borda-suave);
}

/* ---------- Barra superior ---------- */
.topbar {
    background: rgba(255,255,255,.95);
    border-bottom-color: var(--vv-borda-suave);
    box-shadow: 0 1px 8px rgba(13, 42, 87, 0.035);
}

.avatar {
    background: var(--vv-azul-claro);
    border-color: #c8def5;
    color: var(--vv-azul-hover);
}

.usuario strong {
    color: var(--vv-texto);
}

.usuario small,
.status-operacao {
    color: var(--vv-texto-secundario);
}

/* ---------- Tabelas ---------- */
.tabela-contatos-wrapper {
    border: 1px solid var(--vv-borda-suave);
    border-radius: var(--vv-radius);
    overflow: hidden;
    background: #fff;
}

.tabela-contatos th,
.contato-base-cabecalho {
    background: #f4f8fc;
    color: #48617f;
    border-color: var(--vv-borda-suave);
}

.tabela-contatos td {
    color: var(--vv-texto);
    border-bottom-color: var(--vv-borda-suave);
}

.tabela-contatos tr:hover td {
    background: #f8fbff;
}

.contato-cel-nome small {
    color: var(--vv-texto-secundario);
}

.badge-base-tag {
    background: #fff7e8;
    border-color: #f3dcae;
    color: #835e17;
}

/* ---------- Seleção de contatos ---------- */
.barra-selecao-contatos {
    border-color: #cfe2f5;
    background: linear-gradient(90deg, #edf6ff 0%, #f7fbff 100%);
}

.barra-selecao-contatos strong,
.contato-tags-resumo {
    color: var(--vv-azul-hover) !important;
}

.contato-selecionado td {
    background: #f1f7ff;
}

/* ---------- Tags ---------- */
.selecao-tags-cadastradas {
    background: #fff;
    border-color: var(--vv-borda);
    border-radius: 9px;
}

.tag-opcao-cadastrada {
    background: #fff;
    color: #4f627a;
    border-color: #cedbea;
    border-radius: 5px;
}

.tag-opcao-cadastrada:hover {
    background: #f6faff;
    border-color: var(--vv-borda-hover);
}

.tag-opcao-cadastrada:has(input:checked) {
    background: var(--vv-azul-claro);
    border-color: #78b5ef;
    color: var(--vv-azul-hover);
}

.filtro-multiplo-item input,
.checkbox-contato-campanha,
#checkboxSelecionarTodosFiltrados,
.tag-opcao-cadastrada input {
    accent-color: var(--vv-azul);
}

/* ---------- Modal / ficha ---------- */
.modal-overlay {
    background: rgba(25, 45, 70, 0.30);
    backdrop-filter: blur(6px);
}

.modal {
    border: 1px solid var(--vv-borda);
    box-shadow: var(--vv-shadow-modal);
    border-radius: 14px;
}

.modal-header {
    border-bottom-color: var(--vv-borda-suave);
}

.modal-footer {
    background: #fbfdff;
    border-top-color: var(--vv-borda-suave);
}

.modal-fechar {
    color: #627691;
}

.modal-fechar:hover {
    color: var(--vv-azul-escuro);
}

.modal-largo .secao-titulo {
    color: #385d85;
}

/* ---------- Status / feedback ---------- */
.status-bolinha,
.status-contato.ativo,
.legenda.livre {
    background: var(--vv-sucesso);
}

.status-contato.ativo,
.status-bolinha {
    box-shadow: 0 0 0 4px rgba(22, 184, 122, 0.09);
}

#compStatus.status-ativo {
    border-color: #8bd9bb;
    color: #0d8a60;
    background: #f2fbf7;
}

#compStatus.status-inativo {
    border-color: var(--vv-danger-border);
    color: #cf3e46;
    background: var(--vv-danger-bg);
}

/* ---------- Importação ---------- */
.importacao-analise,
.resumo-item,
.layout-campo {
    background: #fbfdff;
    border-color: var(--vv-borda-suave);
}

.layout-campo strong,
.layout-vanguard-compacto span,
.resumo-item strong {
    color: var(--vv-azul-hover);
}

.arquivo-upload-botao {
    border-color: var(--vv-borda-hover);
    background: #f2f8ff;
    color: var(--vv-azul-hover);
}

.arquivo-upload-botao:hover {
    background: var(--vv-azul-claro);
    border-color: #79b5ef;
}

/* ---------- Scrollbar ---------- */
* {
    scrollbar-color: #b9c9db transparent;
}

*::-webkit-scrollbar-thumb {
    background: #bccbdd;
}

*::-webkit-scrollbar-thumb:hover {
    background: #9eafc4;
}

/* ---------- Acessibilidade visual ---------- */
:focus-visible {
    outline: 2px solid rgba(22, 131, 243, 0.42);
    outline-offset: 2px;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    opacity: .66;
}



/* =========================================================
   FIX11 — CONTATOS VINCULADOS A CAMPANHAS
   Azul = em execução | Slate = rascunho
   ========================================================= */
.tabela-contatos tbody tr.contato-em-campanha-ativa td {
    background: #eef6ff;
}

.tabela-contatos tbody tr.contato-em-campanha-ativa td:first-child {
    box-shadow: inset 4px 0 0 var(--vv-azul);
}

.tabela-contatos tbody tr.contato-em-campanha-rascunho td {
    background: #f4f7fb;
}

.tabela-contatos tbody tr.contato-em-campanha-rascunho td:first-child {
    box-shadow: inset 4px 0 0 #718399;
}

.tabela-contatos tbody tr.contato-em-campanha-ativa:hover td {
    background: #e4f1ff;
}

.tabela-contatos tbody tr.contato-em-campanha-rascunho:hover td {
    background: #eaf0f6;
}

/* A seleção manual continua visível mesmo quando o contato já está em campanha. */
.tabela-contatos tbody tr.contato-selecionado.contato-em-campanha-ativa td,
.tabela-contatos tbody tr.contato-selecionado.contato-em-campanha-rascunho td {
    outline: 1px solid rgba(22, 131, 243, 0.28);
    outline-offset: -1px;
}

/* ==========================================================
   FIX 12 — AGENTES / RAMAIS + SIDEBAR AZUL-MARINHO
   Mantém o conteúdo claro e aplica o padrão visual aprovado.
   ========================================================== */

/* ---------- Sidebar escura oficial ---------- */
.sidebar {
    background: linear-gradient(180deg, #071a36 0%, #08264f 100%) !important;
    border-right: 1px solid rgba(138, 183, 236, 0.16) !important;
    box-shadow: 6px 0 24px rgba(7, 26, 54, 0.12) !important;
}

.logo {
    position: relative;
    background: transparent !important;
    border-bottom-color: rgba(255,255,255,.10) !important;
    overflow: visible;
}

.logo img {
    position: relative;
    z-index: 1;
}

/* Sobrepõe apenas o wordmark superior em branco, mantendo o V e VOICE azuis. */
.logo::after {
    content: "";
    position: absolute;
    left: 22px;
    top: 15px;
    width: 194px;
    height: 66px;
    background: url("img/valtum-voice.png") center / contain no-repeat;
    filter: brightness(0) invert(1);
    clip-path: inset(0 0 38% 31%);
    pointer-events: none;
    z-index: 2;
}

.menu-item {
    color: #e7f0fb !important;
    border-color: transparent !important;
}

.menu-item span {
    color: #9cccf8 !important;
    opacity: 1 !important;
}

.menu-item:hover {
    color: #ffffff !important;
    background: rgba(45, 132, 235, 0.14) !important;
    border-color: rgba(111, 177, 255, 0.14) !important;
}

.menu-item.ativo {
    color: #ffffff !important;
    background: linear-gradient(90deg, #0f4c91 0%, #123f77 100%) !important;
    border-color: rgba(119, 184, 255, 0.20) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.015);
}

.menu-item.ativo::before {
    background: #27a2ff !important;
}

.menu-item.ativo span {
    color: #ffffff !important;
}

.sidebar-footer {
    border-top-color: rgba(255,255,255,.10) !important;
}

.status-sistema {
    background: rgba(255,255,255,.045) !important;
    border-color: rgba(170, 207, 246, .18) !important;
}

.status-sistema strong {
    color: #ffffff !important;
}

.status-sistema small {
    color: #a9bed8 !important;
}

.sidebar-toggle {
    background: #ffffff !important;
    border-color: #d5e4f4 !important;
    color: #176fcf !important;
}

.app.sidebar-recolhida .logo::after {
    display: none;
}

.app.sidebar-recolhida .logo img {
    filter: brightness(0) invert(1);
}

/* ---------- Agentes / Ramais ---------- */
.agentes-cards .card-icon-sucesso {
    color: #0ca36d;
    background: #e7f8f1;
}

.agentes-cards .card-icon-ligacao {
    color: #0e72db;
    background: #eaf4ff;
}

.agentes-painel {
    margin-top: 18px;
}

.agentes-painel-titulo {
    align-items: center;
}

.agentes-contador {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 11px;
    border: 1px solid var(--vv-borda-suave, #e3eaf3);
    border-radius: 999px;
    background: #f8fbff;
    color: #607691;
    font-size: 12px;
    font-weight: 650;
}

.agentes-tabela-wrapper {
    overflow-x: auto;
}

.agentes-tabela {
    width: 100%;
    border-collapse: collapse;
    min-width: 980px;
}

.agentes-tabela th {
    padding: 12px 14px;
    background: #f4f8fc;
    color: #4a627e;
    border-top: 1px solid #e3eaf3;
    border-bottom: 1px solid #dfe7f0;
    text-align: left;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.agentes-tabela td {
    padding: 14px;
    border-bottom: 1px solid #e6edf5;
    color: #172b4d;
    font-size: 13px;
    vertical-align: middle;
}

.agentes-tabela tbody tr {
    transition: background-color .15s ease;
}

.agentes-tabela tbody tr:hover {
    background: #f7fbff;
}

.agente-identidade {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
}

.agente-identidade strong {
    display: block;
    margin-bottom: 2px;
    color: #102a55;
    font-size: 13px;
    font-weight: 750;
}

.agente-identidade small,
.ramal-nome-tabela,
.agente-ultimo-acesso {
    display: block;
    color: #72849c;
    font-size: 11px;
    font-weight: 500;
}

.agente-avatar-mini {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: #e7f2ff;
    border: 1px solid #cfe2f8;
    color: #0c73de;
    font-weight: 800;
}

.agente-perfil,
.ramal-tecnologia {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 0 9px;
    border-radius: 7px;
    background: #f0f5fb;
    border: 1px solid #dde8f3;
    color: #405a78;
    font-size: 11px;
    font-weight: 700;
}

.ramal-numero,
.ramal-numero-grande {
    display: block;
    color: #0d2a57;
    font-weight: 800;
}

.ramal-numero-grande {
    font-size: 15px;
}

.status-duplo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.badge-cadastro,
.badge-operacional {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 25px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 750;
    white-space: nowrap;
}

.badge-cadastro.ativo {
    background: #e8f8f2;
    color: #087c57;
    border: 1px solid #c5ecdd;
}

.badge-cadastro.inativo {
    background: #f3f5f8;
    color: #6d7b8f;
    border: 1px solid #dfe5ec;
}

.badge-operacional {
    background: #f1f5f9;
    color: #63758c;
    border: 1px solid #e0e7ef;
}

.badge-operacional > span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.badge-operacional.disponivel {
    background: #e9f9f2;
    color: #0b9d69;
    border-color: #c9eddf;
}

.badge-operacional.pausado {
    background: #fff6df;
    color: #b67500;
    border-color: #f6dfaa;
}

.badge-operacional.em_ligacao {
    background: #eaf4ff;
    color: #0d73dd;
    border-color: #cce3fb;
}

.badge-operacional.offline {
    background: #f1f4f7;
    color: #77889c;
    border-color: #e0e6ec;
}

.agente-campanhas-lista {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    max-width: 310px;
}

.agente-chip-campanha,
.agente-chip-mais {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 7px;
    border-radius: 6px;
    background: #edf5ff;
    color: #0f68c6;
    border: 1px solid #d4e8fd;
    font-size: 10px;
    font-weight: 700;
}

.agente-chip-mais {
    background: #f4f6f9;
    color: #65768a;
    border-color: #e3e8ee;
}

.texto-sem-dado {
    color: #8a98a9;
    font-size: 11px;
    font-style: normal;
}

.acoes-tabela-agente {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.acao-tabela-agente {
    min-height: 30px;
    padding: 0 9px;
    border-radius: 7px;
    border: 1px solid #cbdced;
    background: #fff;
    color: #244b78;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s ease;
}

.acao-tabela-agente:hover {
    border-color: #8ebdf0;
    background: #f2f8ff;
    color: #0e68c8;
}

.acao-tabela-agente.perigo {
    color: #cf3d45;
    border-color: #f0b7bb;
    background: #fff8f8;
}

.acao-tabela-agente.sucesso {
    color: #087b58;
    border-color: #b9e4d5;
    background: #f3fbf8;
}

.agentes-vazio {
    min-height: 220px;
}

.agentes-vazio[hidden] {
    display: none !important;
}

.form-grupo-largura-total {
    grid-column: 1 / -1;
}

.texto-ajuda {
    display: block;
    margin-top: 6px;
    color: #7c8da3;
    font-size: 10px;
    line-height: 1.45;
}

.campanhas-permissoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 48px;
    padding: 9px;
    border: 1px solid #c9d8ea;
    border-radius: 10px;
    background: #fff;
}

.campanha-permissao-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 29px;
    padding: 0 9px;
    border: 1px solid #d3e0ee;
    border-radius: 7px;
    background: #f8fbff;
    color: #355372;
    font-size: 11px;
    font-weight: 650;
    cursor: pointer;
}

.campanha-permissao-item:has(input:checked) {
    border-color: #71b5f7;
    background: #edf6ff;
    color: #0a6fd5;
}

.campanha-permissao-item input {
    accent-color: #1683f3;
}

.modal-agente-ramal {
    max-width: 860px;
}

.agente-form-grid select:disabled {
    opacity: .72;
    cursor: not-allowed;
    background: #f3f6f9;
}

@media (max-width: 900px) {
    .agente-form-grid {
        grid-template-columns: 1fr;
    }

    .form-grupo-largura-total {
        grid-column: 1;
    }
}

/* ==========================================================
   FIX 14 — TELEFONIA OPERACIONAL + NOMENCLATURA HABILITADO
   Interface simulada pronta para receber SIP/WebRTC no backend.
   ========================================================== */
.telefonia-cabecalho {
    align-items: center;
}

.telefonia-prototipo-aviso {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid #cfe0f3;
    border-radius: 999px;
    background: #f7fbff;
    color: #52708f;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.telefonia-prototipo-aviso span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f5a700;
    box-shadow: 0 0 0 4px rgba(245, 167, 0, .10);
}

.telefonia-grade-principal {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(330px, .8fr);
    gap: 18px;
    align-items: start;
}

.telefonia-coluna-operacao {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.telefonia-card {
    overflow: hidden;
}

.telefonia-card-titulo {
    align-items: center;
    gap: 14px;
}

.telefonia-status-chamada,
.telefonia-status-ramal {
    display: inline-flex;
    align-items: center;
    min-height: 29px;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .02em;
    white-space: nowrap;
}

.telefonia-status-chamada.ociosa,
.telefonia-status-ramal.offline {
    color: #66788f;
    background: #f1f4f7;
    border: 1px solid #dfe6ed;
}

.telefonia-status-chamada.chamando {
    color: #956300;
    background: #fff7e3;
    border: 1px solid #f4dfab;
}

.telefonia-status-chamada.em-ligacao,
.telefonia-status-ramal.disponivel {
    color: #087c57;
    background: #e8f8f2;
    border: 1px solid #c5ecdd;
}

.telefonia-status-ramal.em-ligacao {
    color: #0e6fcf;
    background: #eaf4ff;
    border: 1px solid #cce3fb;
}

.telefonia-status-ramal.pausado {
    color: #9a6800;
    background: #fff6df;
    border: 1px solid #f6dfaa;
}

.telefonia-chamada-corpo,
.telefonia-teclado-corpo {
    padding: 18px 20px 20px;
}

.telefonia-contato-cabecalho {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid #dce7f3;
    border-radius: 12px;
    background: linear-gradient(180deg, #fbfdff 0%, #f7fbff 100%);
}

.telefonia-avatar {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #e8f3ff;
    border: 1px solid #cfe3fb;
    color: #1177dc;
    font-size: 18px;
    font-weight: 850;
}

.telefonia-contato-cabecalho strong {
    display: block;
    color: #0d2a57;
    font-size: 15px;
    font-weight: 800;
}

.telefonia-contato-cabecalho small {
    display: block;
    margin-top: 3px;
    color: #70849d;
    font-size: 11px;
}

.telefonia-cronometro {
    min-width: 70px;
    text-align: right;
    color: #0d2a57;
    font-size: 20px;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

.telefonia-dados-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.telefonia-dados-grid > div {
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid #e1e9f2;
    border-radius: 10px;
    background: #fff;
}

.telefonia-dados-grid span,
.telefonia-operacao-item span {
    display: block;
    color: #71849c;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.telefonia-dados-grid strong {
    display: block;
    margin-top: 4px;
    color: #1b365d;
    font-size: 11px;
    font-weight: 750;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.telefonia-campo-linha {
    margin-top: 14px;
}

.telefonia-campo-linha label,
.telefonia-numero-label,
.telefonia-subtitulo {
    display: block;
    margin-bottom: 6px;
    color: #35516f;
    font-size: 10px;
    font-weight: 800;
}

.telefonia-campo-linha select,
.telefonia-campo-linha textarea,
.telefonia-numero-input,
.telefonia-filtros input,
.telefonia-filtros select {
    width: 100%;
    border: 1px solid #c9d8ea;
    border-radius: 9px;
    background: #fff;
    color: #172b4d;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.telefonia-campo-linha select,
.telefonia-numero-input,
.telefonia-filtros input,
.telefonia-filtros select {
    min-height: 40px;
    padding: 0 11px;
}

.telefonia-campo-linha textarea {
    min-height: 82px;
    padding: 10px 11px;
    resize: vertical;
    font-family: inherit;
}

.telefonia-campo-linha select:focus,
.telefonia-campo-linha textarea:focus,
.telefonia-numero-input:focus,
.telefonia-filtros input:focus,
.telefonia-filtros select:focus {
    border-color: #6eb3f7;
    box-shadow: 0 0 0 3px rgba(22, 131, 243, .10);
}

.telefonia-campo-linha textarea:disabled,
.telefonia-campo-linha select:disabled,
.telefonia-numero-input:disabled {
    background: #f4f7fa;
    color: #7c8da3;
    cursor: not-allowed;
}

.telefonia-resultados {
    margin-top: 14px;
}

.telefonia-resultados-botoes {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.telefonia-resultados-botoes button {
    min-height: 31px;
    padding: 0 10px;
    border: 1px solid #d3dfec;
    border-radius: 8px;
    background: #fff;
    color: #47627e;
    font-size: 10px;
    font-weight: 750;
    cursor: pointer;
}

.telefonia-resultados-botoes button:hover:not(:disabled) {
    border-color: #8ebef0;
    background: #f4f9ff;
    color: #0e6fcf;
}

.telefonia-resultados-botoes button.selecionado {
    color: #0b68c8;
    border-color: #75b6f4;
    background: #eaf4ff;
    box-shadow: inset 0 0 0 1px rgba(22,131,243,.08);
}

.telefonia-resultados-botoes button:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.telefonia-operacao-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    padding: 18px 20px 20px;
}

.telefonia-operacao-item {
    min-width: 0;
    padding: 12px;
    border: 1px solid #e0e9f2;
    border-radius: 10px;
    background: #fbfdff;
}

.telefonia-operacao-item strong {
    display: block;
    margin-top: 6px;
    color: #0d2a57;
    font-size: 22px;
    font-weight: 850;
}

.telefonia-operacao-item strong.texto-operacao {
    font-size: 12px;
    line-height: 1.3;
}

.telefonia-operacao-item small {
    display: block;
    margin-top: 4px;
    color: #8190a3;
    font-size: 9px;
    line-height: 1.35;
}

.telefonia-teclado-card {
    position: sticky;
    top: 18px;
}

.telefonia-identificacao-ramal {
    margin-top: 10px;
    padding: 10px 11px;
    border: 1px solid #e0e9f2;
    border-radius: 10px;
    background: #f8fbff;
}

.telefonia-identificacao-ramal strong,
.telefonia-identificacao-ramal small {
    display: block;
}

.telefonia-identificacao-ramal strong {
    color: #17375f;
    font-size: 11px;
    font-weight: 800;
}

.telefonia-identificacao-ramal small {
    margin-top: 3px;
    color: #72859d;
    font-size: 9px;
}

.telefonia-numero-label {
    margin-top: 15px;
}

.telefonia-numero-input {
    height: 48px;
    text-align: center;
    color: #0d2a57;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .03em;
}

.telefonia-numero-identificado {
    display: block;
    min-height: 18px;
    margin-top: 5px;
    color: #7b8da3;
    font-size: 9px;
    text-align: center;
}

.telefonia-numero-identificado.encontrado {
    color: #0b8f62;
    font-weight: 700;
}

.telefonia-teclado {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    margin-top: 13px;
}

.telefonia-teclado button {
    min-height: 62px;
    border: 1px solid #cfe0f0;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    color: #17375f;
    box-shadow: 0 2px 6px rgba(35, 74, 118, .05);
    cursor: pointer;
    transition: transform .08s ease, border-color .15s ease, background .15s ease;
}

.telefonia-teclado button:hover {
    border-color: #8abcf0;
    background: #eef6ff;
}

.telefonia-teclado button:active {
    transform: scale(.97);
}

.telefonia-teclado button strong,
.telefonia-teclado button small {
    display: block;
}

.telefonia-teclado button strong {
    font-size: 20px;
    font-weight: 780;
}

.telefonia-teclado button small {
    margin-top: 2px;
    color: #8293a7;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .12em;
}

.telefonia-dtmf {
    min-height: 18px;
    margin-top: 5px;
    color: #4f718f;
    font-size: 9px;
    font-weight: 700;
    text-align: center;
}

.telefonia-controles-principais {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 7px;
}

.telefonia-botao {
    min-height: 44px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.telefonia-botao.ligar {
    background: #16b87a;
}

.telefonia-botao.desligar {
    background: #e5484d;
}

.telefonia-botao:disabled {
    opacity: .42;
    cursor: not-allowed;
}

.telefonia-controles-secundarios {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 9px;
}

.telefonia-controles-secundarios button,
.telefonia-conectar {
    min-height: 38px;
    border: 1px solid #cbdced;
    border-radius: 9px;
    background: #fff;
    color: #2e5279;
    font-size: 10px;
    font-weight: 750;
    cursor: pointer;
}

.telefonia-controles-secundarios button:hover:not(:disabled),
.telefonia-conectar:hover:not(:disabled) {
    border-color: #8ebdf0;
    background: #f2f8ff;
    color: #0e68c8;
}

.telefonia-controles-secundarios button.ativo {
    color: #8b5d00;
    border-color: #edd393;
    background: #fff7e4;
}

.telefonia-controles-secundarios button:disabled,
.telefonia-conectar:disabled {
    opacity: .48;
    cursor: not-allowed;
}

.telefonia-conectar {
    width: 100%;
    margin-top: 9px;
    color: #0e68c8;
    border-color: #b9d9f8;
    background: #edf6ff;
}

.telefonia-conectar.conectado {
    color: #6b7788;
    border-color: #d5dde6;
    background: #f5f7f9;
}

.telefonia-ajuda-conexao {
    display: block;
    margin-top: 7px;
    color: #8a98a9;
    font-size: 8px;
    line-height: 1.4;
    text-align: center;
}

.telefonia-historico-card {
    margin-top: 18px;
}

.telefonia-historico-titulo {
    align-items: center;
}

.telefonia-historico-acoes {
    display: flex;
    align-items: center;
    gap: 8px;
}

.telefonia-filtros {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(150px, .8fr));
    gap: 9px;
    padding: 14px 20px;
    border-top: 1px solid #e6edf5;
    border-bottom: 1px solid #e6edf5;
    background: #fbfdff;
}

.telefonia-filtros input,
.telefonia-filtros select {
    min-width: 0;
    min-height: 36px;
    font-size: 10px;
}

.telefonia-historico-wrapper {
    overflow-x: auto;
}

.telefonia-historico-tabela {
    width: 100%;
    min-width: 1120px;
    border-collapse: collapse;
}

.telefonia-historico-tabela th {
    padding: 11px 12px;
    background: #f4f8fc;
    color: #4a627e;
    border-bottom: 1px solid #dfe7f0;
    text-align: left;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
}

.telefonia-historico-tabela td {
    padding: 12px;
    border-bottom: 1px solid #e7edf4;
    color: #243d5d;
    font-size: 10px;
    vertical-align: middle;
}

.telefonia-historico-tabela td strong {
    color: #17375f;
    font-weight: 750;
}

.telefonia-historico-secundario {
    display: block;
    margin-top: 2px;
    color: #8190a3;
    font-size: 9px;
}

.telefonia-resultado-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: #f1f4f7;
    border: 1px solid #e0e6ec;
    color: #64768c;
    font-size: 9px;
    font-weight: 750;
    white-space: nowrap;
}

.telefonia-resultado-badge.interessado {
    color: #087c57;
    border-color: #c5ecdd;
    background: #e8f8f2;
}

.telefonia-resultado-badge.retorno {
    color: #0c68c7;
    border-color: #cce3fb;
    background: #eaf4ff;
}

.telefonia-resultado-badge.recusou,
.telefonia-resultado-badge.numero_invalido {
    color: #bf3b43;
    border-color: #f0c4c7;
    background: #fff1f2;
}

.telefonia-resultado-badge.nao_atendeu,
.telefonia-resultado-badge.ocupado {
    color: #936200;
    border-color: #f0dda8;
    background: #fff7e3;
}

.telefonia-vazio {
    min-height: 190px;
}

.telefonia-vazio[hidden] {
    display: none !important;
}

@media (max-width: 1180px) {
    .telefonia-grade-principal {
        grid-template-columns: minmax(0, 1.25fr) minmax(310px, .9fr);
    }

    .telefonia-dados-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .telefonia-operacao-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .telefonia-filtros {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .telefonia-grade-principal {
        grid-template-columns: 1fr;
    }

    .telefonia-teclado-card {
        position: static;
    }

    .telefonia-cabecalho {
        align-items: flex-start;
    }

    .telefonia-operacao-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .telefonia-prototipo-aviso {
        white-space: normal;
    }

    .telefonia-contato-cabecalho {
        grid-template-columns: auto 1fr;
    }

    .telefonia-cronometro {
        grid-column: 1 / -1;
        text-align: left;
    }

    .telefonia-dados-grid,
    .telefonia-operacao-grid,
    .telefonia-filtros {
        grid-template-columns: 1fr;
    }

    .telefonia-historico-acoes {
        align-items: stretch;
        flex-direction: column;
    }
}

/* ==========================================================
   FIX 15 — TELEFONIA COMPACTA + ÁREA OPERACIONAL STICKY
   Referência visual aprovada: chamada/teclado sempre à mão,
   operação enxuta e histórico rolável com cabeçalho fixo.
   ========================================================== */
#paginaTelefonia {
    padding: 12px 24px 28px;
}

#paginaTelefonia .telefonia-grade-principal {
    grid-template-columns: minmax(0, 1.72fr) minmax(340px, .88fr);
    gap: 12px;
    align-items: start;
    margin: 0;
    padding: 0 0 10px;
    background: #f5f8fc;
}

#paginaTelefonia .telefonia-coluna-operacao {
    gap: 10px;
}

#paginaTelefonia .telefonia-card {
    min-height: 0;
    margin-bottom: 0;
    padding: 0;
    border-radius: 12px;
}

#paginaTelefonia .telefonia-card-titulo {
    min-height: 48px;
    padding: 10px 14px;
    gap: 10px;
}

#paginaTelefonia .telefonia-card-titulo h4 {
    margin-bottom: 2px;
    font-size: 15px;
}

#paginaTelefonia .telefonia-card-titulo p {
    font-size: 9px;
    line-height: 1.25;
}

#paginaTelefonia .telefonia-prototipo-aviso {
    min-height: 28px;
    padding: 0 10px;
    gap: 6px;
    font-size: 9px;
}

#paginaTelefonia .telefonia-prototipo-aviso span {
    width: 7px;
    height: 7px;
}

#paginaTelefonia .telefonia-status-chamada,
#paginaTelefonia .telefonia-status-ramal {
    min-height: 27px;
    padding: 0 10px;
    font-size: 9px;
}

#paginaTelefonia .telefonia-chamada-corpo,
#paginaTelefonia .telefonia-teclado-corpo {
    padding: 10px 14px 12px;
}

#paginaTelefonia .telefonia-contato-cabecalho {
    gap: 10px;
    padding: 9px 11px;
    border-radius: 10px;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

#paginaTelefonia .telefonia-contato-cabecalho.ociosa {
    background: linear-gradient(180deg, #fbfdff 0%, #f7fbff 100%);
}

#paginaTelefonia .telefonia-contato-cabecalho.chamando {
    border-color: #f0d697;
    background: linear-gradient(180deg, #fffdf8 0%, #fff8e9 100%);
    box-shadow: inset 4px 0 0 #f5a700;
}

#paginaTelefonia .telefonia-contato-cabecalho.em-ligacao {
    border-color: #bfe8d8;
    background: linear-gradient(180deg, #f8fffc 0%, #edf9f4 100%);
    box-shadow: inset 4px 0 0 #16b87a;
}

#paginaTelefonia .telefonia-avatar {
    width: 38px;
    height: 38px;
    font-size: 16px;
}

#paginaTelefonia .telefonia-contato-cabecalho strong {
    font-size: 14px;
}

#paginaTelefonia .telefonia-contato-cabecalho small {
    margin-top: 2px;
    font-size: 10px;
}

#paginaTelefonia .telefonia-cronometro {
    min-width: 72px;
    font-size: 22px;
}

#paginaTelefonia .telefonia-dados-grid {
    gap: 7px;
    margin-top: 8px;
}

#paginaTelefonia .telefonia-dados-grid > div {
    padding: 7px 9px;
    border-radius: 8px;
}

#paginaTelefonia .telefonia-dados-grid span,
#paginaTelefonia .telefonia-operacao-item span {
    font-size: 8px;
}

#paginaTelefonia .telefonia-dados-grid strong {
    margin-top: 3px;
    font-size: 10px;
}

#paginaTelefonia .telefonia-campo-linha {
    margin-top: 8px;
}

#paginaTelefonia .telefonia-campo-linha label,
#paginaTelefonia .telefonia-numero-label,
#paginaTelefonia .telefonia-subtitulo {
    margin-bottom: 4px;
    font-size: 9px;
}

#paginaTelefonia .telefonia-campo-linha select,
#paginaTelefonia .telefonia-numero-input,
#paginaTelefonia .telefonia-filtros input,
#paginaTelefonia .telefonia-filtros select {
    min-height: 34px;
    padding: 0 9px;
    border-radius: 8px;
    font-size: 10px;
}

#paginaTelefonia .telefonia-campo-linha textarea {
    min-height: 56px;
    max-height: 74px;
    padding: 8px 9px;
    border-radius: 8px;
    font-size: 10px;
    resize: vertical;
}

#paginaTelefonia .telefonia-resultados {
    margin-top: 8px;
}

#paginaTelefonia .telefonia-resultados-botoes {
    gap: 6px;
}

#paginaTelefonia .telefonia-resultados-botoes button {
    min-height: 28px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 9px;
}

#paginaTelefonia .telefonia-resultados-botoes button[data-resultado="interessado"] {
    color: #087c57;
    border-color: #bde6d6;
    background: #e8f8f2;
}

#paginaTelefonia .telefonia-resultados-botoes button[data-resultado="retorno"] {
    color: #0c68c7;
    border-color: #c6def8;
    background: #eaf4ff;
}

#paginaTelefonia .telefonia-resultados-botoes button[data-resultado="recusou"] {
    color: #c43b43;
    border-color: #efc7ca;
    background: #fff1f2;
}

#paginaTelefonia .telefonia-resultados-botoes button[data-resultado="nao_atendeu"] {
    color: #a06800;
    border-color: #efd9a4;
    background: #fff7e3;
}

#paginaTelefonia .telefonia-resultados-botoes button[data-resultado="ocupado"] {
    color: #6f3bc1;
    border-color: #dfcef6;
    background: #f5efff;
}

#paginaTelefonia .telefonia-resultados-botoes button[data-resultado="numero_invalido"] {
    color: #53667c;
    border-color: #d6e0ea;
    background: #f3f6f9;
}

#paginaTelefonia .telefonia-resultados-botoes button.selecionado {
    border-color: currentColor;
    box-shadow: inset 0 0 0 1px currentColor, 0 2px 6px rgba(13,42,87,.06);
}

#paginaTelefonia .telefonia-resultados-botoes button:disabled {
    opacity: .48;
    filter: saturate(.55);
}

#paginaTelefonia .operacao-card .telefonia-card-titulo {
    min-height: 42px;
    padding-top: 8px;
    padding-bottom: 8px;
}

#paginaTelefonia .telefonia-operacao-grid {
    gap: 7px;
    padding: 9px 12px 11px;
}

#paginaTelefonia .telefonia-operacao-item {
    min-height: 68px;
    padding: 8px 9px;
    border-radius: 9px;
}

#paginaTelefonia .telefonia-operacao-item strong {
    margin-top: 4px;
    font-size: 18px;
}

#paginaTelefonia .telefonia-operacao-item strong.texto-operacao {
    font-size: 11px;
}

#paginaTelefonia .telefonia-operacao-item small {
    margin-top: 2px;
    font-size: 8px;
    line-height: 1.25;
}

#paginaTelefonia .telefonia-teclado-card {
    position: static;
}

#paginaTelefonia .telefonia-teclado-corpo > .telefonia-campo-linha:first-child {
    margin-top: 0;
}

#paginaTelefonia .telefonia-identificacao-ramal {
    margin-top: 7px;
    padding: 7px 9px;
    border-radius: 8px;
}

#paginaTelefonia .telefonia-identificacao-ramal strong {
    font-size: 10px;
}

#paginaTelefonia .telefonia-identificacao-ramal small {
    margin-top: 2px;
    font-size: 8px;
}

#paginaTelefonia .telefonia-numero-label {
    margin-top: 9px;
}

#paginaTelefonia .telefonia-numero-input {
    height: 39px;
    font-size: 16px;
}

#paginaTelefonia .telefonia-numero-identificado {
    min-height: 14px;
    margin-top: 3px;
    font-size: 8px;
}

#paginaTelefonia .telefonia-teclado {
    gap: 6px;
    margin-top: 7px;
}

#paginaTelefonia .telefonia-teclado button {
    min-height: 47px;
    border-radius: 9px;
}

#paginaTelefonia .telefonia-teclado button strong {
    font-size: 17px;
}

#paginaTelefonia .telefonia-teclado button small {
    margin-top: 1px;
    font-size: 7px;
}

#paginaTelefonia .telefonia-dtmf {
    min-height: 12px;
    margin-top: 2px;
    font-size: 8px;
}

#paginaTelefonia .telefonia-controles-principais {
    gap: 7px;
    margin-top: 4px;
}

#paginaTelefonia .telefonia-botao {
    min-height: 38px;
    border-radius: 8px;
    font-size: 10px;
}

#paginaTelefonia .telefonia-controles-secundarios {
    gap: 7px;
    margin-top: 7px;
}

#paginaTelefonia .telefonia-controles-secundarios button,
#paginaTelefonia .telefonia-conectar {
    min-height: 32px;
    border-radius: 8px;
    font-size: 9px;
}

#paginaTelefonia .telefonia-conectar {
    margin-top: 7px;
}

#paginaTelefonia .telefonia-ajuda-conexao {
    margin-top: 4px;
    font-size: 7px;
    line-height: 1.25;
}

#paginaTelefonia .telefonia-historico-card {
    margin-top: 2px;
}

#paginaTelefonia .telefonia-historico-titulo {
    min-height: 48px;
}

#paginaTelefonia .telefonia-historico-acoes {
    gap: 6px;
}

#paginaTelefonia .telefonia-filtros {
    grid-template-columns: minmax(180px, 1.25fr) repeat(3, minmax(130px, .8fr));
    gap: 7px;
    padding: 8px 12px;
}

#paginaTelefonia .telefonia-filtros input,
#paginaTelefonia .telefonia-filtros select {
    min-height: 32px;
    font-size: 9px;
}

#paginaTelefonia .telefonia-historico-wrapper {
    max-height: 330px;
    overflow: auto;
}

#paginaTelefonia .telefonia-historico-tabela th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 8px 10px;
    font-size: 8px;
    background: #f4f8fc;
}

#paginaTelefonia .telefonia-historico-tabela td {
    padding: 8px 10px;
    font-size: 9px;
}

#paginaTelefonia .telefonia-historico-secundario {
    margin-top: 1px;
    font-size: 8px;
}

#paginaTelefonia .telefonia-resultado-badge {
    min-height: 21px;
    padding: 0 7px;
    font-size: 8px;
}

#paginaTelefonia .telefonia-vazio {
    min-height: 130px;
}

/* Mantém a área de atendimento acessível ao consultar o histórico. */
@media (min-width: 901px) and (min-height: 700px) {
    #paginaTelefonia .telefonia-grade-principal {
        position: sticky;
        top: 8px;
        z-index: 6;
    }
}

@media (max-width: 1180px) {
    #paginaTelefonia {
        padding-left: 18px;
        padding-right: 18px;
    }

    #paginaTelefonia .telefonia-grade-principal {
        grid-template-columns: minmax(0, 1.35fr) minmax(315px, .9fr);
    }

    #paginaTelefonia .telefonia-operacao-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (max-width: 1020px) {
    #paginaTelefonia .telefonia-operacao-item small {
        display: none;
    }

    #paginaTelefonia .telefonia-operacao-item {
        min-height: 58px;
    }
}

@media (max-width: 900px) {
    #paginaTelefonia {
        padding: 14px 16px 26px;
    }

    #paginaTelefonia .telefonia-grade-principal {
        grid-template-columns: 1fr;
        position: static;
        padding-bottom: 8px;
    }

    #paginaTelefonia .telefonia-operacao-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #paginaTelefonia .telefonia-filtros {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    #paginaTelefonia .telefonia-dados-grid,
    #paginaTelefonia .telefonia-operacao-grid,
    #paginaTelefonia .telefonia-filtros {
        grid-template-columns: 1fr;
    }

    #paginaTelefonia .telefonia-prototipo-aviso {
        display: none;
    }
}


/* ==========================================================
   FIX 16 — TELEFONIA COM POSTO SUPERIOR + HISTÓRICO EM RELATÓRIOS
   Mais legibilidade sem reduzir tipografia.
   ========================================================== */
#paginaTelefonia {
    padding-top: 12px;
}

.telefonia-seletor-barra {
    display: grid;
    grid-template-columns: auto minmax(280px, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 64px;
    margin-bottom: 12px;
    padding: 10px 14px;
    overflow: visible;
}

.telefonia-seletor-identidade {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 170px;
}

.telefonia-seletor-icone {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #eaf4ff;
    color: #0e6fcf;
    font-size: 17px;
}

.telefonia-seletor-identidade strong {
    display: block;
    color: #0d2a57;
    font-size: 13px;
    font-weight: 800;
}

.telefonia-seletor-identidade small {
    display: block;
    margin-top: 2px;
    color: #74879e;
    font-size: 10px;
}

.telefonia-seletor-controle select {
    width: 100%;
    min-height: 42px;
    padding: 0 13px;
    border: 1px solid #c9d8ea;
    border-radius: 9px;
    background: #fff;
    color: #17375f;
    outline: none;
    font-size: 13px;
    font-weight: 750;
}

.telefonia-seletor-controle select:focus {
    border-color: #6eb3f7;
    box-shadow: 0 0 0 3px rgba(22, 131, 243, .10);
}

.telefonia-seletor-controle select:disabled {
    background: #f4f7fa;
    color: #6f8197;
}

#paginaTelefonia .telefonia-grade-principal {
    grid-template-columns: minmax(0, 1.62fr) minmax(315px, .82fr);
    gap: 12px;
}

#paginaTelefonia .telefonia-coluna-operacao {
    gap: 12px;
}

#paginaTelefonia .telefonia-card-titulo {
    min-height: 50px;
    padding: 10px 14px;
}

#paginaTelefonia .telefonia-card-titulo h4 {
    font-size: 15px;
}

#paginaTelefonia .telefonia-card-titulo p {
    margin-top: 2px;
    font-size: 10px;
}

#paginaTelefonia .telefonia-chamada-corpo {
    padding: 10px 14px 12px;
}

#paginaTelefonia .telefonia-contato-cabecalho {
    padding: 10px 12px;
    gap: 10px;
}

#paginaTelefonia .telefonia-avatar {
    width: 38px;
    height: 38px;
    font-size: 16px;
}

#paginaTelefonia .telefonia-contato-cabecalho strong {
    font-size: 14px;
}

#paginaTelefonia .telefonia-contato-cabecalho small {
    font-size: 10px;
}

#paginaTelefonia .telefonia-cronometro {
    font-size: 21px;
}

#paginaTelefonia .telefonia-dados-grid {
    gap: 8px;
    margin-top: 8px;
}

#paginaTelefonia .telefonia-dados-grid > div {
    min-height: 52px;
    padding: 7px 9px;
}

#paginaTelefonia .telefonia-dados-grid span,
#paginaTelefonia .telefonia-operacao-item span {
    font-size: 9.5px;
}

#paginaTelefonia .telefonia-dados-grid strong {
    margin-top: 3px;
    font-size: 11.5px;
}

.telefonia-dado-campanha select {
    width: 100%;
    min-height: 27px;
    margin-top: 2px;
    padding: 0 24px 0 7px;
    border: 1px solid #d5e1ed;
    border-radius: 7px;
    background: #fff;
    color: #17375f;
    outline: none;
    font-size: 11px;
    font-weight: 750;
}

.telefonia-dado-campanha select:focus {
    border-color: #6eb3f7;
    box-shadow: 0 0 0 2px rgba(22, 131, 243, .09);
}

.telefonia-dado-campanha select:disabled {
    background: #f4f7fa;
    color: #61748b;
}

#paginaTelefonia .telefonia-observacoes-linha {
    margin-top: 8px;
}

#paginaTelefonia .telefonia-campo-linha label,
#paginaTelefonia .telefonia-numero-label,
#paginaTelefonia .telefonia-subtitulo {
    margin-bottom: 4px;
    font-size: 10.5px;
}

#paginaTelefonia .telefonia-campo-linha textarea {
    min-height: 54px;
    max-height: 82px;
    padding: 8px 10px;
    font-size: 11.5px;
}

#paginaTelefonia .telefonia-resultados {
    margin-top: 8px;
}

#paginaTelefonia .telefonia-resultados-botoes {
    gap: 6px;
}

#paginaTelefonia .telefonia-resultados-botoes button {
    min-height: 29px;
    padding: 0 9px;
    font-size: 10.5px;
}

#paginaTelefonia .operacao-card .telefonia-card-titulo {
    min-height: 45px;
    padding-top: 8px;
    padding-bottom: 8px;
}

#paginaTelefonia .telefonia-prototipo-aviso {
    min-height: 29px;
    padding: 0 10px;
    font-size: 9.5px;
}

#paginaTelefonia .telefonia-operacao-grid {
    gap: 7px;
    padding: 9px 12px 11px;
}

#paginaTelefonia .telefonia-operacao-item {
    min-height: 76px;
    padding: 8px 9px;
}

#paginaTelefonia .telefonia-operacao-item strong {
    margin-top: 3px;
    font-size: 18px;
}

#paginaTelefonia .telefonia-operacao-item strong.texto-operacao {
    font-size: 11.5px;
}

#paginaTelefonia .telefonia-operacao-item small {
    margin-top: 2px;
    font-size: 8.5px;
}

#paginaTelefonia .telefonia-teclado-card {
    position: sticky;
    top: 12px;
}

#paginaTelefonia .telefonia-teclado-corpo {
    padding: 10px 14px 12px;
}

#paginaTelefonia .telefonia-numero-label {
    margin-top: 0;
    text-align: center;
}

#paginaTelefonia .telefonia-numero-input {
    height: 44px;
    padding: 0 34px;
    text-align: center;
    font-size: 19px;
}

#paginaTelefonia .telefonia-numero-identificado {
    min-height: 14px;
    margin-top: 3px;
    font-size: 9px;
}

#paginaTelefonia .telefonia-teclado {
    gap: 7px;
    margin-top: 7px;
}

#paginaTelefonia .telefonia-teclado button {
    min-height: 48px;
    border-radius: 10px;
}

#paginaTelefonia .telefonia-teclado button strong {
    font-size: 18px;
}

#paginaTelefonia .telefonia-teclado button small {
    margin-top: 0;
    font-size: 7.5px;
}

#paginaTelefonia .telefonia-dtmf {
    min-height: 12px;
    margin-top: 2px;
}

#paginaTelefonia .telefonia-controles-principais {
    gap: 7px;
    margin-top: 4px;
}

#paginaTelefonia .telefonia-botao {
    min-height: 39px;
    font-size: 11px;
}

#paginaTelefonia .telefonia-controles-secundarios {
    gap: 7px;
    margin-top: 7px;
}

#paginaTelefonia .telefonia-controles-secundarios button,
#paginaTelefonia .telefonia-conectar {
    min-height: 34px;
    font-size: 10px;
}

#paginaTelefonia .telefonia-conectar {
    margin-top: 7px;
}

#paginaTelefonia .telefonia-ajuda-conexao {
    margin-top: 4px;
    font-size: 8px;
}

.relatorios-historico-card {
    margin-top: 18px;
}

@media (max-width: 1180px) {
    .telefonia-seletor-barra {
        grid-template-columns: auto minmax(220px, 1fr) auto;
    }

    #paginaTelefonia .telefonia-grade-principal {
        grid-template-columns: minmax(0, 1.45fr) minmax(300px, .85fr);
    }

    #paginaTelefonia .telefonia-dados-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    #paginaTelefonia .telefonia-operacao-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .telefonia-seletor-barra {
        grid-template-columns: 1fr auto;
    }

    .telefonia-seletor-identidade {
        grid-column: 1 / -1;
    }

    #paginaTelefonia .telefonia-grade-principal {
        grid-template-columns: 1fr;
    }

    #paginaTelefonia .telefonia-teclado-card {
        position: static;
    }

    #paginaTelefonia .telefonia-dados-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #paginaTelefonia .telefonia-operacao-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* FIX 16B — encaixe do teclado completo na primeira dobra sem reduzir letras */
#paginaTelefonia .telefonia-seletor-barra {
    min-height: 56px;
    padding-top: 7px;
    padding-bottom: 7px;
}

#paginaTelefonia .telefonia-teclado-card .telefonia-card-titulo {
    min-height: 44px;
    padding-top: 7px;
    padding-bottom: 7px;
}

#paginaTelefonia .telefonia-teclado-corpo {
    padding-top: 8px;
    padding-bottom: 8px;
}

#paginaTelefonia .telefonia-numero-label {
    margin-bottom: 3px;
}

#paginaTelefonia .telefonia-numero-input {
    height: 40px;
}

#paginaTelefonia .telefonia-numero-identificado {
    min-height: 12px;
    margin-top: 2px;
    line-height: 1.2;
}

#paginaTelefonia .telefonia-teclado {
    gap: 5px;
    margin-top: 5px;
}

#paginaTelefonia .telefonia-teclado button {
    min-height: 42px;
}

#paginaTelefonia .telefonia-controles-principais {
    gap: 6px;
    margin-top: 3px;
}

#paginaTelefonia .telefonia-botao {
    min-height: 36px;
}

#paginaTelefonia .telefonia-controles-secundarios {
    gap: 6px;
    margin-top: 5px;
}

#paginaTelefonia .telefonia-controles-secundarios button,
#paginaTelefonia .telefonia-conectar {
    min-height: 31px;
}

#paginaTelefonia .telefonia-conectar {
    margin-top: 5px;
}

#paginaTelefonia .telefonia-ajuda-conexao {
    margin-top: 3px;
    line-height: 1.2;
}

/* ==========================================================
   FIX 17 — COMPACTAÇÃO CIRÚRGICA DA COLUNA ESQUERDA
   Objetivo: exibir Chamada atual + Operação completas na primeira dobra.
   O teclado e a barra Agente/Ramal permanecem inalterados.
   Tipografia preservada; o ganho vem de alturas, paddings e espaçamentos.
   ========================================================== */
#paginaTelefonia .chamada-atual-card .telefonia-card-titulo {
    min-height: 44px;
    padding-top: 7px;
    padding-bottom: 7px;
}

#paginaTelefonia .chamada-atual-card .telefonia-chamada-corpo {
    padding-top: 7px;
    padding-bottom: 8px;
}

#paginaTelefonia .chamada-atual-card .telefonia-contato-cabecalho {
    padding-top: 7px;
    padding-bottom: 7px;
}

#paginaTelefonia .chamada-atual-card .telefonia-avatar {
    width: 34px;
    height: 34px;
}

#paginaTelefonia .chamada-atual-card .telefonia-dados-grid {
    gap: 7px;
    margin-top: 6px;
}

#paginaTelefonia .chamada-atual-card .telefonia-dados-grid > div {
    min-height: 46px;
    padding-top: 5px;
    padding-bottom: 5px;
}

#paginaTelefonia .chamada-atual-card .telefonia-observacoes-linha {
    margin-top: 5px;
}

#paginaTelefonia .chamada-atual-card .telefonia-campo-linha label,
#paginaTelefonia .chamada-atual-card .telefonia-subtitulo {
    margin-bottom: 3px;
}

#paginaTelefonia .chamada-atual-card .telefonia-campo-linha textarea {
    min-height: 42px;
    height: 42px;
    max-height: 60px;
    padding-top: 6px;
    padding-bottom: 6px;
}

#paginaTelefonia .chamada-atual-card .telefonia-resultados {
    margin-top: 5px;
}

#paginaTelefonia .chamada-atual-card .telefonia-resultados-botoes {
    gap: 5px;
}

#paginaTelefonia .chamada-atual-card .telefonia-resultados-botoes button {
    min-height: 27px;
}

/* ==========================================================
   FIX 18 — POSTO AGENTE/RAMAL ABAIXO DA OPERAÇÃO
   Chamada atual e teclado passam a ser o primeiro conteúdo da tela.
   O botão Conectar ramal acompanha o seletor, sem alterar a lógica JS.
   ========================================================== */
#paginaTelefonia {
    padding-top: 12px;
}

#paginaTelefonia .telefonia-grade-principal {
    margin-top: 0;
}

#paginaTelefonia .telefonia-seletor-inferior {
    grid-template-columns: auto minmax(280px, 1fr) auto minmax(150px, 190px);
    min-height: 58px;
    margin-top: 12px;
    margin-bottom: 0;
    padding: 7px 14px;
}

#paginaTelefonia .telefonia-seletor-inferior .telefonia-conectar {
    width: 100%;
    min-height: 40px;
    margin-top: 0;
    padding: 0 16px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 800;
}

@media (max-width: 1180px) {
    #paginaTelefonia .telefonia-seletor-inferior {
        grid-template-columns: auto minmax(220px, 1fr) auto minmax(140px, 175px);
    }
}

@media (max-width: 900px) {
    #paginaTelefonia .telefonia-seletor-inferior {
        grid-template-columns: 1fr auto;
    }

    #paginaTelefonia .telefonia-seletor-inferior .telefonia-seletor-identidade,
    #paginaTelefonia .telefonia-seletor-inferior .telefonia-seletor-controle {
        grid-column: 1 / -1;
    }

    #paginaTelefonia .telefonia-seletor-inferior .telefonia-conectar {
        min-width: 150px;
    }
}

/* ==========================================================
   FIX 19 — BARRA INFERIOR AGENTE/RAMAL MAIS BAIXA
   Mantém tipografia e largura; ganha altura reduzindo apenas
   espaçamentos, controles e margens verticais da barra inferior.
   ========================================================== */
#paginaTelefonia .telefonia-seletor-inferior {
    min-height: 46px;
    margin-top: 5px;
    padding-top: 4px;
    padding-bottom: 4px;
}

#paginaTelefonia .telefonia-seletor-inferior .telefonia-seletor-icone {
    width: 30px;
    height: 30px;
}

#paginaTelefonia .telefonia-seletor-inferior .telefonia-seletor-controle select {
    min-height: 34px;
}

#paginaTelefonia .telefonia-seletor-inferior .telefonia-conectar {
    min-height: 34px;
}


/* ==========================================================
   FIX 21 — USUÁRIOS, PERFIS E PERMISSÕES — V1
   ========================================================== */
.usuarios-cards .card-icon-sucesso {
    color: #0ca36d;
    background: #e7f8f1;
}

.usuarios-painel {
    margin-top: 18px;
}

.usuarios-tabela {
    min-width: 1080px;
}

.usuario-permissoes-resumo {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 0 9px;
    border: 1px solid #d7e5f3;
    border-radius: 999px;
    background: #f3f8fe;
    color: #42617f;
    font-size: 10px;
    font-weight: 750;
    white-space: nowrap;
}

.modal-usuario {
    max-width: 980px;
}

.usuario-permissoes-cabecalho {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.usuario-permissoes-cabecalho > div > label {
    display: block;
}

.usuario-permissoes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    padding: 10px;
    border: 1px solid #c9d8ea;
    border-radius: 11px;
    background: #f8fbff;
}

.usuario-permissoes-acoes {
    margin-top: 7px;
}

.usuario-permissao-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    min-height: 58px;
    padding: 10px;
    border: 1px solid #d7e3ef;
    border-radius: 9px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.usuario-permissao-item:hover {
    border-color: #9bc6f2;
    background: #fbfdff;
}

.usuario-permissao-item:has(input:checked) {
    border-color: #76b8f5;
    background: #eef7ff;
    box-shadow: inset 0 0 0 1px rgba(22, 131, 243, .05);
}

.usuario-permissao-item:has(input:disabled) {
    cursor: default;
}

.usuario-permissao-item input {
    margin-top: 2px;
    accent-color: #1683f3;
}

.usuario-permissao-item span,
.usuario-permissao-item strong,
.usuario-permissao-item small {
    display: block;
}

.usuario-permissao-item strong {
    color: #17345c;
    font-size: 11px;
    font-weight: 800;
}

.usuario-permissao-item small {
    margin-top: 3px;
    color: #72849a;
    font-size: 9px;
    line-height: 1.35;
}

#usuarioRamalPadrao[readonly] {
    background: #f3f6f9;
    color: #48627f;
    cursor: default;
}

#usuarioRestaurarPadrao:disabled {
    opacity: .5;
    cursor: not-allowed;
}

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

@media (max-width: 700px) {
    .usuario-permissoes {
        grid-template-columns: 1fr;
    }

    .usuario-permissoes-cabecalho {
        flex-direction: column;
    }
}


/* ==========================================
   SESSÃO DE USUÁRIO / PERMISSÕES — FIX22
   ========================================== */
.usuario-sessao-topo {
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
    padding: 6px 8px;
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    font: inherit;
}

.usuario-sessao-topo:hover {
    background: var(--vv-azul-claro);
    border-color: #cfe3f8;
}

.usuario-sessao-trocar {
    margin-left: 6px;
    color: var(--vv-azul);
    font-size: 10px;
    font-weight: 800;
}

.modal-sessao-usuario {
    z-index: 9999;
    background: rgba(13, 42, 87, .42);
    backdrop-filter: blur(5px);
}

.sessao-usuario-modal {
    width: min(520px, calc(100vw - 32px));
}

.sessao-usuario-corpo {
    display: grid;
    gap: 16px;
}

.sessao-usuario-resumo {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid #cfe0f2;
    border-radius: 10px;
    background: #f7fbff;
    color: var(--vv-texto);
}

.sessao-usuario-resumo strong {
    color: var(--vv-azul-escuro);
    font-size: 14px;
}

.sessao-usuario-resumo span {
    color: var(--vv-texto-secundario);
    font-size: 12px;
}

.sessao-usuario-aviso {
    margin: 0;
}

/* Operador usa o posto definido no cadastro; não escolhe nem desconecta ramal. */
body.sessao-operador #telefoniaAgenteRamal {
    pointer-events: none;
    background: #f3f7fb;
}

/* Operador visualiza contatos, mas não monta campanhas manualmente. */
body.sessao-operador .contato-cel-selecao,
body.sessao-operador #barraSelecaoContatos {
    display: none !important;
}


/* ==========================================================
   FIX 23 — AJUSTES DA RODADA DE PERMISSÕES / CONTATOS
   ========================================================== */
.menu-item[hidden] {
    display: none !important;
}

.ficha-telefones-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.ficha-telefones-cabecalho label {
    margin: 0;
}

.ficha-telefones-editor {
    display: grid;
    gap: 8px;
}

.ficha-telefone-linha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 8px;
    align-items: center;
}

.ficha-telefone-remover {
    width: 42px;
    height: 42px;
    border: 1px solid #f0c7ca;
    border-radius: 8px;
    background: #fff7f7;
    color: #c73c43;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.ficha-telefone-remover:hover {
    background: #fff0f0;
}

.contato-ordenar-nome {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.contato-ordenar-nome span {
    color: #1683f3;
    font-size: 13px;
}

.usuarios-painel .agentes-tabela-wrapper {
    overflow-x: visible;
}

.usuarios-tabela {
    min-width: 0 !important;
}

.usuarios-tabela th,
.usuarios-tabela td {
    padding-left: 10px;
    padding-right: 10px;
}

.usuarios-tabela .agente-identidade {
    min-width: 145px;
}

.usuarios-tabela .acoes-tabela-agente {
    min-width: 150px;
    flex-wrap: wrap;
}

@media (max-width: 1050px) {
    .usuarios-painel .agentes-tabela-wrapper {
        overflow-x: auto;
    }
    .usuarios-tabela {
        min-width: 920px !important;
    }
}

/* ==========================================================
   FIX 24 — CONFERÊNCIA OPERACIONAL / MAILINGS / CONTATOS
   ========================================================== */
.contato-cel-numero {
    width: 38px;
    min-width: 38px;
    text-align: center !important;
    color: #8a9bb0 !important;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.contato-base-ordenar-nome {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.contato-base-ordenar-nome span {
    color: var(--vv-azul, #1683f3);
    font-size: 13px;
}

.contato-base-conferencia {
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.contato-base-conferencia > div {
    min-height: 58px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    background: #f8fbff;
    border: 1px solid var(--vv-borda-suave, #dce7f2);
    border-radius: 9px;
}

.contato-base-conferencia strong {
    color: var(--vv-texto, #12335b);
    font-size: 16px;
    line-height: 1;
}

.contato-base-conferencia span {
    color: var(--vv-texto-secundario, #687f9c);
    font-size: 10px;
    line-height: 1.25;
}

.contato-base-item-compartilhado {
    background: #fff9ed !important;
    border-color: #efd49f !important;
}

.contato-base-item-compartilhado:hover {
    background: #fff6e2 !important;
    border-color: #e3bf74 !important;
}

.contato-base-outros-mailings {
    display: block;
    width: fit-content;
    margin-top: 5px;
    padding: 2px 6px;
    border: 1px solid #efd49f;
    border-radius: 5px;
    background: #fff3d8;
    color: #8a6417 !important;
    font-size: 10px !important;
    font-weight: 600;
}

.contato-base-telefone-copiavel {
    padding: 3px 8px;
    background: rgba(25, 185, 120, 0.08);
    border: 1px solid rgba(25, 185, 120, 0.2);
    border-radius: 4px;
    color: var(--verde-claro, #1683f3);
    font: inherit;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    cursor: copy;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.contato-base-telefone-copiavel:hover,
.contato-base-telefone-copiavel.copiado {
    background: #eaf6ff;
    border-color: #8fc4f2;
    color: var(--vv-azul-hover, #0f68bb);
}

@media (max-width: 1100px) {
    .contato-base-conferencia {
        grid-template-columns: repeat(3, minmax(120px, 1fr));
    }
}

@media (max-width: 720px) {
    .contato-base-conferencia {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }
}



/* ==========================================================
   FIX 25 — AJUSTES OPERACIONAIS: TELEFONIA + AGENTES/RAMAIS
========================================================== */

/* Telefonia: coluna lateral com Teclado + Agenda. */
#paginaTelefonia .telefonia-coluna-lateral {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

#paginaTelefonia .telefonia-chamada-status-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

#paginaTelefonia .telefonia-card-titulo .telefonia-cronometro {
    min-width: auto;
    font-size: 24px;
    line-height: 1;
}

#paginaTelefonia .telefonia-contato-destaque {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(210px, .72fr);
    align-items: center;
    gap: 14px;
    padding: 13px 14px;
}

#paginaTelefonia .telefonia-contato-destaque .telefonia-avatar {
    width: 54px;
    height: 54px;
    font-size: 19px;
}

#paginaTelefonia .telefonia-contato-identidade {
    min-width: 0;
}

#paginaTelefonia .telefonia-contato-label {
    display: block;
    margin-bottom: 3px;
    color: #607691;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#paginaTelefonia .telefonia-contato-identidade > strong {
    display: block;
    color: #0f2c59;
    font-size: 20px;
    line-height: 1.1;
}

#paginaTelefonia .telefonia-contato-telefone-principal {
    display: block;
    margin-top: 5px;
    color: #17365f;
    font-size: 13px;
    font-weight: 750;
}

#paginaTelefonia .telefonia-contato-identidade > small {
    display: block;
    margin-top: 4px;
    color: #71849d;
    font-size: 8px;
}

#paginaTelefonia .telefonia-contato-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}

#paginaTelefonia .telefonia-contato-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 0 7px;
    border: 1px solid #d4e2f1;
    border-radius: 7px;
    background: #f8fbff;
    color: #34536f;
    font-size: 8px;
    font-weight: 700;
}

#paginaTelefonia .telefonia-contato-meta span.tag {
    border-color: #bfe6d8;
    background: #eefaf5;
    color: #0e7859;
}

#paginaTelefonia .telefonia-contato-meta span.mailing {
    border-color: #f0d7a4;
    background: #fff8e8;
    color: #9b6200;
}

#paginaTelefonia .telefonia-contato-acoes {
    padding: 9px;
    border: 1px solid #d9e5f2;
    border-radius: 9px;
    background: rgba(255,255,255,.72);
}

#paginaTelefonia .telefonia-contato-acoes label {
    display: block;
    margin-bottom: 5px;
    color: #536b87;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

#paginaTelefonia .telefonia-contato-acoes select,
#paginaTelefonia .telefonia-ver-contato {
    width: 100%;
    min-height: 32px;
    border: 1px solid #cbdced;
    border-radius: 7px;
    background: #fff;
    color: #17365f;
    font-size: 9px;
}

#paginaTelefonia .telefonia-contato-acoes select {
    padding: 0 8px;
}

#paginaTelefonia .telefonia-ver-contato {
    margin-top: 6px;
    color: #0874dd;
    font-weight: 750;
    cursor: pointer;
}

#paginaTelefonia .telefonia-ver-contato:hover:not(:disabled) {
    background: #f1f7ff;
    border-color: #9ec9f5;
}

#paginaTelefonia .telefonia-ver-contato:disabled,
#paginaTelefonia .telefonia-contato-acoes select:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* Agenda na lateral direita. */
#paginaTelefonia .telefonia-agenda-card {
    overflow: visible;
}

#paginaTelefonia .telefonia-agenda-corpo {
    padding: 10px 14px 12px;
}

#paginaTelefonia .telefonia-agenda-busca {
    position: relative;
    display: flex;
    align-items: center;
}

#paginaTelefonia .telefonia-agenda-busca > span {
    position: absolute;
    left: 10px;
    z-index: 1;
    color: #52708f;
    font-size: 16px;
    pointer-events: none;
}

#paginaTelefonia .telefonia-agenda-busca input {
    width: 100%;
    min-height: 36px;
    padding: 0 34px 0 32px;
    border: 1px solid #bfd4ea;
    border-radius: 8px;
    outline: none;
    color: #17365f;
    background: #fff;
    font-size: 10px;
}

#paginaTelefonia .telefonia-agenda-busca input:focus {
    border-color: #1683f3;
    box-shadow: 0 0 0 3px rgba(22,131,243,.09);
}

#paginaTelefonia #telefoniaAgendaLimpar {
    position: absolute;
    right: 6px;
    width: 25px;
    height: 25px;
    border: 0;
    background: transparent;
    color: #7589a0;
    font-size: 16px;
    cursor: pointer;
}

#paginaTelefonia #telefoniaAgendaLimpar:disabled {
    opacity: .4;
    cursor: not-allowed;
}

#paginaTelefonia .telefonia-agenda-resultados {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 5px);
    z-index: 30;
    max-height: 270px;
    overflow-y: auto;
    border: 1px solid #cddceb;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(15,44,89,.16);
}

#paginaTelefonia .telefonia-agenda-resultados[hidden] {
    display: none !important;
}

#paginaTelefonia .telefonia-agenda-resultado {
    width: 100%;
    display: grid;
    grid-template-columns: 31px 1fr;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border: 0;
    border-bottom: 1px solid #edf2f7;
    background: #fff;
    text-align: left;
    cursor: pointer;
}

#paginaTelefonia .telefonia-agenda-resultado:last-child {
    border-bottom: 0;
}

#paginaTelefonia .telefonia-agenda-resultado:hover {
    background: #f2f7fd;
}

#paginaTelefonia .telefonia-agenda-avatar {
    width: 29px;
    height: 29px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eaf4ff;
    color: #0874dd;
    font-size: 9px;
    font-weight: 800;
}

#paginaTelefonia .telefonia-agenda-resultado strong,
#paginaTelefonia .telefonia-agenda-resultado small {
    display: block;
}

#paginaTelefonia .telefonia-agenda-resultado strong {
    color: #17365f;
    font-size: 10px;
}

#paginaTelefonia .telefonia-agenda-resultado small {
    margin-top: 1px;
    color: #72849c;
    font-size: 8px;
}

#paginaTelefonia .telefonia-agenda-vazio {
    padding: 12px;
    color: #71849d;
    font-size: 9px;
    text-align: center;
}

#paginaTelefonia .telefonia-agenda-ajuda {
    display: block;
    min-height: 14px;
    margin-top: 5px;
    color: #7b8da3;
    font-size: 8px;
}

/* Dados técnicos deixam de competir visualmente com o cliente. */
#paginaTelefonia .telefonia-dados-chamada-card {
    margin: 0 0 10px;
    padding: 0;
}

#paginaTelefonia .telefonia-dados-chamada-card .telefonia-dados-grid {
    margin-top: 0;
    padding: 9px 12px 11px;
}

/* Agentes / Ramais: ação junto da própria seção. */
.agentes-painel-acoes {
    display: flex;
    align-items: center;
    gap: 10px;
}

.botao-painel-cadastro {
    min-width: 148px;
    min-height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
    box-shadow: 0 5px 14px rgba(13,42,87,.10);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.botao-painel-cadastro.agente {
    background: #1683f3;
}

.botao-painel-cadastro.ramal {
    background: #18a784;
}

.botao-painel-cadastro:hover {
    transform: translateY(-1px);
    filter: brightness(.98);
    box-shadow: 0 7px 16px rgba(13,42,87,.14);
}

@media (max-width: 1180px) {
    #paginaTelefonia .telefonia-contato-destaque {
        grid-template-columns: auto minmax(0, 1fr);
    }

    #paginaTelefonia .telefonia-contato-acoes {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 6px;
        align-items: end;
    }

    #paginaTelefonia .telefonia-contato-acoes label {
        grid-column: 1 / -1;
        margin-bottom: 0;
    }

    #paginaTelefonia .telefonia-ver-contato {
        width: auto;
        min-width: 135px;
        margin-top: 0;
        padding: 0 10px;
    }
}

@media (max-width: 900px) {
    #paginaTelefonia .telefonia-coluna-lateral {
        gap: 8px;
    }

    #paginaTelefonia .telefonia-contato-destaque {
        grid-template-columns: auto minmax(0, 1fr);
    }

    #paginaTelefonia .telefonia-chamada-status-area {
        gap: 7px;
    }

    #paginaTelefonia .telefonia-card-titulo .telefonia-cronometro {
        font-size: 20px;
    }

    .agentes-painel-titulo,
    .agentes-painel-acoes {
        align-items: flex-start;
    }

    .agentes-painel-acoes {
        flex-direction: column;
        gap: 6px;
    }
}

@media (max-width: 620px) {
    #paginaTelefonia .telefonia-contato-destaque {
        grid-template-columns: 1fr;
    }

    #paginaTelefonia .telefonia-contato-destaque .telefonia-avatar {
        display: none;
    }

    #paginaTelefonia .telefonia-contato-acoes {
        grid-column: 1;
        grid-template-columns: 1fr;
    }

    #paginaTelefonia .telefonia-ver-contato {
        width: 100%;
    }

    .agentes-painel-titulo {
        align-items: stretch;
        gap: 10px;
    }

    .agentes-painel-acoes {
        width: 100%;
    }

    .botao-painel-cadastro {
        width: 100%;
    }
}

/* ==========================================================
   FIX 26 — AJUSTE VISUAL TELEFONIA
   Mantém Teclado + Agenda como um conjunto lateral durante a
   rolagem, preservando a separação entre os dois cards.
========================================================== */
@media (min-width: 901px) {
    #paginaTelefonia .telefonia-coluna-lateral {
        position: sticky;
        top: 12px;
        align-self: start;
        gap: 12px;
        z-index: 5;
    }

    #paginaTelefonia .telefonia-teclado-card {
        position: static;
        top: auto;
        z-index: auto;
        margin: 0;
    }

    #paginaTelefonia .telefonia-agenda-card {
        position: relative;
        z-index: 1;
        margin: 0;
    }
}

/* ==========================================================
   FIX 27 — OPERAÇÃO DE CAMPANHA + FICHA DE CONTATO COMPACTA
========================================================== */

/* Telefonia: faixa operacional exibida somente quando a campanha
   automática foi iniciada pela sessão atual. */
#paginaTelefonia .telefonia-campanha-operacional-card {
    overflow: hidden;
    border-color: #bcd9f5;
    background: #f7fbff;
}

#paginaTelefonia .telefonia-campanha-operacional-info {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 16px;
    padding: 11px 14px;
}

#paginaTelefonia .telefonia-campanha-operacional-label {
    display: block;
    margin-bottom: 3px;
    color: #1683f3;
    font-size: 8.5px;
    font-weight: 850;
    letter-spacing: .09em;
}

#paginaTelefonia #telefoniaCampanhaAtivaNome {
    display: block;
    color: #0f2c59;
    font-size: 14px;
    line-height: 1.25;
}

#paginaTelefonia .telefonia-campanha-operacional-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 12px;
    margin-top: 5px;
    color: #6d8198;
    font-size: 9px;
}

#paginaTelefonia .telefonia-campanha-operacional-meta b {
    color: #294d75;
    font-weight: 800;
}

#paginaTelefonia .telefonia-campanha-espera {
    min-width: 205px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
}

#paginaTelefonia .telefonia-campanha-espera span {
    max-width: 280px;
    color: #647b94;
    font-size: 9.5px;
    line-height: 1.25;
}

#paginaTelefonia .telefonia-campanha-espera strong {
    color: #0f2c59;
    font-size: 23px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

#paginaTelefonia .telefonia-voltar-campanhas {
    min-height: 34px;
    padding: 0 11px;
    white-space: nowrap;
    font-size: 10px;
}

/* Ficha: origem fica somente com os dados realmente estruturais;
   nome e telefones aparecem uma única vez na área editável. */
#modalFichaContato .modal-largo {
    max-width: 840px;
}

#modalFichaContato .modal-corpo-scroll {
    max-height: 68vh;
    padding: 18px 22px;
}

#modalFichaContato .secao-titulo {
    margin-bottom: 9px;
    font-size: 11px;
}

#modalFichaContato .origem-grid-compacta {
    grid-template-columns: minmax(0, 1.45fr) minmax(190px, .75fr);
    gap: 12px;
    margin-bottom: 0;
    padding: 11px 13px;
}

#modalFichaContato .origem-grid-compacta > div {
    min-width: 0;
}

#modalFichaContato .origem-grid-compacta strong {
    display: block;
    overflow-wrap: anywhere;
}

#modalFichaContato .divisor-ficha {
    margin: 14px 0;
}

#modalFichaContato .ficha-contato-grid {
    padding: 0;
    gap: 12px 14px;
}

#modalFichaContato .ficha-contato-grid .form-grupo {
    gap: 4px;
}

#modalFichaContato .ficha-contato-grid input,
#modalFichaContato .ficha-contato-grid select {
    height: 40px;
}

#modalFichaContato #compStatus {
    width: 100%;
    margin: 0;
}

#modalFichaContato .ficha-telefones-cabecalho {
    margin-bottom: 5px;
}

#modalFichaContato .ficha-telefones-editor {
    grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
    gap: 7px 10px;
}

#modalFichaContato .ficha-telefone-linha {
    grid-template-columns: minmax(0, 1fr) 38px;
    gap: 6px;
}

#modalFichaContato .ficha-telefone-remover {
    width: 38px;
    height: 40px;
}

#modalFichaContato #compObservacoes {
    min-height: 72px;
}

@media (max-width: 1050px) {
    #paginaTelefonia .telefonia-campanha-operacional-info {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    #paginaTelefonia .telefonia-voltar-campanhas {
        grid-column: 1 / -1;
        justify-self: end;
    }
}

@media (max-width: 680px) {
    #paginaTelefonia .telefonia-campanha-operacional-info {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    #paginaTelefonia .telefonia-campanha-espera {
        min-width: 0;
        align-items: flex-start;
        text-align: left;
    }

    #paginaTelefonia .telefonia-voltar-campanhas {
        grid-column: 1;
        justify-self: stretch;
    }

    #modalFichaContato .modal-corpo-scroll {
        padding: 16px;
    }

    #modalFichaContato .origem-grid-compacta,
    #modalFichaContato .ficha-contato-grid {
        grid-template-columns: 1fr;
    }

    #modalFichaContato .ficha-contato-grid .form-largo {
        grid-column: 1;
    }
}

/* FIX28 — Pós-atendimento da Telefonia */
.badge-operacional.pos_atendimento {
    background: #fff6df;
    color: #9a6700;
    border-color: #f1d89a;
}

#paginaTelefonia .telefonia-status-chamada.pos-atendimento,
#paginaTelefonia .telefonia-status-ramal.pos-atendimento {
    background: #fff6df;
    color: #9a6700;
    border-color: #f1d89a;
}

#paginaTelefonia .telefonia-contato-cabecalho.pos-atendimento {
    border-color: #f1d89a;
    background: #fffdf5;
}

/* ==========================================================
   FIX29 — CONTATOS: HIERARQUIA VISUAL + CÓPIA RÁPIDA
   Mantém TAG como informação operacional principal e
   Base/Mailing como origem secundária abaixo do contato.
   ========================================================== */
.tabela-contatos-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
}

.tabela-contatos {
    min-width: 1036px;
    table-layout: fixed;
}

.tabela-contatos th:nth-child(1),
.tabela-contatos td:nth-child(1) {
    width: 42px;
}

.tabela-contatos th:nth-child(2),
.tabela-contatos td:nth-child(2) {
    width: 44px;
}

.tabela-contatos th:nth-child(3),
.tabela-contatos td:nth-child(3) {
    width: 285px;
}

.tabela-contatos th:nth-child(4),
.tabela-contatos td:nth-child(4) {
    width: 170px;
}

.tabela-contatos th:nth-child(5),
.tabela-contatos td:nth-child(5) {
    width: 150px;
}

.tabela-contatos th:nth-child(6),
.tabela-contatos td:nth-child(6) {
    width: 165px;
}

.tabela-contatos th:nth-child(7),
.tabela-contatos td:nth-child(7) {
    width: 70px;
}

.tabela-contatos th:nth-child(8),
.tabela-contatos td:nth-child(8) {
    width: 110px;
}

.contato-cel-nome {
    min-width: 0;
}

.contato-cel-nome strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contato-cel-nome .contato-origem-resumo {
    display: block;
    max-width: 100%;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #8493a6;
    font-size: 10px;
    font-weight: 500;
}

.contato-cel-tags {
    min-width: 0;
}

.contato-tags-lista {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    white-space: nowrap;
}

.contato-tag-chip,
.contato-tag-mais {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 92px;
    height: 24px;
    padding: 0 7px;
    border: 1px solid #d9e7f4;
    border-radius: 999px;
    background: #f4f8fc;
    color: #355b7e;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contato-tag-mais {
    flex: 0 0 auto;
    max-width: none;
    border-color: #e3eaf1;
    background: #f8fafc;
    color: #718096;
}

.contato-tag-vazia {
    color: var(--vv-texto-secundario);
}

.contato-cel-cpf,
.contato-cel-telefone {
    white-space: nowrap;
}

.contato-valor-copiavel {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    white-space: nowrap;
}

.contato-copiar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #8a9aab;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.contato-copiar-btn:hover {
    border-color: #d8e5f1;
    background: #f4f8fc;
    color: #356384;
}

.contato-copiar-btn.copiado {
    border-color: #ccebdc;
    background: #f1fbf6;
    color: #178255;
}


/* ==========================================================
   FIX30 — CONTATOS: TABELA COMPACTA + CÓPIA DISCRETA
   ========================================================== */
.tabela-contatos-wrapper {
    overflow-x: hidden;
}

.tabela-contatos {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}

.tabela-contatos th,
.tabela-contatos td {
    padding-left: 10px;
    padding-right: 10px;
}

.tabela-contatos th:nth-child(1),
.tabela-contatos td:nth-child(1) {
    width: 36px;
}

.tabela-contatos th:nth-child(2),
.tabela-contatos td:nth-child(2) {
    width: 36px;
}

.tabela-contatos th:nth-child(3),
.tabela-contatos td:nth-child(3) {
    width: 30%;
}

.tabela-contatos th:nth-child(4),
.tabela-contatos td:nth-child(4) {
    width: 16%;
}

.tabela-contatos th:nth-child(5),
.tabela-contatos td:nth-child(5) {
    width: 145px;
}

.tabela-contatos th:nth-child(6),
.tabela-contatos td:nth-child(6) {
    width: 165px;
}

.tabela-contatos th:nth-child(7),
.tabela-contatos td:nth-child(7) {
    width: 58px;
    text-align: center;
}

.tabela-contatos th:nth-child(8),
.tabela-contatos td:nth-child(8) {
    width: 92px;
    text-align: right;
}

.contato-cel-nome strong,
.contato-cel-nome small {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contato-cel-nome small {
    margin-top: 3px;
    font-size: 10px;
}

.contato-cel-cpf,
.contato-cel-telefone,
.contato-cel-cpf span,
.contato-cel-telefone span {
    white-space: nowrap;
}

.contato-valor-copiavel {
    max-width: 100%;
    gap: 6px;
}

.contato-copiar-btn {
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    border: 1px solid #e3eaf2;
    border-radius: 7px;
    background: #fbfdff;
    color: #6f8298;
    box-shadow: 0 1px 2px rgba(16, 33, 63, 0.04);
}

.contato-copiar-btn:hover {
    border-color: #c8d9ea;
    background: #f3f8fd;
    color: #2f6799;
}

.contato-copiar-btn:focus-visible {
    outline: 2px solid rgba(22, 131, 255, .22);
    outline-offset: 2px;
}

.contato-copiar-icone {
    position: relative;
    display: inline-block;
    width: 13px;
    height: 13px;
}

.contato-copiar-icone::before,
.contato-copiar-icone::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border: 1.4px solid currentColor;
    border-radius: 2px;
    box-sizing: border-box;
}

.contato-copiar-icone::before {
    left: 1px;
    top: 1px;
}

.contato-copiar-icone::after {
    right: 1px;
    bottom: 1px;
    background: #fbfdff;
}

.contato-copiar-btn:hover .contato-copiar-icone::after {
    background: #f3f8fd;
}

.contato-copiar-btn.copiado {
    border-color: #cce9dc;
    background: #f2fbf6;
    color: #178255;
}

.contato-copiar-btn.copiado .contato-copiar-icone::before {
    display: none;
}

.contato-copiar-btn.copiado .contato-copiar-icone::after {
    content: "✓";
    inset: 0;
    width: 13px;
    height: 13px;
    border: 0;
    background: transparent;
    font-size: 12px;
    font-weight: 800;
    line-height: 13px;
    text-align: center;
}

.tabela-contatos .btn-abrir-ficha-contato {
    padding: 7px 9px;
    white-space: nowrap;
    font-size: 11px;
}

/* ==========================================================
   FIX30 — PAUSAS DO AGENTE
   ========================================================== */
#paginaTelefonia .telefonia-pausa-resumo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid #f0d79e;
    border-radius: 10px;
    background: #fff9ec;
    color: #805b10;
}

#paginaTelefonia .telefonia-pausa-resumo[hidden] {
    display: none;
}

#paginaTelefonia .telefonia-pausa-resumo.programada {
    border-color: #cfe1f4;
    background: #f4f9ff;
    color: #315f8c;
}

#paginaTelefonia .telefonia-pausa-resumo > div {
    min-width: 0;
}

#paginaTelefonia .telefonia-pausa-resumo span,
#paginaTelefonia .telefonia-pausa-resumo strong {
    display: block;
}

#paginaTelefonia .telefonia-pausa-resumo span {
    margin-bottom: 2px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    opacity: .75;
}

#paginaTelefonia .telefonia-pausa-resumo > div > strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
}

#paginaTelefonia .telefonia-pausa-cronometro {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-size: 15px;
    letter-spacing: .02em;
}

.modal-pausa-agente .pausa-agente-corpo {
    display: grid;
    gap: 16px;
}

.modal-pausa-agente .pausa-agente-aviso {
    padding: 10px 12px;
    border: 1px solid #cfe1f4;
    border-radius: 9px;
    background: #f5f9fe;
    color: #496985;
    font-size: 11px;
    line-height: 1.45;
}

.modal-pausa-agente textarea {
    resize: vertical;
    min-height: 76px;
}

/* Ajuste fino para manter todas as colunas visíveis com a sidebar aberta. */
.tabela-contatos th:nth-child(1),
.tabela-contatos td:nth-child(1) { width: 32px; }
.tabela-contatos th:nth-child(2),
.tabela-contatos td:nth-child(2) { width: 34px; }
.tabela-contatos th:nth-child(3),
.tabela-contatos td:nth-child(3) { width: 30%; }
.tabela-contatos th:nth-child(4),
.tabela-contatos td:nth-child(4) { width: 15%; }
.tabela-contatos th:nth-child(5),
.tabela-contatos td:nth-child(5) { width: 138px; }
.tabela-contatos th:nth-child(6),
.tabela-contatos td:nth-child(6) { width: 152px; }
.tabela-contatos th:nth-child(7),
.tabela-contatos td:nth-child(7) { width: 52px; }
.tabela-contatos th:nth-child(8),
.tabela-contatos td:nth-child(8) { width: 84px; }

/* ==========================================================
   FIX31 — CONTATOS: ALINHAMENTO DETERMINÍSTICO + CÓPIA SUTIL
   Colunas definidas pelo mesmo colgroup para cabeçalho e linhas.
   ========================================================== */
.tabela-contatos-wrapper {
    overflow-x: hidden;
}

.tabela-contatos {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}

.tabela-contatos col.contato-col-numero { width: 3%; }
.tabela-contatos col.contato-col-selecao { width: 4%; }
.tabela-contatos col.contato-col-identidade { width: 28%; }
.tabela-contatos col.contato-col-tag { width: 16%; }
.tabela-contatos col.contato-col-cpf { width: 15%; }
.tabela-contatos col.contato-col-telefone { width: 19%; }
.tabela-contatos col.contato-col-status { width: 5%; }
.tabela-contatos col.contato-col-acoes { width: 10%; }

.tabela-contatos th,
.tabela-contatos td {
    width: auto !important;
    box-sizing: border-box;
    padding-left: 8px;
    padding-right: 8px;
}

.tabela-contatos th:nth-child(1),
.tabela-contatos td:nth-child(1),
.tabela-contatos th:nth-child(2),
.tabela-contatos td:nth-child(2),
.tabela-contatos th:nth-child(7),
.tabela-contatos td:nth-child(7) {
    text-align: center;
}

.tabela-contatos th:nth-child(8),
.tabela-contatos td:nth-child(8) {
    text-align: right;
}

.contato-cel-nome,
.contato-cel-tags,
.contato-cel-cpf,
.contato-cel-telefone {
    min-width: 0;
    overflow: hidden;
}

.contato-cel-nome strong,
.contato-cel-nome small {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contato-tags-lista {
    overflow: hidden;
}

.contato-valor-copiavel {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-width: 0;
    white-space: nowrap;
}

.contato-valor-copiavel > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* O botão não tem mais uma "caixa" própria: só o ícone fica visível. */
.contato-copiar-btn {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    box-shadow: none;
    color: #91a0b1;
    opacity: .78;
}

.contato-copiar-btn:hover {
    border: 0;
    background: #eef6ff;
    color: #2871b5;
    opacity: 1;
}

.contato-copiar-btn:focus-visible {
    outline: 2px solid rgba(22, 131, 255, .22);
    outline-offset: 1px;
}

.contato-copiar-icone {
    width: 11px;
    height: 11px;
}

.contato-copiar-icone::before,
.contato-copiar-icone::after {
    width: 7px;
    height: 7px;
    border-width: 1.2px;
    border-radius: 1.5px;
}

.contato-copiar-icone::before {
    left: 0;
    top: 0;
}

.contato-copiar-icone::after {
    right: 0;
    bottom: 0;
    background: #fff;
}

.contato-copiar-btn:hover .contato-copiar-icone::after {
    background: #eef6ff;
}

.contato-copiar-btn.copiado {
    border: 0;
    background: #eefaf4;
    color: #178255;
    opacity: 1;
}

.contato-copiar-btn.copiado .contato-copiar-icone::after {
    background: transparent;
}

.btn-abrir-ficha-contato {
    max-width: 100%;
    padding: 8px 10px;
    white-space: nowrap;
    font-size: 11px;
}

/* ==========================================================
   FIX32 — CONTATOS: LAYOUT RESTAURADO A PARTIR DO FIX27
   Somente apresentação. Regras/funcionalidades do FIX31 ficam intactas.
   ADM e Operador usam a mesma grade visual; no Operador a coluna de
   seleção permanece ocupando espaço, mas seus controles ficam ocultos.
   ========================================================== */
.tabela-contatos-wrapper {
    overflow-x: auto !important;
    overflow-y: hidden;
}

.tabela-contatos {
    width: 100%;
    min-width: 940px;
    table-layout: auto !important;
}

/* Neutraliza o colgroup rígido introduzido no FIX31. */
.tabela-contatos col {
    width: auto !important;
}

.tabela-contatos th,
.tabela-contatos td {
    width: auto !important;
    padding: 14px 12px;
    box-sizing: border-box;
    vertical-align: middle;
}

/* Mesma distribuição visual para ADM e Operador. */
.tabela-contatos .contato-cel-numero {
    width: 34px !important;
    min-width: 34px;
    text-align: center;
}

.tabela-contatos .contato-cel-selecao {
    width: 38px !important;
    min-width: 38px;
    text-align: center;
}

.tabela-contatos .contato-cel-nome {
    width: 29% !important;
    min-width: 230px;
    overflow: visible !important;
}

.tabela-contatos .contato-cel-tags {
    width: 18% !important;
    min-width: 155px;
    overflow: visible !important;
}

.tabela-contatos .contato-cel-cpf {
    width: 145px !important;
    min-width: 145px;
    overflow: visible !important;
}

.tabela-contatos .contato-cel-telefone {
    width: 170px !important;
    min-width: 170px;
    overflow: visible !important;
}

.tabela-contatos th:nth-child(7),
.tabela-contatos td:nth-child(7) {
    width: 68px !important;
    min-width: 68px;
    text-align: center;
}

.tabela-contatos th:nth-child(8),
.tabela-contatos td:nth-child(8) {
    width: 88px !important;
    min-width: 88px;
    text-align: right;
}

/* FIX27: identidade legível, sem comprimir o nome em iniciais. */
.tabela-contatos .contato-cel-nome strong {
    display: block;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}

.tabela-contatos .contato-cel-nome small {
    display: block;
    max-width: none !important;
    margin-top: 2px;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}

.tabela-contatos .contato-tags-lista {
    display: flex;
    align-items: center;
    gap: 5px;
    overflow: visible !important;
    white-space: nowrap;
}

.tabela-contatos .contato-valor-copiavel,
.tabela-contatos .contato-valor-copiavel > span:first-child {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}

.tabela-contatos .btn-abrir-ficha-contato {
    max-width: none;
    padding: 8px 10px;
    white-space: nowrap;
    font-size: 11px;
}

/*
   O Operador não pode selecionar contatos para campanha manual,
   mas manter a célula na grade deixa o layout idêntico ao ADM.
*/
body.sessao-operador .tabela-contatos .contato-cel-selecao {
    display: table-cell !important;
}

body.sessao-operador .tabela-contatos .contato-cel-selecao input {
    visibility: hidden !important;
    pointer-events: none !important;
}

/* FIX33 — centralização exclusivamente visual do cabeçalho da tabela de Contatos. */
.tabela-contatos thead th {
    text-align: center !important;
}

/* FIX36 — operação ativa da campanha (agente + ramal) */
.campanha-operacao-ativa {
    margin-top: 5px;
    color: var(--texto-fraco);
    font-size: 11px;
    font-weight: 600;
}

/* FIX39 — identidade fixa do posto no perfil Operador */
#paginaTelefonia .telefonia-agente-ramal-fixo {
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    border: 1px solid #cfe0f4;
    border-radius: 10px;
    background: #f8fbff;
    color: #0f2f5f;
    font-weight: 700;
}

#paginaTelefonia .telefonia-agente-ramal-fixo[hidden] {
    display: none !important;
}



/* ==========================================================
   FIX 40 — POSTO ATIVO + CONTEXTO ISOLADO POR AGENTE/RAMAL
   Painel operacional moderno e informativo. Campanha é
   somente leitura; ADM seleciona o posto e Operador vê vínculo fixo.
   ========================================================== */
#paginaTelefonia .telefonia-posto-ativo-card {
    margin-top: 12px;
    padding: 16px;
    border: 1px solid #9fc9ff;
    border-radius: 16px;
    background: linear-gradient(135deg, #f7fbff 0%, #eef7ff 100%);
    box-shadow: 0 10px 24px rgba(33, 98, 170, 0.08);
    overflow: hidden;
}

#paginaTelefonia .telefonia-posto-cabecalho {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

#paginaTelefonia .telefonia-posto-icone {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #2f80ed;
    color: #fff;
    font-size: 18px;
    box-shadow: 0 6px 14px rgba(47, 128, 237, 0.22);
}

#paginaTelefonia .telefonia-posto-titulo-linha {
    display: flex;
    align-items: center;
    gap: 8px;
}

#paginaTelefonia .telefonia-posto-titulo-linha h4 {
    margin: 0;
    color: #0c2b57;
    font-size: 18px;
    font-weight: 850;
}

#paginaTelefonia .telefonia-posto-cabecalho p {
    margin: 2px 0 0;
    color: #68809b;
    font-size: 11px;
}

#paginaTelefonia .telefonia-posto-indicador {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #20bd74;
    box-shadow: 0 0 0 4px rgba(32, 189, 116, 0.12);
}

#paginaTelefonia .telefonia-posto-layout {
    display: grid;
    grid-template-columns: minmax(270px, 0.9fr) minmax(0, 2.1fr);
    gap: 14px;
    align-items: stretch;
}

#paginaTelefonia .telefonia-posto-selecao-card,
#paginaTelefonia .telefonia-posto-resumo-card {
    border: 1px solid #cce1fa;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.88);
}

#paginaTelefonia .telefonia-posto-selecao-card {
    padding: 13px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-content: start;
    align-items: center;
}

#paginaTelefonia .telefonia-posto-selecao-titulo {
    grid-column: 1 / -1;
}

#paginaTelefonia .telefonia-posto-selecao-titulo strong {
    display: block;
    color: #123665;
    font-size: 12px;
    font-weight: 800;
}

#paginaTelefonia .telefonia-posto-selecao-titulo small {
    display: block;
    margin-top: 2px;
    color: #7a8da5;
    font-size: 9px;
}

#paginaTelefonia .telefonia-posto-selecao-card .telefonia-seletor-controle {
    min-width: 0;
}

#paginaTelefonia .telefonia-posto-selecao-card .telefonia-seletor-controle select,
#paginaTelefonia .telefonia-posto-selecao-card .telefonia-agente-ramal-fixo {
    width: 100%;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid #bcd8f7;
    border-radius: 10px;
    background: #fff;
    color: #11335f;
    font-size: 12px;
    font-weight: 750;
    outline: none;
}

#paginaTelefonia .telefonia-posto-selecao-card .telefonia-agente-ramal-fixo {
    display: flex;
    align-items: center;
}

#paginaTelefonia .telefonia-posto-selecao-card .telefonia-conectar {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 800;
}

#paginaTelefonia .telefonia-posto-resumo-card {
    padding: 12px;
}

#paginaTelefonia .telefonia-posto-resumo-titulo {
    margin-bottom: 9px;
    color: #173c6c;
    font-size: 11px;
    font-weight: 800;
}

#paginaTelefonia .telefonia-posto-resumo-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr 0.8fr 1fr 1.35fr;
    gap: 8px;
}

#paginaTelefonia .telefonia-posto-info {
    min-width: 0;
    min-height: 68px;
    padding: 10px 11px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid #d6e6f8;
    border-radius: 10px;
    background: #fff;
}

#paginaTelefonia .telefonia-posto-info > span:first-child {
    margin-bottom: 5px;
    color: #627a97;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#paginaTelefonia .telefonia-posto-info strong {
    min-width: 0;
    overflow: hidden;
    color: #0d2e5b;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#paginaTelefonia .telefonia-posto-info.campanha strong {
    display: inline-flex;
    align-self: flex-start;
    max-width: 100%;
    padding: 5px 8px;
    border-radius: 8px;
    background: #eaf4ff;
    color: #1164c2;
}

#paginaTelefonia .telefonia-posto-info .telefonia-status-ramal {
    align-self: flex-start;
    margin: 0;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 850;
}

body.sessao-operador #paginaTelefonia .telefonia-posto-selecao-card {
    grid-template-columns: 1fr;
}

body.sessao-operador #paginaTelefonia .telefonia-posto-selecao-card .telefonia-conectar {
    display: none !important;
}

@media (max-width: 1180px) {
    #paginaTelefonia .telefonia-posto-layout {
        grid-template-columns: 1fr;
    }

    #paginaTelefonia .telefonia-posto-resumo-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    #paginaTelefonia .telefonia-posto-resumo-grid {
        grid-template-columns: 1fr 1fr;
    }

    #paginaTelefonia .telefonia-posto-selecao-card {
        grid-template-columns: 1fr;
    }
}