/* ==================================================================
   COMPONENTES DO PAINEL (segunda camada)
   ------------------------------------------------------------------
   Os modulos de tela (client.js, tools.js, uras.js, admin-*.js,
   webcall.js) foram escritos com uma nomenclatura mais curta que a do
   style.css original (.input em vez de .form-input, .field em vez de
   .form-group). Em vez de reescrever as telas, esta folha fecha a
   lacuna: TODAS as classes usadas e ainda sem estilo ganham aqui a
   definicao, sempre apoiada nos tokens do style.css. Ordem de carga:
   style.css -> components.css (esta por ultimo para vencer empates).
   ================================================================== */

/* ---------- CAMPOS DE FORMULARIO ---------- */
.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.field-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.01em;
}

.field-hint {
    /* 12px era o piso absoluto de legibilidade; 13px le melhor em texto de
       ajuda sobre fundo escuro sem inflar o formulario. */
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.field-error {
    font-size: 0.75rem;
    color: var(--danger);
    font-weight: 500;
}

.input {
    width: 100%;
    padding: 11px 14px;
    min-height: 42px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    line-height: 1.4;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
    appearance: none;
}

.input:hover { border-color: var(--border-hover); }

.input:focus,
.input:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
    background: var(--bg-secondary);
}

.input::placeholder { color: var(--text-muted); }

.input:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: var(--bg-elevated);
}

.input-lg {
    padding: 15px 18px;
    min-height: 54px;
    font-size: 1.125rem;
    letter-spacing: 0.04em;
}

.input-mono {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    letter-spacing: 0.02em;
}

textarea.input {
    min-height: 120px;
    resize: vertical;
    line-height: 1.55;
}

select.input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237d92a8' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
    cursor: pointer;
}

/* ---------- BOTOES (complementos) ---------- */
.btn-xs {
    padding: 4px 10px;
    font-size: 0.75rem;
    min-height: 28px;
    border-radius: var(--radius-sm);
}

.btn-group {
    display: inline-flex;
    gap: 0;
}

.btn-group > .btn { border-radius: 0; }
.btn-group > .btn:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.btn-group > .btn:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.btn-group > .btn + .btn { margin-left: -1px; }

/* ---------- CABECALHO DE PAGINA / ACOES ---------- */
.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
}

.page-title {
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
    margin: 0;
}

.page-subtitle {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: var(--space-1) 0 0;
    max-width: 68ch;
}

.page-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* ---------- TABELAS ---------- */
.table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    -webkit-overflow-scrolling: touch;
}

.table-wrap .table { margin: 0; }

.cell-strong {
    font-weight: 600;
    color: var(--text-primary);
}

/* Celula com LISTA LONGA (prefixos DDD, escopos, tags): sem isso a string
   "11,12,13,...,99" vira uma coluna de 1450px e empurra a tabela inteira
   para fora da tela. Aqui ela quebra em varias linhas dentro de um teto. */
.cell-prefixos {
    max-width: 260px;
    min-width: 140px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.45;
    color: var(--text-secondary);
}

/* Celula de detalhe tecnico (JSON de auditoria, payload, corpo de erro):
   monoespacada, com teto de altura e quebra — antes esticava a tabela. */
.cell-detalhe {
    max-width: 340px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.45;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Linha da tabela que representa o item ATIVO (rota em uso, contrato vigente...) */
.table tbody tr.row-active {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    box-shadow: inset 3px 0 0 var(--accent);
}
.table tbody tr.row-active td { font-weight: 500; }

/* Dica curta na mesma linha do rotulo do campo */
.field-hint-inline {
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-left: 4px;
}

/* ---------- LISTAS (linha a linha com acao) ---------- */
.list {
    display: flex;
    flex-direction: column;
}

.list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-2);
    border-bottom: 1px solid var(--border);
    transition: background var(--transition-fast);
}

.list-row:last-child { border-bottom: none; }
.list-row:hover { background: var(--bg-card-hover); }

.list-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.list-main > * { overflow: hidden; text-overflow: ellipsis; }

.list-side {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

/* ---------- MODAL ---------- */
.modal-subtitle {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0 0 var(--space-4);
    line-height: 1.5;
}

/* ---------- METRICAS SECUNDARIAS ---------- */
.stat-sub {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.35;
}

.id {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ---------- VAZIO COM ICONE ---------- */
.empty-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent-subtle);
    color: var(--accent);
    margin-bottom: var(--space-3);
}

/* ---------- SININHO DE NOTIFICACOES ---------- */
.notif-btn { position: relative; }

.notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    border: 2px solid var(--bg-card);
}

.notif-panel {
    position: fixed;
    top: 68px;
    right: 24px;
    width: 360px;
    max-width: calc(100vw - 32px);
    max-height: 70vh;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 900;
    padding: var(--space-2);
    animation: notifIn var(--transition-normal) ease-out;
}

@keyframes notifIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.notif-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.notif-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: var(--space-3);
    border: none;
    border-left: 3px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: inherit;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.notif-item:hover { background: var(--bg-card-hover); }
.notif-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.notif-danger { border-left-color: var(--danger); }
.notif-warning { border-left-color: var(--warning); }
.notif-info { border-left-color: var(--info); }
.notif-success { border-left-color: var(--success); }

.notif-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.35;
}

.notif-detail {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-top: 2px;
    line-height: 1.45;
}

.notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-4);
    text-align: center;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.notif-empty svg { color: var(--accent); opacity: 0.8; }

/* ---------- DISCADOR WEB (DTMF) ---------- */
.dialer-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-4);
    /* POLIMENTO (pedido do dono, 09/11/2026): antes era align-items:start e o card
       "Ultimas chamadas" ficava com uma area vazia enorme embaixo, ao lado do teclado.
       Agora as duas colunas tem a MESMA altura e o historico rola por dentro.
       COLUNAS EXPLICITAS: o discador ocupa a esquerda inteira; historico e modulacao
       de voz empilham na direita (grid-area), senao o 3o card cairia na coluna 1. */
    align-items: stretch;
    grid-template-areas:
        "discar historico"
        "discar voicemod";
    grid-template-rows: minmax(0, 1fr) auto;
}

.dialer-card { grid-area: discar; position: sticky; top: var(--space-4); align-self: start; }
.dialer-history-card { grid-area: historico; }
.dialer-wrap .vm-card { grid-area: voicemod; }

/* Coluna do historico: divide a coluna direita com a modulacao de voz.
   A lista rola por dentro para 500 chamadas nao empurrarem a pagina inteira.
   ALTURA: o historico ABSORVE todo o espaco que sobra na coluna direita
   (grid-template-rows: minmax(0,1fr) auto) — sem max-height fixo, que deixava
   um buraco embaixo do card de modulacao de voz. */
.dialer-history-card {
    display: flex;
    flex-direction: column;
    min-height: 240px;
    max-height: none;
    overflow: hidden;
}


.dialer-history-card #dialerHistory {
    /* NAO cresce: a lista mede o proprio conteudo. Quem absorve a sobra e o
       rodape (.dialer-history-bottom), onde o bloco de dicas se estica — antes
       a lista crescia vazia e deixava ~120px de buraco no meio do card. */
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    display: flex;
    flex-direction: column;
}

/* Linha do historico — numero do destino como protagonista (polimento 09/11/2026).
   Antes o numero saia CRU do banco ("5511956362237") e a bina vinha sem rotulo,
   colada nos metadados: a leitura ficava "texto • texto • 5511...". Agora o
   numero da direita e formatado, e a bina ganha rotulo e peso proprio. */
.dialer-hist-num {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.005em;
}

.dialer-hist-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    line-height: 1.4;
}

.dialer-hist-bina {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Barra de busca/filtro do historico — fica fixa no topo enquanto a lista rola.
   CORRECAO (09/11/2026): o fundo usava var(--surface-1, var(--surface)) e NENHUM
   dos dois tokens existe no design system — o background ficava INVALIDO
   (transparente) e os numeros apareciam por baixo da barra ao rolar a lista.
   Trocado pelo token real do card. */
.dialer-history-tools {
    position: sticky;
    top: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2);
    padding: var(--space-2) 0 var(--space-3);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-2);
}

.dialer-history-tools .input-sm {
    height: 36px;
    font-size: 0.8125rem;
    min-width: 0;
}

.dialer-history-bottom {
    /* Ocupa o restante do card: dentro dele o bloco de dicas cresce, entao o
       vazio que sobrava com poucas chamadas vira conteudo em vez de buraco. */
    flex: 1 1 auto;
    margin-top: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Resumo do historico — linha de KPIs DISCRETA (refeita em 09/11/2026).
   ANTES: 4 caixinhas coloridas com numero de 17px em negrito. O revisor apontou o
   obvio: elas competiam com os dados principais da lista (o numero discado e a
   bina), e quatro fundos verde/amarelo/vermelho lado a lado pintavam a tela de
   alarme numa operacao normal. Agora e uma faixa unica: numero pequeno, rotulo
   apagado, cores SO no numero — informacao na mesma densidade do resto do card. */
.dialer-history-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-3) 0 var(--space-1);
    border-top: 1px solid var(--border);
}

.dialer-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    text-align: left;
}

.dialer-stat-num {
    font-family: var(--font-mono);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.dialer-stat-lbl {
    font-size: 0.75rem;
    line-height: 1.2;
    color: var(--text-muted);
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.dialer-stat.is-ok .dialer-stat-num { color: var(--success); }
.dialer-stat.is-warn .dialer-stat-num { color: var(--warning); }
.dialer-stat.is-err .dialer-stat-num { color: var(--danger); }

/* Binas recentes: chips clicaveis que reusam a bina no campo da esquerda. */
.dialer-history-binas {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.dialer-history-binas-lbl {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    white-space: nowrap;
}

.dialer-history-binas-list {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
}

.dialer-bina-chip {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    cursor: pointer;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    font-variant-numeric: tabular-nums;
    transition: background 140ms ease-out, border-color 140ms ease-out, color 140ms ease-out;
}

.dialer-bina-chip:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--bg-hover, var(--bg-elevated));
}

.dialer-bina-chip:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* MOBILE (375px): os chips de bina recente saiam com 30px de altura — abaixo do
   alvo de toque confortavel. Sobem para 36px sem virar botao gigante, e a pill
   "bina ..." da lista continua legivel em 11px. */
@media (max-width: 640px) {
    .dialer-bina-chip {
        min-height: 36px;
        padding: 9px 13px;
        font-size: 0.8125rem;
    }

    .dialer-hist-num { font-size: 0.875rem; }

    .dialer-hist-meta { gap: 5px; }
}

/* Explicacao da bina — agora RECOLHIDA (refeita em 09/11/2026).
   ANTES: caixa sempre aberta com 3 topicos no rodape do card de historico. Como
   o card e a coluna mais estreita da tela, esse bloco virava um paredao de texto
   que empurrava os KPIs e o rodape para baixo. Virou <details>: uma linha
   "Como a bina e escolhida" que abre em um clique — informacao preservada, densidade
   de tela livre. flex:0 para nao tentar "preencher vazio" (era essa a intencao
   antiga, mas quem preenche agora e a propria lista de chamadas). */
.dialer-history-tips {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    padding: var(--space-2) 0 0;
}

.dialer-tips-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    margin: 0;
    padding: var(--space-1) 0;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: color var(--transition-fast);
}

.dialer-tips-title::-webkit-details-marker { display: none; }
.dialer-tips-title:hover { color: var(--text-secondary); }
.dialer-tips-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.dialer-tips-title::after {
    content: "";
    width: 6px;
    height: 6px;
    margin-left: auto;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--transition-fast);
}

.dialer-history-tips[open] .dialer-tips-title::after {
    transform: rotate(-135deg) translateY(-2px);
}

.dialer-tips-list {
    margin: var(--space-2) 0 0;
    padding-left: 1.05rem;
    display: grid;
    gap: 6px;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.dialer-tips-list li::marker { color: var(--accent); }

.dialer-tips-list b { color: var(--text-primary); font-weight: 600; }

@media (max-width: 420px) {
    .dialer-history-stats { gap: var(--space-1) var(--space-3); }
}

.dialer-history-foot {
    padding: var(--space-3) 0 var(--space-1);
    border-top: 1px solid var(--border);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Modulacao de voz dentro da coluna direita do discador: sem sticky e sem
   max-height propria — ela cresce naturalmente e o historico acima e que rola. */
.dialer-wrap .vm-card {
    position: static;
    margin-top: 0;
    max-height: none;
}

.dialer-history-dica {
    padding: var(--space-3);
    border: 1px dashed var(--border);
    border-radius: var(--radius-md, 10px);
    text-align: center;
    /* CORRECAO (09/11/2026): o color-mix usava var(--surface-2), token que NAO
       existe no design system — a declaracao era descartada e a dica ficava sem
       fundo nenhum. Agora usa um token real. */
    background: var(--bg-elevated);
}

/* Estado vazio/erro dentro do card alto: centraliza em vez de deixar um buraco. */
.dialer-history-card .empty-state {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    text-align: center;
    min-height: 200px;
}

.dialpad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    /* POLIMENTO (09/11/2026): era "var(--space-3) 0" e, somado ao margin-bottom
       de 16px do hero, abria um vao de 28px entre o campo de destino e a tecla 1
       — o revisor chamou de "buraco" e ele tinha razao: o teclado e continuacao
       do campo, nao uma secao separada. */
    margin: var(--space-2) 0 var(--space-3);
}

.dialpad-key {
    padding: 14px 0;
    font-family: var(--font-mono);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.dialpad-key:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-hover);
    color: var(--accent);
}

.dialpad-key:active { transform: scale(0.96); }
.dialpad-key:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.dialer-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    flex-wrap: wrap;
}

/* POLIMENTO (09/11/2026): todos os botoes de acao da mesma altura do teclado,
   com o texto centralizado — antes "Ligar"/"Limpar" ficavam um degrau acima
   ou abaixo dos botoes do dialpad e a linha parecia torta. */
