/* ══════════════════════════════════════════════════════════════════
   FERREIRINHA · PORTAL DE GESTÃO
   theme.css — SKIN GLOBAL MODERNO (v2)
   Carregado por último em cada página (após o <style> inline) para vencer
   a cascata. Muda apenas propriedades COSMÉTICAS (cor, sombra, canto, foco,
   transição, tipografia) — nunca layout (display/position/flex/grid).
   ══════════════════════════════════════════════════════════════════ */

/* ---------- 1. PALETA (mantém marca creme/marrom/dourado, mais limpa) ---------- */
:root{
  --br9:#211510; --br8:#31221A; --br7:#7A5636; --br3:#B79B7C; --brown:#31221A; --marrom:#31221A;
  --go5:#C69A45; --go4:#E0B96E; --go2:#EBD4A6; --go1:#F4E7CC; --go0:#FCFAF6;
  --gold:#C69A45; --accent:#C69A45;
  --cream:#EFEBE3; --cream2:#E6DDCC; --white:#FFFFFF; --surface:#FFFFFF; --bg:#ECE7DD;
  --rd6:#C43C2E; --red:#C43C2E; --vermelho:#C43C2E; --rd1:#FBEDEB;
  --gn6:#188A55; --green:#188A55; --verde:#188A55; --green-l:#E7F5EE;
  --tl6:#0E7C7B; --teal:#0E7C7B; --tl1:#E6F4F4;
  --orange:#EF6C2B; --yellow:#B8860B; --yellow-l:#FBF3DE;
  --blue:#2563EB; --purple:#7C3AED;
  --text:#211510; --muted:#7A5636; --c:#211510; --linha:#E6DDCC;
  --bd:rgba(45,30,20,.08); --border:rgba(45,30,20,.10);
  --shadow:0 10px 30px rgba(40,26,16,.10);
  --shadow-sm:0 3px 12px rgba(40,26,16,.07);
  --radius:18px;
}

/* ---------- 2. BASE ---------- */
html{ -webkit-text-size-adjust:100%; }
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  letter-spacing:.1px;
  /* fundo liso e limpo no lugar da textura antiga (visual moderno) */
  background-image:none !important;
  background-color:#EFEBE3 !important;
  background-attachment:scroll !important;
}
/* neutraliza a camada de textura sobre o body (ex.: home) — não afeta a
   tela de login, que tem fundo próprio no #loginOverlay */
body::before{ background:#EFEBE3 !important; background-image:none !important; }
::selection{ background:rgba(198,154,69,.30); color:var(--br9); }

/* Scrollbar moderna e discreta */
*{ scrollbar-width:thin; scrollbar-color:#cbb894 transparent; }
*::-webkit-scrollbar{ width:11px; height:11px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:#d0bd99; border-radius:10px; border:3px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:#b9a074; border:3px solid transparent; background-clip:content-box; }

/* ---------- 3. CARDS (profundidade e cantos claramente mais modernos) ---------- */
.card, .kcard, .kpi-card, .portal-card, .summary-card, .sum-card, .ccard,
.table-card, .form-card, .aniv-card, .card-box, .box, .tile{
  border-radius:18px !important;
  box-shadow:0 10px 30px rgba(40,26,16,.10) !important;
  border:1px solid rgba(45,30,20,.06) !important;
  transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease !important;
}
.card:hover, .kcard:hover, .kpi-card:hover, .portal-card:hover,
.summary-card:hover, .sum-card:hover, .ccard:hover, .tile:hover{
  box-shadow:0 18px 44px rgba(40,26,16,.17) !important;
  transform:translateY(-4px) !important;
  border-color:rgba(198,154,69,.40) !important;
}

/* Tiles de módulo da HOME — faz o ícone virar um selo dourado (toque moderno) */
.portal-card::before{ height:5px !important; background:linear-gradient(90deg,var(--go5),var(--go4)) !important; }
.card-icon{
  display:inline-flex !important; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:14px;
  background:linear-gradient(135deg,#F6ECD6,#EFDFBC);
  box-shadow:inset 0 0 0 1px rgba(198,154,69,.25);
  margin-bottom:14px !important;
}

/* ---------- 4. BOTÕES ---------- */
button, .btn, [class*="btn-"], [class*="btn_"]{
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease, opacity .16s ease !important;
  letter-spacing:.2px;
}
.btn, [class*="btn-"]{ border-radius:11px !important; }
button:hover, .btn:hover, [class*="btn-"]:hover{ transform:translateY(-2px); filter:brightness(1.04); box-shadow:0 8px 20px rgba(40,26,16,.16); }
button:active, .btn:active, [class*="btn-"]:active{ transform:translateY(0); box-shadow:none; }
button:disabled, .btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; filter:none; box-shadow:none; }

/* ---------- 5. CAMPOS DE FORMULÁRIO ---------- */
input, select, textarea{
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
  border-radius:11px !important;
}
input:focus, select:focus, textarea:focus{
  outline:none !important;
  border-color:var(--go5) !important;
  box-shadow:0 0 0 3.5px rgba(198,154,69,.22) !important;
}

/* ---------- 6. TABELAS ---------- */
table{ border-collapse:collapse; }
thead th{ letter-spacing:.5px; }
tbody tr{ transition:background .15s ease; }

/* ---------- 7. HEADERS / BARRAS SUPERIORES ---------- */
header, .hdr, .topbar, .navbar, .top-bar{
  box-shadow:0 4px 22px rgba(33,21,16,.16) !important;
}

/* ---------- 8. BADGES ---------- */
.badge, .pf-badge, .status-badge{ letter-spacing:.2px; }

/* ---------- 9. MODAIS (sombra mais profunda e moderna) ---------- */
.modal-box, .modal, .modal-banco-box, .modal-body{
  border-radius:20px !important;
  box-shadow:0 40px 90px rgba(18,11,7,.42) !important;
}

/* ---------- 10. LINKS ---------- */
a{ transition:color .15s ease, opacity .15s ease; }

/* ---------- Acessibilidade ---------- */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}