/* ============================================================
   SECRETARIA — estilos específicos
============================================================ */

body { background: #F0F2F5; min-height: 100vh; display: flex; flex-direction: column; }

/* ── Topbar ── */
.sec-topbar {
  height: 60px;
  background: var(--green-dark);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px;
  position: sticky; top: 0; z-index: 200;
  box-shadow: 0 2px 12px rgba(0,0,0,.2);
  flex-shrink: 0;
}
.topbar-logo { display:flex; align-items:center; gap:12px; text-decoration:none; }
.topbar-logo img { height:36px; }
.topbar-logo .name { font-size:16px; font-weight:700; color:#fff; }
.topbar-logo .area { font-size:10px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--olive-light); display:block; }
.topbar-right { display:flex; align-items:center; gap:12px; }
.user-chip { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.12); border-radius:20px; padding:5px 12px 5px 6px; }
.user-avatar { width:28px; height:28px; border-radius:50%; background:var(--gold); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#fff; flex-shrink:0; }
.user-chip span { font-size:13px; font-weight:600; color:rgba(255,255,255,.9); }
.btn-topbar {
  padding:6px 14px; border-radius:8px; font-size:13px; font-weight:600;
  font-family:var(--font); cursor:pointer; border:none; transition:background .2s;
}
.btn-out { background:rgba(255,255,255,.12); color:#fff; }
.btn-out:hover { background:rgba(255,255,255,.22); }

/* ── Layout ── */
.sec-layout { display:flex; flex:1; }

.sidebar {
  width: 220px; background:#fff; border-right:1px solid var(--gray-light);
  padding:24px 0; flex-shrink:0;
}
.sidebar-title { font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--gray-mid); padding:0 24px; margin-bottom:8px; }
.sidebar-link {
  display:flex; align-items:center; gap:10px;
  padding:9px 16px; font-size:14px; font-weight:500; color:var(--text-mid);
  text-decoration:none; cursor:pointer; border:none; background:none;
  width:100%; text-align:left; font-family:var(--font); border-radius:0;
  transition:background .15s, color .15s;
}
.sidebar-link:hover, .sidebar-link.active { background:rgba(26,92,42,.08); color:var(--green-dark); }
.sidebar-link .ico { font-size:16px; width:22px; text-align:center; }

/* ── Conteúdo ── */
.sec-content { flex:1; padding:32px 36px; overflow-y:auto; }

/* Stats row */
.stats-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; margin-bottom:32px; }
.stat-card { background:#fff; border-radius:16px; padding:20px; box-shadow:0 1px 8px rgba(0,0,0,.06); border:1px solid rgba(0,0,0,.04); }
.stat-card .s-ico { font-size:22px; margin-bottom:8px; }
.stat-card .s-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--gray-mid); margin-bottom:6px; }
.stat-card .s-val { font-size:34px; font-weight:800; color:var(--text-dark); letter-spacing:-1px; line-height:1; }