.dialer-actions .btn {
    min-height: 48px;
    /* Altura FIXA e padding vertical zerado: o "Ligar" usa .btn-lg (padding
       14px + fonte 16px = 49px) e o "Limpar" o .btn normal (= 44px), entao os
       dois ficavam com alturas diferentes na mesma linha. Com height + flex
       centering eles passam a medir exatamente o mesmo. */
    height: 48px;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    /* Mesma espessura de borda nos dois botoes: o primario vinha com 0px e o
       secundario com 1px, o que fazia o "Limpar" parecer maior que o "Ligar"
       (apontado na revisao visual). A borda transparente iguala a caixa. */
    border: 1px solid transparent;
}

.dialer-actions .btn-secondary {
    border-color: var(--border);
}

.dialer-actions .btn-primary { flex: 1; min-width: 140px; }

/* ---------- DISCADOR RAPIDO (card "Fazer Chamada" do painel) ----------
   O campo de destino NAO pode esticar a linha inteira (o botao Ligar ficava
   solto no canto). Aqui o input tem largura confortavel e o botao fica
   alinhado a ele, quebrando para a linha de baixo no mobile. */
.dialer {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    padding: var(--space-4);
}

.dialer-field {
    flex: 1 1 260px;
    max-width: 420px;
    min-width: 0;
}

/* Grade do discador do painel: ramal de origem + bina + destino lado a lado em
   telas largas e empilhados no celular. Antes era um campo solto, sem o ramal
   nem a bina visíveis. */
.dialer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
    width: 100%;
}

.dialer-grid .dialer-field {
    flex: 1 1 auto;
    max-width: none;
    width: 100%;
    min-width: 0;
}

.dialer-grid .dialer-field select,
.dialer-grid .dialer-field .input {
    width: 100%;
    height: 44px;
}

@media (max-width: 900px) {
    .dialer-grid { grid-template-columns: 1fr; gap: var(--space-3); }
}

/* Input + botao na MESMA linha, com a mesma altura — o botao estava alto
   demais em relacao ao campo e parecia solto. */
.dialer-row {
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.dialer-row .dialer-input-wrap { flex: 1 1 auto; min-width: 0; }
.dialer-row .dialer-actions { margin-top: 0; flex-wrap: nowrap; }
.dialer-row .btn { height: 44px; align-self: center; }

.dialer-input-wrap .input {
    width: 100%;
    height: 44px;
    font-size: 1rem;
    letter-spacing: 0.02em;
}

.dialer-hint {
    margin: 6px 0 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.dialer-actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex: 0 0 auto;
}

.dialer-actions .btn { min-width: 132px; justify-content: center; }

.dialer-status {
    padding: 0 var(--space-4) var(--space-4);
}

.dialer-status:empty { display: none; }

@media (max-width: 640px) {
    .dialer { padding: var(--space-3); }
    .dialer-field { max-width: none; flex: 1 1 100%; }
    .dialer-row { flex-wrap: wrap; }
    .dialer-row .dialer-input-wrap { flex: 1 1 100%; }
    .dialer-row .dialer-actions { width: 100%; flex-wrap: wrap; }
    .dialer-actions { width: 100%; }
    .dialer-actions .btn { flex: 1; min-height: 44px; height: 48px; }
}

/* ============================================================
   POLIMENTO TOTAL DO DISCADOR WEB (09/11/2026)
   ------------------------------------------------------------
   Contexto do pedido do dono: "a pagina esta estupidamente feia e
   tem coisas cruas nela". O diagnostico confirmou TRES causas:
   1) .bina-classe (segmented control da bina) NUNCA teve CSS — o
      HTML caia cru na tela: 3 botoes default + input + select +
      botao + hint, todos empilhados dentro de um mesmo <label>.
   2) Dois avisos empilhados diziam a mesma coisa no topo, e o de
      cima repetia o texto ("Audio no navegador — Audio no...").
   3) O campo Destino — o mais importante da tela — era um input
      comum enterrado depois de 5 campos.
   Regra seguida: SO tokens de style.css (zero cor hardcoded),
   escala de espaco 4/8/12/16/24/32 e alvos de toque >= 40px.
   ============================================================ */

/* ---------- Barra de status unica do telefone ---------- */
.dialer-statusbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    flex-wrap: wrap;
}

.dialer-statusbar-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.dialer-statusbar-text {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.dialer-statusbar-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.dialer-statusbar-tag {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px 9px;
    white-space: nowrap;
}

.dialer-statusbar-tag.mono {
    font-family: var(--font-mono);
    text-transform: none;
    letter-spacing: 0;
    color: var(--accent);
    border-color: var(--border-accent);
    background: var(--accent-subtle);
    font-variant-numeric: tabular-nums;
}

/* ---------- Contraste da barra por ESTADO ----------
   POLIMENTO (09/11/2026): quando o audio falhava, a barra recebia o tom
   .webaudio-danger (fundo vermelho translucido) mas o texto continuava em
   --text-secondary e a pill da tarifa em --accent (VERDE sobre vermelho).
   O resultado era exatamente o que o dono viu: um banner vermelho com
   letras apagadas e uma tag verde ilegivel. Cada estado agora define a
   propria cor de texto/metadado derivada da familia daquele estado. */
.dialer-statusbar.webaudio-danger .dialer-statusbar-text,
.dialer-statusbar.webaudio-danger .dialer-statusbar-tag { color: var(--danger-text-strong); }

.dialer-statusbar.webaudio-danger .dialer-statusbar-tag {
    background: transparent;
    border-color: rgba(255, 77, 94, 0.32);
}

.dialer-statusbar.webaudio-danger .dialer-statusbar-tag.mono {
    color: var(--danger-text);
    border-color: rgba(255, 77, 94, 0.32);
    background: transparent;
}

.dialer-statusbar.webaudio-warning .dialer-statusbar-text,
.dialer-statusbar.webaudio-warning .dialer-statusbar-tag { color: var(--warning-text); }

.dialer-statusbar.webaudio-warning .dialer-statusbar-tag {
    background: transparent;
    border-color: rgba(245, 183, 61, 0.32);
}

.dialer-statusbar.webaudio-warning .dialer-statusbar-tag.mono {
    color: var(--warning-text);
    border-color: rgba(245, 183, 61, 0.32);
    background: transparent;
}

.dialer-statusbar.webaudio-ok .dialer-statusbar-text { color: var(--text-secondary); }

/* O botao de acao da barra (Ativar microfone / Tentar de novo) tambem precisa
   pertencer ao estado. Antes ele mantinha a borda VERDE do .btn-secondary
   dentro de uma faixa VERMELHA — eram duas linguagens de cor no mesmo bloco.
   Agora a borda e o texto derivam da familia do estado; o hover sobe o tom. */
.dialer-statusbar.webaudio-danger .btn-secondary {
    background: transparent;
    border-color: rgba(255, 77, 94, 0.4);
    color: var(--danger-text-strong);
}

.dialer-statusbar.webaudio-danger .btn-secondary:hover {
    background: rgba(255, 77, 94, 0.14);
    border-color: rgba(255, 77, 94, 0.62);
    color: var(--danger-text-strong);
}

.dialer-statusbar.webaudio-warning .btn-secondary {
    background: transparent;
    border-color: rgba(245, 183, 61, 0.42);
    color: var(--warning-text);
}

.dialer-statusbar.webaudio-warning .btn-secondary:hover {
    background: rgba(245, 183, 61, 0.14);
    border-color: rgba(245, 183, 61, 0.62);
    color: var(--warning-text);
}

/* ---------- Cabecalho do card Discar com pill do ramal ---------- */
.dialer-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.dialer-ramal-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 10px;
    white-space: nowrap;
}

.dialer-ramal-pill strong {
    color: var(--accent);
    font-weight: 600;
}

/* ---------- Chip do ramal: seletor clicavel (10/11/2026) ----------
   O dono pediu: "no discador web aparece o cartao chip ali do ramal, mas nao
   tem a opcao dele clicar no chip e trocar o ramal". Agora o pill E um botao
   que abre um menu com todos os ramais ativos do usuario. */
.dialer-chip-wrap {
    position: relative;
    display: inline-flex;
}

button.dialer-chip {
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
    transition: background-color 160ms ease-out, border-color 160ms ease-out,
                color 160ms ease-out, box-shadow 160ms ease-out;
}

button.dialer-chip:hover {
    background: var(--bg-hover, var(--bg-elevated));
    border-color: var(--accent);
    color: var(--text-primary);
}

button.dialer-chip:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--accent);
}

button.dialer-chip:active {
    transform: translateY(1px);
}

button.dialer-chip[aria-expanded="true"] {
    border-color: var(--accent);
    background: var(--bg-hover, var(--bg-elevated));
}

.dialer-chip-caret {
    opacity: 0.65;
    transition: transform 160ms ease-out;
}

button.dialer-chip[aria-expanded="true"] .dialer-chip-caret {
    transform: rotate(180deg);
}

.dialer-chip-label {
    max-width: 12ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.8;
}

.dialer-chip-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    min-width: 220px;
    max-width: min(320px, calc(100vw - 32px));
    padding: 6px;
    background: var(--bg-popover, var(--bg-elevated));
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
    animation: dialerChipIn 140ms ease-out;
}

.dialer-chip-menu[hidden] {
    display: none;
}

@keyframes dialerChipIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.dialer-chip-menu-head {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted, var(--text-secondary));
    padding: 6px 8px 8px;
}

.dialer-chip-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 38px;
    padding: 7px 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.82rem;
    text-align: left;
    cursor: pointer;
    transition: background-color 140ms ease-out, border-color 140ms ease-out;
}

.dialer-chip-item:hover {
    background: var(--bg-hover, rgba(255, 255, 255, 0.06));
}

.dialer-chip-item:focus-visible {
    outline: none;
    border-color: var(--accent);
}

.dialer-chip-item.is-active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.dialer-chip-item-ext {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--accent);
    min-width: 3.2ch;
}

.dialer-chip-item-lbl {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
}

.dialer-chip-item-check {
    opacity: 0;
    color: var(--accent);
    flex: 0 0 auto;
}

.dialer-chip-item.is-active .dialer-chip-item-check {
    opacity: 1;
}

@media (max-width: 640px) {
    .dialer-chip-menu {
        right: auto;
        left: 0;
    }
    .dialer-chip-item {
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dialer-chip-menu { animation: none; }
    .dialer-chip-caret { transition: none; }
}

/* ---------- HERO: numero de destino ---------- */
/* POLIMENTO RODADA 2 (09/11/2026) — ALINHAMENTO DE COLUNA.
   MEDIDO em 1600px: o titulo do card e o teclado comecavam em x=317, mas o
   rotulo "Numero de destino" e o proprio campo comecavam em x=334. Eram 17px de
   desencontro causados pelo "poco" do hero (padding 16px + borda) DENTRO do
   padding do card — e o olho le isso como desalinhamento, nao como camada.
   Agora o hero e um grupo achatado (sem fundo/padding proprios) e o poco visual
   vive na LINHA do campo (.dialer-hero-row). Resultado: rotulo, campo, teclado,
   botoes e seletor de bina partem TODOS da mesma linha vertical. */
.dialer-hero {
    padding: 0;
    margin-bottom: var(--space-4);
    background: transparent;
    border: 0;
    border-radius: 0;
}

.dialer-hero:focus-within { box-shadow: none; }

.dialer-hero-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
}

.dialer-hero-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    cursor: pointer;
}

.dialer-hero-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

/* ===== SELETOR DE PAIS / BANDEIRAS DO DISCADOR (11/11/2026) =====
   Pedido do dono: bandeirinhas Brasil e Portugal no painel do usuario, com a
   tarifa de cada pais visivel. Segue os tokens do design system (sem cor
   hardcoded), alvo de toque >= 40px no celular e foco visivel por teclado. */
.dialer-flags {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}

.dialer-flag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 12px;
    min-height: 44px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 10px);
    background: var(--surface-2, rgba(255, 255, 255, 0.03));
    color: var(--text);
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: border-color 160ms ease-out, background 160ms ease-out, transform 160ms ease-out;
}

.dialer-flag:hover {
    border-color: var(--border-strong, var(--border));
    background: var(--surface-3, rgba(255, 255, 255, 0.06));
}

.dialer-flag:active { transform: translateY(1px); }

