/* ============================================================================
   MARP Consulting — identidade visual dos portais (administração e cliente)
   Base: logotipo (azul-marinho #002641 + dourado #DA9E00), assinatura
   "Tecnologia que conecta, transforma e realiza." e Template Marp (DM Sans).
   Claro por padrão; escuro automático (prefers-color-scheme) ou forçado por
   data-theme="dark|light" no <html>.
   ========================================================================== */
@import url(/static/fonts.css);

:root{
  /* marca */
  --navy:#002641; --navy-2:#01314F; --navy-3:#14507F;
  --gold:#DA9E00; --gold-soft:#F6E2A8;

  /* superfícies e texto (claro) */
  --bg:#F6F8FB; --panel:#FFFFFF; --panel-2:#F9FBFD; --panel-3:#EDF1F6;
  --line:#E3E8EF; --line-2:#CBD5E1;
  --text:#0D1B2A; --muted:#5B6B7C; --muted-2:#7B8CA0;

  /* ação e destaque */
  --accent:#DA9E00;          /* decorativo: barras, indicadores, ícones */
  --accent-ink:#8A6200;      /* dourado legível sobre claro (texto) */
  --accent-2:#14507F;
  --link:#0B5C8E; --link-hover:#002641;
  --primary:#002641; --primary-hover:#0A3A5F; --primary-ink:#FFFFFF;
  --ring:rgba(218,158,0,.50);

  /* estados */
  --ok:#1B7F4D;   --ok-bg:#E4F4EB;   --ok-line:#B7E0C8;
  --warn:#A86400; --warn-bg:#FFF2D9; --warn-line:#F1D192;
  --crit:#C0392B; --crit-bg:#FCE9E6; --crit-line:#F2BDB6;
  --info:#0B5C8E; --info-bg:#E3F0F8; --info-line:#B6D5E9;

  /* barra lateral e topo do portal do cliente (sempre azul-marinho) */
  --side-bg:#002641; --side-bg-2:#00314F; --side-line:#12466B;
  --side-text:#C9D8E6; --side-text-strong:#FFFFFF; --side-muted:#8FA9C0;

  --radius:16px; --radius-s:10px;
  --shadow:0 1px 2px rgba(0,38,65,.06),0 4px 14px rgba(0,38,65,.06);
  --shadow-2:0 2px 6px rgba(0,38,65,.10),0 14px 34px rgba(0,38,65,.14);

  --font:"DM Sans",Poppins,"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
  color-scheme:light;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#04121D; --panel:#06202F; --panel-2:#082A3D; --panel-3:#0B3349;
    --line:#0E3A52; --line-2:#14506E;
    --text:#EAF2F8; --muted:#8FA9BD; --muted-2:#6D879B;
    --accent:#E5AB12; --accent-ink:#F0BE3C; --accent-2:#6CC0EE;
    --link:#6CC0EE; --link-hover:#FFFFFF;
    --primary:#DA9E00; --primary-hover:#E8B02A; --primary-ink:#1A1200;
    --ring:rgba(240,190,60,.55);
    --ok:#5FD18F;   --ok-bg:rgba(95,209,143,.12);   --ok-line:rgba(95,209,143,.32);
    --warn:#F0B24B; --warn-bg:rgba(240,178,75,.12); --warn-line:rgba(240,178,75,.34);
    --crit:#FF7B6B; --crit-bg:rgba(255,123,107,.12); --crit-line:rgba(255,123,107,.36);
    --info:#6CC0EE; --info-bg:rgba(108,192,238,.12); --info-line:rgba(108,192,238,.32);
    --side-bg:#001B2F; --side-bg-2:#022540; --side-line:#0D3552;
    --shadow:0 1px 2px rgba(0,0,0,.35),0 6px 18px rgba(0,0,0,.30);
    --shadow-2:0 2px 6px rgba(0,0,0,.45),0 18px 40px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#04121D; --panel:#06202F; --panel-2:#082A3D; --panel-3:#0B3349;
  --line:#0E3A52; --line-2:#14506E;
  --text:#EAF2F8; --muted:#8FA9BD; --muted-2:#6D879B;
  --accent:#E5AB12; --accent-ink:#F0BE3C; --accent-2:#6CC0EE;
  --link:#6CC0EE; --link-hover:#FFFFFF;
  --primary:#DA9E00; --primary-hover:#E8B02A; --primary-ink:#1A1200;
  --ring:rgba(240,190,60,.55);
  --ok:#5FD18F;   --ok-bg:rgba(95,209,143,.12);   --ok-line:rgba(95,209,143,.32);
  --warn:#F0B24B; --warn-bg:rgba(240,178,75,.12); --warn-line:rgba(240,178,75,.34);
  --crit:#FF7B6B; --crit-bg:rgba(255,123,107,.12); --crit-line:rgba(255,123,107,.36);
  --info:#6CC0EE; --info-bg:rgba(108,192,238,.12); --info-line:rgba(108,192,238,.32);
  --side-bg:#001B2F; --side-bg-2:#022540; --side-line:#0D3552;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 6px 18px rgba(0,0,0,.30);
  --shadow-2:0 2px 6px rgba(0,0,0,.45),0 18px 40px rgba(0,0,0,.5);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--text);
  font:15px/1.55 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover);text-decoration:underline}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.01em;color:var(--text)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
::selection{background:var(--gold-soft);color:#002641}

.muted{color:var(--muted)}
.small{font-size:12.5px}
.mono{font-family:var(--mono);font-size:13px}
.right{text-align:right}.center{text-align:center}.nowrap{white-space:nowrap}
.mt{margin-top:16px}.mt-s{margin-top:8px}.mb{margin-bottom:16px}

/* ícones lineares (sprite /static/icons.svg) */
.ico{
  width:1.15em;height:1.15em;flex:0 0 auto;vertical-align:-.2em;
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
h2 .ico,h3 .ico{color:var(--accent);margin-right:6px;vertical-align:-.18em}

/* assinatura da marca: filete dourado */
.gold-rule{height:3px;width:44px;border-radius:2px;background:var(--gold)}
