/* ========================================================================
   TEMA (DARK/LIGHT) — TOKENS
   ------------------------------------------------------------------------
   • Somente tela. Não mexe no PDF.
   ======================================================================== */
:root{
  --c-bg:#0f172a;
  --c-card:#111827;
  --c-soft:#1f2937;
  --c-text:#e5e7eb;
  --c-dim:#cbd5e1;         /* ↑ contraste para textos secundários no dark */
  --c-accent:#22d3ee;
  --c-ok:#22c55e;
  --c-bad:#ef4444;
  --c-warn:#f59e0b;
  --c-line:#334155;
}
:root[data-theme="light"]{
  --c-bg:#f6f7fb;
  --c-card:#ffffff;
  --c-soft:#f0f3f8;
  --c-text:#0b1320;
  --c-dim:#56627a;         /* secundário visível no light */
  --c-accent:#0ea5e9;
  --c-ok:#16a34a;
  --c-bad:#dc2626;
  --c-warn:#d97706;
  --c-line:#d7dbe4;
}

/* ========================================================================
   BASE / TIPOGRAFIA / LINKS (TELA)
   ======================================================================== */
*{ box-sizing:border-box }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans";
  background:
    radial-gradient(1200px 500px at 10% -10%, #0b1225 0, transparent 60%),
    radial-gradient(1200px 600px at 130% 20%, #0e1a37 0, transparent 60%),
    var(--c-bg);
  color:var(--c-text);
}
:root[data-theme="light"] body{ background: var(--c-bg); }
a{ color:var(--c-accent); text-decoration:none }

/* Textos secundários com bom contraste nas duas modalidades */
.subtitle,
.form-text,
small,
.text-secondary,
.text-muted,
.kpi span { color: var(--c-dim) !important; }

label{ display:block; font-size:13px; color:var(--c-dim); margin-bottom:6px }

@media print {
  html[data-theme="dark"] { background:#fff !important; color:#000 !important; }
  #a4out, #a4out * { color:#000 !important; }
}



/* ========================================================================
   CARTÕES / INPUTS (TELA)
   ======================================================================== */
.card-neo{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  border:1px solid var(--c-line);
  border-radius:14px; padding:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.03);
}
.form-control, .form-select{
  background:#0b1220; color:var(--c-text); border:1px solid #283143; border-radius:10px;
}
:root[data-theme="light"] .form-control,
:root[data-theme="light"] .form-select{
  background:#fff; color:var(--c-text); border:1px solid #c7cfdb;
}
.form-control:focus, .form-select:focus{
  border-color:var(--c-accent); box-shadow:none;
}

/* ========================================================================
   TABELAS (TELA)
   ======================================================================== */
table{ width:100%; border-collapse:collapse }
th, td{ border-bottom:1px solid var(--c-line); padding:8px 6px; text-align:left; font-size:14px }
th{ background:#0c1324; color:#e2e8f0; font-weight:600 }
:root[data-theme="light"] th{ background:#f2f4f8; color:#2b2b2b }

/* ========================================================================
   PILLS / KPIs / FLUXO (TELA)
   ======================================================================== */
.pill{
  display:inline-block; padding:4px 8px; border-radius:999px; font-size:12px; line-height:1;
  border:1px solid var(--c-line); background:#0b1220
}
.ok{color:var(--c-ok)} .bad{color:var(--c-bad)} .warn{color:var(--c-warn)}
:root[data-theme="light"] .pill{ background:#fff; }

.kpi{
  display:flex; gap:12px; align-items:center; padding:10px 12px;
  background:#0c1324; border:1px solid var(--c-line); border-radius:12px
}
:root[data-theme="light"] .kpi{ background:#f7f9fc; }

.node{
  min-width:240px; flex:1 1 280px; background:#0c1324; border:1px solid var(--c-line); border-radius:14px; padding:12px;
}
:root[data-theme="light"] .node{ background:#ffffff; }
.node h6{ margin:0 0 6px }
.node p{ margin:0; font-size:0.95rem }

/* ========================================================================
   BOTÕES (TELA)
   ======================================================================== */
.btn-neo{
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(180deg, #1f9cc6, #1492bd);
  border:1px solid #147aa9;
  color:#fff; padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:600;
  box-shadow:
    0 0 0 0 rgba(34,211,238,0),
    0 6px 20px rgba(20,146,189,.35),
    inset 0 1px 0 rgba(255,255,255,.12);
  transition: box-shadow .25s ease, transform .08s ease, filter .25s ease;
}
.btn-neo:hover, .btn-neo:focus{
  box-shadow:
    0 0 32px 6px rgba(34,211,238,.35),
    0 10px 28px rgba(20,146,189,.45),
    inset 0 1px 0 rgba(255,255,255,.18);
  filter:brightness(1.03);
}
.btn-neo:active{ transform: translateY(1px) }

.btn-ghost{
  display:inline-flex; align-items:center; gap:8px;
  background:#0b1220; border:1px solid #2b3448; color:var(--c-text); border-radius:12px; font-weight:600;
  padding:10px 14px; cursor:pointer;
  box-shadow:0 0 0 0 rgba(34,211,238,0), inset 0 1px 0 rgba(255,255,255,.06);
  transition: box-shadow .25s ease, transform .08s ease, filter .25s ease, border-color .25s;
}
:root[data-theme="light"] .btn-ghost{ background:#ffffff; border-color:#cbd5e1; }
.btn-ghost:hover, .btn-ghost:focus{
  border-color: var(--c-accent);
  box-shadow: 0 0 24px 4px rgba(34,211,238,.25), inset 0 1px 0 rgba(255,255,255,.12);
  filter:brightness(1.02);
}
.btn-ghost:active{ transform: translateY(1px) }

.btn{
  box-shadow:0 6px 20px rgba(20,146,189,.35), inset 0 1px 0 rgba(255,255,255,.1);
}
.btn:active{ transform:translateY(1px) }

/* ========================================================================
   DECORAÇÕES E EFEITOS (TELA APENAS)
   ------------------------------------------------------------------------
   • Encapsulados em @media screen para não afetar o PDF.
   ======================================================================== */
@media screen {
  .bg-slice{
    background: url('img/slice.png') no-repeat center center;
    background-size: cover;
  }
  .text-3d-modern{
    font-weight:700; color:#f8f9fa;
    text-shadow:
      0 1px 2px rgba(0,0,0,.6),
      0 3px 6px rgba(0,0,0,.5),
      0 0 8px rgba(0,123,255,.6),
      0 0 20px rgba(0,123,255,.4);
    transition: text-shadow .4s ease, color .4s ease;
  }
  .bg-light .text-3d-modern{
    color:#212529;
    text-shadow:
      0 1px 2px rgba(255,255,255,.8),
      0 3px 6px rgba(0,0,0,.25),
      0 0 6px rgba(0,123,255,.5),
      0 0 14px rgba(0,123,255,.3);
  }
  .text-3d-modern:hover{
    color:#0d6efd;
    text-shadow:
      0 2px 4px rgba(0,0,0,.6),
      0 4px 12px rgba(0,0,0,.4),
      0 0 12px rgba(13,110,253,.9),
      0 0 28px rgba(13,110,253,.6);
  }
  @keyframes neonPulse{
    0%,100%{
      text-shadow:
        0 1px 2px rgba(0,0,0,.6),
        0 3px 6px rgba(0,0,0,.5),
        0 0 8px rgba(0,123,255,.8),
        0 0 20px rgba(0,123,255,.5);
    }
    50%{
      text-shadow:
        0 1px 2px rgba(0,0,0,.6),
        0 3px 6px rgba(0,0,0,.5),
        0 0 16px rgba(0,123,255,1),
        0 0 32px rgba(0,123,255,.8);
    }
  }
  .text-3d-neon{ color:#fff; animation: neonPulse 2s infinite; }

  .three-d-text{
    font-size:2.8rem;
    background: linear-gradient(90deg, #fff200, #ffa500, #ff6ec4);
    background-size:300% 300%;
    -webkit-background-clip:text; color:transparent;
    animation: sunlightPulse 6s infinite ease-in-out;
    text-shadow: 2px 2px 0 #00000055;
    letter-spacing:1.5px;
    margin-bottom:1rem;
  }
  @keyframes sunlightPulse{
    0%,100%{ transform:rotateX(10deg) rotateY(-10deg) scale(1); background-position:0% 50% }
    50%{    transform:rotateX(0) rotateY(0) scale(1.1);     background-position:100% 50% }
  }

  .glow-name{
    font-size:1rem; color:#fff; margin:0;
    animation: glowBright 2.8s infinite alternate ease-in-out;
    text-shadow: 0 0 10px #ffb347, 0 0 30px #ffcc70, 0 0 60px #ffeaa7, 0 0 100px #fff3b0;
  }
  @keyframes glowBright{
    0%{
      text-shadow: 0 0 10px #ffd580, 0 0 30px #ffb347, 0 0 60px #ffb347, 0 0 100px #fff2a6;
    }
    100%{
      text-shadow: 0 0 15px #fff5cc, 0 0 50px #ffd580, 0 0 100px #fff8d6, 0 0 150px #fffce1;
      transform: scale(1.04);
    }
  }
}

/* ========================================================================
   A4 — PREVIEW NA TELA (NÃO É PDF)
   ------------------------------------------------------------------------
   • Mantém o preview branco e legível no dark.
   ======================================================================== */
@media screen{
  .a4{
    background:#fff; color:#111;
    width:210mm; min-height:297mm;
    margin:0 auto;
    box-shadow:0 0 0.5cm rgba(0,0,0,.2);
    padding:12mm 16mm;
    box-sizing:border-box;
    position:relative;
  }
  .print-header{ border-bottom:1px solid #e5e7eb; }
  .print-footer{ border-top:1px solid #e5e7eb; }
}

/* ========================================================================
   PRINT A4 — HEADER/RODAPÉ FIXOS + MARGENS ABNT (PDF)
   ------------------------------------------------------------------------
   • BLOCO INTENCIONALMENTE INALTERADO para não “mexer no PDF”.
   • Se precisar ajustar o recuo do conteúdo na 2ª página em diante:
     edite apenas --m-top-rest.
   ======================================================================== */

  /* (Opcional) evita cortes ruins em blocos/tabelas/títulos */
  .a4 .sect, .a4 table { break-inside: avoid; page-break-inside: avoid; }
  .a4 h3 { break-after: avoid; page-break-after: avoid; }
}
   
@media print {
  :root{
    --h-header: 25mm;
    --h-footer: 15mm;
    --m-left:   25mm;
    --m-right:  18mm;
    --m-bottom: 5mm;
    --m-top-first: 5mm;
    --m-top-rest:  5mm;
  }
  @page:first { size:A4 portrait; margin: var(--m-top-first) var(--m-right) var(--m-bottom) var(--m-left); }
  @page       { size:A4 portrait; margin: var(--m-top-rest)  var(--m-right) var(--m-bottom) var(--m-left); }

  html, body { margin:0 !important; padding:0 !important; }
  .d-print-none{ display:none !important; }

  .a4{
    width:auto !important; min-height:auto !important;
    margin:0 !important; padding:0 !important;
    box-shadow:none !important; background:#fff !important; color:#000 !important;
    position:relative;
  }

  .a4 > .print-header,
  .a4 > .print-footer{
    position: fixed; left:0; right:0; background:#fff;
  }
  .a4 > .print-header{
    top:0; height:var(--h-header);
    border-bottom:0.2mm solid #ccc;
    display:flex; justify-content:space-between; align-items:flex-end;
    padding:4mm 0 2mm 0;
  }
  .a4 > .print-footer{
    bottom:0; height:var(--h-footer);
    border-top:0.2mm solid #ccc;
    display:flex; justify-content:space-between; align-items:center;
    padding:2mm 0 3mm 0;
    font-size:11px; color:#555;
  }

  .a4 > .page-body{ margin: calc(var(--h-header) + 2mm) 0 calc(var(--h-footer) + 2mm) 0; }

  .a4 .title{ font-size:16px !important; font-weight:700; }
  .a4 .subtitle{ font-size:11px !important; color:#666 !important; }
  .a4 .sect h3{ font-size:13px !important; margin:8px 0 6px !important; }
  .a4, .a4 p, .a4 li, .a4 td, .a4 th { font-size:11px !important; line-height:1.35; }

  .a4 table { width:100%; border-collapse:collapse; }
  .a4 th, .a4 td { border-bottom:0.2mm solid #ddd; padding:6px 4px; }
  .a4 .sect, .a4 table { page-break-inside:auto; break-inside:auto; }
  .a4 .sect h3{ page-break-after:avoid; break-after:avoid; }

  .page-numbers::after { content: "Página " counter(page) " / " counter(pages); }
}
@media print {
  /* --- Texto 100% preto no PDF --- */
  .a4, .a4 * { color:#000 !important; }             /* força preto em todo texto */
  .a4 a { color:#000 !important; text-decoration:underline; } /* links legíveis */
  .a4 .subtitle { color:#000 !important; }          /* garante subtítulo preto */
}