.dialer-flag:focus-visible {
    outline: 2px solid var(--accent, #4f8cff);
    outline-offset: 2px;
}

.dialer-flag.is-active {
    border-color: var(--accent, #4f8cff);
    background: color-mix(in srgb, var(--accent, #4f8cff) 14%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #4f8cff) 40%, transparent);
}

.dialer-flag-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 24px;
    padding: 0 6px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: var(--surface-4, rgba(255, 255, 255, 0.1));
    color: var(--text);
    /* BANDEIRA AUTENTICA (11/11/2026): o badge agora carrega o SVG da bandeira.
       Sem padding lateral e sem fundo quando ha bandeira — o desenho tem as
       proprias cores e bordas. O selo de sigla (pais futuro) continua com fundo. */
    padding: 0;
    background: transparent;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.28);
}

/* A bandeira dentro do badge do discador: proporcao 28:20, canto arredondado. */
.dialer-flag-badge .flag-ico {
    width: 30px;
    height: 21.5px;
    border-radius: 5px;
    display: block;
}

/* Selo de sigla (pais sem desenho proprio) mantem o visual de etiqueta. */
.dialer-flag-badge .flag-ico.flag-fallback {
    width: auto;
    min-width: 30px;
    height: 21.5px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: var(--surface-4, rgba(255, 255, 255, 0.14));
    color: var(--text);
    box-shadow: none;
}

.dialer-flag.is-active .dialer-flag-badge {
    background: transparent;
    color: inherit;
    box-shadow: 0 0 0 2px var(--accent, #4f8cff), 0 2px 6px rgba(0, 0, 0, 0.35);
}

.dialer-flag-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.dialer-flag-name {
    font-size: 0.85rem;
    font-weight: 600;
}

.dialer-flag-price {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.dialer-flag.is-active .dialer-flag-price { color: var(--text); }

@media (max-width: 640px) {
    .dialer-flags { flex-direction: column; }
    .dialer-flag { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .dialer-flag { transition: none; }
}

/* Poco do campo de destino: aqui mora a superficie, a borda e o anel de foco. */
.dialer-hero-row {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 60px;
    padding: 4px var(--space-2) 4px var(--space-4);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.dialer-hero-row:hover { border-color: var(--border-hover); }

.dialer-hero-row:focus-within {
    border-color: var(--border-accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

/* O input do destino herda o "poco" do hero: sem borda propria, sem fundo
   proprio — a moldura e o :focus-within do container que fazem o destaque. */
.dialer-hero-input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: clamp(1.375rem, 3.4vw, 1.75rem);
    font-weight: 600;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    outline: none;
    min-height: 44px;
}

.dialer-hero-input::placeholder {
    /* O placeholder estava herdando o corpo do valor (clamp ate 28px) e por isso
       parecia CONTEUDO digitado, brigando com o que o usuario escreve. Agora ele
       e um exemplo discreto: corpo menor, peso leve e cor apagada. */
    color: var(--text-muted);
    opacity: 0.6;
    font-weight: 400;
    font-size: 0.9375rem;
    letter-spacing: 0;
}

/* Apagar um digito: fica DENTRO do poco do campo, entao nao precisa de borda
   propria (era um botao com borda flutuando ao lado do campo, parecendo um
   segundo input). Vira um alvo fantasma de 40px. */
.dialer-hero-key {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.dialer-hero-key:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-hover);
    color: var(--accent);
}

.dialer-hero-key:active { transform: scale(0.95); }

.dialer-hero-key:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---------- Secao (agrupa origem + bina) ---------- */
.dialer-section {
    padding-top: var(--space-4);
    margin-top: var(--space-2);
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.dialer-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.dialer-section-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.dialer-section-title svg { color: var(--accent); flex: 0 0 auto; }

.dialer-section-sub {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Dentro da secao o <label class="field"> nao precisa de margem extra:
   o gap do flex ja separa. */
.dialer-section .field { margin: 0; }

/* ---------- Segmented control da bina (NUNCA tinha estilo) ---------- */
.bina-classe {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-1);
    padding: 4px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.bina-classe-opt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: var(--space-2) 4px;
    min-height: 56px;
    /* CONTRASTE (rodada 2, 09/11/2026): as opcoes NAO selecionadas eram
       transparentes com texto apagado — no print elas sumiam e o cliente nao
       sabia que eram clicaveis. Agora cada opcao tem superficie e borda proprias
       (leem-se como tres botoes) e so a ativa recebe o acento. */
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    font-family: inherit;
    transition: background var(--transition-fast), color var(--transition-fast),
                border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.bina-classe-opt svg {
    color: currentColor;
    opacity: 0.85;
    margin-bottom: 1px;
    /* Icone fixado em 16px: no print o padrao herdado do atributo ficava pequeno
       demais e nao ajudava a identificar "movel" de "fixo". */
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.bina-classe-opt:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-hover);
    color: var(--text-primary);
}

.bina-classe-opt:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.bina-classe-opt.is-active {
    background: var(--accent-subtle);
    border-color: var(--border-accent);
    color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent-glow);
}

.bina-classe-opt.is-active .bina-classe-titulo { font-weight: 700; }

.bina-classe-titulo {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    color: inherit;
}

.bina-classe-sub {
    font-size: 0.6875rem;
    line-height: 1.25;
    color: var(--text-muted);
    letter-spacing: 0.01em;
    text-align: center;
    /* "Fixo ou celular" em duas palavras: no print ele quebrava feio no meio.
       Com nowrap + ellipsis a linha unica se mantem em 3 colunas de 375px. */
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bina-classe-opt.is-active .bina-classe-sub {
    color: var(--accent);
    opacity: 0.75;
}

/* ---------- Input-group (campo + botao colados) ---------- */
.dialer-inputgroup {
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
}

.dialer-inputgroup .input {
    flex: 1 1 auto;
    min-width: 0;
}

.dialer-inputgroup .btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    /* Altura igualada ao input: com align-items:stretch o botao esticava, mas o
       .btn tem min-height menor e em algumas fontes o texto ficava 2px acima do
       valor do campo — o revisor leu como "botao solto". 44px casa com o input. */
    min-height: 44px;
    /* Dentro do input-group o botao nao precisa do respiro lateral de 24px do
       botao solto: com ele o campo de bina sobrava em 296px e o placeholder
       encostava na borda. 12px devolve ~24px ao input. */
    padding-left: var(--space-3);
    padding-right: var(--space-3);
}

/* ---------- Select com seta PROPRIA (polimento 09/11/2026) ----------
   MOTIVO: os <select> do discador usavam a seta padrao do sistema operacional.
   No Windows ela vem como um triangulo cinza chapado, com altura diferente em cada
   navegador — era o elemento mais "cru" da tela, apontado pelo revisor de layout.
   Aqui o select perde a aparencia nativa e o chevron passa a ser desenhado com
   duas bordas de 1.8px, girando 45deg: escala perfeita em qualquer zoom, cor vem
   de token (var(--text-muted)) e nao de imagem com cor embutida.
   USO: <div class="select-shell"><select class="input">…</select></div> */
/* ---------- LINHA DO SELECT DE ROTA (11/11/2026) ----------
   MOTIVO: o <option> nativo NAO renderiza SVG, entao a bandeira do pais que ja
   existia no texto da rota nunca aparecia no discador do cliente (ele via as
   bandeirinhas no painel do ADMIN e nao no dele). A bandeira passou a ser
   desenhada num badge ao lado do select, com o mesmo componente .dialer-flag-badge
   do seletor de pais. Esta classe alinha badge + select na mesma linha, com o
   select ocupando o resto da largura. */
.rota-select-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.rota-select-row .dialer-flag-badge {
    flex: 0 0 auto;
}

.rota-select-row .select-shell {
    flex: 1 1 auto;
    min-width: 0;
}

/* No celular a linha continua horizontal: a bandeira e pequena (30px) e o select
   precisa da largura. Alvo de toque do select fica com 44px de altura. */
@media (max-width: 640px) {
    .rota-select-row {
        gap: 8px;
    }
    .rota-select-row .select-shell > select.input {
        min-height: 44px;
    }
}

.select-shell {
    position: relative;
    display: block;
}

.select-shell > select.input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    padding-right: 40px;
    cursor: pointer;
    text-overflow: ellipsis;
}

.select-shell::after {
    content: "";
    position: absolute;
    right: 15px;
    top: calc(50% - 7px);
    width: 7px;
    height: 7px;
    border-right: 1.8px solid var(--text-muted);
    border-bottom: 1.8px solid var(--text-muted);
    transform: rotate(45deg);
    pointer-events: none;
    transition: border-color var(--transition-fast);
}

.select-shell:hover::after { border-color: var(--text-secondary); }
.select-shell:focus-within::after { border-color: var(--accent); }

/* No mobile o alvo de toque cresce, mas a seta mantem a proporcao. */
@media (max-width: 640px) {
    .select-shell::after { right: 16px; }
}

/* Medida de linha: o subtitulo do topo corria a largura inteira da tela (mais de
   120 caracteres por linha em 1600px), o que cansa a leitura e faz o texto parecer
   "solto". 68ch e o intervalo confortavel. Vale para todas as paginas do painel. */
.page-head .page-subtitle {
    max-width: 68ch;
    margin-bottom: 0;
}

/* ---------- Avancado (CNAM recolhido) ---------- */
/* AVANCADO: virou DISCLOSURE, nao caixa. Motivo visual (09/11/2026): com borda
   e padding interno de 12px o texto do summary comecava 12px para DENTRO, enquanto
   os rotulos dos campos comecavam na margem 0 — resultado: o "Avançado — CNAM"
   parecia torto em relacao a coluna inteira. Sem caixa e sem padding lateral ele
   alinha exatamente com "Tipo de bina" / "Número de bina", e a tela perde um
   retangulo de cromo que competia com os campos de verdade. */
.dialer-advanced {
    /* margin-top = space-1 (4px) + o gap de 12px do .dialer-section + 8px de padding
       do summary = 24px entre o hint do pool e o rotulo do CNAM. Antes eram 8px
       somados aqui e o bloco colava no campo de cima (apontado na revisao de layout). */
    margin-top: var(--space-1);
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}


.dialer-advanced > summary {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: var(--space-2) 0;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-muted);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: color var(--transition-fast), background var(--transition-fast);
}

.dialer-advanced > summary::-webkit-details-marker { display: none; }

.dialer-advanced > summary:hover {
    color: var(--text-secondary);
    background: var(--bg-card-hover);
}

.dialer-advanced > summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.dialer-advanced[open] > summary {
    color: var(--text-secondary);
    border-bottom: 0;
}

/* Seta propria do disclosure: sem ela o <details> fechado nao da nenhuma pista
   de que abre. Girar 90deg quando aberto e a convencao que o usuario ja conhece. */
.dialer-advanced > summary::after {
    content: "";
    width: 6px;
    height: 6px;
    margin-left: auto;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--transition-fast);
}

.dialer-advanced[open] > summary::after {
    transform: rotate(-135deg) translateY(-2px);
}

.dialer-advanced-body {
    padding: 0 0 var(--space-1);
}

/* ---------- Estado vazio do historico ---------- */
.dialer-history-empty {
    gap: var(--space-2);
    padding: var(--space-5) var(--space-4);
}

.dialer-history-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: var(--accent);
    background: var(--accent-subtle);
    border: 1px solid var(--border-accent);
    margin-bottom: var(--space-1);
}

.dialer-history-empty-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.dialer-history-empty .btn { margin-top: var(--space-2); }

/* ---------- Refino do dialpad ---------- */
.dialpad-key {
    min-height: 48px;
}

/* ---------- Responsivo do discador ---------- */
@media (max-width: 900px) {
    .dialer-wrap {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "discar"
            "historico"
            "voicemod";
        grid-template-rows: auto auto auto;
    }
    .dialer-card { position: static; }
    .dialer-history-card { min-height: 220px; max-height: 420px; }
}

@media (max-width: 640px) {
    /* RODADA 2: no print de 375px o aviso de microfone tinha texto colado
       (line-height 1.45 em 3 linhas) e o botao "Tentar de novo" parecia solto
       embaixo do bloco. Agora a faixa tem respiro vertical proprio e o botao
       fecha o bloco com margem de separacao. */
    .dialer-statusbar {
        padding: var(--space-3) var(--space-3) var(--space-4);
        gap: var(--space-3);
        align-items: flex-start;
    }
    .dialer-statusbar-text { font-size: 0.8125rem; line-height: 1.55; }
    .dialer-statusbar-meta { margin-top: 2px; }
    .dialer-statusbar .btn { width: 100%; margin-top: var(--space-1); }
    .dialer-hero { padding: var(--space-3); }
    .bina-classe { gap: 2px; }
    .bina-classe-opt { min-height: 52px; padding: var(--space-1) 2px; }
    .bina-classe-sub { display: none; }
    .dialer-inputgroup { flex-wrap: wrap; }
    .dialer-inputgroup .btn { width: 100%; justify-content: center; }
    .dialer-actions .btn-primary { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .dialer-hero,
    .dialer-hero-key,
    .bina-classe-opt,
    .dialer-advanced > summary {
        transition: none;
    }
}

/* ---------- WEBHOOK (caixa de URL copiavel) ---------- */
.wh-url-box {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin: var(--space-3) 0;
}

.wh-url-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.wh-url {
    flex: 1;
    min-width: 220px;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--accent);
    background: transparent;
    border: none;
    padding: 0;
    word-break: break-all;
}

.wh-instr {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0 0 var(--space-2);
}

/* ---------- PLANOS (landing interna) ---------- */
.plan-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--accent-subtle);
    color: var(--accent);
}

.plan-name {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: var(--space-2) 0 2px;
}

