/* ==========================================================================
   ValenteRocha Risk Solutions · Kit de marca (vr-brand.css)  v1.1 · 12/10/2026
   Tokens: colors_and_type.css (oficial, ValenteRocha Design System).
   Este arquivo: componentes de interface sobre os tokens oficiais.
   Uso em qualquer app:
     <link rel="stylesheet" href="https://<portal>/marca/vr-brand.css">
   Cor de sub-marca: data-subbrand="beneficios|engenharia|responsabilidades|garantia"
   no <body> ou num container (troca --accent, --accent-strong, --accent-soft).
   ========================================================================== */
@import url("colors_and_type.css");

:root {
  --container: 1240px;
  --header-h: 64px;
}

/* Padrões de página (opt-in: classe .vr no <body>, para não afetar apps existentes) */
.vr { margin: 0; background: var(--bg-page); color: var(--fg-2); font-family: var(--font-body);
      font-size: var(--fs-15); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility; }
.vr h1, .vr h2, .vr h3, .vr h4, .vr h5 { font-family: var(--font-display); color: var(--fg-1);
      font-weight: var(--fw-bold); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); margin: 0; }
.vr h1 { font-size: var(--fs-48); line-height: var(--lh-tight); letter-spacing: var(--tr-tighter); }
.vr h2 { font-size: var(--fs-36); } .vr h3 { font-size: var(--fs-30); }
.vr h4 { font-size: var(--fs-24); } .vr h5 { font-size: var(--fs-20); }
.vr a:not(.vr-btn) { color: var(--fg-link); text-decoration-thickness: 1px; text-underline-offset: 2px;
        transition: color var(--dur-fast) var(--ease-standard); }
.vr a:not(.vr-btn):hover { color: var(--fg-link-hover); }
.vr ::selection { background: var(--accent); color: var(--accent-on); }
.vr-num { font-family: var(--font-mono); font-feature-settings: var(--num-features);
          font-variant-numeric: tabular-nums lining-nums; }
.vr-container { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-6); }
.vr-eyebrow { font-family: var(--font-display); font-size: var(--fs-12); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tr-widest); color: var(--fg-3); line-height: 1.2; }

/* Cabeçalho padrão · logo horizontal + sub logo (nome do app) */
.vr-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); display: flex; align-items: center;
  gap: var(--sp-4); padding: 0 var(--sp-6); background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: var(--border-thin); }
.vr-lockup { display: flex; align-items: center; gap: var(--sp-4); text-decoration: none; min-width: 0; }
.vr-lockup img { height: 34px; width: auto; display: block; }
.vr-lockup-app { display: flex; flex-direction: column; border-left: var(--border-thin);
  padding-left: var(--sp-4); min-width: 0; }
.vr-app-name { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-18);
  color: var(--vr-aco-600); letter-spacing: var(--tr-tight); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vr-header-spacer { flex: 1; }
@media (max-width: 640px) {
  .vr-header { padding: 0 var(--sp-4); }
  .vr-lockup img { height: 26px; }
  .vr-lockup-app .vr-eyebrow { display: none; }
  .vr-app-name { font-size: var(--fs-14); }
}

/* Botões · rótulo em MAIÚSCULAS com tracking largo, eco da pílula "RISK SOLUTIONS" */
.vr-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: 40px; padding: 0 var(--sp-5); border-radius: var(--radius-md); border: 1px solid transparent;
  font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-12);
  letter-spacing: var(--tr-wider); text-transform: uppercase; cursor: pointer; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); }
.vr-btn-primary { background: var(--accent); color: var(--accent-on); box-shadow: var(--shadow-xs), var(--shadow-inset-hi); }
.vr-btn-primary:hover { background: var(--vr-aco-700); }
.vr-btn-primary:active { background: var(--accent-strong); box-shadow: var(--shadow-inset-lo); }
[data-subbrand] .vr-btn-primary:hover { background: var(--accent-strong); }
.vr-btn-secondary { background: var(--bg-surface); color: var(--accent); border-color: var(--accent); }
.vr-btn-secondary:hover { background: var(--accent-soft); }
.vr-btn-ghost { background: transparent; color: var(--accent); }
.vr-btn-ghost:hover { background: var(--accent-soft); color: var(--accent-strong); }
.vr-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.vr-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Card · faixa superior de 4 px na cor ativa (assinatura da marca) */
.vr-card { background: var(--bg-surface); border: var(--border-thin); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); padding: var(--sp-6); position: relative; overflow: hidden;
  transition: box-shadow var(--dur-base) var(--ease-standard); }
.vr-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--accent); }
.vr-card:hover { box-shadow: var(--shadow-md); }

/* Campos */
.vr-label { display: block; font-size: var(--fs-12); font-weight: var(--fw-semibold); color: var(--fg-2);
  margin-bottom: var(--sp-1); }
.vr-input { width: 100%; height: 40px; padding: 0 var(--sp-3); border: var(--border-thin);
  border-radius: var(--radius-md); background: var(--bg-surface); font: inherit; color: var(--fg-1); box-sizing: border-box;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); }
.vr-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.vr-input[aria-invalid="true"] { border-color: var(--vr-danger); }
.vr-hint { font-size: var(--fs-12); color: var(--fg-3); margin-top: var(--sp-1); }

/* Etiquetas */
.vr-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 var(--sp-2); border-radius: var(--radius-pill);
  font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 10px; letter-spacing: var(--tr-wider);
  text-transform: uppercase; background: var(--accent-soft); color: var(--accent-strong); border: 1px solid var(--vr-aco-200); }
.vr-pill-success { background: var(--vr-garantia-50); color: var(--vr-garantia-700); border-color: var(--vr-garantia-100); }
.vr-pill-warning { background: var(--vr-responsabilidades-50); color: var(--vr-responsabilidades-700); border-color: var(--vr-responsabilidades-100); }
.vr-pill-danger { background: var(--vr-engenharia-50); color: var(--vr-engenharia-700); border-color: var(--vr-engenharia-100); }
.vr-pill-info { background: var(--vr-beneficios-50); color: var(--vr-beneficios-700); border-color: var(--vr-beneficios-100); }

/* Tabela densa */
.vr-table { width: 100%; border-collapse: collapse; font-size: var(--fs-14); }
.vr-table th { text-align: left; font-family: var(--font-display); font-size: var(--fs-12); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tr-wider); color: var(--fg-3); padding: var(--sp-2) var(--sp-3);
  border-bottom: var(--border-med); }
.vr-table td { padding: var(--sp-3); border-bottom: var(--border-thin); color: var(--fg-2); }
.vr-right, .vr-table .vr-right { text-align: right; }

/* Hero e rodapé */
.vr-hero { background: var(--gradient-aco-hero); color: var(--fg-onbrand); padding: var(--sp-16) var(--sp-6); }
.vr-footer { background: var(--bg-inverse); color: rgba(255,255,255,.82); padding: var(--sp-6);
  font-size: var(--fs-12); text-align: center; }
.vr-footer strong { color: var(--vr-white); }

@media (prefers-reduced-motion: reduce) { .vr * { transition: none !important; animation: none !important; } }