/*
  Diagnóstico Fiscal — produto CRM Hubmaster
  Motor de CSS. Não editar por cliente — a marca de cada cliente entra pelas
  variáveis --diag-* (defina-as na página que consome, ANTES ou DEPOIS deste
  arquivo, com prioridade normal de cascata CSS). Sem nenhuma variável
  definida, cai no visual padrão da CRM Hubmaster (navy + laranja).
*/
:root{
  --diag-primary: #13204A;
  --diag-primary-dark: #0C1733;
  --diag-accent: #E8623C;
  --diag-accent-dark: #C94F2E;
  --diag-bg: #ffffff;
  --diag-bg-alt: #F3F4F7;
  --diag-card: #ffffff;
  --diag-ink: #16211f;
  --diag-ink-soft: #55605e;
  --diag-line: #e1e4e8;
}

.diagnostico{background:var(--diag-bg)}
.diag-box{max-width:760px;margin:0 auto;background:var(--diag-bg-alt);border:1px solid var(--diag-line);
  border-radius:20px;padding:32px}
.diag-input-row{display:flex;gap:12px;flex-wrap:wrap}
.diag-input-row input{flex:1;min-width:220px;background:var(--diag-card);border:2px solid var(--diag-line);
  border-radius:10px;padding:14px 16px;font-size:1.05rem;font-family:inherit;color:var(--diag-ink);
  transition:border-color .2s}
.diag-input-row input:focus{outline:none;border-color:var(--diag-primary)}
.diag-input-row button{background:var(--diag-primary);color:#fff;border:none;border-radius:10px;
  padding:14px 24px;font-size:.98rem;font-weight:700;cursor:pointer;white-space:nowrap;
  transition:transform .15s,filter .2s,box-shadow .2s}
.diag-input-row button:hover{transform:translateY(-2px);filter:brightness(1.1);
  box-shadow:0 10px 24px rgba(0,0,0,.18)}
.diag-input-row button:disabled{opacity:.6;cursor:wait;transform:none}
.diag-disclaimer{margin-top:12px;font-size:.8rem;color:var(--diag-ink-soft)}
.diag-loading{margin-top:20px;font-size:.94rem;color:var(--diag-ink-soft);font-weight:600}
.diag-erro{margin-top:20px;background:#FDEAEA;border:1px solid #F0B4B4;color:#8a2020;border-radius:12px;
  padding:16px 20px;font-size:.92rem;font-weight:600}
.diag-resultado{margin-top:24px}
.diag-header{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:12px;
  padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--diag-line)}
.diag-header h3{font-size:1.15rem;color:var(--diag-ink);margin:0}
.diag-header p{font-size:.86rem;color:var(--diag-ink-soft);margin-top:4px}
.diag-selo{padding:6px 14px;border-radius:999px;font-size:.8rem;font-weight:800;white-space:nowrap}
.diag-selo.ok{background:rgba(20,197,158,.15);color:#0FA382}
.diag-selo.critico{background:#FDEAEA;color:#8a2020}
.diag-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:20px}
.diag-item{background:var(--diag-card);border:1px solid var(--diag-line);border-radius:12px;padding:14px 16px}
.diag-item span{display:block;font-size:.76rem;color:var(--diag-ink-soft);font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;margin-bottom:4px}
.diag-item strong{font-size:.98rem;color:var(--diag-ink)}
/* Fundo SEMPRE opaco e cor de texto SEMPRE fixa nos 3 variantes -- de propósito
   independentes de --diag-ink/--diag-bg. Este é um "chip" autocontido (like
   um alerta de sistema), não deve herdar o tema da seção-mãe (clara ou escura)
   -- senão quebra contraste sempre que a seção-mãe for escura. */
.diag-alerta{border-radius:14px;padding:20px;margin-bottom:16px;font-size:.94rem;line-height:1.6}
.diag-alerta.urgente{background:#FFF4E5;border:1px solid #F5A623;color:#7A4A06}
.diag-alerta.ok{background:#E3F8F1;border:1px solid #7FD9BE;color:#0B5943}
.diag-alerta.critico{background:#FDEAEA;border:1px solid #F0B4B4;color:#8A2020}
.diag-alerta>strong:first-child{display:block;margin-bottom:6px;font-size:1rem;color:inherit}
.diag-resultado .diag-cta{display:inline-flex;align-items:center;gap:9px;background:#25D366;color:#fff;
  padding:14px 26px;border-radius:9px;font-weight:700;font-size:.98rem;text-decoration:none;margin-top:6px;
  transition:transform .15s,box-shadow .2s,filter .2s}
.diag-resultado .diag-cta:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(37,211,102,.4);
  filter:brightness(1.06)}
.diag-resultado .diag-cta svg{width:20px;height:20px;fill:currentColor;flex-shrink:0}

@media (max-width:600px){
  .diag-grid{grid-template-columns:1fr}
  .diag-box{padding:22px}
}