.plan-desc {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.plan-min {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin: var(--space-2) 0;
}

.plan-min .val {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.plan-min .per {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: var(--space-3) 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.plan-features li::before {
    content: "✓";
    color: var(--accent);
    font-weight: 700;
    margin-right: 6px;
}

.cur { color: var(--text-muted); font-size: 0.75rem; }

/* ---------- RESPONSIVO ---------- */
@media (max-width: 900px) {
    .dialer-wrap { grid-template-columns: 1fr; grid-template-areas: "discar" "historico" "voicemod"; grid-template-rows: auto auto auto; }
    .dialer-history-card { max-height: 420px; }
    .dialer-card { position: static; }
    .notif-panel { top: auto; bottom: 16px; right: 16px; left: 16px; width: auto; }
}

@media (max-width: 640px) {
    .page-head { flex-direction: column; align-items: stretch; }
    .page-actions { justify-content: stretch; }
    .page-actions .btn { flex: 1; }
    .dialpad-key { padding: 16px 0; font-size: 1.375rem; }
    .list-row { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
    .notif-panel { animation: none; }
    .dialpad-key:active { transform: none; }
}

/* ---------- COMPLEMENTOS: SAUDE DE ROTAS + CENTRAL DE SUPORTE ---------- */
.input-sm {
    width: auto;
    min-height: 34px;
    padding: 6px 12px;
    font-size: 0.8125rem;
    border-radius: var(--radius-sm);
}
select.input-sm { padding-right: 32px; background-position: right 10px center; }

/* Sparkline de volume diario (saude das rotas) */
.spark {
    display: inline-flex;
    align-items: flex-end;
    gap: 3px;
    height: 28px;
    padding: 0 2px;
}
.spark-bar {
    display: block;
    width: 5px;
    min-height: 4px;
    background: rgba(53, 200, 255, 0.22);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}
.spark-bar i {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    background: var(--accent);
    border-radius: 2px;
    transition: height 180ms ease-out;
}

/* Barra de ASR (inteligencia de entrega) */
.asr-bar {
    display: block;
    width: 100%;
    min-width: 60px;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
}
.asr-bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), rgba(0, 224, 122, 0.55));
    transition: width 220ms ease-out;
}

/* Coluna de ASR: largura fixa para o cabecalho alinhar com os dados */
.ie-col-asr {
    width: 170px;
    min-width: 170px;
    vertical-align: middle;
}
/* Cabecalho da coluna ASR alinhado com o percentual (extrema direita) */
.table th.ie-col-asr { text-align: right; padding-right: var(--space-4); }
.table td.ie-col-asr .flex { justify-content: flex-end; }
.table td.ie-col-asr .asr-bar { flex: 0 1 auto; max-width: 110px; }

/* Estado vazio compacto dos cards de inteligencia de entrega */
.ie-empty {
    padding: 20px 18px;
    gap: 6px;
    min-height: 0;
    align-items: flex-start;
    text-align: left;
    line-height: 1.55;
}
.ie-empty p:first-child { font-size: 0.875rem; }

/* Lista de regras explicativas (inteligencia de entrega) */
.ie-regras {
    list-style: none;
    margin: 0;
    padding: 0 0 0 4px;
    display: grid;
    gap: 10px;
}
.ie-regras li {
    position: relative;
    padding-left: 20px;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-secondary, #b3c4d6);
}
.ie-regras li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 224, 122, 0.14);
}
.ie-regras strong {
    color: var(--text-primary, #eef2f8);
    font-weight: 600;
}

/* Thread de mensagens do ticket */
.tk-thread {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-height: 46vh;
    overflow-y: auto;
    padding: var(--space-2);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.tk-msg {
    padding: 10px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-left: 3px solid var(--info);
    border-radius: var(--radius-sm);
    max-width: 92%;
}
.tk-msg-own {
    margin-left: auto;
    border-left-color: var(--accent);
    background: var(--accent-subtle);
}
.tk-msg-system {
    border-left-color: var(--text-muted);
    background: transparent;
    font-size: 0.8125rem;
    color: var(--text-muted);
}
.tk-msg-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: 4px;
    font-size: 0.8125rem;
}
.tk-msg-body {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Skeleton de carregamento */
.skeleton {
    background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-card-hover) 37%, var(--bg-elevated) 63%);
    background-size: 400% 100%;
    border-radius: var(--radius-sm);
    animation: skeletonShimmer 1.4s ease-in-out infinite;
}
.skeleton-line { height: 12px; margin: 8px 0; }
@keyframes skeletonShimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
    .skeleton { animation: none; }
}

/* ============ TUTORIAIS ============ */
.tut-wrap { display: flex; flex-direction: column; gap: 20px; max-width: 1120px; }
.tut-search { position: relative; display: flex; align-items: center; gap: 8px; }
.tut-search svg { position: absolute; left: 12px; color: var(--text-muted); pointer-events: none; }
.tut-search .form-input { padding-left: 36px; min-width: 320px; }
.tut-index { display: flex; flex-wrap: wrap; gap: 8px; }
.tut-chip {
    display: inline-flex; align-items: center; padding: 6px 12px; font-size: 12px; font-weight: 600;
    color: var(--text-secondary); background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 999px; text-decoration: none; transition: color .16s ease-out, border-color .16s ease-out, background .16s ease-out;
}
.tut-chip:hover { color: var(--accent); border-color: var(--border-hover); background: var(--accent-subtle); }
.tut-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tut-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md, 12px);
    padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 78px;
    transition: border-color .18s ease-out, box-shadow .18s ease-out;
}
.tut-card:hover { border-color: var(--border-hover); box-shadow: 0 10px 28px rgba(0, 0, 0, .28); }
.tut-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tut-card-head h3 { font-size: 1.0625rem; font-weight: 700; color: var(--text-primary); margin: 0; letter-spacing: -.01em; }
.tut-card-head .badge { margin-left: auto; }
.tut-ico {
    display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none;
    border-radius: 10px; background: var(--accent-subtle); color: var(--accent); border: 1px solid var(--border);
}
.tut-resumo { margin: 0; color: var(--text-secondary); font-size: .875rem; line-height: 1.55; }
.tut-body { display: flex; flex-direction: column; gap: 12px; color: var(--text-secondary); font-size: .875rem; line-height: 1.6; }
.tut-body p { margin: 0; }
.tut-body h4 { margin: 2px 0 0; font-size: .875rem; font-weight: 700; color: var(--text-primary); }
.tut-body code {
    font-family: var(--font-mono, ui-monospace, "JetBrains Mono", monospace); font-size: .8125rem;
    background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px;
    color: var(--accent-strong);
}
.tut-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; }
.tut-steps li::marker { color: var(--accent); font-weight: 700; }
.tut-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; }
.tut-list li::marker { color: var(--accent); }
.tut-note { border-radius: 10px; padding: 11px 14px; font-size: .8125rem; line-height: 1.55; border: 1px solid var(--border); }
.tut-note-info { background: var(--info-bg); border-color: rgba(53, 200, 255, .22); color: var(--text-secondary); }
.tut-note-ok { background: var(--success-bg); border-color: rgba(0, 224, 122, .22); color: var(--text-secondary); }
.tut-note-warn { background: var(--warning-bg); border-color: rgba(245, 183, 61, .22); color: var(--text-secondary); }
.tut-note strong { color: var(--text-primary); }
.tut-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.tut-mini { display: flex; flex-direction: column; gap: 3px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.tut-mini-label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 700; }
.tut-mini-value { font-size: .8125rem; color: var(--text-primary); }
.tut-card-mini { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.tut-card-mini p { margin: 0; font-size: .8125rem; }
.tut-table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.tut-table th {
    text-align: left; padding: 8px 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-muted); border-bottom: 1px solid var(--border); font-weight: 700;
}
.tut-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.tut-table tbody tr:hover td { background: var(--bg-card-hover); }
.tut-table td.mono { font-family: var(--font-mono, ui-monospace, monospace); color: var(--accent-strong); white-space: nowrap; }
.tut-formula {
    margin: 0; font-family: var(--font-mono, ui-monospace, monospace); font-size: .8125rem;
    background: var(--bg-input); border: 1px solid var(--border); border-left: 3px solid var(--accent);
    border-radius: 8px; padding: 10px 14px; color: var(--accent-strong);
}
.tut-foot { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: .8125rem; padding: 4px 2px 8px; }
.tut-foot strong { color: var(--text-secondary); }
@media (max-width: 640px) {
    .tut-search .form-input { min-width: 0; width: 100%; }
    .tut-search { width: 100%; }
    .tut-card { padding: 16px; }
    .tut-table { display: block; overflow-x: auto; }
}

/* ---------- MODULACAO DE VOZ (voice changer do discador web) ---------- */
.vm-card { margin-top: var(--space-5); }
/* Dentro do discador a modulacao mora na coluna direita do grid, logo abaixo do
   historico: o margin-top de 40px (pensado para ela solta na pagina) virava um
   buraco vertical entre os dois cards. No grid quem separa e o gap. */
.dialer-wrap .vm-card { margin-top: 0; }
.vm-card .card-header { align-items: center; gap: var(--space-3); flex-wrap: wrap; }
/* POLIMENTO (09/11/2026): o thumb tinha box-shadow rgba(99,102,241,.22) — um
   ROXO do Tailwind, fora da paleta verde/ciano do sistema. Trocado por
   var(--accent-glow). O trilho tambem deixou de ser um gradiente fixo
   (que mentia: parecia sempre cheio) e virou trilho neutro com preenchimento
   refletindo o valor real via --vm-pct, setado pelo JS. */
/* SLIDER DE TOM — trilho no ::-webkit-slider-runnable-track.
   POR QUE ASSIM (bug corrigido 09/11/2026): o input tinha height:6px e o trilho
   era o proprio background do elemento. O thumb tem 18px + 3px de glow, entao
   ele VAZAVA 6px para baixo e encostava na escala ("Natural" ficava por baixo do
   marcador verde). Com o trilho num pseudo-elemento, o input pode ter 18px de
   caixa, o thumb fica CONTIDO e a escala respira. O preenchimento continua
   refletindo o valor real via --vm-pct, setado pelo JS. */
.vm-card input[type="range"] {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 18px; margin: 4px 0 7px;
    background: transparent; border: 0; outline: none; cursor: pointer;
}
.vm-card input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: linear-gradient(90deg,
        var(--accent) 0%,
        var(--accent) var(--vm-pct, 0%),
        var(--bg-elevated) var(--vm-pct, 0%),
        var(--bg-elevated) 100%);
}
.vm-card input[type="range"]::-moz-range-track {
    height: 6px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-elevated);
}
.vm-card input[type="range"]::-moz-range-progress {
    height: 6px; border-radius: 999px; background: var(--accent);
}
.vm-card input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 18px; height: 18px; border-radius: 50%;
    margin-top: -7px;
    background: var(--accent); border: 2px solid var(--bg-card); cursor: grab;
    box-shadow: 0 0 0 3px var(--accent-glow); transition: transform var(--transition-fast);
}
.vm-card input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.12); }
.vm-card input[type="range"]::-moz-range-thumb {
    width: 16px; height: 16px; border-radius: 50%; background: var(--accent);
    border: 2px solid var(--bg-card); cursor: grab;
    box-shadow: 0 0 0 3px var(--accent-glow);
}
.vm-card input[type="range"]:focus-visible { box-shadow: 0 0 0 2px var(--accent); }

.vm-level { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
.vm-level-label { font-size: .75rem; color: var(--text-muted); min-width: 74px; letter-spacing: .02em; text-transform: uppercase; }
.vm-level-track {
    flex: 1; height: 8px; border-radius: 999px; overflow: hidden;
    background: var(--bg-input); border: 1px solid var(--border);
}
.vm-level-fill {
    height: 100%; width: 0%; border-radius: 999px; transition: width 90ms linear, background-color var(--transition-normal);
    background: var(--success);
}
.vm-level-fill.vm-level-mid { background: var(--warning); }
.vm-level-fill.vm-level-hot { background: var(--danger); }

/* Knob de tom: rotulo + valor em mono a direita e escala embaixo.
   Antes o valor ficava espremido no meio do label ("Tom da voz 0%") e o texto
   de ajuda virava um paragrafo solto — era o que deixava um vao vertical
   grande antes dos botoes. */
.vm-knob { display: flex; flex-direction: column; gap: 4px; }
.vm-knob-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.vm-knob-head label { font-size: .8125rem; font-weight: 600; color: var(--text-secondary); letter-spacing: .01em; }
.vm-knob-value {
    font-family: var(--font-mono); font-size: .8125rem; font-weight: 600;
    color: var(--accent); font-variant-numeric: tabular-nums;
}
.vm-knob-scale {
    /* Grid de 3 colunas IGUAIS: com flex + space-between o rotulo do meio
       ("Natural") parava no fim do primeiro texto em vez de ficar sob o thumb,
       que em 0% senta exatamente no centro do trilho. */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    font-size: .75rem; color: var(--text-muted); letter-spacing: .01em;
}
.vm-knob-scale > span:nth-child(1) { text-align: left; }
.vm-knob-scale > span:nth-child(2) { text-align: center; }
.vm-knob-scale > span:nth-child(3) { text-align: right; }
/* O thumb tem 18px: recuar o texto em 9px de cada lado faz "Grave/Agudo"
   nascerem sob o CENTRO do thumb nas pontas, e nao sob a borda do trilho. */
.vm-knob-scale { padding: 0 9px; }
.vm-card .form-grid { gap: var(--space-4); }
.vm-card .vm-actions { display: flex; gap: var(--space-2); margin-top: var(--space-4); flex-wrap: wrap; }
/* HIERARQUIA (09/11/2026): antes os dois botoes eram simetricos ("mesmo peso
   visual"), e a revisao apontou que assim NENHUM parece a acao principal. O toggle
   liga/desliga a modulacao — e a acao que importa, entao ele estica. "Ouvir minha
   voz" e um teste opcional: fica ghost, do tamanho do proprio texto. */
.vm-card .vm-actions .btn { flex: 0 1 auto; justify-content: center; }
.vm-card .vm-actions #vmToggle { flex: 1 1 auto; }
.vm-card .vm-actions #vmMonitor { flex: 0 1 auto; }

/* "Ouvir minha voz" e teste opcional, nao acao principal: sem borda e sem fundo
   ele deixa de competir com o CTA e vira link de apoio com icone. */
.vm-card .vm-actions #vmMonitor:not(:disabled) {
    background: transparent;
    border-color: transparent;
    color: var(--text-secondary);
}
.vm-card .vm-actions #vmMonitor:not(:disabled):hover {
    background: var(--bg-hover, var(--bg-elevated));
    border-color: var(--border);
    color: var(--text-primary);
}

@media (max-width: 640px) {
    .vm-card .form-grid { grid-template-columns: 1fr; }
    .vm-level-label { min-width: 0; }
    .vm-knob-scale { font-size: .75rem; }
}

/* ============ TELA DE MANUTENÇÃO ============ */
.maint-page {
    position: relative; min-height: 100vh; min-height: 100dvh;
    display: grid; place-items: center; padding: var(--space-5) var(--space-4);
    background:
        radial-gradient(1100px 520px at 50% -10%, rgba(245, 183, 61, 0.12), transparent 60%),
        radial-gradient(900px 500px at 85% 110%, rgba(0, 224, 122, 0.10), transparent 60%),
        var(--bg-primary);
    overflow: hidden;
}
.maint-glow {
    position: absolute; inset: -20%;
    background: conic-gradient(from 180deg at 50% 50%, rgba(245,183,61,0.08), transparent 35%, rgba(0,224,122,0.07) 70%, transparent);
    filter: blur(60px); pointer-events: none;
    animation: maintSpin 26s linear infinite;
}
@keyframes maintSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .maint-glow { animation: none; } }

