/* =========================================================================
   isp-padrao.css — fonte única de verdade para tipografia e ações
   Dark Tech v8.7 · criado em 31/07/2026
   =========================================================================

   POR QUE ESTE ARQUIVO EXISTE
   ---------------------------
   Auditoria de 504 views encontrou 84.268 linhas de CSS escritas dentro de
   <style> nas próprias views. O problema não é o volume: é que o mesmo
   seletor foi escrito de formas diferentes em views diferentes.

       body                        308 views, 128 corpos diferentes
       .btn-isp-primary            203 views,  31 corpos diferentes
       ::-webkit-scrollbar-thumb   224 views,  11 corpos diferentes

   Só 442 seletores (6% das ocorrências) eram cópia byte a byte, ou seja,
   extraíveis sem decidir nada. Os outros 94% exigiam ESCOLHER um valor
   canônico — que é o que este arquivo faz.

   ORDEM DE CARGA (importa)
   ------------------------
   Este arquivo é carregado DEPOIS de isp-default.css e ANTES do <style> da
   view. Assim ele vence o CSS antigo global, e a view ainda consegue
   sobrescrever pontualmente enquanto a migração não termina.

   O que está aqui NÃO deve ser redeclarado em view nenhuma.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENS — valores de CLAUDE.md secao 2.1, sem alteracao
   ------------------------------------------------------------------------- */
:root {
    /* Fundos */
    --isp-bg:           #0f0c29;
    --isp-bg2:          #302b63;
    --isp-bg3:          #24243e;
    --isp-surface:      rgba(255, 255, 255, 0.08);
    --isp-surface2:     rgba(255, 255, 255, 0.05);
    --isp-border:       rgba(255, 255, 255, 0.12);
    --isp-border2:      rgba(255, 255, 255, 0.15);

    /* Texto — todos brancos, conforme regra 2.4 */
    --isp-text:         #ffffff;
    --isp-text-muted:   rgba(255, 255, 255, 0.7);
    --isp-text-dim:     rgba(255, 255, 255, 0.5);

    /* Acentos */
    --isp-primary:      #4361ee;
    --isp-primary-d:    #3651d4;
    --isp-success:      #06d6a0;
    --isp-success2:     #2ecc71;
    --isp-warning:      #ffb703;
    --isp-warning2:     #f39c12;
    --isp-danger:       #ef476f;
    --isp-danger2:      #e74c3c;
    --isp-info:         #06b6d4;
    --isp-purple:       #7209b7;

    /* Sombras */
    --isp-shadow:       0 8px 32px rgba(0, 0, 0, 0.4);
    --isp-glow-success: 0 0 15px rgba(46, 204, 113, 0.6);
    --isp-glow-danger:  0 0 15px rgba(231, 76, 60, 0.6);
    --isp-glow-primary: 0 0 15px rgba(67, 97, 238, 0.5);

    /* -----------------------------------------------------------------
       TIPOGRAFIA — uma pilha para texto, uma para numero/codigo.

       A auditoria achou 74 declaracoes distintas de font-family e SETE
       Google Fonts diferentes importadas view a view (Syne, Inter, Sora,
       IBM Plex Mono, JetBrains Mono, Plus Jakarta Sans, DM Sans). Cada
       uma custa uma requisicao externa e um flash de fonte trocando.

       A escolha e a pilha de sistema: ja era a mais usada (157 views) e
       nao depende de rede — a tela nao pisca esperando fonte baixar.
       ----------------------------------------------------------------- */
    --isp-font:         "Segoe UI", system-ui, -apple-system, "Roboto",
                        "Helvetica Neue", Arial, sans-serif;
    --isp-font-head:    var(--isp-font);
    --isp-sans:         var(--isp-font);
    --isp-font-mono:    "Consolas", "SF Mono", "Menlo", "Courier New", monospace;

    /* Escala de tamanho — os valores ja praticados nas tabelas do tema */
    --isp-fs-xs:        0.60rem;
    --isp-fs-sm:        0.65rem;
    --isp-fs-base:      0.75rem;
    --isp-fs-md:        0.85rem;
    --isp-fs-lg:        1rem;
}

