/* ═══════════════════════════════════════════════════════════════════════════════════════════
   JOHN K — TEMA v24 (o mesmo do Portal do Cliente) · SÓ APARÊNCIA
   Este arquivo não muda nenhum comportamento: só cor, fonte, espaçamento e disposição.
   Para voltar ao visual anterior basta remover a linha <link … tema.css> da tela.
   Paleta: noite #10233F (menu) · petróleo #0E6B66 (ações) · névoa #EDF1F5 (fundo)
           folha #FFFFFF (cartões) · grafite #18212F (texto). Fonte única: Hanken Grotesk.
   Telas: ≥1101px menu lateral completo · 861–1100px menu só com ícones (tablet) ·
          ≤860px menu recolhido com botão ☰ (celular), como já funcionava.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

:root{
  --font:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --noite:#10233F; --noite-2:#1A3254; --noite-3:#27426A; --realce:#5FD0C3;
  --blue:#0E6B66; --blue-dark:#0A5652; --blue-light:#E2F1EF; --blue-mid:#C4E3DE;
  --bg:#EDF1F5; --white:#FFFFFF; --surface:#FFFFFF;
  --gray-50:#F6F8FB; --gray-100:#EEF2F6; --gray-200:#DCE3EB; --gray-300:#C7D0DC;
  --gray-400:#8D98A9; --gray-500:#5B6779; --gray-600:#46536A; --gray-700:#2F3A4D; --gray-800:#18212F;
  --green:#067647; --green-bg:#E7F6EE; --green-border:#B5E4CB;
  --amber:#B45309; --amber-bg:#FFF6E5; --amber-border:#F5DC9C;
  --red:#B42318; --red-bg:#FDEEEC; --red-border:#F6CBC6;
  --tinta:#18212F; --margem:transparent;
  --radius:18px; --radius-sm:12px;
  --shadow-sm:0 1px 2px rgba(16,35,63,.05),0 8px 24px -18px rgba(16,35,63,.20);
  --shadow:0 2px 4px rgba(16,35,63,.05),0 14px 32px -18px rgba(16,35,63,.28);
  --shadow-lg:0 24px 60px -24px rgba(16,35,63,.40);
}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font)!important;background:var(--bg)!important;color:var(--gray-800);font-size:14.5px;line-height:1.5;letter-spacing:0;
  -webkit-font-smoothing:antialiased;font-feature-settings:normal}
button,input,select,textarea{font-family:inherit}
td,.ov-kpi-val,.stat-info,.value{font-variant-numeric:tabular-nums}
::selection{background:#C4E3DE}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ── desfaz os enfeites do tema "Pasta & Razão" ── */
.card::before,.ov-card::before,.ov-kpi::before,.stat-card::before,.modal::before{display:none!important}
.appsb-item.ativo::after{display:none!important}
table:has(th) tbody tr td:first-child,.data-table td:first-child,.notif-table td:first-child,
.cli-lin,.ctd-lin,.cen-lin,.folha-func-row{box-shadow:none!important}
tfoot td,tr[class*="total"] td{border-bottom:1px solid var(--gray-200)!important;border-top:1px solid var(--gray-300)!important}
.folha-hol-total,.cen-tot span.v{border-bottom:0!important}
.card-title,.ctitle,.ov-card-title,.data-table th,.notif-table th,.appsb-sec,.cli-cab,.ctd-cab,.cen-cab,.regua-top b,.ctd-kpi span,
.tab-folha th{font-variant:normal!important;letter-spacing:0!important}
.pill,.badge-active,.badge-inactive,.cen-ret,
span[style*="border-radius:99px"][style*="font-size:1"]:not([style*="position:absolute"]),
span[style*="border-radius:999px"][style*="font-size:1"]:not([style*="position:absolute"]),
span[style*="border-radius:20px"][style*="font-size:1"]:not([style*="position:absolute"]),
span[style*="-bg)"][style*="border-radius:"][style*="font-size:1"]:not([style*="position:absolute"]),
span[style*="background:var(--blue-light)"][style*="border-radius:"][style*="font-size:1"]:not([style*="position:absolute"]){
  font-family:var(--font)!important;text-transform:none!important;letter-spacing:0!important;font-size:11.5px!important;font-weight:600!important;
  outline:none!important;transform:none!important;border:1px solid transparent!important;border-radius:999px!important;line-height:1.5}