.maint-card {
    position: relative; z-index: 1;
    width: min(620px, 100%);
    background: linear-gradient(180deg, rgba(24, 35, 56, 0.92), rgba(15, 23, 36, 0.96));
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.02) inset;
    padding: clamp(24px, 4vw, 44px);
    text-align: center;
    backdrop-filter: blur(14px);
}
.maint-icon {
    width: 78px; height: 78px; margin: 0 auto var(--space-4);
    display: grid; place-items: center;
    color: var(--warning);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 30%, rgba(245,183,61,0.22), rgba(245,183,61,0.06));
    border: 1px solid rgba(245, 183, 61, 0.34);
    box-shadow: 0 0 30px rgba(245, 183, 61, 0.16);
    animation: maintPulse 3.4s ease-in-out infinite;
}
@keyframes maintPulse {
    0%, 100% { transform: translateY(0); box-shadow: 0 0 30px rgba(245,183,61,0.16); }
    50% { transform: translateY(-3px); box-shadow: 0 0 44px rgba(245,183,61,0.26); }
}
@media (prefers-reduced-motion: reduce) { .maint-icon { animation: none; } }

.maint-badge {
    display: inline-block; margin-bottom: var(--space-3);
    padding: 5px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--warning); background: var(--warning-bg);
    border: 1px solid rgba(245, 183, 61, 0.3);
}
.maint-title {
    font-size: clamp(1.25rem, 3.2vw, 1.75rem); line-height: 1.2;
    margin: 0 0 var(--space-3); color: var(--text-primary); font-weight: 700;
}
.maint-text {
    margin: 0 auto var(--space-4); max-width: 46ch;
    color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6;
}
.maint-window {
    display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
    justify-content: center; margin-bottom: var(--space-4);
    padding: var(--space-3); border-radius: var(--radius-md);
    background: rgba(255,255,255,0.03); border: 1px solid var(--border);
    font-size: 0.83rem; color: var(--text-secondary);
}
.maint-window b { color: var(--text-primary); font-weight: 600; }
.maint-eta { margin: var(--space-4) 0; }
.maint-eta-label {
    display: block; font-size: 12px; letter-spacing: .09em; text-transform: uppercase;
    color: var(--text-muted); margin-bottom: 6px;
}
.maint-eta-time {
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
    font-size: clamp(1.6rem, 6vw, 2.4rem); font-weight: 700;
    color: var(--accent-strong); letter-spacing: .04em;
    text-shadow: 0 0 24px var(--accent-glow);
}
.maint-note {
    margin: var(--space-4) 0; padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md); font-size: 0.85rem; line-height: 1.55;
    color: var(--text-secondary); background: var(--accent-subtle);
    border: 1px solid rgba(0, 224, 122, 0.18);
}
.maint-note b { color: var(--text-primary); }
.maint-actions {
    display: flex; flex-wrap: wrap; gap: var(--space-3);
    justify-content: center; align-items: center; margin-top: var(--space-4);
}
.maint-actions .btn { min-height: 42px; }
.maint-public-note {
    margin: var(--space-4) 0 0; font-size: 0.75rem; color: var(--text-muted); line-height: 1.5;
}
.maint-banner {
    display: flex; flex-direction: column; gap: 2px;
    margin-bottom: var(--space-4); padding: 10px 14px;
    border-radius: var(--radius-md); font-size: 0.82rem; line-height: 1.45;
    color: var(--text-secondary); background: var(--warning-bg);
    border: 1px solid rgba(245, 183, 61, 0.32);
}
.maint-banner strong { color: var(--warning); font-size: 0.78rem; letter-spacing: .06em; text-transform: uppercase; }

/* Painel admin: manutenção */
.maint-form-card { max-width: 900px; }
.maint-switch-row {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    padding: var(--space-4); border-radius: var(--radius-lg);
    background: linear-gradient(120deg, rgba(245,183,61,0.09), rgba(15,23,36,0.4));
    border: 1px solid rgba(245, 183, 61, 0.22); margin-bottom: var(--space-5);
}
.maint-switch-row h3 { margin: 0 0 4px; font-size: 1rem; color: var(--text-primary); }
.maint-switch-row p { margin: 0; font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5; }
.maint-state-pill {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    padding: 7px 14px; border-radius: 999px; font-size: 0.78rem; font-weight: 700;
}
.maint-state-pill.on { color: var(--danger); background: var(--danger-bg); border: 1px solid rgba(255,77,94,0.32); }
.maint-state-pill.off { color: var(--success); background: var(--success-bg); border: 1px solid rgba(0,224,122,0.3); }
.maint-state-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.maint-preview-note { font-size: 0.78rem; color: var(--text-muted); margin-top: var(--space-2); }

/* Saúde do servidor */
.health-grid {
    display: grid; gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    margin-bottom: var(--space-5);
}
.health-tile {
    padding: var(--space-4); border-radius: var(--radius-lg);
    background: var(--bg-card); border: 1px solid var(--border);
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.health-tile:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.health-tile .ht-label {
    font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-muted); margin-bottom: 8px;
}
.health-tile .ht-value {
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
    font-size: 1.5rem; font-weight: 700; color: var(--text-primary); line-height: 1.15;
}
.health-tile .ht-sub { font-size: 0.78rem; color: var(--text-secondary); margin-top: 6px; }
.health-tile.ok .ht-value { color: var(--success); }
.health-tile.warn .ht-value { color: var(--warning); }
.health-tile.bad .ht-value { color: var(--danger); }

.health-meter {
    height: 7px; border-radius: 999px; background: var(--bg-input);
    overflow: hidden; margin-top: 10px; border: 1px solid var(--border);
}
.health-meter > span {
    display: block; height: 100%; border-radius: 999px;
    background: var(--accent); transition: width .35s ease-out, background-color .3s;
}
.health-meter.warn > span { background: var(--warning); }
.health-meter.bad > span { background: var(--danger); }

.health-list { display: flex; flex-direction: column; gap: 8px; }
.health-item {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: 11px 14px; border-radius: var(--radius-md);
    background: var(--bg-secondary); border: 1px solid var(--border);
    font-size: 0.86rem;
}
.health-item .hi-name { color: var(--text-primary); font-weight: 600; }
.health-item .hi-desc { color: var(--text-muted); font-size: 0.76rem; margin-top: 2px; }
.health-item .hi-val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-secondary); white-space: nowrap; }
.health-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 8px; }
.health-dot.ok { background: var(--success); box-shadow: 0 0 8px rgba(0,224,122,0.6); }
.health-dot.warn { background: var(--warning); box-shadow: 0 0 8px rgba(245,183,61,0.6); }
.health-dot.bad { background: var(--danger); box-shadow: 0 0 8px rgba(255,77,94,0.6); }

@media (max-width: 640px) {
    .maint-switch-row { flex-direction: column; align-items: flex-start; }
    .maint-actions .btn { width: 100%; }
}

/* ============ UTILITÁRIOS DE FORMULÁRIO (checkbox em linha, barra de ações) ============ */
.actions-row,
.card-actions-row {
    display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
}
.actions-row.end { justify-content: flex-end; }
.actions-row .btn, .card-actions-row .btn { min-height: 44px; }

.checkbox-row {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 14px; margin-top: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--bg-input); border: 1px solid var(--border);
    font-size: 0.87rem; color: var(--text-secondary); line-height: 1.45;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.checkbox-row:hover { border-color: var(--border-hover); background: rgba(255,255,255,0.03); }
.checkbox-row input[type="checkbox"] {
    margin: 2px 0 0; width: 16px; height: 16px; flex: 0 0 auto;
    accent-color: var(--accent); cursor: pointer;
}
.checkbox-row input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
}
.checkbox-row input[type="checkbox"]:checked + span { color: var(--text-primary); }

/* Card de formulário: ritmo vertical uniforme entre blocos de campo */
.maint-form-card { display: flex; flex-direction: column; gap: var(--space-4); }
.maint-form-card .card-header { margin-bottom: 0; }
.maint-form-card .form-group { margin: 0; }
.maint-form-card .checkbox-row { margin-top: 0; }
.maint-form-card .actions-row { margin-top: 0; }
.maint-form-card .maint-preview-note { margin-top: 0; }
.maint-form-card .maint-switch-row { margin-bottom: 0; }

.rm-field-help,
.field-help {
    margin: 6px 0 0; font-size: 0.76rem; line-height: 1.45; color: var(--text-muted);
}

/* Feedback de campo invalido (usado pela mascara/validacao de telefone em app.js).
   Sem estas regras a classe era aplicada e nao pintava nada. */
.campo-erro,
input.campo-erro,
textarea.campo-erro,
select.campo-erro {
    border-color: var(--danger, #ff4d5e) !important;
    box-shadow: 0 0 0 3px var(--danger-bg, rgba(255, 77, 94, 0.18)) !important;
    outline: none;
}
.campo-erro-texto,
.field-help.campo-erro-texto {
    color: var(--danger, #ff4d5e) !important;
}

@media (max-width: 640px) {
    .actions-row, .card-actions-row { width: 100%; }
    .actions-row .btn, .card-actions-row .btn { flex: 1 1 auto; }
}

/* ============================================================
   PAINEL DE CHAMADA AO VIVO (discador do cliente)
   O dono apontou que a tela de ligar não dizia nada: sem "tocando",
   sem relógio e sem botão de desligar. Estas classes desenham o
   estado real da chamada (chamando -> tocando -> em conversa -> fim).
   ============================================================ */
.call-live {
    padding: var(--space-4);
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
    border-radius: var(--radius-lg, 14px);
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.008));
    display: flex; flex-direction: column; gap: var(--space-3);
    animation: callLiveIn 180ms ease-out;
}
@keyframes callLiveIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.call-live-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.call-live-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.call-live-number { font-size: 1.4rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.call-live-clock { font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.call-live-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.call-live-actions .btn { flex: 1 1 auto; min-width: 120px; }
.call-live-actions .btn-icon { flex: 0 0 auto; min-width: 44px; }

.call-live-state {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; border-radius: var(--radius-md, 10px);
    font-size: 0.9rem; border: 1px solid transparent;
}
.call-live-dot {
    width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
    background: currentColor; box-shadow: 0 0 0 0 currentColor;
    animation: callLivePulse 1.4s ease-out infinite;
}
@keyframes callLivePulse {
    0% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
    70% { box-shadow: 0 0 0 7px transparent; opacity: 0.75; }
    100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
}
.call-live-info { color: var(--info, #60a5fa); background: rgba(96,165,250,0.10); border-color: rgba(96,165,250,0.28); }
.call-live-warning { color: var(--warning, #fbbf24); background: rgba(251,191,36,0.10); border-color: rgba(251,191,36,0.28); }
.call-live-success { color: var(--success, #34d399); background: rgba(52,211,153,0.10); border-color: rgba(52,211,153,0.28); }
.call-live-danger { color: var(--danger, #f87171); background: rgba(248,113,113,0.10); border-color: rgba(248,113,113,0.28); }
.call-live-fim .call-live-number { font-size: 1.15rem; }
.call-live-fim.call-live-success { border-color: rgba(52,211,153,0.35); }
.call-live-fim.call-live-danger { border-color: rgba(248,113,113,0.35); }

@media (prefers-reduced-motion: reduce) {
    .call-live, .call-live-dot { animation: none; }
}

/* =====================================================================
   DISCADOR WEB — barra de audio, painel de chamada e medidor de voz
   (estas classes eram usadas pelo JS mas NAO existiam no CSS: era a
    causa dos botoes "flutuando"/desalinhados na tela do cliente)
   ===================================================================== */
.webaudio-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    font-size: 0.9rem;
    line-height: 1.4;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.webaudio-bar > span:nth-child(2),
.webaudio-bar #webcallBarText { flex: 1 1 auto; min-width: 0; }
.webaudio-bar .btn { flex: 0 0 auto; }
.webaudio-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--text-muted); flex: 0 0 auto;
}
.webaudio-dot-ok { background: var(--success); box-shadow: 0 0 0 4px rgba(0, 224, 122, 0.14); animation: webaudioPulse 2.4s ease-out infinite; }
.webaudio-dot-info { background: var(--info); box-shadow: 0 0 0 4px var(--info-bg); }
.webaudio-dot-warning { background: var(--warning); box-shadow: 0 0 0 4px var(--warning-bg); }
.webaudio-dot-danger { background: var(--danger); box-shadow: 0 0 0 4px var(--danger-bg); }
.webaudio-bar.webaudio-ok { border-color: rgba(0, 224, 122, 0.35); background: var(--accent-subtle); }
.webaudio-bar.webaudio-danger { border-color: rgba(255, 77, 94, 0.35); background: var(--danger-bg); }
.webaudio-bar.webaudio-warning { border-color: rgba(245, 183, 61, 0.35); background: var(--warning-bg); }
.webaudio-bar.webaudio-info { border-color: rgba(53, 200, 255, 0.3); background: var(--info-bg); }
@keyframes webaudioPulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 224, 122, 0.4); }
    70% { box-shadow: 0 0 0 8px rgba(0, 224, 122, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 224, 122, 0); }
}

.webcall-panel {
    margin-top: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-lg);
    background: linear-gradient(160deg, var(--bg-elevated), var(--bg-card));
    box-shadow: var(--shadow-md);
}
.webcall-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.webcall-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--text-muted);
    font-weight: 600;
}
.webcall-number {
    font-family: var(--font-mono);
    font-size: clamp(1.05rem, 2.2vw, 1.4rem);
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 2px;
    word-break: break-all;
}
.webcall-clock {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--accent);
    line-height: 1.1;
}
.webcall-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}
.webcall-actions .btn { flex: 1 1 128px; justify-content: center; }
.webcall-actions .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* --- Linha de estado: badge + hint (o dono exigiu "botões de status") --- */
.webcall-statusline {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-2);
}
.webcall-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid transparent;
    white-space: nowrap;
}
.webcall-badge::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
}
.webcall-badge-muted { color: var(--text-muted); background: var(--bg-input); border-color: var(--border); }
.webcall-badge-warn  { color: var(--warning); background: color-mix(in srgb, var(--warning) 12%, transparent); border-color: color-mix(in srgb, var(--warning) 38%, transparent); }
.webcall-badge-ok    { color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); border-color: color-mix(in srgb, var(--success) 38%, transparent); }
.webcall-badge-danger{ color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); border-color: color-mix(in srgb, var(--danger) 38%, transparent); }
.webcall-badge-warn::before { animation: webcallPulse 1.4s ease-in-out infinite; }
@keyframes webcallPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

