/* ============================================================================
   RENOVAÇO — design padrão da rede
   Instituto Rede de Negócios e Oportunidades Global · CNPJ 30.025.929/0001-36

   Cores medidas nos arquivos oficiais em Documentos/IDV/ — não alterar.
   Manual escrito: IDENTIDADE-VISUAL.md   ·   Regras da rede: REGIMENTO.md

   Uso: importar ANTES do CSS do módulo. Nunca escrever hex de marca solto —
   sempre var(--token).
   ============================================================================ */

/* ---------------------------------------------------------------- 1. TOKENS */
:root {
  /* --- Cores oficiais da marca (as três da logo + branco) --- */
  --navy:     #1B3B69;   /* Azul Marinho — estrutura de aço. 81% da logo   */
  --turquesa: #29B8C0;   /* Azul Água — renovação e oportunidade            */
  --cinza:    #4D4D4D;   /* descritivos                                     */
  --branco:   #FFFFFF;

  /* --- Escala derivada: navy --- */
  --navy-50:  #F1F3F6;
  --navy-100: #DFE4EA;
  --navy-200: #BFC8D5;
  --navy-300: #98A7BC;
  --navy-400: #5F7696;
  --navy-500: #1B3B69;
  --navy-600: #18345C;
  --navy-700: #142C4E;
  --navy-800: #10223D;
  --navy-900: #0B192C;

  /* --- Escala derivada: turquesa --- */
  --turq-50:  #F2FBFB;
  --turq-100: #E1F5F6;
  --turq-200: #C3EBED;
  --turq-300: #9FDFE3;
  --turq-400: #69CDD3;
  --turq-500: #29B8C0;
  --turq-600: #24A2A9;
  --turq-700: #1E888E;
  --turq-800: #186B6F;   /* ← turquesa legível sobre fundo claro (6,23:1) */
  --turq-900: #114D51;

  /* --- Escala derivada: cinza --- */
  --cinza-50:  #F4F4F4;
  --cinza-100: #E6E6E6;
  --cinza-200: #CDCDCD;
  --cinza-300: #AFAFAF;
  --cinza-400: #828282;
  --cinza-500: #4D4D4D;
  --cinza-600: #444444;
  --cinza-700: #393939;
  --cinza-800: #2D2D2D;
  --cinza-900: #202020;

  /* --- Estados (não são cor de marca; existem porque interface precisa) --- */
  --ok:       #1E7A4C;  --ok-bg:    #E8F5EE;
  --atencao:  #B26B00;  --atencao-bg:#FDF3E2;
  --erro:     #B3261E;  --erro-bg:  #FBEAE9;
  --info:     #1E888E;  --info-bg:  #E1F5F6;

  /* --- Papéis semânticos: use ESTES nas telas --- */
  --fundo:            #FFFFFF;
  --fundo-alt:        var(--navy-50);
  --superficie:       #FFFFFF;
  --borda:            var(--cinza-100);
  --borda-forte:      var(--cinza-200);
  --texto:            var(--cinza-700);
  --texto-forte:      var(--navy-700);
  --texto-suave:      var(--cinza-500);
  --texto-invertido:  #FFFFFF;
  --acento:           var(--turq-500);
  --acento-texto:     var(--turq-800);  /* turquesa que pode ser LIDO         */
  --marca:            var(--navy-500);

  /* --- Tipografia --- */
  --fonte-titulo: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fonte-texto:  "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fonte-mono:   "JetBrains Mono", "Cascadia Mono", Consolas, monospace;

  --txt-xs:   0.75rem;   /* 12 */
  --txt-sm:   0.875rem;  /* 14 */
  --txt-base: 1rem;      /* 16 — piso do texto corrido */
  --txt-lg:   1.25rem;   /* 20 */
  --txt-xl:   1.5625rem; /* 25 */
  --txt-2xl:  1.9375rem; /* 31 */
  --txt-3xl:  2.4375rem; /* 39 */
  --txt-4xl:  3.0625rem; /* 49 */

  /* --- Espaçamento: escala de 4 px, nada fora dela --- */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px; --e-6: 24px;
  --e-8: 32px; --e-12: 48px; --e-16: 64px; --e-24: 96px; --e-32: 128px;

  /* --- Forma --- */
  --raio-sm:  4px;
  --raio-md:  6px;    /* campo, botão   */
  --raio-lg:  12px;   /* card           */
  --raio-xl:  20px;   /* bloco grande   */
  --raio-full: 999px; /* chip, pílula   */

  /* --- Sombra: sempre em navy, nunca preto puro --- */
  --sombra-1: 0 1px 2px rgba(27, 59, 105, .08);
  --sombra-2: 0 4px 12px rgba(27, 59, 105, .10);
  --sombra-3: 0 12px 32px rgba(27, 59, 105, .14);
  --anel-foco: 0 0 0 3px rgba(41, 184, 192, .25);

  /* --- Layout --- */
  --largura-conteudo: 1200px;
  --largura-texto:    720px;   /* ~72 caracteres */
  --alvo-toque:       44px;    /* mínimo clicável */

  /* --- Movimento --- */
  --t-rapido: 150ms ease-out;
  --t-medio:  250ms ease-out;
}

