/* ===== leal-ui.css: componentes compartilhados das telas LEAL =====
   Carregue DEPOIS do leal-tokens.css e ANTES do <style> da página:
     <link rel="stylesheet" href="leal-tokens.css">
     <link rel="stylesheet" href="leal-ui.css">
   Tudo aqui sai das variáveis do leal-tokens.css. Tema claro (as páginas são claras).
   As telas da equipe (Propostas, Gerador, Painel) usam a escala normal; as do cliente
   (ficha, garantias, seguro) usam <body class="leal-cliente"> e ganham a escala maior.

   O que existe aqui:
   - .bt          botão: .pri (principal), .sec (secundário), .ter (terceiro peso),
                  .perigo (apagar, excluir), .atalho (só texto, como um link),
                  .peq (menor), .cheio (largura toda)
   - .toast       recado flutuante (o padrão da ficha: acima da barra de ações, texto à
                  esquerda, largura do conteúdo); .ok .erro .aviso pintam a borda esquerda
   - dialog.jan   diálogo com header (h3 + .fecha), .corpo rolável e footer;
                  .simples para o diálogo curto (h3, p, .bts) sem cabeçalho separado
   - .selo        selo de situação (pílula sem borda): .verde .ambar .vermelho .neutro .marca
   - .ia-tag      selo da leitura por IA (12px, legível): .ia-ok .ia-aten .ia-ruim .duvida .ia-neutro
   - .leal-chip   chip de estado com borda: .verde .ambar .vermelho .neutro
   - .leal-campo  campo com rótulo, linha de ajuda (.ajuda) e erro (.erro, aparece com .invalido)
   O leal-ui.js (lealUI.dialogo, confirmar, avisar, recado) usa estas mesmas classes. */

/* ----- botão ----- */
.bt{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;
  font:600 var(--t-base)/1.2 var(--f-ui);color:var(--leal-tx-2);
  min-height:var(--alvo-toque,44px);padding:10px 20px;border-radius:var(--r-pill);
  border:1px solid transparent;background:none;cursor:pointer;text-decoration:none;text-align:center;
  -webkit-tap-highlight-color:transparent;transition:background .2s,border-color .2s,color .2s,box-shadow .2s,transform .15s}