/* --- Teclado DTMF (menu de URA / senha / cartão) --- */
.webcall-dtmf {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}
.webcall-dtmf-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: var(--space-3);
}
.webcall-dtmf-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
    max-width: 320px;
}
.webcall-dtmf-key {
    min-height: 46px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 140ms ease-out, border-color 140ms ease-out, transform 120ms ease-out;
}
.webcall-dtmf-key:hover { background: var(--bg-elevated); border-color: var(--border-accent); }
.webcall-dtmf-key:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.webcall-dtmf-key:active { transform: scale(0.97); }

/* --- Transferência --- */
.webcall-transfer {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}
.webcall-transfer-row {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
    flex-wrap: wrap;
}
.webcall-transfer-row .input { flex: 1 1 180px; min-width: 0; }
.webcall-level {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
}
.webcall-level-bar {
    position: relative;
    flex: 1 1 auto;
    height: 8px;
    border-radius: 999px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    overflow: hidden;
}
.webcall-level-bar > div {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--info));
    transition: width 140ms ease-out;
}
@media (max-width: 640px) {
    .webcall-panel { padding: var(--space-4); }
    .webcall-actions .btn { flex: 1 1 100%; }
    .webaudio-bar { flex-wrap: wrap; }
    .webaudio-bar .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .webaudio-dot-ok { animation: none; }
    .webcall-level-bar > div { transition: none; }
}
/* ==========================================================================
   ROTAS DE DISCAGEM — painel do usuario final
   Pedido do dono: a rota ATIVA tem de estar visivel o tempo todo e o seletor
   tem de ser bonito e polido ponta a ponta. Usa SO os tokens do design system.
   ========================================================================== */

/* --- chip "Rota ativa" logo abaixo do seletor do discador --- */
.rota-ativa-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-accent);
    background: var(--accent-subtle);
    color: var(--text-primary);
    font-size: 0.8125rem;
    line-height: 1.2;
    max-width: 100%;
}
.rota-ativa-chip .rota-ativa-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rota-ativa-chip strong { color: var(--accent-strong); font-weight: 600; }
.rota-ativa-chip-auto { border-color: var(--border); background: var(--bg-elevated); }
.rota-ativa-chip-auto strong { color: var(--text-secondary); }
.rota-ativa-dot {
    width: 8px; height: 8px; flex: 0 0 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
    animation: rotaPulso 2.4s ease-in-out infinite;
}
.rota-ativa-chip-auto .rota-ativa-dot { background: var(--text-muted); box-shadow: none; animation: none; }
/* Chip grande do discador: mostra a rota ativa com nome real + tronco e o atalho
   para trocar. Pedido do dono (08/11/2026) — antes o usuario via so "automatica". */