/* ------------------------------------------------------- 2. BASE E RESET */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: var(--txt-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  color: var(--texto-forte);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 var(--e-4);
}
h1 { font-size: var(--txt-3xl); }
h2 { font-size: var(--txt-2xl); }
h3 { font-size: var(--txt-xl); }
h4 { font-size: var(--txt-lg); font-weight: 600; }

p { margin: 0 0 var(--e-4); max-width: var(--largura-texto); }

a { color: var(--acento-texto); text-decoration: none; }
a:hover { text-decoration: underline; }

small { font-size: var(--txt-sm); color: var(--texto-suave); }

code, kbd, .num {
  font-family: var(--fonte-mono);
  font-size: 0.92em;
  font-variant-numeric: tabular-nums;
}

/* Foco visível SEMPRE — nunca outline:none sem substituto */
:focus-visible {
  outline: 2px solid var(--turq-500);
  outline-offset: 2px;
  border-radius: var(--raio-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------- 3. ESTRUTURA */
.rnv-container {
  width: 100%;
  max-width: var(--largura-conteudo);
  margin-inline: auto;
  padding-inline: var(--e-6);
}

.rnv-secao { padding-block: var(--e-16); }
.rnv-secao--alt { background: var(--fundo-alt); }

/* Faixa institucional: fundo navy com logo negativa */
.rnv-faixa {
  background: var(--navy-500);
  color: var(--texto-invertido);
}
.rnv-faixa h1, .rnv-faixa h2, .rnv-faixa h3 { color: var(--texto-invertido); }
.rnv-faixa a { color: var(--turq-300); }

/* Título com a barra turquesa à esquerda */
.rnv-titulo-secao {
  border-left: 4px solid var(--turq-500);
  padding-left: var(--e-4);
}

/* ------------------------------------------------------------ 4. BOTÕES */
.rnv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--alvo-toque);
  padding-inline: var(--e-6);
  border: none;
  border-radius: var(--raio-md);
  font-family: var(--fonte-texto);
  font-size: var(--txt-base);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-rapido), border-color var(--t-rapido),
              transform var(--t-rapido);
}
.rnv-btn:active { transform: translateY(1px); }
.rnv-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.rnv-btn--primario {
  background: var(--navy-500);
  color: var(--texto-invertido);
}
.rnv-btn--primario:hover:not(:disabled) { background: var(--navy-600); }

.rnv-btn--secundario {
  background: transparent;
  color: var(--navy-500);
  border: 1.5px solid var(--navy-500);
}
.rnv-btn--secundario:hover:not(:disabled) { background: var(--navy-50); }

/* Acento: texto NAVY sobre turquesa. Branco sobre turquesa reprova (2,4:1) */
.rnv-btn--acento {
  background: var(--turq-500);
  color: var(--navy-900);
}
.rnv-btn--acento:hover:not(:disabled) { background: var(--turq-400); }

.rnv-btn--texto {
  background: transparent;
  color: var(--acento-texto);
  padding-inline: var(--e-3);
}
.rnv-btn--texto:hover:not(:disabled) { background: var(--turq-50); }

/* ------------------------------------------------------------ 5. CAMPOS */
.rnv-campo { display: block; margin-bottom: var(--e-4); }

.rnv-campo > label {
  display: block;
  margin-bottom: var(--e-2);
  font-size: var(--txt-sm);
  font-weight: 600;
  color: var(--texto-forte);
}

.rnv-campo input,
.rnv-campo select,
.rnv-campo textarea {
  width: 100%;
  min-height: var(--alvo-toque);
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-md);
  background: var(--superficie);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: var(--txt-base);
  transition: border-color var(--t-rapido), box-shadow var(--t-rapido);
}
.rnv-campo textarea { min-height: 120px; resize: vertical; }

.rnv-campo input:focus,
.rnv-campo select:focus,
.rnv-campo textarea:focus {
  outline: none;
  border-color: var(--turq-500);
  box-shadow: var(--anel-foco);
}