/* -------------------------------------------------------------------------
   2. TIPOGRAFIA APLICADA
   ------------------------------------------------------------------------- */
body,
.isp-app,
.isp-card,
.isp-modal,
.modal-content,
table.isp-table {
    font-family: var(--isp-font);
}

code, pre, kbd, samp,
.isp-mono,
.isp-log-body,
.log-message,
.log-time {
    font-family: var(--isp-font-mono);
}

/* -------------------------------------------------------------------------
   3. BARRA DE ROLAGEM — valor unico
       Antes: 224 views declaravam ::-webkit-scrollbar com 8 larguras
       diferentes e 11 cores de polegar diferentes.
   ------------------------------------------------------------------------- */
::-webkit-scrollbar        { width: 5px; height: 5px; }
::-webkit-scrollbar-track  { background: rgba(255, 255, 255, 0.03); border-radius: 10px; }
::-webkit-scrollbar-thumb  { background: rgba(255, 255, 255, 0.15); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--isp-primary); }

/* -------------------------------------------------------------------------
   4. BOTOES DE ACAO — o pedido central da padronizacao

   Cada acao tem UMA cor e UM icone. O icone vem da tabela em
   docs/PADRAO_ICONES.md e e aplicado no HTML; a cor vem daqui.

   .isp-acao        base do botao so-icone em tabela
   .isp-acao--ver / --editar / --excluir / --baixa / --bloquear /
   .isp-acao--desbloquear / --exportar / --imprimir
   ------------------------------------------------------------------------- */
/* [14/08/2026] .isp-act-btn / .isp-action-group entram como ALIAS dos nomes
   canonicos. Motivo: nenhuma view adotou .isp-acao — a auditoria de hoje
   achou ZERO uso dele nos CSS de view, enquanto .isp-act-btn aparece em 12
   dos 52 arquivos amostrados (~35 extrapolando para os 152). Padronizar
   pelo nome que ninguem usa exigiria reescrever o HTML de dezenas de
   views; aceitar o alias faz o CSS global valer HOJE, sem tocar em uma
   linha de markup. Em view NOVA, prefira .isp-acao / .isp-acoes. */
.isp-acoes,
.isp-action-group {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    flex-wrap: nowrap;
}

/* 29x29 e a medida da maioria: 9 dos 12 arquivos que declaravam
   .isp-act-btn usavam 29px/raio 6. As excecoes eram 30px (clientes-ver),
   32px/raio 8 (inadimplencia-lista) e um sem tamanho fixo (cache-index).
   Valores literais de proposito: --isp-radius NAO existe globalmente
   (ver secao 7), entao usa-lo aqui daria border-radius: 0. */
.isp-acao,
.isp-act-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid var(--isp-border);
    background: var(--isp-surface2);
    color: var(--isp-text);
    font-size: var(--isp-fs-base);
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: background .2s, border-color .2s, color .2s, transform .2s, box-shadow .2s;
}

.isp-acao:hover,
.isp-act-btn:hover { transform: translateY(-1px); }

.isp-acao:active,
.isp-act-btn:active { transform: translateY(0); }

.isp-acao:focus-visible,
.isp-act-btn:focus-visible {
    outline: 2px solid var(--isp-primary);
    outline-offset: 2px;
}

.isp-acao:disabled,
.isp-acao[aria-disabled="true"],
.isp-act-btn:disabled,
.isp-act-btn[aria-disabled="true"],
.isp-act-btn.btn-disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
    pointer-events: none;
}