.pill{background:var(--blue-light)!important;color:var(--blue-dark)}
.pill.lida,.badge-active{background:var(--green-bg)!important;color:var(--green)!important}
.pill.arquivada,.badge-inactive{background:var(--gray-100)!important;color:var(--gray-500)!important}
.pill.nao_lida{background:var(--red-bg)!important;color:var(--red)!important}
/* pílulas escritas direto nas telas: devolve o fundo claro da cor do texto (o tema anterior deixava transparente) */
span[style*="background:var(--green-bg)"]{background:var(--green-bg)!important}
span[style*="background:var(--amber-bg)"]{background:var(--amber-bg)!important}
span[style*="background:var(--red-bg)"]{background:var(--red-bg)!important}
span[style*="background:var(--blue-light)"]{background:var(--blue-light)!important}
span[style*="background:var(--gray-100)"]{background:var(--gray-100)!important}
.btn-pdf{background:var(--blue)!important;box-shadow:none!important;border-radius:10px}
.btn,.rf-pill,.btn-ev,.action-btn,.filter-btn,.spin-btn,button[style*="background:"]{box-shadow:none!important}
.btn:active,.rf-pill:active,.btn-ev:active,.action-btn:active,.filter-btn:active,.spin-btn:active,button[style*="background:"]:active{transform:translateY(1px)!important;box-shadow:none!important}
.ec-tab,.cfg-tab,.ff-tab{border:0!important;border-bottom:2.5px solid transparent!important;border-radius:0!important;background:transparent!important;
  margin-right:0;padding-top:11px!important;top:0!important;box-shadow:none!important;color:var(--gray-500)}