/* ── Toolbar da listagem ── */
.list-toolbar {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-bottom:20px;
}
.list-toolbar h2 { font-size:20px; font-weight:700; flex:1; }
.filter-group { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.filter-select, .filter-input {
  padding:8px 12px; border:1.5px solid var(--gray-light); border-radius:10px;
  font-size:13px; font-family:var(--font); background:#fff; color:var(--text-dark);
  outline:none; transition:border-color .2s;
}
.filter-select:focus, .filter-input:focus { border-color:var(--green-dark); }

.btn-primary {
  display:inline-flex; align-items:center; gap:7px;
  background:var(--green-dark); color:#fff; border:none;
  padding:9px 18px; border-radius:10px; font-size:14px; font-weight:700;
  font-family:var(--font); cursor:pointer; transition:background .2s;
  white-space:nowrap;
}
.btn-primary:hover { background:var(--green-mid); }

/* ── Tabela de relatórios ── */
.section-card { background:#fff; border-radius:16px; box-shadow:0 1px 8px rgba(0,0,0,.06); border:1px solid rgba(0,0,0,.04); overflow:hidden; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
thead th { font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--gray-mid); padding:12px 20px; text-align:left; background:var(--gray-bg); border-bottom:1px solid var(--gray-light); white-space:nowrap; }
tbody td { padding:14px 20px; font-size:14px; color:var(--text-dark); border-bottom:1px solid rgba(0,0,0,.045); vertical-align:middle; }
tbody tr:last-child td { border-bottom:none; }
tbody tr:hover td { background:rgba(26,92,42,.025); }

/* Status badge */
.badge {
  display:inline-block; font-size:10px; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; padding:4px 10px; border-radius:6px;
}
.badge-rascunho { background:rgba(100,100,100,.1); color:#555; }
.badge-enviado  { background:rgba(26,92,42,.12); color:var(--green-dark); }
.badge-arquivado{ background:rgba(200,149,42,.12); color:#8B6010; }

/* Ações */
.row-actions { display:flex; gap:6px; }
.tbl-btn {
  padding:5px 11px; border-radius:7px; font-size:11px; font-weight:700;
  font-family:var(--font); cursor:pointer; border:none; transition:opacity .2s; white-space:nowrap;
}
.tbl-btn:hover { opacity:.75; }
.btn-view   { background:rgba(26,92,42,.1); color:var(--green-dark); }
.btn-edit   { background:rgba(100,100,200,.1); color:#3355AA; }
.btn-print  { background:rgba(200,149,42,.12); color:#8B6010; }
.btn-del    { background:rgba(220,50,50,.1); color:#CC3333; }

/* Empty state */
.empty-state { text-align:center; padding:60px 20px; color:var(--gray-mid); }
.empty-state .e-ico { font-size:48px; margin-bottom:12px; opacity:.5; }
.empty-state p { font-size:15px; }

/* ════════════════════════════════════════
   DRAWER (formulário lateral)
════════════════════════════════════════ */
.drawer-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.45);
  z-index:300; transition:opacity .25s;
}
.drawer-overlay.open { display:block; }

.drawer {
  position:fixed; top:0; right:-100%; bottom:0;
  width:min(680px,100vw); background:#fff;
  z-index:400; overflow-y:auto;
  transition:right .3s cubic-bezier(.25,.46,.45,.94);
  display:flex; flex-direction:column;
}
.drawer.open { right:0; }

.drawer-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 28px; border-bottom:1px solid var(--gray-light);
  position:sticky; top:0; background:#fff; z-index:1; flex-shrink:0;
}
.drawer-head h3 { font-size:19px; font-weight:700; }
.btn-close {
  width:34px; height:34px; border-radius:50%; border:none;
  background:var(--gray-bg); display:flex; align-items:center; justify-content:center;
  font-size:18px; cursor:pointer; transition:background .2s;
}
.btn-close:hover { background:var(--gray-light); }

.drawer-body { padding:28px; flex:1; }

/* Seções do formulário */
.form-section { margin-bottom:28px; }
.form-section-title {
  font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  color:var(--green-dark); padding-bottom:8px;
  border-bottom:2px solid rgba(26,92,42,.12); margin-bottom:16px;
}
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-grid.cols-3 { grid-template-columns:1fr 1fr 1fr; }
.form-grid.cols-1 { grid-template-columns:1fr; }
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-group.span-2 { grid-column:span 2; }
.form-group label {
  font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--gray-mid);
}
.form-group input, .form-group select, .form-group textarea {
  padding:10px 13px; border:1.5px solid var(--gray-light); border-radius:10px;
  font-size:14px; font-family:var(--font); color:var(--text-dark);
  background:var(--gray-bg); outline:none; transition:border-color .2s, background .2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color:var(--green-dark); background:#fff;
}
.form-group textarea { resize:vertical; min-height:80px; }

/* Par label + valor (campos duplos em linha) */
.pair-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.pair-row.cols-3 { grid-template-columns:1fr 1fr 1fr; }

/* Footer do drawer */
.drawer-footer {
  padding:18px 28px; border-top:1px solid var(--gray-light);
  display:flex; gap:10px; justify-content:flex-end;
  position:sticky; bottom:0; background:#fff; flex-shrink:0;
}
.btn-cancel { padding:10px 20px; border-radius:10px; border:1.5px solid var(--gray-light); background:#fff; font-size:14px; font-weight:600; font-family:var(--font); cursor:pointer; color:var(--text-mid); }
.btn-save-draft { padding:10px 18px; border-radius:10px; border:1.5px solid var(--green-dark); background:#fff; color:var(--green-dark); font-size:14px; font-weight:700; font-family:var(--font); cursor:pointer; }
.btn-save { padding:10px 24px; border-radius:10px; border:none; background:var(--green-dark); color:#fff; font-size:14px; font-weight:700; font-family:var(--font); cursor:pointer; transition:background .2s; }
.btn-save:hover { background:var(--green-mid); }

/* ════════════════════════════════════════
   MODAL DE VISUALIZAÇÃO
════════════════════════════════════════ */
.modal-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.5);
  z-index:500; align-items:flex-start; justify-content:center;
  padding:30px 16px; overflow-y:auto;
}
.modal-overlay.open { display:flex; }
.modal-view {
  background:#fff; border-radius:20px; padding:36px; width:100%; max-width:700px;
  animation:fadeUp .3s both; margin:auto;
}
@keyframes fadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

/* ── Toast ── */
.toast {
  position:fixed; bottom:28px; right:28px;
  background:#1D1D1F; color:#fff; padding:12px 20px; border-radius:12px;
  font-size:14px; font-weight:500; box-shadow:0 4px 20px rgba(0,0,0,.25);
  transform:translateY(80px); opacity:0; transition:transform .3s,opacity .3s; z-index:999;
}
.toast.show { transform:translateY(0); opacity:1; }
.toast.ok  { background:var(--green-dark); }
.toast.err { background:#CC3333; }

/* ════════════════════════════════════════
   IMPRESSÃO (@media print)
════════════════════════════════════════ */
@media print {
  body * { visibility: hidden !important; }
  #printArea, #printArea * { visibility: visible !important; }
  #printArea {
    position:fixed; top:0; left:0; width:100%; height:auto;
    background:#fff; padding:24px 32px;
    font-family: Arial, sans-serif;
    font-size: 12pt;
    color: #000;
  }
}

/* ══════════════════════════════════════════
   EDITOR FULLSCREEN — Relatório
══════════════════════════════════════════ */

.rlt-editor {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: #F0F2F5;
  display: none;
  flex-direction: column;
}
.rlt-editor.open { display: flex; }

.rlt-editor-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 56px;
  background: #fff;
  border-bottom: 1px solid var(--gray-light);
  flex-shrink: 0;
  gap: 16px;
}

.editor-cancel {
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font);
  color: var(--gray-mid);
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 8px;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.editor-cancel:hover { background: var(--gray-bg); color: var(--text-dark); }

.editor-page-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-mid);
  flex: 1;
  text-align: center;
}

.editor-actions { display: flex; gap: 8px; align-items: center; }

.rlt-editor-body {
  flex: 1;
  overflow-y: auto;
  padding: 32px;
  max-width: 860px;
  width: 100%;
  margin: 0 auto;
}

/* ── Responsivo ── */
@media (max-width:900px) {
  .sidebar { display:none; }
  .sec-content { padding:20px 16px; }
  .form-grid, .pair-row { grid-template-columns:1fr; }
  .form-grid.cols-3, .pair-row.cols-3 { grid-template-columns:1fr 1fr; }
  .form-group.span-2 { grid-column:span 1; }
}
@media (max-width:480px) {
  .list-toolbar { flex-direction:column; align-items:flex-start; }
  .drawer-head h3 { font-size:16px; }
  .form-grid.cols-3, .pair-row.cols-3 { grid-template-columns:1fr; }
}