.rota-ativa-chip-lg {
    display: flex;
    width: 100%;
    border-radius: var(--radius-md);
    padding: 10px 12px;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.rota-ativa-chip-lg .rota-ativa-txt { flex: 1 1 auto; min-width: 0; white-space: normal; }
.rota-ativa-chip-lg .rota-ativa-tronco {
    font-size: 0.6875rem;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 1px 8px;
    white-space: nowrap;
}
.rota-ativa-chip-lg .btn { flex: 0 0 auto; }
.rota-ativa-auto-tag { color: var(--text-muted); font-size: 0.75rem; font-weight: 400; }
@keyframes rotaPulso {
    0%, 100% { box-shadow: 0 0 0 3px var(--accent-glow); }
    50%      { box-shadow: 0 0 0 6px rgba(0, 224, 122, 0.04); }
}

/* --- grade de cartoes de rota --- */
.rotas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
    padding: var(--space-4);
    align-items: stretch;
}
.rota-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    height: 100%;
    transition: border-color 160ms ease-out, background 160ms ease-out, transform 160ms ease-out, box-shadow 160ms ease-out;
}
.rota-card:hover {
    border-color: var(--border-hover);
    background: var(--bg-card-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}
.rota-card-ativa {
    border-color: var(--border-accent);
    background: linear-gradient(180deg, var(--accent-subtle), var(--bg-card) 60%);
    box-shadow: 0 0 0 1px var(--accent-glow), 0 6px 22px rgba(0, 224, 122, 0.08);
}
.rota-card-top {
    display: block;
}
.rota-card-titulo {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.35;
    display: block;
    width: 100%;
    max-height: calc(1.35em * 2);
    overflow: hidden;
}
.rota-badge-tipo { flex: 0 0 auto; white-space: nowrap; }
.rota-badge-ativa {
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    align-self: flex-start;
    white-space: nowrap;
}
.rota-card-desc {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.55;
    display: block;
    max-height: calc(1.55em * 3);
    overflow: hidden;
    min-height: calc(1.55em * 3);
}
.rota-card-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
    margin-top: 0;
}
.rota-meta-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rota-meta-full { grid-column: 1 / -1; }
.rota-meta-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.rota-meta-valor {
    font-size: 0.875rem;
    color: var(--text-primary);
    font-weight: 500;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
/* O botao e a meta ficam colados no rodape do cartao: assim TODOS os
   "Usar esta rota" caem na mesma linha, mesmo quando o cartao tem mais texto. */
.rota-card-acao { margin-top: auto; padding-top: var(--space-1); }
.rota-card-acao .btn { width: 100%; min-height: 40px; }
.rota-card-acao .btn:disabled { opacity: 0.55; cursor: default; }

@media (max-width: 640px) {
    .rotas-grid { grid-template-columns: 1fr; padding: var(--space-3); gap: var(--space-3); }
    .rota-card { padding: var(--space-3); }
    .rota-card-acao .btn { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .rota-card, .rota-ativa-dot { transition: none; animation: none; }
}


/* ============================================================
   CAMPOS DE FORMULARIO — POLIMENTO (login / cadastro / todo o app)
   Erro por campo em vermelho, botao mostrar/ocultar senha,
   medidor de forca e estados de foco acessiveis.
   ============================================================ */
.form-group { position: relative; }

/* Erro ao lado do campo (nao em alert) */
.field-error {
    display: block;
    min-height: 0;
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--danger-text, #ff8a95);
    font-weight: 500;
}
.field-error:empty { display: none; }

.form-input.is-invalid,
.form-input.is-invalid:focus {
    border-color: var(--danger, #ff4d5e);
    box-shadow: 0 0 0 3px var(--danger-bg, rgba(255,77,94,0.12));
    background: rgba(255, 77, 94, 0.04);
}
.form-input.is-invalid + .input-affix-btn { color: var(--danger-text, #ff8a95); }

/* Botao mostrar/ocultar senha dentro do input */
.input-affix { position: relative; display: block; }
.input-affix .form-input { padding-right: 52px; padding-left: 14px; width: 100%; }

/* Campo de PIN: ocupa a largura toda como os demais campos (antes ficava com
   160px e parecia quebrado ao lado dos outros) e usa fonte mono com espacamento
   entre digitos — o padrao visual de PIN que o usuario reconhece na hora. */
.input-pin {
    width: 100%;
    font-family: var(--font-mono, ui-monospace, monospace);
    letter-spacing: 0.5em;
    text-align: center;
    /* font-size igual ao dos demais campos para a ALTURA bater exatamente
       (com 1.05rem o campo ficava mais alto e desalinhava a coluna). */
    font-size: 0.9375rem;
    line-height: 1.4;
    /* Altura travada: o letter-spacing e o padding do .form-input somavam
       e o PIN terminava 2px mais alto que Email/Senha. */
    height: 46px;
    box-sizing: border-box;
}
.input-pin::placeholder { letter-spacing: 0.5em; }
.input-affix-btn {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    /* 40x40 e o alvo de toque minimo confortavel: com 34px o dedo errava o
       botao de mostrar/ocultar senha no celular. */
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-sm, 6px);
    background: transparent;
    color: var(--text-muted, #8ba0b8);
    cursor: pointer;
    transition: color 140ms ease-out, background 140ms ease-out;
}
.input-affix-btn:hover { color: var(--text-primary, #eef6f1); background: rgba(255,255,255,0.06); }
.input-affix-btn:focus-visible { outline: 2px solid var(--accent, #00e07a); outline-offset: 1px; }
.input-affix-btn.is-on { color: var(--accent, #00e07a); }

/* Medidor de forca da senha */
.pass-meter {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-top: 8px;
    height: 4px;
}
.pass-meter span {
    background: rgba(255,255,255,0.08);
    border-radius: 999px;
    transition: background 160ms ease-out;
}
.pass-meter[data-forca="1"] span:nth-child(-n+1) { background: var(--danger, #ff4d5e); }
.pass-meter[data-forca="2"] span:nth-child(-n+2) { background: var(--warning, #f5b73d); }
.pass-meter[data-forca="3"] span:nth-child(-n+3) { background: var(--info, #35c8ff); }
.pass-meter[data-forca="4"] span { background: var(--accent, #00e07a); }

/* Botao grande do login com estado de envio legivel */
#loginBtn, #signupBtn {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: transform 120ms ease-out, box-shadow 160ms ease-out, background 160ms ease-out;
}
#loginBtn:active:not(:disabled), #signupBtn:active:not(:disabled) { transform: translateY(1px); }
#loginBtn:disabled, #signupBtn:disabled { opacity: 0.65; cursor: not-allowed; }

/* Toque confortavel no celular */
@media (max-width: 640px) {
    .input-affix-btn { width: 40px; height: 40px; }
    #loginBtn, #signupBtn { min-height: 50px; font-size: 15.5px; }
    .login-form .form-input { min-height: 46px; font-size: 16px; } /* 16px evita zoom no iOS */
}
@media (prefers-reduced-motion: reduce) {
    .input-affix-btn, .pass-meter span, #loginBtn, #signupBtn { transition: none; }
}

/* ============================================================
   CONTROLES DO TELEFONE EM TEMPO REAL (discador web)
   Botoes de mudo, teclado DTMF e transferencia durante a chamada.
   Cada botao age no canal real do FreeSWITCH. Design system do projeto.
   ============================================================ */
.dial-controls {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding: var(--space-2);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    flex-wrap: wrap;
}
.dial-ctrl {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 8px 14px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 160ms ease-out, border-color 160ms ease-out,
                color 160ms ease-out, transform 120ms ease-out;
}
.dial-ctrl:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-hover);
    color: var(--text-primary);
}
.dial-ctrl:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.dial-ctrl:active { transform: translateY(1px); }
.dial-ctrl.is-active {
    background: var(--danger-bg);
    border-color: var(--danger);
    color: var(--danger-text-strong);
}
.dial-ctrl.is-active svg { stroke: var(--danger); }

/* Teclado DTMF */
.dial-dtmf-pad {
    margin-top: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.dial-dtmf-display {
    font-family: var(--font-mono);
    font-size: 18px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 2px;
    color: var(--accent);
    text-align: center;
    padding: var(--space-2);
    margin-bottom: var(--space-2);
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    min-height: 36px;
    word-break: break-all;
}
.dial-dtmf-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    max-width: 260px;
    margin: 0 auto;
}
.dial-dtmf-key {
    min-height: 44px;
    font-family: var(--font-mono);
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 140ms ease-out, border-color 140ms ease-out, transform 100ms ease-out;
}
.dial-dtmf-key:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-accent);
}
.dial-dtmf-key:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dial-dtmf-key:active {
    transform: translateY(1px);
    background: var(--accent-subtle);
}

/* Painel de transferencia */
.dial-transfer-box {
    margin-top: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.dial-transfer-box .dialer-row { align-items: stretch; }

@media (max-width: 640px) {
    .dial-controls { gap: 6px; }
    .dial-ctrl { flex: 1 1 auto; justify-content: center; min-height: 44px; }
    .dial-ctrl span { font-size: 12px; }
    .dial-transfer-box .dialer-row { flex-direction: column; }
    .dial-transfer-box .dialer-row .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .dial-ctrl, .dial-dtmf-key { transition: none; }
}

/* =====================================================================
   RODADA 2 DO POLIMENTO DO DISCADOR WEB (09/11/2026)
   Tudo abaixo foi escrito olhando o print em 1600px e em 375px. Os tres
   problemas reais que sobraram na primeira rodada estavam TODOS medidos:
   (a) a linha do historico quebrava o numero em duas linhas e cortava o
       pill da bina; (b) o teclado do dialpad era "chapado", sem profundidade
       e com alvo de toque baixo; (c) a barra de status em estado de erro
       pintava o topo de vermelho e parecia falha do sistema.
   ===================================================================== */

/* ---------- 1) LINHA DO HISTORICO EM TELA ESTREITA ----------
   MEDIDO (375px, getBoundingClientRect): .list-main ficava com ~148px porque o
   bloco .list-side (badge de status + botao rediscar) ocupava o resto da linha.
   Como .list-main > * aplica overflow:hidden + text-overflow:ellipsis, o numero
   "+55 11 95636-2237" quebrava em DUAS linhas ("95636-" / "2237") e o pill
   "bina +55 11 98765-4321" aparecia como "bina +55 11 98765-4…" — o cliente nao
   conseguia ler nem o destino nem a bina, que sao as duas informacoes da linha.
   SOLUCAO: a linha vira grid de 3 faixas e .list-main passa a display:contents.
   O numero ocupa a LARGURA INTEIRA (faixa 1), a faixa de metadados
   (data • duracao + bina) ocupa a faixa 2 inteira e as acoes (badge + rediscar)
   fecham a faixa 3 alinhadas a esquerda. Medido: o numero em mono 14px pede
   160px e so recebia 143px — por isso cortava; e o pill da bina pedia 145px
   na mesma coluna. Com as tres faixas nada e cortado.
   Zero corte, zero numero quebrado. So vale ate 640px: no desktop a linha
   original (numero+metadados a esquerda, acoes a direita) ja esta correta. */
@media (max-width: 640px) {
    /* RODADA 2 (print 375px): com "side" na propria faixa (3 linhas) cada item
       gastava 44px a mais e sobrava um bloco de acoes solto abaixo dos dados.
       O bloco de acoes tem 111px medidos; 327px de linha - 111px deixam 208px
       para o numero, que pede 166px. Logo cabe "num | side" na mesma faixa e
       "meta | side" embaixo — uma linha por item, zero corte. */
    .dialer-history-card .list-row {
        display: grid;
        /* Coluna de acoes FIXA em 118px: medido, o badge + o botao de rediscar
           pedem 111px, mas como cada .list-row e um grid proprio a coluna auto
           variava por linha ("Cancelada" e mais largo que "Falhou") e a linha de
           status mais largo apertava o numero para 143px e o cortava. Fixando a
           coluna, todas as linhas alinham e o numero recebe 167px. */
        grid-template-columns: minmax(0, 1fr) 114px;
        grid-template-areas:
            "num  side"
            "meta side";
        justify-items: start;
        align-items: center;
        column-gap: var(--space-2);
        row-gap: 4px;
        padding: var(--space-3) var(--space-1);
    }

    .dialer-history-card .list-main { display: contents; }

    .dialer-history-card .dialer-hist-num {
        grid-area: num;
        white-space: nowrap;
        font-size: 0.875rem;
        letter-spacing: 0;
    }

    .dialer-history-card .dialer-hist-meta {
        grid-area: meta;
        gap: 2px 8px;
        min-width: 0;
    }

    .dialer-history-card .list-side {
        grid-area: side;
        gap: 6px;
        align-self: center;
        justify-self: end;
        min-width: 0;
        max-width: 114px;
    }

    /* Badge dentro da coluna fixa: se o rotulo for longo ("Cancelada") ele
       encolhe com reticencias em vez de empurrar o numero. */
    .dialer-history-card .list-side .badge {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* A bina nunca pode estourar a coluna: encolhe a fonte e corta com
       reticencias DENTRO do pill (com title para o valor completo no hover). */
    .dialer-history-card .dialer-hist-bina {
        max-width: 100%;
        font-size: 0.625rem;
        padding: 1px 7px;
    }

    .dialer-history-card .dialer-hist-bina > span,
    .dialer-history-card .dialer-hist-bina b {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ---------- 2) TECLADO DO DISCADOR: PROFUNDIDADE E ALVO DE TOQUE ----------
   Antes as teclas eram um retangulo de fundo chapado (var(--bg-elevated) e nada
   mais): visual "cru", sem sinal de que sao botoes. Agora tem gradiente sutil de
   superficie, brilho interno de 1px no topo (luz vindo de cima) e sombra curta
   embaixo — o mesmo tratamento dos cards, na escala de um botao. Altura minima de
   52px garante alvo de toque confortavel no celular (referencia: 44px). */
.dialpad-key {
    min-height: 52px;
    padding: 15px 0;
    background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-secondary) 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.045) inset, 0 2px 4px -2px rgba(0, 0, 0, 0.65);
    transition: background var(--transition-fast), border-color var(--transition-fast),
                transform var(--transition-fast), box-shadow var(--transition-fast);
}

.dialpad-key:hover {
    background: linear-gradient(180deg, var(--bg-card-hover) 0%, var(--bg-elevated) 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 3px 8px -3px rgba(0, 0, 0, 0.7);
}

.dialpad-key:active {
    transform: scale(0.97);
    box-shadow: none;
    background: var(--bg-card-hover);
}

/* ---------- 3) "LIMPAR" AO LADO DE "LIGAR": ACAO SECUNDARIA DE VERDADE ----------
   Os dois botoes tinham o mesmo peso visual (fundo escuro + borda), entao nenhum
   parecia a acao principal. O "Ligar" e o CTA; "Limpar" so precisa estar ali.
   RODADA 2: o primeiro ajuste deixou o "Limpar" SEM fundo e SEM borda, e no print
   de 375px ele quase sumiu (o revisor pediu mais contraste). Agora ele e um ghost
   COM contorno: superficie transparente + borda + texto secundario. O "Ligar"
   continua sendo o unico botao preenchido, entao a hierarquia se mantem. */
.dialer-actions .btn-secondary {
    background: transparent;
    border-color: var(--border);
    color: var(--text-secondary);
}

.dialer-actions .btn-secondary:hover {
    background: var(--bg-elevated);
    border-color: var(--border);
    color: var(--text-primary);
}

.dialer-actions .btn-secondary:active {
    background: var(--bg-card-hover);
}

/* ---------- 4) BARRA DE STATUS: ERRO SEM "ALARME VERMELHO" ----------
   O estado de erro pintava a faixa inteira com var(--danger-bg): sobre o fundo
   escuro do painel aquilo virava um bloco vermelho chapado no topo da pagina,
   que o revisor descreveu como "parece erro de sistema, nao aviso de UX".
   Agora o fundo volta a ser a superficie neutra e so uma BARRA de 3px a esquerda
   carrega a cor do estado — mesma linguagem dos cards de aviso do resto do app.
   O texto continua legivel e o ponto de estado segue colorido. */
.dialer-statusbar.webaudio-ok,
.dialer-statusbar.webaudio-info,
.dialer-statusbar.webaudio-warning,
.dialer-statusbar.webaudio-danger {
    background: var(--bg-secondary);
    border-color: var(--border);
    border-left-width: 3px;
    padding-left: calc(var(--space-4) - 2px);
}

.dialer-statusbar.webaudio-ok { border-left-color: var(--success); }
.dialer-statusbar.webaudio-info { border-left-color: var(--info); }
.dialer-statusbar.webaudio-warning { border-left-color: var(--warning); }
.dialer-statusbar.webaudio-danger { border-left-color: var(--danger); }

/* O botao da barra ("Ativar microfone" / "Tentar de novo") tinha padding
   horizontal grande demais e ficava maior que a propria mensagem. */
.dialer-statusbar .btn {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
    white-space: nowrap;
}

/* A pill de tarifa (R$ 0,10/min) estava em 10px, ilegivel no celular. */
.dialer-statusbar-tag {
    font-size: 0.75rem;
    min-height: 20px;
    display: inline-flex;
    align-items: center;
}

@media (max-width: 640px) {
    /* Em tela estreita a barra empilha: texto em cima, botoes/tags embaixo. */
    .dialer-statusbar {
        flex-wrap: wrap;
        row-gap: var(--space-2);
        align-items: flex-start;
    }

    .dialer-statusbar .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================================
   UPLOAD DE AUDIO DA URA (dropzone) — 09/11/2026
   O <input type=file> cru do navegador era o "botao feio" relatado pelo dono.
   Aqui ele vira uma area de arrastar-e-soltar com icone, nome do arquivo,
   barra de progresso e estados (vazio / enviando / pronto / erro).
   ============================================================================ */
/* Componente de upload de audio da URA.
   Estrutura: icone + texto/botoes + barra de progresso + pill de estado.
   O input real fica escondido (nao cobre o bloco) e o botao "Escolher arquivo"
   e o gatilho acessivel — assim "Remover gravacao" e o progresso continuam clicaveis.
   TOKENS: o design system usa --accent (nao existe --primary) e --bg-elevated /
   --bg-input (nao existem --surface-2/--surface-3). Usar token inexistente faz o
   navegador DESCARTAR a declaracao — era o que deixava o bloco sem cor, sem anel
   de foco e com o estado de arrastar invisivel. */
.audio-up {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px 18px 16px;
    text-align: center;
    border: 1px dashed var(--border, rgba(255, 255, 255, .12));
    border-radius: 14px;
    background:
        radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--accent) 7%, transparent) 0%, transparent 62%),
        var(--bg-elevated, rgba(255, 255, 255, .022));
    transition: border-color 160ms ease-out, background 160ms ease-out, box-shadow 160ms ease-out;
}

.audio-up:hover {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border, rgba(255, 255, 255, .12)));
    box-shadow: 0 6px 22px -14px color-mix(in srgb, var(--accent) 70%, transparent);
}

.audio-up:focus-within {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.audio-up.is-drag {
    border-color: var(--accent);
    border-style: dashed;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.audio-up.is-busy {
    opacity: .85;
}

.audio-up.is-ok {
    border-color: color-mix(in srgb, var(--success) 55%, transparent);
    background: color-mix(in srgb, var(--success) 6%, transparent);
}

.audio-up.is-error {
    border-color: color-mix(in srgb, var(--danger) 55%, transparent);
    background: color-mix(in srgb, var(--danger) 6%, transparent);
}

/* Input real: invisivel e FORA do fluxo de clique (nao cobre o componente). */
.audio-up-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.audio-up-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--accent) 22%, transparent),
        color-mix(in srgb, var(--accent) 8%, transparent));
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    color: var(--accent);
    flex: 0 0 auto;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

.audio-up-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    max-width: 46ch;
}

.audio-up-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 650;
    color: var(--text-primary, var(--text));
    letter-spacing: -.01em;
    line-height: 1.3;
}

.audio-up-hint {
    margin: 0;
    font-size: .82rem;
    line-height: 1.45;
    color: var(--text-secondary, var(--text-muted));
}

.audio-up-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
}

/* Divisor sutil antes do pill de estado: separa "acao" de "resultado". */
.audio-up-or {
    font-size: .8rem;
    color: var(--text-secondary, var(--text-muted));
    opacity: .85;
}

.audio-up-progress {
    width: 100%;
    max-width: 320px;
    height: 6px;
    border-radius: 999px;
    background: var(--bg-input, rgba(255, 255, 255, .08));
    overflow: hidden;
}

.audio-up-progress > span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--accent) 70%, transparent),
        var(--accent));
    transition: width 200ms ease-out;
}

.audio-up-status { display: flex; justify-content: center; width: 100%; margin-top: 2px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--border, rgba(255,255,255,.08)) 70%, transparent); }

.audio-up-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 6px 13px;
    border-radius: 999px;
    background: var(--bg-input, rgba(255, 255, 255, .06));
    border: 1px solid var(--border, rgba(255, 255, 255, .08));
    font-size: .78rem;
    line-height: 1.35;
    color: var(--text-secondary, var(--text-muted));
    /* Nome de arquivo e mensagem de erro sao longos: quebrar linha em vez de
       cortar com "..." (em 375px o resultado ficava escondido). */
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
}

.audio-up-pill.is-ok {
    background: color-mix(in srgb, var(--success) 14%, transparent);
    border-color: color-mix(in srgb, var(--success) 35%, transparent);
    color: var(--success);
}

.audio-up-pill.is-error {
    background: color-mix(in srgb, var(--danger) 14%, transparent);
    border-color: color-mix(in srgb, var(--danger) 35%, transparent);
    color: var(--danger);
}

.audio-up-footer {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    padding-top: 12px;
    border-top: 1px solid var(--border, rgba(255, 255, 255, .08));
}

@media (prefers-reduced-motion: reduce) {
    .audio-up,
    .audio-up-progress > span {
        transition: none;
    }
}

@media (max-width: 640px) {
    .audio-up {
        padding: var(--space-4) var(--space-3);
    }
    .audio-up-actions,
    .audio-up-footer {
        flex-direction: column;
        width: 100%;
    }
    .audio-up-actions .btn,
    .audio-up-footer .btn {
        width: 100%;
        justify-content: center;
    }
}


/* ==========================================================================
   EDITOR DE URA — grade de opcoes e cabecalho do menu DTMF (10/11/2026)
   Antes: os 4 campos usavam auto-fit/minmax(180px) dentro de .form-grid e o
   ultimo (fallback) caia numa linha sozinho, desalinhado com os demais.
   Agora: grade fixa de 2 colunas (1 no mobile), cada campo com legenda propria
   e o cabecalho do menu DTMF com o botao alinhado a direita sem quebrar.
   ========================================================================== */
.ura-opts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4, 16px);
    margin-top: var(--space-2, 8px);
}

.ura-opts .form-group {
    margin-bottom: 0;
    min-width: 0;
}

.ura-opts .form-hint {
    margin-top: 6px;
    min-height: 16px;
    line-height: 1.4;
}

/* Campo numerico com a unidade colada a direita (ex.: 10 seg) */
.input-suffix {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-input);
    overflow: hidden;
    transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
}

.input-suffix:focus-within {
    border-color: var(--border-accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.input-suffix .form-input {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    flex: 1 1 auto;
    min-width: 0;
}

.input-suffix .form-input:focus,
.input-suffix .form-input:focus-visible {
    outline: none;
    box-shadow: none;
}

.input-suffix-unit {
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--bg-elevated);
    border-left: 1px solid var(--border);
    white-space: nowrap;
}

/* Cabecalho do bloco "Menu DTMF" */
.ura-menu-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4, 16px);
    margin-bottom: var(--space-3, 12px);
}

.ura-menu-head-txt {
    min-width: 0;
}

.ura-menu-head .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .ura-opts {
        grid-template-columns: 1fr;
    }
    .ura-menu-head {
        flex-direction: column;
        align-items: stretch;
    }
    .ura-menu-head .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   PISCINA DE NUMEROS + BOTAO "VOLTAR PARA AUTOMATICA" (10/11/2026)
   Pedido do dono: o cartao "Minha piscina de numeros" estava com tabela vazia
   feia e os botoes Gerar/Renovar/Limpar desalinhados; o modal "Gerar numeros"
   tinha campos desalinhados e select com largura errada; e o "Voltar para
   automatica" era uma barrinha cinza sem cara de botao.
   Tudo abaixo usa SO os tokens do tema (style.css).
   ========================================================================== */

/* ==========================================================================
   WIZARD "NOVA CAMPANHA" — POLIMENTO (10/11/2026)
   Pedido do dono (Screenshot_1): no cartao onde escolhe a URA da campanha os
   botoes estavam desordenados/desalinhados — o select da URA ocupava a linha
   inteira e o botao "Ouvir o audio" caia solto embaixo, colado no campo
   seguinte, sem respiro nem alinhamento com o select.
   Agora: select e botao na MESMA linha, alinhados pela base, e o botao com
   largura propria (nao estica nem some no mobile).
   ========================================================================== */

.ura-pick-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.ura-pick-row > select.form-input {
    flex: 1 1 220px;
    min-width: 0;
    width: auto;
}