.ec-tab:hover,.cfg-tab:hover,.ff-tab:hover{color:var(--gray-800)}
.ec-tab-on,.cfg-tab-on,.ff-tab-on{color:var(--blue)!important;border-bottom-color:var(--blue)!important;background:transparent!important}
.ff-inp,.form-control,.period-input,.cli-busca{border:1px solid var(--gray-200)!important;border-radius:12px!important;background:var(--gray-50)!important}
.ff-inp:focus,.form-control:focus,.period-input:focus{border-color:var(--blue)!important;background:#fff!important;box-shadow:0 0 0 4px rgba(14,107,102,.12)!important}
.cli-busca:focus-within{border-color:var(--blue)!important;background:#fff!important}
.folha-func-av{font-family:var(--font)!important}

/* ── campos (inclusive os escritos direto nas telas) ── */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),select,textarea{
  font-family:var(--font);background-color:var(--gray-50)}
input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,select:focus,textarea:focus{background-color:#fff}
input[type=checkbox],input[type=radio]{accent-color:var(--blue)}

/* ── botões ── */
.btn{border-radius:12px;font-weight:600;padding:10px 16px;min-height:40px;font-size:13.5px}
.btn-primary{background:var(--blue)!important;color:#fff!important;border:0}
.btn-primary:hover{background:var(--blue-dark)!important;filter:none;transform:none}
.btn-ghost{background:#fff;color:var(--gray-700);border:1px solid var(--gray-200)}
.btn-ghost:hover{background:var(--gray-50);border-color:var(--gray-300)}
.btn-mini{min-height:0;padding:4px 9px;border-radius:8px}
/* azul antigo escrito direto nas telas → petróleo (fundos e textos; nunca troca texto de botão colorido) */
[style*="background:#2563eb"],[style*="background: #2563eb"],[style*="background:#3b5bdb"],[style*="background:#1d4ed8"],[style*="background:#1e6ff1"],
[style*="background-color:#2563eb"],[style*="linear-gradient(135deg,var(--blue)"],[style*="linear-gradient(135deg,#2563eb"],[style*="linear-gradient(135deg, #2563eb"]{
  background:var(--blue)!important}
[style*="background:#eff6ff"],[style*="background:#dbeafe"],[style*="background:#e0e7ff"],[style*="background:#eef2ff"]{background:var(--blue-light)!important}
[style^="color:#2563eb"],[style*=";color:#2563eb"],[style*="; color:#2563eb"],[style^="color:#1e40af"],[style*=";color:#1e40af"],
[style^="color:#1d4ed8"],[style*=";color:#1d4ed8"],[style^="color:#3b5bdb"],[style*=";color:#3b5bdb"]{color:var(--blue)!important}
[style*="border:1px solid #bfdbfe"],[style*="border:1.5px solid #bfdbfe"],[style*="border-color:#bfdbfe"]{border-color:var(--blue-mid)!important}

/* ── superfícies ── */
.card,.ov-card,.ov-kpi,.stat-card,.folha-card,.regua,.amc{background:var(--white);border:1px solid var(--gray-200)!important;border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.stat-card:hover,.ov-kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.card-title,.ctitle{font-size:15px;font-weight:700;color:var(--gray-800);letter-spacing:-.01em}
.ov-card-title{font-size:14px;font-weight:700;color:var(--gray-800)}
.stat-info .label{text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:600;color:var(--gray-500)}
.stat-info .value,.ov-kpi-val{font-weight:700;letter-spacing:-.02em}
.stat-icon,.ov-kpi-ic{border-radius:14px}
.data-table th,.notif-table th{font-size:12px;font-weight:600;color:var(--gray-500);text-transform:none;background:var(--gray-50);border-bottom:1px solid var(--gray-200)}
.data-table td,.notif-table td{border-bottom-color:var(--gray-100)}
table:has(th) td{border-bottom-color:var(--gray-100)}
table tr:hover td{background-color:rgba(14,107,102,.035)}
.cli-cab,.ctd-cab,.cen-cab{background:var(--gray-50)!important;color:var(--gray-500)!important;border-color:var(--gray-200)!important;font-size:12px!important}
.cli-lin:hover,.ctd-lin:hover,.cen-lin:hover,.folha-func-row:hover{background:var(--gray-50)!important}
.cli-tit h2{font-family:var(--font)!important;font-weight:700!important;font-size:20px!important;color:var(--gray-800)!important}
.cli-chip.on{background:var(--noite)!important;border-color:var(--noite)!important}
.cli-mais,.cli-abrir{border-radius:12px!important;background:#fff!important;border-color:var(--gray-200)!important}

/* ── janelas ── */
.modal,.error-box{border-radius:22px!important;border:0!important;box-shadow:var(--shadow-lg)!important;background:var(--white)!important}
.modal-title{font-family:var(--font)!important;font-weight:700!important;font-size:19px!important;color:var(--gray-800)!important}
.modal-overlay,#error-modal{background:rgba(16,35,63,.48)!important}
#toast{background:var(--noite);border-radius:14px}
.mp-field{background:#fff!important;border:1px solid var(--gray-200)!important;color:var(--gray-800)!important;border-radius:12px!important;box-shadow:none!important}
.mp-mes.mp-sel{background:var(--blue)!important;border-color:var(--blue)!important;box-shadow:none!important}
.mp-mes:hover{background:var(--blue-light)!important;color:var(--blue-dark)!important;border-color:var(--blue-mid)!important}
.mp-mes.mp-hoje{border-color:var(--blue-mid)!important;color:var(--blue)!important}
.mp-hoje-btn{color:var(--blue)!important}
#sate-progress-bar{background:var(--noite)!important}

/* ═════════ ESTRUTURA DE APP ═════════ */
.appsb{background:var(--noite)!important;color:#B9C6DA;width:252px;border:0}
.appsb-brand{padding:18px 16px 14px!important}
.appsb-sec{color:#7F92AE!important;font-size:11px!important;font-weight:700;text-transform:none!important;padding:16px 22px 6px!important}
.appsb-item{margin:2px 12px;padding:10px 12px!important;border-radius:12px;border-left:0!important;color:#B9C6DA!important;font-size:14.5px;gap:12px}
.appsb-item .ic svg{width:19px;height:19px}
.appsb-item:hover{background:var(--noite-2)!important;color:#fff!important}
.appsb-item.ativo{background:var(--noite-3)!important;color:#fff!important;box-shadow:inset 3px 0 0 var(--realce)}
.appsb-foot{border-top:1px solid rgba(255,255,255,.08)!important}
.appsb-av{background:var(--blue)!important;border-radius:12px}
.appsb-foot .btn-ghost{background:transparent!important;color:#DCE5F2!important;border-color:rgba(255,255,255,.18)!important}
.appsb-foot .btn-ghost:hover{background:var(--noite-2)!important}
.appmain{margin-left:252px}
.apptop{height:auto;min-height:68px;padding:12px 32px!important;background:rgba(237,241,245,.88)!important;
  backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--gray-200)!important;flex-wrap:wrap;gap:10px}
.apptop h1{font-family:var(--font)!important;font-size:22px!important;font-weight:700!important;letter-spacing:-.02em!important;color:var(--gray-800)!important}
.apptop .sub{font-size:13px;color:var(--gray-500)}
.container{max-width:1560px;padding:26px 32px 48px}

/* tablet (em pé ou notebook pequeno): menu só com ícones */
@media(min-width:861px) and (max-width:1100px){
  .appsb{width:96px}
  .appmain{margin-left:96px}
  .appsb-brand{padding:14px 10px 10px!important}
  .appsb-brand img{max-width:76px!important;margin:0 auto}
  .appsb-sec{display:none!important}
  .appsb-item{flex-direction:column;gap:5px!important;margin:3px 8px;padding:10px 4px!important;font-size:11px!important;line-height:1.2;text-align:center;justify-content:center;position:relative}
  .appsb-item.ativo{box-shadow:none}
  .appsb-item span[id$="-badge"],.appsb-item span[style*="margin-left:auto"]{position:absolute;top:4px;right:8px;margin:0!important}
  .appsb-foot{padding:12px 8px!important}
  .appsb-user>div:last-child,#escopo-box{display:none!important}
  .appsb-user{justify-content:center}
  .appsb-foot .btn-ghost{padding:8px 4px;font-size:12px}
  .apptop{padding:10px 22px!important}
  .container{padding:20px 22px 40px}
}
/* celular: menu recolhido (☰) */
@media(max-width:860px){
  .appmain{margin-left:0}
  .appsb{width:272px;box-shadow:none}
  .appsb.aberta{box-shadow:24px 0 60px -24px rgba(0,0,0,.5)}
  .apptop{padding:10px 14px!important;min-height:60px}
  .apptop h1{font-size:18px!important}
  .sbtoggle{width:40px;height:40px;border-radius:12px;background:#fff;border:1px solid var(--gray-200);align-items:center;justify-content:center;color:var(--gray-700)}
  .container{padding:14px 12px 90px}
  .card,.ov-card,.ov-kpi,.stat-card{border-radius:16px}
  .modal{padding:22px!important;width:calc(100vw - 24px)!important;max-width:calc(100vw - 24px)!important}
  .stat-info .value{font-size:22px}
  .data-table th,.data-table td{padding-left:12px;padding-right:12px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation-duration:.01ms!important}}

/* ═════════ TELA DE ENTRADA (login) ═════════ */
.pg-login{--ink:#18212F}
.pg-login .card{border-radius:24px!important;background:rgba(255,255,255,.95)!important;border:0!important}
.pg-login .title{font-weight:700;letter-spacing:-.02em}
.pg-login .subtitle,.pg-login label{text-transform:none!important;letter-spacing:0!important;font-size:12.5px!important;font-weight:600}
.pg-login input{border:1px solid var(--gray-200)!important;border-radius:12px!important;background:var(--gray-50)!important;font-size:15px}
.pg-login input:focus{border-color:var(--blue)!important;background:#fff!important;box-shadow:0 0 0 4px rgba(14,107,102,.12)!important}
.pg-login .input-wrap:focus-within svg{color:var(--blue)}
.pg-login .btn{background:var(--blue)!important;box-shadow:0 10px 24px -12px rgba(14,107,102,.7)!important;border-radius:14px!important;letter-spacing:0!important;font-weight:600!important}
.pg-login .btn:hover{background:var(--blue-dark)!important}
.pg-login .glow{background:radial-gradient(circle,rgba(14,107,102,.20),transparent 62%)!important}

/* ═════════ ETAPA 2 — cores escritas direto nas telas dos módulos ═════════
   Ações em azul/ciano/violeta → petróleo ou azul-noite; verde/vermelho/laranja de situação → tons do tema
   (o significado da cor continua o mesmo). O verde do WhatsApp (#25d366) é mantido de propósito. */
/* ações azuis e ciano → petróleo */
[style*="background:#0891b2"],[style*="background:#0369a1"],[style*="background:#1971c2"],[style*="background:#1c7ed6"],[style*="background:#228be6"],
[style*="background:#4263eb"],[style*="background:#0e7490"],[style*="background:#0f766e"],
[style*="linear-gradient(135deg,#2563eb"],[style*="linear-gradient(135deg,#1971c2"],[style*="linear-gradient(135deg,#0f766e"],
[style*="linear-gradient(135deg,#4263eb"],[style*="linear-gradient(135deg,#0891b2"],[style*="linear-gradient(90deg,var(--blue)"]{background:var(--blue)!important}
/* violeta (destaques de módulo) → azul-noite */
[style*="background:#7c3aed"],[style*="background:#6741d9"],[style*="background:#7048e8"],[style*="background:#4f46e5"],[style*="background:#6d28d9"],
[style*="linear-gradient(135deg,#7c3aed"],[style*="linear-gradient(135deg,#6741d9"],[style*="linear-gradient(135deg,#4f46e5"]{background:var(--noite-3)!important}
/* verdes de confirmação → verde do tema */
[style*="background:#16a34a"],[style*="background:#059669"],[style*="background:#0ca678"],[style*="background:#087f5b"],[style*="background:#15803d"],
[style*="linear-gradient(135deg,#16a34a"],[style*="linear-gradient(135deg,#059669"],[style*="linear-gradient(135deg,#0ca678"],[style*="linear-gradient(135deg,#087f5b"]{background:#067647!important}
/* vermelhos e laranjas de ação → tons do tema */
[style*="background:#dc2626"],[style*="background:#e03131"],[style*="background:#c92a2a"],[style*="linear-gradient(135deg,#e03131"]{background:#B42318!important}
[style*="background:#f59e0b"],[style*="background:#ea580c"],[style*="background:#e8590c"],[style*="linear-gradient(135deg,#ea580c"]{background:#B45309!important}
/* fundos claros (avisos e realces) → tons claros do tema */
[style*="background:#f0f9ff"],[style*="background:#ecfeff"],[style*="background:#e0f2fe"]{background:var(--blue-light)!important}
[style*="background:#f5f3ff"],[style*="background:#faf5ff"],[style*="background:#ede9fe"],[style*="linear-gradient(135deg,#f5f3ff"],
[style*="linear-gradient(135deg,#eff6ff"]{background:var(--gray-50)!important}
[style*="background:#f8fafc"],[style*="background:#fafbfc"],[style*="background:#fbfcfd"],[style*="background:#fcfdfe"],[style*="background:#f7f8fb"],
[style*="background:#f4f6f9"]{background:var(--gray-50)!important}
[style*="background:#f1f5f9"],[style*="background:#eef2f8"]{background:var(--gray-100)!important}
[style*="background:#fef2f2"],[style*="background:#fee2e2"],[style*="background:#fdecec"],[style*="background:#fff5f5"]{background:var(--red-bg)!important}
[style*="background:#fffbeb"],[style*="background:#fef3c7"],[style*="background:#fff7ed"],[style*="background:#fff4e6"],[style*="background:#fefce8"],
[style*="background:#fff9db"],[style*="linear-gradient(135deg,#fff7ed"],[style*="linear-gradient(135deg,#fff4e6"]{background:var(--amber-bg)!important}
[style*="background:#f0fdf4"],[style*="background:#dcfce7"],[style*="background:#ecfdf3"],[style*="background:#e6fcf5"],
[style*="linear-gradient(135deg,#f0fdf4"],[style*="linear-gradient(160deg,#fff,#f0fdf4"]{background:var(--green-bg)!important}
/* textos azuis/ciano/violeta (só quando a cor é do TEXTO, nunca o fundo) */
[style^="color:#0369a1"],[style*=";color:#0369a1"],[style^="color:#0891b2"],[style*=";color:#0891b2"],[style^="color:#1971c2"],[style*=";color:#1971c2"],
[style^="color:#0e7490"],[style*=";color:#0e7490"],[style^="color:#1c7ed6"],[style*=";color:#1c7ed6"],[style^="color:#4263eb"],[style*=";color:#4263eb"],
[style*="; color:#2563eb"],[style*=" color:#2563eb"]:not([style*="background"]){color:var(--blue)!important}
[style^="color:#7c3aed"],[style*=";color:#7c3aed"],[style^="color:#6741d9"],[style*=";color:#6741d9"],[style^="color:#5b21b6"],[style*=";color:#5b21b6"]{color:var(--noite-3)!important}
/* bordas */
[style*="solid #bae6fd"],[style*="solid #a5f3fc"],[style*="solid #c7d2fe"],[style*="solid #93c5fd"]{border-color:var(--blue-mid)!important}
[style*="solid #ddd6fe"],[style*="solid #c4b5fd"],[style*="solid #e9d5ff"]{border-color:var(--gray-200)!important}
/* sombras coloridas antigas de botões */
[style*="box-shadow:0 2px 8px rgba(37,99,235"],[style*="box-shadow:0 4px 14px rgba(37,99,235"],[style*="box-shadow:0 2px 8px rgba(124,58,237"]{box-shadow:none!important}
/* cartões brancos escritos direto nas telas ganham o canto do tema */
div[style*="background:#fff"][style*="border-radius:12px"],div[style*="background:#fff"][style*="border-radius:14px"],
div[style*="background:var(--white)"][style*="border-radius:12px"],div[style*="background:var(--white)"][style*="border-radius:14px"]{border-radius:16px!important}