@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
/* =========================================================================
   Catena Vox — theme-modern.css   (v=20260629-modern-1)
   -------------------------------------------------------------------------
   Camada visual de SOBRESCRITA. Carregada DEPOIS de styles.css.
   - Não altera estrutura, diagramação, IDs, classes funcionais ou JS.
   - Login e primeiro-acesso são re-coloridos por CLASSES (styles.css).
   - O portal.html consome apenas as variáveis :root abaixo (os literais
     inline foram trocados por var() de forma semântica no próprio arquivo).
   Rollback: remover a referência a este arquivo nos 3 HTMLs.
   ========================================================================= */

:root{
  --cv-bg: #F4F7FB;
  --cv-surface: #FFFFFF;
  --cv-surface-soft: #F8FAFD;

  --cv-sidebar: #101827;
  --cv-sidebar-hover: #182235;
  --cv-sidebar-active: #22304A;

  --cv-text: #17233B;
  --cv-text-muted: #6B778C;
  --cv-text-soft: #8C97A8;
  --cv-text-inverse: #FFFFFF;

  --cv-primary: #2F6FED;
  --cv-primary-hover: #245FD4;
  --cv-primary-soft: #EAF1FF;

  --cv-border: #DCE4F0;
  --cv-border-soft: #E9EEF6;

  --cv-success: #2F7D57;
  --cv-success-soft: #E8F3ED;

  --cv-warning: #A66A00;
  --cv-warning-soft: #FFF4DC;

  --cv-danger: #A33A4A;
  --cv-danger-soft: #FAE9EC;

  --cv-shadow-sm: 0 2px 8px rgba(20, 33, 61, 0.06);
  --cv-shadow-md: 0 8px 24px rgba(20, 33, 61, 0.08);
  --cv-shadow-lg: 0 18px 48px rgba(20, 33, 61, 0.12);

  --cv-radius-sm: 8px;
  --cv-radius-md: 12px;
  --cv-radius-lg: 16px;

  --cv-font: "Manrope", "Hanken Grotesk", "Inter",
    -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* =========================================================================
   LOGIN + PRIMEIRO ACESSO  (index.html, primeiro-acesso/index.html)
   Sobrescreve cor/fonte/borda/sombra das classes existentes em styles.css.
   Mesma especificidade do styles.css; como este arquivo carrega depois,
   prevalece sem precisar de !important.
   ========================================================================= */

/* Base ------------------------------------------------------------------- */
body{
  font-family: var(--cv-font);
  color: var(--cv-text);
  background: var(--cv-bg);
}
.serif{ font-family: var(--cv-font); }

/* Tela de carregamento global ------------------------------------------- */
#loading{
  background: var(--cv-sidebar);
  color: var(--cv-text-inverse);
}
.spinner{
  border: 3px solid rgba(255,255,255,.25);
  border-top-color: var(--cv-primary);
}

/* Painel institucional --------------------------------------------------- */
.auth-side{
  background: radial-gradient(120% 90% at 20% 10%, #22304A 0%, #101827 55%, #0C1320 100%);
  color: var(--cv-text-inverse);
}
.auth-side .ornament{ border-color: rgba(255,255,255,.16); }
.auth-side .ornament.b{ border-color: rgba(255,255,255,.10); }
.brand .logo{ background: #0C1320; }
.brand .name{ color: var(--cv-text-inverse); }
.brand .sub{ color: rgba(255,255,255,.6); }
.auth-side .pitch h1{ color: var(--cv-text-inverse); }
.auth-side .pitch p{ color: rgba(255,255,255,.68); }
.auth-side .foot{ color: rgba(255,255,255,.45); }

/* Coluna dos formulários ------------------------------------------------- */
.auth-main{ background: var(--cv-bg); }
.card h2{ font-family: var(--cv-font); color: var(--cv-text); }
.card .lead{ color: var(--cv-text-muted); }

/* Campos ----------------------------------------------------------------- */
.field label{ color: var(--cv-text); }
.field input{
  border: 1px solid var(--cv-border);
  background: var(--cv-surface);
  color: var(--cv-text);
}
.field input:focus{
  border-color: var(--cv-primary);
  box-shadow: 0 0 0 3px rgba(47,111,237,.16);
}
.field input::placeholder{ color: var(--cv-text-soft); }
.toggle-eye{ color: var(--cv-text-soft); }
.toggle-eye:hover{ background: var(--cv-primary-soft); color: var(--cv-primary); }

.row-between{ }
.linkbtn{ color: var(--cv-primary); }

/* Botões ----------------------------------------------------------------- */
.btn{
  background: var(--cv-primary);
  color: var(--cv-text-inverse);
}
.btn:hover{ background: var(--cv-primary-hover); }
.btn .spinner{ border-top-color: #BFD4FF; }
.btn.ghost{
  background: transparent;
  color: var(--cv-text);
  border: 1px solid var(--cv-border);
}
.btn.ghost:hover{ background: var(--cv-surface-soft); }

/* Alertas / mensagens ---------------------------------------------------- */
.alert.err{ background: var(--cv-danger-soft); border: 1px solid var(--cv-danger); color: var(--cv-danger); }
.alert.ok{ background: var(--cv-success-soft); border: 1px solid var(--cv-success); color: var(--cv-success); }
.alert.info{ background: var(--cv-primary-soft); border: 1px solid var(--cv-primary); color: var(--cv-primary-hover); }

/* Cartão de identidade (primeiro acesso) -------------------------------- */
.identity{
  background: var(--cv-surface-soft);
  border: 1px solid var(--cv-border);
}
.identity .l{ color: var(--cv-text-soft); }
.identity .v{ color: var(--cv-text); }

.switch{ color: var(--cv-text-muted); }