.rnv-campo input[aria-invalid="true"] { border-color: var(--erro); }
.rnv-campo .rnv-ajuda { display: block; margin-top: var(--e-1); font-size: var(--txt-sm); color: var(--texto-suave); }
.rnv-campo .rnv-erro  { display: block; margin-top: var(--e-1); font-size: var(--txt-sm); color: var(--erro); font-weight: 500; }

/* -------------------------------------------------------------- 6. CARD */
.rnv-card {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-1);
  padding: var(--e-6);
}
.rnv-card--destaque { border-top: 3px solid var(--turq-500); }
a.rnv-card { display: block; color: inherit; text-decoration: none; transition: box-shadow var(--t-medio), transform var(--t-medio); }
a.rnv-card:hover { box-shadow: var(--sombra-2); transform: translateY(-2px); text-decoration: none; }

.rnv-grade {
  display: grid;
  gap: var(--e-6);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* --------------------------------------------------- 7. CHIP E ETIQUETA */
.rnv-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  padding: var(--e-1) var(--e-3);
  border-radius: var(--raio-full);
  background: var(--navy-50);
  color: var(--navy-700);
  font-size: var(--txt-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.rnv-chip--acento  { background: var(--turq-100); color: var(--turq-900); }
.rnv-chip--ok      { background: var(--ok-bg);      color: var(--ok); }
.rnv-chip--atencao { background: var(--atencao-bg); color: var(--atencao); }
.rnv-chip--erro    { background: var(--erro-bg);    color: var(--erro); }

/* Estado nunca é só cor: o ::before entrega o sinal em texto */
.rnv-chip--ok::before      { content: "●"; }
.rnv-chip--atencao::before { content: "▲"; }
.rnv-chip--erro::before    { content: "■"; }

/* ------------------------------------------------------------ 8. TABELA */
.rnv-tabela { width: 100%; border-collapse: collapse; font-size: var(--txt-sm); }
.rnv-tabela th {
  background: var(--navy-50);
  color: var(--navy-700);
  font-size: var(--txt-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: left;
  padding: var(--e-3);
  border-bottom: 1px solid var(--borda-forte);
}
.rnv-tabela td { padding: var(--e-3); border-bottom: 1px solid var(--borda); }
.rnv-tabela tbody tr:hover { background: var(--navy-50); }
.rnv-tabela .num { text-align: right; }
.rnv-tabela-rolagem { overflow-x: auto; }

/* -------------------------------------------------------------- 9. AVISO */
.rnv-aviso {
  display: flex;
  gap: var(--e-3);
  padding: var(--e-4);
  border-radius: var(--raio-md);
  border-left: 4px solid var(--info);
  background: var(--info-bg);
  color: var(--texto-forte);
}
.rnv-aviso--ok      { border-color: var(--ok);      background: var(--ok-bg); }
.rnv-aviso--atencao { border-color: var(--atencao); background: var(--atencao-bg); }
.rnv-aviso--erro    { border-color: var(--erro);    background: var(--erro-bg); }

/* ------------------------------------------------------------ 10. MARCA */
.rnv-logo { display: block; height: 48px; width: auto; }
.rnv-logo--sm { height: 32px; }
.rnv-logo--lg { height: 72px; }
/* Área de respiro: nada encosta na logo */
.rnv-logo-area { padding: var(--e-6); }

/* Textura de meio-tom da marca — sempre discreta, atrás do conteúdo */
.rnv-textura-pontos {
  background-image: radial-gradient(var(--navy-200) 1px, transparent 1px);
  background-size: 16px 16px;
  opacity: .5;
}

/* Cunha diagonal navy — a assinatura de página do manual */
.rnv-cunha { position: relative; overflow: hidden; }
.rnv-cunha::after {
  content: "";
  position: absolute;
  right: 0; bottom: 0;
  width: 120px; height: 120px;
  background: var(--navy-500);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}

/* -------------------------------------------------------- 11. UTILIDADES */
.rnv-so-leitor {          /* visível a leitor de tela, invisível na tela */
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.rnv-medida { max-width: var(--largura-texto); }
.rnv-centro { margin-inline: auto; }

/* ------------------------------------------------ 12. RESPONSIVO */
@media (max-width: 640px) {
  :root { --txt-3xl: 1.9375rem; --txt-4xl: 2.4375rem; }
  .rnv-container { padding-inline: var(--e-4); }
  .rnv-secao { padding-block: var(--e-12); }
  .rnv-card { padding: var(--e-4); }
}