/* --- Semantica por acao: UMA cor por acao, no hover ---------------------- */
.isp-acao--ver:hover          { background: rgba(67,97,238,.18);  border-color: var(--isp-primary);  color: #fff; }
.isp-acao--editar:hover       { background: rgba(255,183,3,.18);  border-color: var(--isp-warning);  color: #ffd98a; }
.isp-acao--excluir:hover      { background: rgba(231,76,60,.18);  border-color: var(--isp-danger2);  color: #ff9a90; }
.isp-acao--baixa:hover        { background: rgba(46,204,113,.18); border-color: var(--isp-success2); color: #8ff0c0; }
.isp-acao--bloquear:hover     { background: rgba(231,76,60,.18);  border-color: var(--isp-danger2);  color: #ff9a90; }
.isp-acao--desbloquear:hover  { background: rgba(46,204,113,.18); border-color: var(--isp-success2); color: #8ff0c0; }
.isp-acao--exportar:hover     { background: rgba(6,182,212,.18);  border-color: var(--isp-info);     color: #7fe3f5; }
.isp-acao--imprimir:hover     { background: rgba(114,9,183,.18);  border-color: var(--isp-purple);   color: #d9b3ff; }

/* --- Modificadores legados, equivalentes aos --* acima -------------------
   As views escrevem .isp-act-btn.btn-edit, .btn-view, .btn-danger etc.
   Sao mantidos porque estao no HTML de dezenas de views.
   ATENCAO a .btn-danger / .btn-success: sao classes do Bootstrap, que
   pintaria o botao de vermelho/verde solido. O seletor duplo abaixo
   (0,2,0) vence o do Bootstrap (0,1,0), e este arquivo carrega depois. */
.isp-act-btn.btn-view:hover,
.isp-act-btn.btn-ver:hover      { background: rgba(67,97,238,.18);  border-color: var(--isp-primary);  color: #fff; }
.isp-act-btn.btn-edit:hover,
.isp-act-btn.btn-editar:hover   { background: rgba(255,183,3,.18);  border-color: var(--isp-warning);  color: #ffd98a; }

.isp-act-btn.btn-success        { background: rgba(46,204,113,.10); border-color: var(--isp-success2); color: var(--isp-success2); }
.isp-act-btn.btn-success:hover  { background: rgba(46,204,113,.20); box-shadow: 0 0 12px rgba(46,204,113,.3); }
.isp-act-btn.btn-danger         { background: rgba(239,71,111,.10); border-color: var(--isp-danger2);  color: var(--isp-danger2); }
.isp-act-btn.btn-danger:hover   { background: rgba(239,71,111,.20); box-shadow: 0 0 12px rgba(239,71,111,.3); }
.isp-act-btn.btn-warning        { background: rgba(243,156,18,.10); border-color: var(--isp-warning2); color: var(--isp-warning2); }
.isp-act-btn.btn-warning:hover  { background: rgba(243,156,18,.20); box-shadow: 0 0 12px rgba(243,156,18,.3); }
.isp-act-btn.btn-info           { background: rgba(6,182,212,.10);  border-color: var(--isp-info);     color: var(--isp-info); }
.isp-act-btn.btn-info:hover     { background: rgba(6,182,212,.20);  box-shadow: 0 0 12px rgba(6,182,212,.3); }

/* Verde oficial do WhatsApp — nao e o --isp-success do tema, de proposito. */
.isp-act-btn.btn-whatsapp       { background: rgba(37,211,102,.10); border-color: #25d366; color: #25d366; }
.isp-act-btn.btn-whatsapp:hover { background: rgba(37,211,102,.20); box-shadow: 0 0 12px rgba(37,211,102,.3); }

/* --- Tooltip do botao de acao -------------------------------------------
   O data-tooltip so estava implementado para a sidebar recolhida (em
   isp-default.css) e para o toggle de bloqueio (em clientes-index.css).
   Nos botoes de acao do /clientes o atributo estava no HTML sem NENHUM
   CSS correspondente — ou seja, nao aparecia nada ao passar o mouse.
   Escopado nos botoes para nao colidir com aquelas duas regras. */
.isp-acao[data-tooltip],
.isp-act-btn[data-tooltip],
.btn-isp[data-tooltip] { position: relative; }

.isp-acao[data-tooltip]:hover::after,
.isp-act-btn[data-tooltip]:hover::after,
.btn-isp[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(8, 10, 28, 0.97);
    border: 1px solid var(--isp-border2);
    color: #fff;
    font-size: var(--isp-fs-sm);
    font-weight: 600;
    padding: .32rem .6rem;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1080;
}

/* -------------------------------------------------------------------------
   5. FAMILIA .btn-isp — botao com rotulo (barra de ferramentas, formulario)

   Este e o segundo papel: botao retangular com texto, o padrao visual do
   /clientes/index.php. O de tabela e o .isp-acao da secao 4.

   Por que estava duplicado em ~100 arquivos: o .btn-isp do isp-default.css
   define SO cor de fundo, borda e texto — sem padding, sem raio, sem
   tamanho de fonte. Ele depende do .btn do Bootstrap para ter forma, e as
   views usam .btn-isp SEM .btn. Resultado: botao sem padding nenhum. Cada
   view resolveu isso reescrevendo a familia inteira no proprio arquivo, e
   dai vieram as 8 versoes distintas de .btn-isp-sm que a auditoria achou.

   O bloco abaixo e autossuficiente: nao precisa do .btn do Bootstrap.
   ------------------------------------------------------------------------- */
.btn-isp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .55rem 1rem;
    border: 1px solid var(--isp-border);
    border-radius: 8px;
    background: var(--isp-surface);
    color: var(--isp-text);
    font-family: var(--isp-font);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    text-transform: none;   /* o .btn do Bootstrap forca uppercase */
    letter-spacing: normal;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s, transform .2s, box-shadow .2s;
}
.btn-isp:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--isp-border2);
    color: #fff;
    transform: translateY(-1px);
}
.btn-isp:active { transform: translateY(0); }
.btn-isp:focus-visible {
    outline: 2px solid var(--isp-primary);
    outline-offset: 2px;
}
.btn-isp:disabled,
.btn-isp[aria-disabled="true"] {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
}

/* Tamanhos */
.btn-isp-sm { padding: .4rem .7rem; font-size: 12px; }
.btn-isp-lg { padding: .7rem 1.35rem; font-size: 14px; }

/* Variantes de cor. O texto do warning e escuro de proposito: sobre
   #ffb703, branco reprova no contraste WCAG AA (1.9:1); #1a1a1a da 11:1. */
.btn-isp-primary        { background: var(--isp-primary);  border-color: var(--isp-primary);  color: #fff; }
.btn-isp-primary:hover  { background: var(--isp-primary-d); border-color: var(--isp-primary-d); color: #fff; box-shadow: var(--isp-glow-primary); }
.btn-isp-success        { background: var(--isp-success);  border-color: var(--isp-success);  color: #fff; }
.btn-isp-success:hover  { background: var(--isp-success2); border-color: var(--isp-success2); color: #fff; }
.btn-isp-warning        { background: var(--isp-warning);  border-color: var(--isp-warning);  color: #1a1a1a; }
.btn-isp-warning:hover  { background: var(--isp-warning2); border-color: var(--isp-warning2); color: #1a1a1a; }
.btn-isp-danger         { background: var(--isp-danger);   border-color: var(--isp-danger);   color: #fff; }
.btn-isp-danger:hover   { background: var(--isp-danger2);  border-color: var(--isp-danger2);  color: #fff; }
.btn-isp-info           { background: var(--isp-info);     border-color: var(--isp-info);     color: #fff; }
.btn-isp-info:hover     { background: #0891b2;             border-color: #0891b2;             color: #fff; }
.btn-isp-ghost          { background: transparent;         border-color: var(--isp-border); }
.btn-isp-ghost:hover    { background: var(--isp-surface);  border-color: var(--isp-border2); }
.btn-isp-secondary      { background: rgba(255,255,255,0.10); border-color: var(--isp-border); }
.btn-isp-secondary:hover{ background: rgba(255,255,255,0.20); }
.btn-isp-outline        { background: transparent;         border-color: var(--isp-border2); }
.btn-isp-outline:hover  { background: var(--isp-surface);  border-color: rgba(255,255,255,0.30); }

.btn-isp-xs { padding: 3px 8px; font-size: .65rem; }

/* -------------------------------------------------------------------------
   5B. VARIANTES DE NAVEGACAO/RECARGA — .btn-isp-back / -refresh / -sync

   Nao estavam no cânone original, mas a varredura dos 146 CSS de view
   mostrou que sao padroes de sistema, e divergentes:

       .btn-isp-back      37 arquivos,  8 corpos diferentes
       .btn-isp-refresh   36 arquivos, 11 corpos diferentes
       .btn-isp-sync      13 arquivos,  5 corpos diferentes

   Os valores abaixo sao o corpo majoritario de cada um (9x, 9x e 2x),
   normalizado. Sao gradientes de propósito — e a identidade visual que
   esses tres botoes ja tinham na maioria das telas.

   O !important no color veio junto do corpo original: e necessario para
   vencer o `color: var(--text-primary)` do .btn-isp do isp-default.css,
   que tem a mesma especificidade e carrega antes.
   ------------------------------------------------------------------------- */
.btn-isp-back {
    background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--isp-text-muted) !important;
    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-isp-back:hover {
    background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05));
    border-color: rgba(255,255,255,0.3);
    color: #fff !important;
    transform: translateX(-2px);   /* volta = anda para tras */
}

.btn-isp-refresh {
    background: linear-gradient(135deg, rgba(67,97,238,0.15), rgba(67,97,238,0.05));
    border: 1px solid rgba(67,97,238,0.3);
    color: #a5b4fc !important;
    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-isp-refresh:hover {
    background: linear-gradient(135deg, rgba(67,97,238,0.25), rgba(67,97,238,0.1));
    border-color: var(--isp-primary);
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(67,97,238,0.3);
}

.btn-isp-sync {
    background: linear-gradient(135deg, rgba(6,182,212,0.15), rgba(6,182,212,0.05));
    border: 1px solid rgba(6,182,212,0.3);
    color: #67e8f9 !important;
    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.btn-isp-sync:hover {
    background: linear-gradient(135deg, rgba(6,182,212,0.25), rgba(6,182,212,0.1));
    border-color: var(--isp-info);
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(6,182,212,0.3);
}

/* Excluir na tabela — .btn-del aparecia em 28 arquivos, sempre em vermelho.
   Mesmo tratamento do .btn-danger acima. */
.isp-act-btn.btn-del,
.isp-act-btn.btn-excluir       { border-color: var(--isp-danger2); color: var(--isp-danger2); background: rgba(239,71,111,.10); }
.isp-act-btn.btn-del:hover,
.isp-act-btn.btn-excluir:hover { background: rgba(239,71,111,.20); box-shadow: 0 0 12px rgba(239,71,111,.3); }

/* -------------------------------------------------------------------------
   6. ACESSIBILIDADE — CLAUDE.md secao 2.5
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .isp-acao,
    .isp-act-btn,
    .btn-isp {
        transition: none;
    }
    .isp-acao:hover,
    .isp-act-btn:hover,
    .btn-isp:hover { transform: none; }
}

/* -------------------------------------------------------------------------
   7. PENDENCIA CONHECIDA — tokens usados e nunca definidos

   Levantamento de 14/08/2026 sobre os CSS de view (amostra de 52 dos 152):

       var(--isp-radius)     usado em 35 arquivos
       var(--isp-font-xs)    usado em 17 arquivos
       var(--isp-font-md)    usado em 17 arquivos
       var(--isp-primary-h)  usado em  5 arquivos

   NENHUM deles e declarado em isp-default.css, isp-padrao.css,
   layout-default.css ou isp-badges.css. So existem no :root de alguns
   arquivos de view, valendo apenas para a propria pagina.

   Consequencia real: em toda view cujo CSS nao declare seu proprio :root,
   `border-radius: var(--isp-radius)` e invalido em tempo de computacao e
   cai para 0 — o botao fica de canto reto —, e `font-size:
   var(--isp-font-xs)` some, herdando o tamanho do pai. E parte da razao
   de telas parecidas nao parecerem iguais.

   NAO foram declarados aqui de proposito: definir --isp-font-xs como
   0.60rem mudaria de uma vez o tamanho da fonte em 17 arquivos que hoje
   herdam ~13px, o que e uma regressao visual grande para entrar junto de
   um piloto. Fica como proximo passo, medido separadamente.
   ------------------------------------------------------------------------- */