/* === POP — Estilos principais (Wide, 3 colunas) — UPDATED === */
/* Reutiliza o estilo anterior sem alterações drásticas.
   Pequenos ajustes de utilidade foram incluídos ao final. */

:root{
  --caern-900:#002a5c;
  --caern-800:#003a7a;
  --caern-700:#004c97;
  --caern-600:#0060b6;
  --caern-500:#0074c7;
  --caern-100:#e6eef6;
  --ink:#0f172a;
  --muted:#475569;
  --bg:#f7fafc;
  --card:#ffffff;
  --ring:#cbd5e1;
  --shadow:0 8px 28px rgba(0,0,0,.08);
  --radius:18px;
  --toolbar-w:max(980px, min(1200px, 92vw));
  --toolbar-h:64px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:16px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  color:var(--ink);
  background:linear-gradient(180deg, #f9fbfd 0%, #f3f7fb 100%);
  padding-top: calc(var(--toolbar-h) + 20px);
  padding-bottom: 40px;
}

.mastbar{
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  width: var(--toolbar-w);
  background: #fff;
  border: 1px solid var(--ring);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  padding: 6px 8px;
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px;
}
.mast-left{display:flex; align-items:center; gap:10px}
.mast-right{display:flex; align-items:center; gap:10px}
.brand{display:flex; align-items:center; gap:10px}
.logo-mark{width:22px; height:22px; border-radius:6px; background:conic-gradient(from 90deg, #00b5ff, #0074c7, #004c97, #00b5ff)}
.brand-text{display:flex; flex-direction:column; line-height:1.1}
.brand-text small{color:var(--muted)}

.icon-btn{
  display:inline-grid; place-items:center; height:34px; width:34px; border-radius:10px;
  border:1px solid var(--ring); background:#fff; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.icon-btn:hover{background:#f8fafc}
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px;
  border:1px solid var(--ring); background:#fff; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.btn:hover{background:#f8fafc}
.btn.solid{background:linear-gradient(135deg, var(--caern-600), var(--caern-800)); color:#fff; border-color:transparent}
.btn.solid:hover{filter:brightness(1.03)}

.search-wrap{
  position:relative; display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--ring); border-radius:10px; padding:4px 8px 4px 8px;
  min-width:260px;
}
.search-wrap input{border:0; outline:0; min-width:240px; font:inherit; background:transparent}
.search-nav{display:flex; gap:4px; margin-left:6px}
.search-meta{position:absolute; right:86px; top:50%; transform:translateY(-50%); font-size:12px; color:var(--muted)}

.layout{display:grid; grid-template-columns:280px 1fr; min-height:calc(100vh - 62px)}
.sidebar{border-right:1px solid var(--ring); background:#fff9; backdrop-filter: blur(8px);}
.sidebar-head{display:flex; align-items:center; gap:8px; padding:14px 16px; color:var(--muted); border-bottom:1px solid var(--ring)}
.toc{display:flex; flex-direction:column; padding:8px}
.toc a{padding:8px 12px; border-radius:10px; color:var(--ink); text-decoration:none; font-size:14px}
.toc a:hover{background:#eef2f8}
.toc a.active{background: var(--caern-100); font-weight: 600; color: var(--caern-800);}
.sidebar-footer{padding:12px 16px; border-top:1px solid var(--ring); color:var(--muted)}

.content{
  padding:18px;
  display:grid; gap:16px;
  grid-template-columns: repeat(3, minmax(0,1fr));
  background:linear-gradient(180deg,#fcfeff 0%, #f8fbff 40%, #f4f8ff 100%)
}
@media (max-width: 1200px){ .content{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 800px){
  .content{ grid-template-columns: 1fr; }
  .mastbar{ width: calc(100% - 16px); left: 8px; right: 8px; transform: none; }
}

.card{background:var(--card); border:1px solid var(--ring); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px}
.hero{ grid-column: 1 / -1; }

/* Expanders */
.expander{border:1px solid var(--ring); border-radius:14px; background:#fff; overflow:hidden; margin:6px 0; box-shadow:0 4px 16px rgba(2,35,80,.06)}
.expander[open]{box-shadow:0 10px 28px rgba(2,35,80,.10)}
.expander > summary{
  list-style:none; cursor:pointer; padding:14px 16px;
  display:flex; align-items:center; gap:10px; color:var(--caern-800); font-weight:600;
  background:linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}
.expander > summary::-webkit-details-marker{display:none}
.caret{display:inline-grid; place-items:center; width:18px; height:18px; border-radius:6px; color:#fff; background:linear-gradient(135deg, var(--caern-500), var(--caern-700)); transform:rotate(0deg); transition:.2s}
.expander[open] > summary .caret{transform:rotate(90deg)}
.summary-desc{margin-left:auto; color:var(--muted); font-weight:500; font-size:13px}
.exp-content{padding:14px 16px 18px}

h2{margin:0; font-size:18px; display:flex; align-items:center; gap:8px}
.h2-icon .i{ width:22px; height:22px; border-radius:999px; display:inline-grid; place-items:center; font-size:14px; }
.i-blue{background:#e0f2ff; color:#0369a1}
.i-green{background:#e6f7ef; color:#0f9d58}
.i-amber{background:#fff7e6; color:#b45309}
.i-pink{background:#fde7f3; color:#be185d}
.i-indigo{background:#e8eaff; color:#4338ca}

.kpi{display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:12px; margin:12px 0 8px}
.kpi .item{border:1px solid var(--ring); background:#fff; border-radius:14px; padding:12px}
.kpi .label{font-size:12px; color:var(--muted)}
.kpi .value{font-size:18px; font-weight:700; color:var(--caern-800)}

.table{width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--ring); border-radius:12px; overflow:hidden}
.table thead th{position:sticky; top:0; background:var(--caern-100); color:var(--ink); text-align:left; padding:10px 12px; font-size:14px; z-index:1}
.table tbody td{padding:10px 12px; border-top:1px solid #e2e8f0; font-size:14px; vertical-align:top}
.table tbody tr:nth-child(odd){background:#fff}
.table tbody tr:nth-child(even){background:#fbfdff}
.table-wrap{overflow:auto}

.note{padding:10px 12px; border-left:4px solid var(--caern-600); background:#f1f8ff; border-radius:10px}
.footer{margin:10px 0 30px; text-align:center; color:var(--muted)}

mark{background:#ffec99; padding:0 2px}

/* Sidebar collapsed */
body.sidebar-collapsed .layout{grid-template-columns:0 1fr}
body.sidebar-collapsed .sidebar{width:0; padding:0; overflow:hidden; border-right:0}

/* Print styles */
@media print{
  .mastbar, .sidebar, .site-footer-fixed {display:none!important}
  body{background:#fff; padding-top: 0 !important; padding-bottom: 0 !important;}
  .layout{display:block}
  .content{padding:0; grid-template-columns: 1fr; display:block}
  .card{box-shadow:none}
  .expander{border:1px solid #ddd; break-inside:avoid}
  .exp-content{padding:10px 14px}
  h2{page-break-after:avoid}
  .table{ width:100% !important; border:1px solid #ddd !important; }
  .table thead th{ background:#f6f7f9 !important; color:#111 !important; }
}

/* Pequenas utilidades */
.muted{ color: var(--muted); font-size: 13px; }
.badge{display:inline-block; padding:4px 8px; border-radius:999px; background:#eef2f8; color:#334155; font-size:12px; border:1px solid var(--ring)}

.site-footer-fixed{
  position: fixed; left:0; right:0; bottom:0; z-index: 40;
  background: rgba(255,255,255,.95);
  border-top: 1px solid var(--ring);
  color: var(--muted);
  text-align: center;
  padding: 6px 10px;
  font-size: 13px;
  backdrop-filter: blur(6px);
}