.bt.pri{background:var(--leal-acao);color:#fff;border-color:transparent;box-shadow:var(--el-1)}
.bt.pri:hover:not(:disabled){background:var(--leal-acao-hover)}
.bt.sec{background:var(--leal-sup);color:var(--leal-tx-2);border-color:var(--leal-linha);box-shadow:var(--el-1)}
.bt.sec:hover:not(:disabled){border-color:var(--leal-acao-cor);color:var(--leal-acao-cor)}
.bt.ter{background:none;color:var(--leal-tx-3);border-color:transparent}
.bt.ter:hover:not(:disabled){background:var(--leal-linha-2);color:var(--leal-tx)}
.bt.perigo{background:var(--leal-sup);color:var(--leal-erro-tx);border-color:var(--leal-erro-tx)}
.bt.perigo:hover:not(:disabled){background:var(--leal-erro-tx);color:#fff}
.bt.atalho{background:none;border-color:transparent;color:var(--leal-acao-cor);padding:8px 12px;box-shadow:none}
.bt.atalho:hover:not(:disabled){background:var(--leal-rosa-fundo);text-decoration:underline;text-underline-offset:3px}
.bt.peq{min-height:36px;padding:7px 14px;font-size:var(--t-sm)}
.bt.cheio{width:100%}
.bt:disabled,.bt[aria-disabled="true"]{background:var(--leal-sup-2);color:var(--leal-tx-3);border-color:var(--leal-linha);box-shadow:none;cursor:not-allowed;filter:none;transform:none}
.bt.atalho:disabled,.bt.ter:disabled{background:none;border-color:transparent}
.bt svg{width:18px;height:18px;flex:none}

/* no celular o botão da equipe fica um pouco mais estreito, para dois caberem na mesma linha */
@media (max-width:600px){
  .bt{padding-left:16px;padding-right:16px}
  .leal-cliente .bt{padding-left:28px;padding-right:28px}
  .leal-cliente .bt.sec,.leal-cliente .bt.ter{padding-left:22px;padding-right:22px}
  .leal-cliente .bt.peq{padding-left:18px;padding-right:18px}
}

/* escala do cliente: letra maior e mais peso, porque quem lê está no celular */
.leal-cliente .bt{font:700 var(--t-md)/1 var(--f-ui);padding:15px 28px;gap:8px}
.leal-cliente .bt.sec,.leal-cliente .bt.ter{font-weight:600;font-size:var(--t-base);padding:13px 22px}
.leal-cliente .bt.sec{color:var(--leal-acao-cor);border:1.5px solid var(--leal-acao-cor);box-shadow:none}
.leal-cliente .bt.sec:hover:not(:disabled){background:var(--leal-rosa-fundo)}
.leal-cliente .bt.ter{background:var(--leal-rosa-fundo-2);color:var(--leal-vinho);border:1.5px solid var(--leal-rosa-linha)}
.leal-cliente .bt.ter:hover:not(:disabled){background:var(--leal-rosa-fundo-2);border-color:var(--leal-rosa-linha-2);color:var(--leal-vinho)}
.leal-cliente .bt.peq{min-height:42px;padding:9px 18px;font-size:var(--t-sm)}
.leal-cliente .bt.atalho{padding:10px 14px}
.leal-cliente .bt:disabled{background:var(--leal-sup-2);color:var(--leal-tx-3);border:1px solid var(--leal-linha)}

/* ----- recado flutuante (toast) -----
   Fica acima da barra de ações (a página informa a altura em --alt-acoes) e nunca
   cobre o botão principal; largura do conteúdo, texto à esquerda, some sozinho. */
.toast{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(var(--alt-acoes,0px) + 12px + env(safe-area-inset-bottom,0px));
  background:var(--leal-tx);color:#fff;max-width:min(560px,calc(100vw - 32px));width:max-content;
  border-radius:var(--r-2);padding:10px 16px;font:var(--t-sm)/1.4 var(--f-ui);text-align:left;
  box-shadow:var(--el-3);opacity:0;pointer-events:none;transition:opacity .25s;z-index:60}
.toast.on{opacity:.93}
.toast.ok{border-left:4px solid var(--leal-verde)}
.toast.erro{border-left:4px solid var(--leal-erro-linha)}
.toast.aviso{border-left:4px solid var(--leal-ambar-linha)}

/* ----- diálogo ----- */
dialog.jan{border:0;padding:0;max-width:640px;width:calc(100% - 24px);border-radius:var(--r-3);
  box-shadow:var(--el-3);color:var(--leal-tx-2);font-family:var(--f-ui);background:var(--leal-sup);
  max-height:88vh;overflow:hidden;box-sizing:border-box}
dialog.jan::backdrop{background:rgba(40,10,25,.45);backdrop-filter:blur(2px)}
dialog.jan[open]{display:flex;flex-direction:column}
dialog.jan .jc{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;max-height:88vh}
dialog.jan header{display:flex;align-items:flex-start;gap:var(--e-3);padding:var(--e-5) var(--e-5) var(--e-4);
  border-bottom:1px solid var(--leal-linha);background:var(--leal-sup-2);flex:none}
dialog.jan h3{margin:0;font:700 var(--t-lg)/1.25 var(--f-ui);color:var(--leal-tx);flex:1;min-width:0;text-wrap:balance}
dialog.jan .fecha{background:none;border:0;color:var(--leal-tx-3);font-size:26px;line-height:1;cursor:pointer;
  width:36px;height:36px;margin:-6px -8px -6px 0;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center}
dialog.jan .fecha:hover{color:var(--leal-tx);background:var(--leal-linha-2)}
dialog.jan .corpo{padding:var(--e-5);overflow:auto;font-size:var(--t-base);line-height:1.65;flex:1 1 auto;min-height:0;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
dialog.jan .corpo p{margin:0 0 14px;text-wrap:pretty}
dialog.jan .corpo p:last-child{margin-bottom:0}
dialog.jan footer{padding:var(--e-4) var(--e-5);border-top:1px solid var(--leal-linha);margin-top:0;background:var(--leal-sup-2);
  display:flex;gap:var(--e-3);justify-content:flex-end;align-items:center;flex-wrap:wrap;flex:none}
dialog.jan footer .obs{flex:1;min-width:160px;font-size:var(--t-sm);color:var(--leal-tx-3)}
/* diálogo curto: título, texto e botões, sem cabeçalho separado */
dialog.jan.simples{max-width:520px;padding:var(--e-5)}
dialog.jan.simples h3{margin:0 0 var(--e-3);font-size:var(--t-lg)}
dialog.jan.simples p{margin:0 0 var(--e-4);font-size:var(--t-base);line-height:var(--lh-corpo)}
dialog.jan.simples textarea{width:100%;box-sizing:border-box;font:inherit;font-size:var(--t-base);padding:9px 12px;
  border:1px solid var(--leal-linha);border-radius:var(--r-1);min-height:70px;resize:vertical;margin-bottom:var(--e-4)}
dialog.jan.simples .corpo{padding:0;overflow:auto}
dialog.jan.simples .bts,dialog.jan.simples footer{display:flex;gap:var(--e-2);justify-content:flex-end;flex-wrap:wrap;
  padding:0;border:0;background:none;margin-top:var(--e-2)}
@media (max-width:600px){
  dialog.jan{max-height:92vh}
  dialog.jan .jc{max-height:92vh}
  dialog.jan .corpo{padding:var(--e-4);line-height:1.55}
  dialog.jan .corpo p{margin:0 0 10px}
  dialog.jan.simples{padding:var(--e-4)}
}

/* ----- selo de situação (pílula, sem borda) ----- */
.selo{display:inline-flex;align-items:center;gap:5px;font:700 var(--t-xs)/1.4 var(--f-ui);letter-spacing:.01em;
  border-radius:var(--r-pill);padding:3px 10px;background:var(--leal-linha-2);color:var(--leal-tx-2);max-width:100%}
.selo.verde{background:var(--leal-verde-fundo);color:var(--leal-verde-tx)}
.selo.ambar{background:var(--leal-ambar-fundo);color:var(--leal-ambar-tx)}
.selo.vermelho{background:var(--leal-erro-fundo);color:var(--leal-erro-tx)}
.selo.neutro{background:var(--leal-linha-2);color:var(--leal-tx-3)}
.selo.marca{background:var(--leal-rosa-fundo);color:var(--leal-acao-cor)}

/* ----- selo da leitura por IA: nunca abaixo de 12px, sem caixa alta ----- */
.ia-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--r-pill);
  font:600 var(--t-xs)/1.5 var(--f-ui);font-style:normal;letter-spacing:.01em;max-width:100%;
  color:var(--leal-vinho);background:var(--leal-rosa-fundo);border:1px solid var(--leal-rosa-linha)}
.ia-tag.ia-ok{color:var(--leal-verde-tx);background:var(--leal-verde-fundo);border-color:var(--leal-verde-linha)}
.ia-tag.ia-aten,.ia-tag.duvida{color:var(--leal-ambar-tx);background:var(--leal-ambar-fundo);border-color:var(--leal-ambar-linha)}
.ia-tag.ia-ruim{color:var(--leal-erro-tx);background:var(--leal-erro-fundo);border-color:var(--leal-erro-linha)}
.ia-tag.ia-neutro{color:var(--leal-tx-3);background:var(--leal-sup-2);border-color:var(--leal-linha)}

/* ----- chip de estado (com borda): cor nunca vai sozinha, o texto diz o estado ----- */
.leal-chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:3px 10px;box-sizing:border-box;
  border-radius:var(--r-pill);border:1px solid var(--leal-linha);background:var(--leal-sup-2);color:var(--leal-tx-2);
  font:600 var(--t-xs)/1.4 var(--f-ui);max-width:100%}