.ura-pick-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 var(--space-4);
    white-space: nowrap;
}

.ura-pick-btn svg {
    flex: 0 0 auto;
    opacity: 0.9;
}

.ura-empty {
    border-style: dashed;
    border-color: var(--border-accent);
    background: var(--bg-elevated, var(--bg-card));
}

@media (max-width: 560px) {
    .ura-pick-row > select.form-input,
    .ura-pick-btn {
        flex: 1 1 100%;
        width: 100%;
        justify-content: center;
    }
}

/* ---------- Cartao da piscina ---------- */
.pool-card {
    overflow: hidden;
}

.pool-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-5) var(--space-4);
    border-bottom: 1px solid var(--border);
}

.pool-head-txt {
    min-width: 0;
}

.pool-head-txt .card-title {
    margin: 0 0 4px;
}

.pool-head-txt p {
    margin: 0;
    max-width: 62ch;
    line-height: 1.5;
}

.pool-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

/* Botoes do cabecalho da piscina: mesma altura, mesmo padding e icone
   opticamente centrado — antes cada um ficava com altura diferente e a
   linha de base quebrava (era o "desordenado" apontado no print). */
.pool-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    line-height: 1;
    white-space: nowrap;
}

.pool-actions .btn svg {
    flex: 0 0 auto;
    opacity: 0.9;
}

.pool-actions .btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Faixa de numeros-resumo */
.pool-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--border);
    border-bottom: 1px solid var(--border);
}

.pool-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--space-4) var(--space-5);
    background: var(--bg-card);
}

.pool-stat-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    text-transform: uppercase;
}

.pool-stat-value {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    letter-spacing: -0.01em;
}

.pool-stat-value.is-ok {
    color: var(--success);
}

/* Estado vazio dentro da tabela da piscina: respiro equilibrado e conteudo
   centralizado, sem o vao desproporcional que sobrava abaixo do botao. */
.pool-empty-cell {
    padding: 0;
}

.pool-card .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-5);
    margin: 0;
    text-align: center;
}

.pool-card .empty-state p {
    margin: 0;
    max-width: 52ch;
    line-height: 1.55;
}

.pool-card .empty-state .btn {
    margin: 0;
    align-self: center;
}

/* ---------- Modal "Gerar numeros" ---------- */
.pool-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--space-4);
}

.pool-form .form-group {
    margin-bottom: 0;
    min-width: 0;
}

.pool-form .form-input,
.pool-form select.form-input {
    width: 100%;
    box-sizing: border-box;
}

.pool-form .form-hint {
    display: block;
    margin-top: 6px;
    min-height: 2.6em;
    line-height: 1.4;
}

.pool-form .pool-form-full .form-hint {
    min-height: 0;
}

.pool-form-full {
    grid-column: 1 / -1;
}

/* ---------- Cartao "Como funciona: URA e Campanha" ---------- */
.passos-ura-campanha {
    counter-reset: passo;
    list-style: none;
    margin: 0 0 var(--space-3);
    padding: 0;
    display: grid;
    gap: var(--space-3);
}

.passos-ura-campanha li {
    counter-increment: passo;
    position: relative;
    padding-left: 38px;
    font-size: 13px;
    line-height: 1.6;
    min-height: 28px;
}

.passos-ura-campanha li::before {
    content: counter(passo);
    position: absolute;
    left: 0;
    top: -1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent-glow);
    border: 1px solid var(--border-accent);
    color: var(--accent-strong);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.passos-ura-campanha a {
    color: var(--accent-strong);
    text-decoration: none;
    border-bottom: 1px solid var(--border-accent);
    transition: border-color 160ms ease-out, color 160ms ease-out;
}

.passos-ura-campanha a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.passos-ura-campanha a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-glow);
    border-radius: 3px;
}

/* ---------- Botao "Voltar para automatica" ---------- */
.stat-card-rota {
    border-color: var(--border-accent);
    box-shadow: 0 0 0 1px var(--accent-subtle) inset, var(--shadow-sm);
}

.btn-voltar-auto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: var(--space-3);
    padding: 9px 14px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--accent);
    background: var(--accent-subtle);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 160ms ease-out, border-color 160ms ease-out,
                color 160ms ease-out, transform 120ms ease-out, box-shadow 160ms ease-out;
}

.btn-voltar-auto svg {
    flex: 0 0 auto;
    transition: transform 320ms ease-out;
}

.btn-voltar-auto:hover {
    background: var(--accent-glow);
    border-color: var(--accent);
    color: var(--accent-strong);
    box-shadow: 0 4px 14px rgba(0, 224, 122, 0.16);
}

.btn-voltar-auto:hover svg {
    transform: rotate(-180deg);
}

.btn-voltar-auto:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-glow);
    border-color: var(--accent);
}

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

.btn-voltar-auto:disabled,
.btn-voltar-auto.is-loading {
    opacity: 0.6;
    cursor: progress;
    transform: none;
}

.btn-voltar-auto.is-loading svg {
    animation: voltaAutoSpin 900ms linear infinite;
}

@keyframes voltaAutoSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .btn-voltar-auto,
    .btn-voltar-auto svg {
        transition: none;
    }
    .btn-voltar-auto:hover svg {
        transform: none;
    }
    .btn-voltar-auto.is-loading svg {
        animation: none;
    }
}

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
    .pool-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .pool-head {
        flex-direction: column;
        align-items: stretch;
    }
    .pool-actions {
        width: 100%;
    }
    .pool-actions .btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .pool-form {
        grid-template-columns: 1fr;
    }
    .pool-stat {
        padding: var(--space-3) var(--space-4);
    }
    .pool-stat-value {
        font-size: 1.15rem;
    }
    .pool-actions .btn {
        width: 100%;
        flex: 1 1 100%;
    }
}

/* ============================================================
   CARD "NUMEROS LIBERADOS" — painel do cliente (10/11/2026)
   Pedido do dono: chip/cartao "extremamente lindo e impressionante"
   informando os prefixos liberados (4004, 0800, 0300...) logo que o
   cliente entra no painel, com destaque de que o RECURSO ESTA ATIVO.
   Tokens do tema (style.css) — zero cor hardcoded fora dos fallbacks.
   ============================================================ */
.prefixo-card {
    position: relative;
    overflow: hidden;
    margin-top: var(--space-4);
    padding: var(--space-4) var(--space-4) calc(var(--space-4) + 6px);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(135deg, rgba(0, 224, 122, 0.07) 0%, rgba(15, 23, 36, 0) 55%),
        var(--bg-card);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 24px -18px rgba(0, 0, 0, 0.9);
    transition: border-color 160ms ease-out, box-shadow 160ms ease-out, transform 160ms ease-out;
}

.prefixo-card:hover {
    border-color: var(--accent);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 12px 32px -20px var(--accent-glow);
}

.prefixo-card-glow {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
    pointer-events: none;
}

.prefixo-card-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.prefixo-card-icone {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    color: var(--accent);
    background: var(--accent-subtle);
    border: 1px solid var(--border-accent);
}

.prefixo-card-titulos {
    flex: 1 1 220px;
    min-width: 0;
}

.prefixo-card-titulo-linha {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.prefixo-card-title {
    margin: 0;
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--text-primary, #eef4fb);
}

.prefixo-card-sub {
    margin: 6px 0 0;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--text-secondary, #b3c4d6);
    max-width: 62ch;
}

/* Selo "Recurso ativo" — verde semantico + pulso sutil */
.prefixo-badge-ativo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--success);
    background: var(--success-bg);
    border: 1px solid var(--border-accent);
    white-space: nowrap;
}

.prefixo-badge-pulso {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 0 rgba(0, 224, 122, 0.55);
    animation: prefixo-pulso 2.2s ease-out infinite;
}

@keyframes prefixo-pulso {
    0%   { box-shadow: 0 0 0 0 rgba(0, 224, 122, 0.55); }
    70%  { box-shadow: 0 0 0 7px rgba(0, 224, 122, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 224, 122, 0); }
}

.prefixo-card-contador {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
    padding-left: var(--space-3);
}

.prefixo-contador-num {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
}

.prefixo-contador-rotulo {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary, #b3c4d6);
}

/* Chips de prefixo */
.prefixo-chips {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: var(--space-3);
}

.prefixo-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border-radius: 999px;
    background: var(--bg-input, #0b1220);
    border: 1px solid var(--border-strong);
    transition: border-color 140ms ease-out, background 140ms ease-out, transform 140ms ease-out;
}

.prefixo-chip:hover {
    border-color: var(--accent);
    background: var(--accent-subtle);
    transform: translateY(-1px);
}

.prefixo-chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
    flex: 0 0 auto;
}

.prefixo-chip-num {
    font-family: var(--font-mono);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-primary, #eef4fb);
    font-variant-numeric: tabular-nums;
}

.prefixo-chip-valor {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.prefixo-chip-modo {
    font-weight: 500;
    color: var(--text-muted);
}

.prefixo-chip-gratis {
    color: var(--text-muted);
    font-weight: 500;
}

/* Mobile: 375px — alvo de toque >= 40px, nada de overflow horizontal */
@media (max-width: 640px) {
    .prefixo-card {
        padding: var(--space-3) var(--space-3) calc(var(--space-3) + 4px);
    }

    .prefixo-card-contador {
        align-items: flex-start;
        padding-left: 0;
    }

    .prefixo-chips {
        gap: 8px;
    }

    .prefixo-chip {
        min-height: 40px;
        padding: 9px 13px;
        flex: 1 1 auto;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .prefixo-badge-pulso { animation: none; }
    .prefixo-card, .prefixo-chip { transition: none; }
    .prefixo-chip:hover { transform: none; }
}

/* ============================================================================
   BANDEIRAS DOS PAÍSES (11/11/2026) — multi-país BR/PT e países futuros.
   Usadas em admin, painel do cliente e revenda como <span class="flag-ico flag-br">.
   Desenho 100% CSS: não depende de emoji (que não renderiza no Windows antigo),
   de imagem externa nem de fonte de bandeiras. País novo sem desenho próprio
   cai no .flag-fallback (sigla num selo discreto) — nada quebra.
   ============================================================================ */
.flag-ico {
    display: inline-block;
    width: 22px;
    height: 16px;
    border-radius: 3px;
    vertical-align: -2px;
    flex: 0 0 auto;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .18) inset, 0 1px 2px rgba(0, 0, 0, .35);
    background-repeat: no-repeat;
    overflow: hidden;
    line-height: 16px;
    text-align: center;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--text-primary, #e6e9ef);
}
.flag-ico.flag-br {
    background-image: linear-gradient(#009B3A, #009B3A);
    position: relative;
}
.flag-ico.flag-br::before {
    content: "";
    position: absolute;
    inset: 3px 4px;
    background: #FEDF00;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.flag-ico.flag-br::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 7px; height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    background: #002776;
}
.flag-ico.flag-pt {
    background-image: linear-gradient(90deg, #046A38 0 40%, #DA291C 40% 100%);
    position: relative;
}
.flag-ico.flag-pt::after {
    content: "";
    position: absolute;
    left: 40%; top: 50%;
    width: 7px; height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    background: #FFE900;
    box-shadow: 0 0 0 1.5px #DA291C;
}
.flag-ico.flag-fallback {
    background: var(--surface-3, #262b36);
    color: var(--text-secondary, #a7b0c0);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.flag-ico.flag-lg { width: 30px; height: 22px; border-radius: 4px; }
.flag-ico.flag-lg.flag-br::after { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; }
.flag-ico.flag-lg.flag-pt::after { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; }

/* ============================================================================
   SELETOR DE PAÍS DAS ROTAS DE DISCAGEM (11/11/2026)
   Pedido do dono: "no painel do usuário não tem a bandeirinha do país, e só
   aparece basicamente as rotas do Brasil". Cada país tem o seu conjunto isolado
   de rotas; este seletor troca a lista sem recarregar a página.
   ============================================================================ */
.pais-rotas-seletor {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
    margin-bottom: var(--space-5, 24px);
    padding: 6px;
    background: var(--surface-2, #1b1f28);
    border: 1px solid var(--border, rgba(255, 255, 255, .08));
    border-radius: 14px;
}
.pais-rotas-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 8px 14px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--text-secondary, #a7b0c0);
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 160ms ease-out, border-color 160ms ease-out,
                color 160ms ease-out, transform 120ms ease-out;
}
.pais-rotas-btn:hover {
    background: var(--surface-3, #262b36);
    border-color: var(--border, rgba(255, 255, 255, .1));
    color: var(--text-primary, #e6e9ef);
}
.pais-rotas-btn:active { transform: translateY(1px); }
.pais-rotas-btn:focus-visible {
    outline: 2px solid var(--accent, #4f8cff);
    outline-offset: 2px;
}
.pais-rotas-btn .flag-ico { width: 24px; height: 17px; border-radius: 3px; }
.pais-rotas-btn-ativa {
    background: var(--surface-3, #262b36);
    border-color: var(--accent, #4f8cff);
    color: var(--text-primary, #e6e9ef);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
}
.pais-rotas-nome { white-space: nowrap; }
.pais-rotas-qtd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--surface-4, #2f3542);
    color: var(--text-secondary, #a7b0c0);
    font-size: .72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.pais-rotas-btn-ativa .pais-rotas-qtd {
    background: var(--accent, #4f8cff);
    color: #fff;
}
.pais-rotas-legenda {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--space-5, 24px);
    padding: 10px 14px;
    background: var(--surface-2, #1b1f28);
    border: 1px solid var(--border, rgba(255, 255, 255, .08));
    border-radius: 12px;
    color: var(--text-secondary, #a7b0c0);
    font-size: .9rem;
}
.pais-rotas-legenda .flag-ico { width: 24px; height: 17px; }
@media (max-width: 640px) {
    .pais-rotas-seletor { gap: 6px; padding: 5px; }
    .pais-rotas-btn { flex: 1 1 auto; min-height: 44px; padding: 8px 10px; font-size: .85rem; }
    .pais-rotas-nome { font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) {
    .pais-rotas-btn { transition: none; }
}