.leal-chip.verde{color:var(--leal-verde-tx);background:var(--leal-verde-fundo);border-color:var(--leal-verde-linha)}
.leal-chip.ambar{color:var(--leal-ambar-tx);background:var(--leal-ambar-fundo);border-color:var(--leal-ambar-linha)}
.leal-chip.vermelho{color:var(--leal-erro-tx);background:var(--leal-erro-fundo);border-color:var(--leal-erro-linha)}
.leal-chip.neutro{color:var(--leal-tx-3);background:var(--leal-sup-2);border-color:var(--leal-linha)}

/* ----- campo com rótulo, ajuda e erro ----- */
.leal-campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.leal-campo>label,.leal-campo .rotulo{font:600 var(--t-sm)/1.35 var(--f-ui);color:var(--leal-tx-2)}
.leal-campo input,.leal-campo select,.leal-campo textarea{font:var(--t-base)/1.4 var(--f-ui);color:var(--leal-tx);
  padding:9px 12px;min-height:var(--alvo-toque,44px);box-sizing:border-box;width:100%;
  border:1px solid var(--leal-linha);border-radius:var(--r-1);background:var(--leal-sup)}
.leal-campo textarea{min-height:88px;resize:vertical}
.leal-campo .ajuda{font-size:var(--t-sm);line-height:1.45;color:var(--leal-tx-3)}
.leal-campo .erro{display:none;font-size:var(--t-sm);line-height:1.45;font-weight:600;color:var(--leal-erro-tx)}
.leal-campo.invalido .erro{display:block}
.leal-campo.invalido input,.leal-campo.invalido select,.leal-campo.invalido textarea,
.leal-campo [aria-invalid="true"]{border-color:var(--leal-erro-tx);background:var(--leal-erro-fundo)}
.leal-campo.certo input,.leal-campo.certo select{border-color:var(--leal-verde-linha);background:var(--leal-verde-fundo)}

/* exemplo dentro do campo legível nas três telas (4,8:1 sobre branco) */
::placeholder{color:var(--leal-tx-4,#767077);opacity:1}

/* o atributo hidden vence o display dos componentes: sem isto, um botão escondido pelo JS aparecia */
.bt[hidden],.selo[hidden],.ia-tag[hidden],.leal-chip[hidden],.leal-campo[hidden]{display:none!important}
