:root{
  --bg:#fafafa;
  --panel:#ffffff;
  --panel2:#fcfcfd;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
  --shadow:0 10px 25px rgba(0,0,0,.08);
  --radius:14px;

  --badge-pendente-bg:#fff7ed; --badge-pendente-tx:#9a3412;
  --badge-analise-bg:#eff6ff;  --badge-analise-tx:#1d4ed8;
  --badge-concluido-bg:#ecfdf5;--badge-concluido-tx:#047857;

  /* PRIORIDADE */
  --prio-baixa-bg:#f3f4f6; --prio-baixa-tx:#374151;
  --prio-media-bg:#fffbeb; --prio-media-tx:#92400e;
  --prio-alta-bg:#fee2e2;  --prio-alta-tx:#991b1b;

  --danger-bg:#fee2e2; --danger-tx:#991b1b;

  /* helpers */
  --input-bg:#fff;
  --hover-bg:#f9fafb;
  --tableHeader-bg:#fcfcfd;
}

/* =========================
   TEMA ESCURO (override)
   ========================= */
:root[data-theme="dark"]{
  --bg:#0b0f14;
  --panel:#0f1621;
  --panel2: rgba(255,255,255,.03);
  --text:#e5e7eb;
  --muted:#9ca3af;
  --border:#243041;
  --shadow:0 12px 30px rgba(0,0,0,.35);

  --input-bg:#0f172a;
  --hover-bg: rgba(255,255,255,.06);
  --tableHeader-bg: rgba(255,255,255,.03);

  --badge-pendente-bg:#2a1d12; --badge-pendente-tx:#fdba74;
  --badge-analise-bg:#111b2e;  --badge-analise-tx:#93c5fd;
  --badge-concluido-bg:#0d241d;--badge-concluido-tx:#6ee7b7;

  --prio-baixa-bg:#1f2937; --prio-baixa-tx:#e5e7eb;
  --prio-media-bg:#2a210e; --prio-media-tx:#fcd34d;
  --prio-alta-bg:#2a1212;  --prio-alta-tx:#fca5a5;

  --danger-bg:#2a1212; --danger-tx:#fca5a5;
}

/* ===== dark: placeholder e options legíveis ===== */
:root[data-theme="dark"] ::placeholder{
  color: rgba(229,231,235,.45);
}
:root[data-theme="dark"] select option{
  background:#0f1621;
  color:#e5e7eb;
}

/* ===== dark: textos auxiliares sempre visíveis ===== */
:root[data-theme="dark"] .cell-muted,
:root[data-theme="dark"] .hint,
:root[data-theme="dark"] .field__label,
:root[data-theme="dark"] .userRow__meta,
:root[data-theme="dark"] .msgItem__meta,
:root[data-theme="dark"] .enunRow__meta{
  color: var(--muted) !important;
}

/* Garante que o atributo hidden SEMPRE esconda o elemento */
[hidden]{ display:none !important; }

*{ box-sizing:border-box; }
html,body{ height:100%; }

/* =========================
   Transição suave (toque)
   ========================= */
html, body, .app, .modal, .tableWrap, .popover,
.search, .tabs, .enunListScreen, .enunDetailScreen,
.enunNotionBox, .userRow{
  transition: background-color .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease;
}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:var(--bg);
  color:var(--text);
  line-height: 1.35;
}

.srOnly{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;
}

/* Overlay/Modal */
.overlay{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background: rgba(17,24,39,.55);
  backdrop-filter: blur(6px);
  z-index:1000;
}
.overlay--light{ background: rgba(17,24,39,.35); }

:root[data-theme="dark"] .overlay{
  background: rgba(0,0,0,.62);
}
:root[data-theme="dark"] .overlay--light{
  background: rgba(0,0,0,.46);
}

.modal{
  width:min(560px, 94vw);
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.modal__header{
  padding:18px 18px 10px;
  border-bottom:1px solid var(--border);
}

.modal__header--row{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
}

.modal__title{ font-weight:750; letter-spacing:-.2px; }
.modal__subtitle{ font-size:12.5px; color:var(--muted); margin-top:4px; }

.modal__body{
  display:flex; flex-direction:column; gap:12px;
  padding:18px;
}

.modal__actions{
  display:flex; align-items:center; gap:10px;
  margin-top:4px;
}

.spacer{ flex:1; }
.hint{ margin:0; font-size:12.5px; color:var(--muted); }

/* Brand */
.brand{ display:flex; align-items:center; gap:12px; }
.brand__logo{
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
}
.brand__title{ font-weight:650; letter-spacing:-.2px; }
.brand__subtitle{ font-size:12.5px; color:var(--muted); margin-top:2px; }

.brand--small .brand__logo{ width:34px; height:34px; }
.brand--small .brand__title{ font-size:14.5px; }
.brand--small .brand__subtitle{ font-size:12px; }

/* User pill */
.userPill{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--panel);
  font-size:13px;
  white-space: nowrap;
}
.userPill .dot{ color:#9ca3af; }
.muted{ color:var(--muted); }
.dot{ color:#9ca3af; }

/* Inputs/Buttons */
.field{ display:flex; flex-direction:column; gap:6px; }
.field__label{ font-size:12.5px; color:var(--muted); }
.field--compact{ gap:6px; }

.input,.select,.textarea{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  outline:none;
}
.textarea{ resize: vertical; }

.input:focus,.select:focus,.textarea:focus{
  border-color:#cbd5e1;
  box-shadow:0 0 0 3px rgba(148,163,184,.25);
}
:root[data-theme="dark"] .input:focus,
:root[data-theme="dark"] .select:focus,
:root[data-theme="dark"] .textarea:focus{
  border-color:#3b4b63;
  box-shadow:0 0 0 3px rgba(99,102,241,.18);
}
.input:focus-visible,.select:focus-visible,.textarea:focus-visible{ outline:none; }

.btn{
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  transition: transform .05s ease, background .12s ease, box-shadow .12s ease, filter .12s ease;
  user-select:none;
}
.btn:active{ transform: translateY(1px); }
.btn--primary{ background:#111827; border-color:#111827; color:#fff; }
.btn--secondary{ background:#f3f4f6; }
.btn--ghost{ background:transparent; }
.btn--danger{ background: var(--danger-bg); color: var(--danger-tx); border-color: rgba(153,27,27,.25); }

:root[data-theme="dark"] .btn--primary{ background:#e5e7eb; border-color:#e5e7eb; color:#0b0f14; }
:root[data-theme="dark"] .btn--secondary{ background:#121b28; }
:root[data-theme="dark"] .btn--ghost{ background:transparent; }

.btn:hover{ background:#f9fafb; }
.btn--primary:hover{ background:#0b1220; }
.btn--danger:hover{ filter: brightness(.98); }

:root[data-theme="dark"] .btn:hover{ background:#121b28; }
:root[data-theme="dark"] .btn--primary:hover{ filter: brightness(.96); }
:root[data-theme="dark"] .btn--danger:hover{ filter: brightness(.98); }

.btn:focus-visible{ box-shadow:0 0 0 3px rgba(148,163,184,.35); }
:root[data-theme="dark"] .btn:focus-visible{ box-shadow:0 0 0 3px rgba(99,102,241,.22); }

.iconBtn{
  border:1px solid var(--border);
  background:var(--panel);
  border-radius:12px;
  width:36px; height:36px;
  display:grid; place-items:center;
  cursor:pointer;
  transition: background .12s ease, transform .05s ease, box-shadow .12s ease;
}
.iconBtn:hover{ background:#f9fafb; }
:root[data-theme="dark"] .iconBtn:hover{ background:#121b28; }

.iconBtn:focus-visible{ box-shadow:0 0 0 3px rgba(148,163,184,.35); }
:root[data-theme="dark"] .iconBtn:focus-visible{ box-shadow:0 0 0 3px rgba(99,102,241,.22); }

/* =========================
   Botão tema (Lua/Sol)
   ========================= */
.themeToggle{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow);
  cursor: pointer;
}
.themeToggle:hover{
  transform: translateY(-1px);
  transition: transform .18s ease;
}
.themeToggle:active{ transform: translateY(0); }

.themeToggle__sun{ display:inline; }
.themeToggle__moon{ display:none; }

:root[data-theme="dark"] .themeToggle__sun{ display:none; }
:root[data-theme="dark"] .themeToggle__moon{ display:inline; }

.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}

/* selectWrap */
.selectWrap{ display:flex; align-items:center; }

/* App layout */
.app{ max-width:1280px; margin:0 auto; padding:18px 18px 28px; }

/* ✅ Fechamentos precisa de mais largura (senão fica “puxado”) */
#viewFechamentos{
  width: 100%;
}
#viewFechamentos .content{
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
}


.header{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:10px 6px 14px;
}
.header__right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap: wrap;
}

/* =========================
   TABS (MAIN + SUB)
   ========================= */

/* barra de tabs (base) */
.tabs{
  display:flex; gap:8px; padding:6px;
  border:1px solid var(--border);
  background:var(--panel);
  border-radius:14px;
}

/* botão tab (base) */
.tab{
  flex:1;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid transparent;
  background:transparent;
  cursor:pointer;
  color:var(--muted);
  font-weight:650;
}
.tab.is-active{
  background:#f3f4f6;
  border-color:var(--border);
  color:var(--text);
}
:root[data-theme="dark"] .tab.is-active{
  background:#121b28;
}
.tab:focus-visible{ box-shadow:0 0 0 3px rgba(148,163,184,.35); }
:root[data-theme="dark"] .tab:focus-visible{ box-shadow:0 0 0 3px rgba(99,102,241,.22); }

/* MAIN tabs */
#mainTabs.tabs{ margin-top:10px; }

/* SUB tabs */
#subTabs.tabs{
  margin-top:8px;
  padding:5px;
  border-radius:13px;
  background:#fbfbfc;
}
#subTabs .tab{
  padding:9px 10px;
  font-weight:700;
  flex: 1 1 calc(33.333% - 8px);
  min-width: 160px;
}
#subTabs .tab.is-active{
  background:#eef2ff;
  border-color:#e5e7eb;
}
:root[data-theme="dark"] #subTabs.tabs{
  background:#0f1621;
}
:root[data-theme="dark"] #subTabs .tab.is-active{
  background:#121b28;
  border-color:var(--border);
}

/* =========================
   Toolbar
   ========================= */
.toolbar{
  margin-top:14px;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
}
.search{
  flex:1;
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
}
.search__icon{ fill:#9ca3af; display:block; }
.search__input{
  border:none; outline:none; width:100%;
  font-size:14px;
  background:transparent;
  color:var(--text);
}
.toolbar__actions{
  position:relative;
  display:flex;
  gap:10px;
  align-items:center;
}

/* Popover */
.popover{
  position:absolute;
  top:46px; right:0;
  width:280px;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--panel);
  box-shadow:var(--shadow);
  display:none;
  z-index:60;
}
.popover.is-open{ display:block; }
.popover__title{ font-weight:750; margin-bottom:10px; }
.popover__footer{ display:flex; justify-content:flex-end; gap:8px; margin-top:10px; }

/* =========================
   Table (base)
   ========================= */
.content{ margin-top:14px; }

.tableWrap{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  overflow-x:auto;
}

.tableBody{
  display:flex;
  flex-direction:column;
}

/* ATOS: Ordem | Nome | Status | Prioridade | Responsável | Cliente | Obs | Ações */
#viewAtos .tableHeader,
#viewAtos .row{
  display:grid;
  grid-template-columns: 84px 1.2fr .7fr .7fr .9fr .9fr 1.3fr 160px;
  gap:10px;
  padding:12px 14px;
  align-items:center;
  min-width: 1060px;
}

#viewAtos .tableHeader{
  font-size:12.5px;
  color:var(--muted);
  background:var(--tableHeader-bg);
  border-bottom:1px solid var(--border);
}
#viewAtos .row{
  background:var(--panel);
  border-bottom:1px solid var(--border);
}
#viewAtos .row:last-child{ border-bottom:none; }

.row.dragging{ opacity:.6; }
.row.dropTarget{
  outline: 2px dashed rgba(17,24,39,.15);
  outline-offset: -6px;
}
:root[data-theme="dark"] .row.dropTarget{
  outline-color: rgba(229,231,235,.18);
}

.cell-title{ font-weight:650; letter-spacing:-.15px; }
.cell-muted{ color:var(--muted); font-size:13px; }

/* Badges */
.badge{
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:750;
  width:fit-content;
  border:1px solid rgba(0,0,0,.06);
}
:root[data-theme="dark"] .badge{
  border-color: rgba(229,231,235,.10);
}

.badge--pendente{ background:var(--badge-pendente-bg); color:var(--badge-pendente-tx); }
.badge--analise{ background:var(--badge-analise-bg); color:var(--badge-analise-tx); }
.badge--concluido{ background:var(--badge-concluido-bg); color:var(--badge-concluido-tx); }

/* Prioridade badges */
.badge--prio-baixa{ background:var(--prio-baixa-bg); color:var(--prio-baixa-tx); }
.badge--prio-media{ background:var(--prio-media-bg); color:var(--prio-media-tx); }
.badge--prio-alta{  background:var(--prio-alta-bg);  color:var(--prio-alta-tx); }

/* Clique direto (Status/Prioridade) */
.badge.is-clickable{
  cursor:pointer;
  transition: transform .06s ease, filter .12s ease;
}
.badge.is-clickable:hover{ filter: brightness(.98); }
.badge.is-clickable:active{ transform: translateY(1px); }

/* Inline editor (select que aparece dentro da célula) */
.inlineSelect{
  width:auto;
  min-width: 160px;
  padding:7px 10px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  outline:none;
  font-weight:650;
}
.inlineSelect:focus{
  border-color:#cbd5e1;
  box-shadow:0 0 0 3px rgba(148,163,184,.25);
}
:root[data-theme="dark"] .inlineSelect:focus{
  border-color:#3b4b63;
  box-shadow:0 0 0 3px rgba(99,102,241,.18);
}

/* Ordem */
.orderCell{
  display:flex; align-items:center; gap:10px;
}
.handle{
  width:28px; height:28px;
  border:1px solid var(--border);
  border-radius:10px;
  display:grid; place-items:center;
  cursor:grab;
  user-select:none;
  color:var(--muted);
  touch-action:none;
  background:transparent;
}
.handle:active{ cursor:grabbing; }

/* Actions */
.actions{ display:flex; gap:8px; justify-content:flex-end; }
.actionBtn{
  border:1px solid var(--border);
  background:var(--panel);
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
  font-weight:650;
  white-space: nowrap;
}
.actionBtn:hover{ background:var(--hover-bg); }

.actionBtn:focus-visible{ box-shadow:0 0 0 3px rgba(148,163,184,.35); }
:root[data-theme="dark"] .actionBtn:focus-visible{ box-shadow:0 0 0 3px rgba(99,102,241,.22); }

.empty{
  padding:18px 14px;
  color:var(--muted);
  font-size:13.5px;
}

/* Login error */
.loginError{
  margin: 4px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(153,27,27,.25);
  background: var(--danger-bg);
  color: var(--danger-tx);
  font-weight: 700;
  font-size: 13px;
}

/* =========================
   Responsive (geral)
   ========================= */
@media (max-width: 980px){
  /* some o header das tabelas */
  .tableHeader{ display:none !important; }

  .tableWrap{ overflow-x: visible; }

  /* vira cards */
  #viewAtos .row{
    grid-template-columns: 1fr;
    gap:8px;
    min-width: unset;
  }

  .row > div{
    display:flex;
    justify-content:space-between;
    gap:12px;
  }
  .row > div::before{
    content: attr(data-label);
    color: var(--muted);
    font-size:12.5px;
  }

  .actions{ justify-content:flex-end; }

  .toolbar{ flex-direction:column; align-items:stretch; }
  .toolbar__actions{ justify-content:flex-end; flex-wrap:wrap; }
  .grid2{ grid-template-columns: 1fr; }
}

@media (max-width: 520px){
  .tabs{ flex-direction:column; }
  .tab{ flex: unset; }
}

/* =========================================================
   ENUNCIADOS — LISTA FULL SCREEN -> DETALHE FULL SCREEN
   ========================================================= */

/* LISTA ocupa tudo */
.enunListScreen{
  background: var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
}

/* topo da lista (só contador) */
.enunListTop{
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  background:var(--tableHeader-bg);
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

/* container das linhas */
#enunListItems{
  display:flex;
  flex-direction: column;
}

/* linha da lista */
.enunRow{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;

  padding:12px 14px;
  border-bottom:1px solid var(--border);
  background:var(--panel);
  cursor:pointer;
  text-align:left;
}
.enunRow:last-child{ border-bottom:none; }
.enunRow:hover{ background:var(--hover-bg); }
.enunRow.is-active{ background:#f3f4f6; }
:root[data-theme="dark"] .enunRow.is-active{ background:#121b28; }

.enunRow__title{
  font-size:16px;
  font-weight:500;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  flex:1;
  min-width:0;
}

.enunRow__meta{
  font-size:13.5px;
  color:var(--muted);
  white-space:nowrap;
  flex:0 0 auto;
}

/* Ações */
.enunRow__actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}

.enunRow__btn{
  width:32px; height:32px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--panel);
  cursor:pointer;
  display:grid;
  place-items:center;
}
.enunRow__btn:hover{ background:var(--hover-bg); }

.enunRow__btn:focus-visible{ box-shadow:0 0 0 3px rgba(148,163,184,.35); }
:root[data-theme="dark"] .enunRow__btn:focus-visible{ box-shadow:0 0 0 3px rgba(99,102,241,.22); }

/* DETALHE ocupa tudo */
.enunDetailScreen{
  background: var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
}

.enunPage__top{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  background:var(--tableHeader-bg);
}

.enunPage__inner{
  padding:16px 18px 22px;
}

/* Viewer */
.enunViewHeader{ margin-bottom:14px; }

.enunViewTitleRow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.enunViewTitle{
  margin:0;
  font-size:18px;
  font-weight:500;
  letter-spacing:0;
}

.enunViewDate{
  font-size:14px;
  white-space:nowrap;
  color:var(--text);
  opacity:.85;
}

.enunViewMeta{
  margin-top:10px;
  font-size:14px;
  color:var(--text);
  opacity:.85;
}

/* caixa do texto */
.enunNotionBox{
  border:1px solid var(--border);
  border-radius:0;
  padding:14px 14px;
  background:var(--panel);
}

.enunViewBody{
  font-size:14px;
  line-height:1.55;
  color:var(--text);
}
.enunViewBody p{ margin: 0 0 10px; }
.enunViewBody p:last-child{ margin-bottom:0; }
.enunViewBody ul, .enunViewBody ol{ margin: 8px 0 8px 18px; }
.enunViewBody h1, .enunViewBody h2, .enunViewBody h3{ margin: 10px 0 6px; }

/* Editor */
.enunPage__titleInput{
  width:100%;
  font-size:30px;
  font-weight:900;
  letter-spacing:-.45px;
  border:none;
  outline:none;
  background:transparent;
  color:var(--text);
  padding:6px 0 4px;
}

.enunMetaGrid{
  display:grid;
  grid-template-columns: 1fr 220px;
  gap:12px;
  margin-top:10px;
}

.enunDivider{
  height:1px;
  background:var(--border);
  margin:14px 0;
}

.enunBodyArea{
  width:100%;
  min-height:260px;
  border:none;
  outline:none;
  resize: vertical;
  background:transparent;
  color:var(--text);
  line-height:1.65;
  font-size:15.5px;
  padding: 0;
}

.enunEditFooter{
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:10px;
}

.enunHint{
  font-size:12.5px;
  color:var(--muted);
}

.enunPage__titleInput[disabled],
.enunMetaGrid .input[disabled],
.enunMetaGrid .select[disabled],
.enunBodyArea[disabled]{
  opacity: 1;
  cursor: default;
  color: var(--text);
}

.enunMetaGrid .input[disabled],
.enunMetaGrid .select[disabled]{
  border-color: transparent;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
  box-shadow: none !important;
}

.enunMetaGrid .select[disabled]{
  -webkit-appearance: none;
  appearance: none;
}

.enunBodyArea[disabled]{ resize:none; }

/* Responsivo enunciados */
@media (max-width: 980px){
  .enunMetaGrid{ grid-template-columns: 1fr; }
  .enunRow{
    flex-direction:column;
    align-items:flex-start;
  }
  .enunRow__meta{
    white-space:normal;
  }
}

/* Modal Admin - lista usuários */
.usersList{
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.userRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;

  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
}

.userRow__left{ min-width: 0; }
.userRow__name{
  font-weight: 800;
  letter-spacing: -0.2px;
}
.userRow__meta{
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--muted);
}
.userRow__right{
  flex: 0 0 auto;
  display:flex;
  gap: 8px;
}

/* =========================================================
   ENUNCIADOS — BARRA DE FORMATAÇÃO (B / I / U)
   ========================================================= */
.enunFormatBar{
  display:flex;
  align-items:center;
  gap:8px;

  padding:8px 10px;
  margin: 4px 0 10px;

  border:1px solid var(--border);
  border-radius:12px;
  background:var(--panel);

  position: sticky;
  top: 0;
  z-index: 5;
}

.enunFmtBtn{
  width:36px;
  height:34px;

  display:grid;
  place-items:center;

  border:1px solid var(--border);
  border-radius:10px;
  background:var(--panel);

  cursor:pointer;
  user-select:none;

  font-size:14px;
  font-weight:850;
  color:var(--text);

  transition: background .12s ease, transform .05s ease, box-shadow .12s ease;
}

.enunFmtBtn:hover{ background:var(--hover-bg); }
.enunFmtBtn:active{ transform: translateY(1px); }
.enunFmtBtn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(148,163,184,.35);
}
:root[data-theme="dark"] .enunFmtBtn:focus-visible{
  box-shadow:0 0 0 3px rgba(99,102,241,.22);
}

.enunFmtBtn.is-active{
  background:#eef2ff;
  border-color:#c7d2fe;
}
:root[data-theme="dark"] .enunFmtBtn.is-active{
  background:#121b28;
  border-color:#3b4b63;
}

.enunFmtBtn u{ text-underline-offset: 3px; }

@media (max-width: 520px){
  .enunFormatBar{ flex-wrap:wrap; }
}

/* =========================
   Ajustes de tema p/ itens que antes eram #fff fixo
   ========================= */
/* ===== dark: NÃO pinte tudo como input ===== */
:root[data-theme="dark"] .btn,
:root[data-theme="dark"] .iconBtn,
:root[data-theme="dark"] .actionBtn,
:root[data-theme="dark"] .passToggle{
  background: var(--panel) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* inputs de verdade */
:root[data-theme="dark"] .input,
:root[data-theme="dark"] .select,
:root[data-theme="dark"] .textarea,
:root[data-theme="dark"] .inlineSelect{
  background: var(--input-bg) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* containers / linhas */
:root[data-theme="dark"] .tableWrap,
:root[data-theme="dark"] .row,
:root[data-theme="dark"] .enunRow,
:root[data-theme="dark"] .userRow,
:root[data-theme="dark"] .enunNotionBox,
:root[data-theme="dark"] .msgItem{
  background: var(--panel) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

:root[data-theme="dark"] .tabs{
  background: var(--panel) !important;
}

:root[data-theme="dark"] #viewAtos .tableHeader,
:root[data-theme="dark"] .enunListTop,
:root[data-theme="dark"] .enunPage__top{
  background: var(--tableHeader-bg) !important;
}

:root[data-theme="dark"] .btn:hover,
:root[data-theme="dark"] .iconBtn:hover,
:root[data-theme="dark"] .actionBtn:hover,
:root[data-theme="dark"] .enunRow:hover{
  background: var(--hover-bg) !important;
}

/* =========================
   CAIXA - Layout
   ========================= */
.caixaControls{
  display:flex;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
}

.caixaPills{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding-bottom:2px;
}

.caixaPill{
  border:1px solid var(--border);
  background: var(--panel);
  border-radius: 999px;
  padding:8px 10px;
  font-size:13px;
  display:flex;
  gap:8px;
  align-items:center;
}
.caixaPill b{ letter-spacing:-.2px; }

.caixaHeader{
  display:grid;
  grid-template-columns: 140px 1fr 1fr 1fr 1fr 1fr 1fr 180px;
  gap:10px;
  padding:12px 14px;
  align-items:center;
  min-width: 1100px;
  font-size:12.5px;
  color:var(--muted);
  background: var(--tableHeader-bg);
  border-bottom:1px solid var(--border);
}

.caixaRow{
  display:grid;
  grid-template-columns: 140px 1fr 1fr 1fr 1fr 1fr 1fr 180px;
  gap:10px;
  padding:12px 14px;
  align-items:center;
  min-width: 1100px;
  border-bottom:1px solid var(--border);
  background: var(--panel);
}
.caixaRow:last-child{ border-bottom:none; }

.kpiBad{
  color: var(--danger-tx);
  background: var(--danger-bg);
  border:1px solid rgba(153,27,27,.25);
  padding:6px 10px;
  border-radius:999px;
  font-weight:800;
  width: fit-content;
}
.kpiOk{
  color: var(--badge-concluido-tx);
  background: var(--badge-concluido-bg);
  border:1px solid rgba(0,0,0,.06);
  padding:6px 10px;
  border-radius:999px;
  font-weight:800;
  width: fit-content;
}
/* Divergência positiva (sobrou) */
.kpiPos{
  color: var(--badge-analise-tx);
  background: var(--badge-analise-bg);
  border:1px solid rgba(29,78,216,.18);
  padding:6px 10px;
  border-radius:999px;
  font-weight:800;
  width: fit-content;
}

/* Modal wide helper (se usar class no HTML) */
.modal--wide{ width: min(860px, 96vw); }

/* Totais */
.caixaTotalsBox{
  border:1px solid var(--border);
  background: var(--panel2);
  border-radius:14px;
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.caixaTotalsLine{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:13.5px;
  color: var(--muted);
}
.caixaTotalsLine b{ color: var(--text); }

.grid4{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:12px;
}
@media (max-width: 980px){
  .grid4{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
  .grid4{ grid-template-columns: 1fr; }
}

.caixaSectionTitle{
  margin-top:6px;
  font-weight:850;
  letter-spacing:-.2px;
}

.caixaTotalsMini{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  border:1px solid var(--border);
  background: var(--panel2);
  border-radius:14px;
  padding:10px 12px;
}
.caixaTotalsMini > div{
  display:flex;
  gap:8px;
  align-items:center;
  color: var(--muted);
  font-size:13px;
}
/* IMPORTANTE: não sobrescrever as classes de cor (diff-* e kpi*) */
.caixaTotalsMini b:not(.diff-ok):not(.diff-pos):not(.diff-neg):not(.kpiOk):not(.kpiBad){
  color: var(--text);
}

/* Movimentos */
.movList{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.movRow{
  display:grid;
  grid-template-columns: 220px 140px 1fr 44px;
  gap:10px;
  align-items:center;
}
.movRow .iconBtn{ width:40px; height:40px; }

@media (max-width: 980px){
  .movRow{ grid-template-columns: 1fr; }
}

/* =========================
   DENOMS TABLE (horizontal tipo Excel)
   - sem "cortar" colunas
   - scroll só aparece se precisar
   ========================= */
.denomsTableWrap{
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
}

.denomsTable{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.denomsTable th,
.denomsTable td{
  border-bottom: 1px solid var(--border);
  padding: 10px 8px;
  text-align: center;
  vertical-align: middle;
  width: 72px; /* largura padrão por denom */
}

.denomsTable thead th{
  position: sticky;
  top: 0;
  background: var(--panel);
  z-index: 2;
  font-weight: 700;
}

.denomsStickyCol{
  position: sticky;
  left: 0;
  background: var(--panel);
  z-index: 3;
  text-align: left !important;
  width: 200px; /* Abertura/Fechamento/Subtotal */
}

.denomsRowLabel{ font-weight: 600; }

.denomsCellInput{
  width: 64px;
  max-width: 100%;
  text-align: center;
}

.denomsSubtotalCell{ font-variant-numeric: tabular-nums; }
.denomsSubtotal{ font-weight: 600; }

.denomsTotalCell{
  width: 120px;
  font-weight: 800;
  white-space: nowrap;
}

/* Modal do CAIXA mais largo (pra evitar scroll horizontal) */
#caixaOverlay .modal{
  width: min(1400px, 96vw);
  max-width: 1400px;
}
#caixaOverlay .modal__body{
  max-width: 100%;
  /* ✅ evita que o botão "Salvar" seja empurrado para fora da tela */
  flex:1;
  min-height:0;
  overflow:hidden; /* rola apenas o miolo (#caixaScroll) */
 }

/* =========================
   CAIXA (modal) - scroll interno
   ========================= */
#caixaOverlay .modal{
  max-height: 92vh;
  display:flex;
  flex-direction:column;
}

/* Mantém ações sempre visíveis; rola apenas o conteúdo do meio */
.caixaBodyScroll{
  overflow:auto;
  flex:1;
  min-height:0;
  max-height:none;
  padding-right: 6px;
}

/* Ações sempre visíveis (mesmo em telas baixas) */
#caixaOverlay .modal__actions{
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  padding-top: 10px;
  background: var(--panel);
}

.caixaRestoreRow{
  display:flex;
  gap:10px;
  align-items:center;
}

.caixaRestoreRow .input{ flex:1; }

/* deixa o botão mais compacto dentro do modal */
.caixaRestoreRow .btn{ padding:9px 12px; }

/* ===== Password toggle (olhinho) ===== */
.passWrap{
  position: relative;          /* <— isso prende o olhinho no campo */
  display: flex;
  align-items: center;
}

.passWrap .input{
  padding-right: 46px;         /* espaço pro botão não ficar em cima do texto */
}

.passToggle{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);

  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);

  cursor: pointer;
  user-select: none;
}

.passToggle:hover{ background: var(--hover-bg); }

:root[data-theme="dark"] .passToggle{
  background: var(--input-bg);
}

/* =========================
   NOTIFICAÇÕES (sino)
   ========================= */
.notifyBtn{
  position: relative;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.notifyBadge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:#ef4444;
  color:#fff;
  font-size:11px;
  font-weight:700;
  line-height:18px;
  text-align:center;
  border:2px solid var(--panel);
}
:root[data-theme="dark"] .notifyBadge{
  border-color: var(--panel);
}

/* =========================
   MODAL MENSAGENS
   ========================= */
.modal--wide{ width:min(760px, 96vw); }
.divider{
  height:1px;
  background:var(--border);
  margin:10px 0 2px;
}
.msgToolbar{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:4px;
}
.msgComposer{
  background: var(--panel2);
  border:1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
}
.msgComposer__title{
  font-weight:700;
  margin-bottom:10px;
}
.msgList{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.msgItem{
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  background: var(--panel);
}
.msgItem--unseen{
  box-shadow: 0 0 0 3px rgba(99,102,241,.14);
}
.msgItem__meta{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  font-size:12.5px;
  color:var(--muted);
  margin-bottom:6px;
}
.msgItem__from{ font-weight:700; color:var(--text); }
.msgItem__text{
  white-space:pre-wrap;
  line-height:1.35;
}
.msgItem__actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}
.msgActionBtn{
  border:1px solid var(--border);
  background: var(--panel2);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 10px;
  cursor:pointer;
  font-size:12.5px;
  font-weight:650;
}
.msgActionBtn:hover{ filter: brightness(.99); }
.msgActionBtn:active{ transform: translateY(1px); }

.msgActionBtn--on{
  background:#ecfdf5;
  border-color: rgba(4,120,87,.25);
  color:#047857;
}
:root[data-theme="dark"] .msgActionBtn--on{
  background:#0d241d;
  border-color: rgba(110,231,183,.25);
  color:#6ee7b7;
}

.msgActionBtn--danger{
  background: var(--danger-bg);
  border-color: rgba(153,27,27,.25);
  color: var(--danger-tx);
}

.sentSection{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.sentSection__title{
  font-weight: 750;
  margin: 0 0 10px;
}
.sentMeta{
  font-size:12.5px;
  color:var(--muted);
  margin-top:6px;
}
.sentAcks{
  margin-top:8px;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.sentChip{
  border:1px solid var(--border);
  background: var(--panel2);
  border-radius:999px;
  padding:6px 8px;
  font-size:12px;
}
.sentChip--viewed{
  background:#eff6ff;
  border-color: rgba(29,78,216,.18);
  color:#1d4ed8;
}
.sentChip--done{
  background:#ecfdf5;
  border-color: rgba(4,120,87,.18);
  color:#047857;
}
:root[data-theme="dark"] .sentChip--viewed{
  background:#111b2e;
  border-color: rgba(147,197,253,.18);
  color:#93c5fd;
}
:root[data-theme="dark"] .sentChip--done{
  background:#0d241d;
  border-color: rgba(110,231,183,.18);
  color:#6ee7b7;
}

.sentHeaderBar{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin: 8px 0 12px;
}

.diff-ok  { color: #16a34a; font-weight: 700; } /* verde */
.diff-pos { color: #2563eb; font-weight: 700; } /* azul */
.diff-neg { color: #dc2626; font-weight: 700; } /* vermelho */

/* FORÇA a cor quando o valor estiver dentro de <b> na caixa */
.caixaTotalsMini b.kpiOk,
.caixaTotalsLine b.kpiOk,
b.kpiOk{
  color: var(--badge-concluido-tx) !important;
}

.caixaTotalsMini b.kpiBad,
.caixaTotalsLine b.kpiBad,
b.kpiBad{
  color: var(--danger-tx) !important;
}
/* Ações do caixa alinhadas */
.caixaActions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
}


/* =========================
   FECHAMENTOS MENSAIS (Layout tipo Excel)
   ========================= */
#viewFechamentos .tableWrap{ overflow-x:hidden; }

/* ✅ Centraliza o conteúdo dos Fechamentos (operações + selos + pagamentos)
   sem "puxar" pelo cabeçalho da toolbar */
#viewFechamentos .content{
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
}

.fmControls{
  display:flex;
  align-items:flex-end;
  gap:10px;
}
.fmControls .iconBtn{
  width:38px; height:38px;
  border-radius:12px;
}

/* ✅ Centraliza o conjunto Operações + Selos */
.fmTop{
  display:flex;
  justify-content:center;   /* <-- centraliza o conjunto */
  align-items:flex-start;
  gap:14px;
  width: 100%;
}

/* não deixar esticar */
.fmTop > .fmPanel{ flex: 0 0 auto; }

/* larguras equilibradas (ajusta a estética) */
.fmTop > .fmPanel:first-child{  /* Operações */
  width: min(980px, 62vw);
}
.fmTop > .fmPanel:nth-child(2){ /* Selos */
  width: min(560px, 36vw);
}

/* responsivo: empilha */
@media (max-width: 1100px){
  .fmTop{
    flex-direction:column;
    align-items:center;
  }
  .fmTop > .fmPanel:first-child,
  .fmTop > .fmPanel:nth-child(2){
    width: 100%;
    max-width: 980px;
  }
}

@media (max-width: 1100px){
  .fmTop{ grid-template-columns: 1fr; }
}

.fmPanel{
  background:transparent;
}

.fmPanel__title{
  font-weight:850;
  letter-spacing:.08em;
  font-size:12px;
  color:var(--muted);
  margin:2px 0 10px 2px;
}
.fmPanel__title--selos{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background: var(--tableHeader-bg);
  color: var(--text);
}

.fmHeaderRow,
.fmRow{
  display:grid;
  gap:10px;
  padding:10px 12px;
  align-items:center;
  min-width: 0;
}

.fmHeaderRow{
  font-size:12.5px;
  color:var(--muted);
  background:var(--tableHeader-bg);
  border-bottom:1px solid var(--border);
}

.fmRow{
  background:var(--panel);
  border-bottom:1px solid var(--border);
}
.fmRow:last-child{ border-bottom:none; }

/* Drag & drop (reordenar) */
.fmDrag{ cursor: grab; }
.fmRow.fmDragging{ opacity: .65; }
.fmRow.fmDropTarget{ outline: 2px dashed var(--border); outline-offset: -2px; }

/* Handle discreto (igual Atos) */
.fmOrderCell{ display:flex; align-items:center; justify-content:center; }
.fmOrderBtn{
  width:34px; height:34px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--muted);
  font-weight:900;
  font-size:18px;
  line-height:1;
}
.fmOrderBtn:hover{ color:var(--text); }

.fmHeaderRow--ops,
.fmRow--ops{
  grid-template-columns:
    52px                  /* Ordem */
    minmax(215px, 1fr)    /* Operação (mais larga) */
    55px                  /* Prazo */
    122px                  /* Mês */
    90px                 /* Data limite */
    80px                 /* Situação */
    100px                 /* Data de fechamento */
    78px;                 /* Ações */
}

.fmHeaderRow--selos,
.fmRow--selos{
  grid-template-columns:
    140px
    140px
    minmax(140px, 1fr)
    70px;
}

.fmHeaderRow--pay,
.fmRow--pay{
  grid-template-columns:
    minmax(180px, 1fr)
    72px
    110px  /* ✅ mês mais largo */
    135px
    120px
    155px
    96px;
}

.fmCellInput,
.fmCellSelect{
  width:100%;
  min-width:0;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  outline:none;
  font-weight:650;
  font-size:13px;
}
.fmCellInput[disabled]{
  opacity:1;
  background: rgba(0,0,0,.02);
  color: var(--muted);
}
:root[data-theme="dark"] .fmCellInput[disabled]{
  background: rgba(255,255,255,.04);
}

.fmCellInput.isInvalid{
  border-color: var(--danger-tx);
  box-shadow: 0 0 0 3px rgba(153,27,27,.14);
}

.fmCopyField{ min-width: 190px; }

.fmActions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
}
.fmActions .iconBtn{
  width:34px; height:34px;
  border-radius:12px;
}

.fmAutoState{
  width:34px; height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  color: var(--muted);
  user-select:none;
}
.fmAutoState.isSaving{ opacity:.85; }
.fmAutoState.isSaved{ color: var(--badge-concluido-tx); }
.fmAutoState.isError{ color: var(--danger-tx); }


/* Situação (ABERTO/PENDENTE/FECHADO) */
.badge--fm-aberto{
  background: var(--badge-analise-bg);
  color: var(--badge-analise-tx);
}
.badge--fm-pendente{
  background: var(--danger-bg);
  color: var(--danger-tx);
}
.badge--fm-fechado{
  background: var(--badge-concluido-bg);
  color: var(--badge-concluido-tx);
}



/* =========================
   Mobile refinements (Fechamentos + Header)
   ========================= */

/* Header + actions mais “mobile friendly” */
@media (max-width: 600px){
  .app{ padding: 12px 12px 20px; }
  .header{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 8px 2px 10px;
  }
  .header__right{
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
  }
  .header__right .selectWrap{ flex: 1 1 260px; min-width: 220px; }
  .header__right .btn{ padding: 10px 10px; }
}

/* Fechamentos: toolbar vira “stack” e botões ocupam largura toda */
@media (max-width: 600px){
  #viewFechamentos .toolbar__actions{
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  #viewFechamentos .toolbar__actions .btn{ width: 100%; }
  #viewFechamentos .fmCopyField{ width: 100%; }
  #viewFechamentos .fmCopyField .input{ width: 100%; }
  #viewFechamentos .caixaControls.fmControls{
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }
  #viewFechamentos .caixaControls.fmControls .field{ flex: 1; min-width: 0; }
  #viewFechamentos .caixaControls.fmControls .iconBtn{ width: 40px; height: 40px; border-radius: 14px; }
}

/* Fechamentos: tabelas em “cards” (igual Atos) */
@media (max-width: 980px){
  /* some os headers das grades internas */
  .fmHeaderRow{ display:none !important; }

  /* cards */
  .fmRow{
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    min-width: unset !important;
    padding: 12px 14px !important;
  }
  .fmRow > div{
    display:flex;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
  }
  .fmRow > div::before{
    color: var(--muted);
    font-size: 12.5px;
    flex: 0 0 auto;
    padding-right: 10px;
  }

  /* OPERAÇÕES (8 colunas) */
  .fmRow--ops > div:nth-child(1)::before{ content:"Ordem"; }
  .fmRow--ops > div:nth-child(2)::before{ content:"Operação"; }
  .fmRow--ops > div:nth-child(3)::before{ content:"Prazo"; }
  .fmRow--ops > div:nth-child(4)::before{ content:"Mês"; }
  .fmRow--ops > div:nth-child(5)::before{ content:"Data limite"; }
  .fmRow--ops > div:nth-child(6)::before{ content:"Situação"; }
  .fmRow--ops > div:nth-child(7)::before{ content:"Data fechamento"; }
  .fmRow--ops > div:nth-child(8)::before{ content:"Ações"; }

  /* PAGAMENTOS (7 colunas) */
  .fmRow--pay > div:nth-child(1)::before{ content:"Pagamento"; }
  .fmRow--pay > div:nth-child(2)::before{ content:"Prazo"; }
  .fmRow--pay > div:nth-child(3)::before{ content:"Mês"; }
  .fmRow--pay > div:nth-child(4)::before{ content:"Data limite"; }
  .fmRow--pay > div:nth-child(5)::before{ content:"Situação"; }
  .fmRow--pay > div:nth-child(6)::before{ content:"Data pagamento"; }
  .fmRow--pay > div:nth-child(7)::before{ content:"Ações"; }

  /* SELOS (4 colunas) */
  .fmRow--selos > div:nth-child(1)::before{ content:"Data do ato"; }
  .fmRow--selos > div:nth-child(2)::before{ content:"Data de envio"; }
  .fmRow--selos > div:nth-child(3)::before{ content:"Protocolo"; }
  .fmRow--selos > div:nth-child(4)::before{ content:"Status"; }

  /* ações alinhadas à direita */
  .fmActions{ justify-content:flex-end; }
  .fmActions::before{ content:""; display:none; }
}


/* =========================
   CCN (Cartões de Assinaturas)
   ========================= */
#viewCcn .tableWrap{
  overflow-x:hidden; /* ✅ sem scroll horizontal */
}
#viewCcn .tableHeader,
#viewCcn .row{
  display:grid;
  grid-template-columns:
    minmax(120px, 1.3fr)   /* período */
    minmax(90px, .9fr)     /* filtro */
    58px                   /* qtd */
    minmax(90px, 1fr)      /* geração */
    minmax(90px, 1fr)      /* envio */
    76px                   /* img */
    minmax(140px, 1.3fr)   /* arquivo */
    minmax(140px, 1.2fr)   /* retorno */
    100px;                 /* ações */
  gap:10px;
  padding:12px 14px;
  align-items:center;
}
#viewCcn .tableHeader{
  font-size:12.5px;
  color:var(--muted);
  background:var(--tableHeader-bg);
  border-bottom:1px solid var(--border);
}
#viewCcn .row{
  background:var(--panel);
  border-bottom:1px solid var(--border);
}
#viewCcn .row:last-child{ border-bottom:none; }

#viewCcn .ccnWrap{
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.2;
}

.ccnTop{ margin-bottom:12px; }
.ccnTitleRow{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.sectionTitle{
  font-size:18px;
  font-weight:800;
  letter-spacing:-.2px;
}
.ccnFilters{
  display:flex;
  gap:10px;
  align-items:flex-end;
  flex-wrap:wrap;
}
.ccnFilters .field{ min-width: 160px; }
.ccnFilters__actions{ display:flex; gap:8px; align-items:center; }

/* Responsivo: em telas menores, reduz colunas (ainda sem scroll) */
@media (max-width: 980px){
  #viewCcn .tableHeader,
  #viewCcn .row{
    grid-template-columns:
      minmax(120px, 1.2fr)
      minmax(90px, .9fr)
      48px
      minmax(90px, 1fr)
      minmax(90px, 1fr)
      66px
      minmax(130px, 1.2fr)
      minmax(130px, 1.1fr)
      90px;
    gap:8px;
    padding:11px 12px;
  }
  .ccnFilters .field{ min-width: 140px; }
}

/* =========================================================
   CENSEC — LARGURAS CERTAS (por COL) + visual mais limpo
   COLE NO FINAL DO CSS
   ========================================================= */

/* mantém seu full-bleed, mas sem “espalhar feio” */
#viewCensec .content{
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 18px;
  padding-right: 18px;
}

/* painel */
#viewCensec .excelWrap{
  width: min(1700px, 100%);
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  overflow-x: auto;         /* ✅ se não couber, rola (não esmaga / não “explode”) */
  overflow-y: hidden;
}

/* tabela: respeitar as larguras definidas */
#viewCensec .excelTable{
  width: 100%;
  min-width: 1180px;        /* ✅ evita ficar “micro” */
  table-layout: fixed;      /* ✅ faz o col/width mandar */
  border-collapse: collapse;
  font-size: 12px;
}

/* cabeçalho */
#viewCensec .excelTable thead th{
  background: var(--tableHeader-bg);
  color: var(--text);
  white-space: normal;
  line-height: 1.1;
  font-size: 11.5px;
  padding: 7px 8px;
  border-bottom: 1px solid var(--border);
}

/* células */
#viewCensec .excelTable th,
#viewCensec .excelTable td{
  padding: 6px 8px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

/* ✅ descrição não quebra e mostra “...” */
#viewCensec .excelTable td:nth-child(2){
  overflow: hidden;
  text-overflow: ellipsis;
}

/* inputs/selects com cor boa no claro/escuro */
#viewCensec .excelTable input,
#viewCensec .excelTable select{
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-weight: 650;
  font-size: 12px;
}

:root[data-theme="dark"] #viewCensec .excelTable input,
:root[data-theme="dark"] #viewCensec .excelTable select{
  background: var(--input-bg);
}

/* hover suave */
#viewCensec .excelTable tbody tr:hover td{
  background: rgba(99,102,241,.06);
}
:root[data-theme="dark"] #viewCensec .excelTable tbody tr:hover td{
  background: rgba(99,102,241,.10);
}

/* =========================================================
   ✅ LARGURAS POR COLUNA (EXATAMENTE o que você pediu)
   Ordem visível no print:
   1 Tipo | 2 Descrição | 3 Livro | 4 Folha | 5 Quinzena | 6 Mês | 7 Ano | 8 Situação | 9 Dia | 10 Mês | 11 Ano ...
   ========================================================= */

/* Se existir colgroup, manda nele (melhor). Se não existir, não atrapalha. */
#viewCensec .excelTable col:nth-child(1){  width: 130px; } /* Tipo de Ato */
#viewCensec .excelTable col:nth-child(2){  width: 180px; } /* ✅ Descrição (metade de uma descrição grande, sem ficar “micro”) */
#viewCensec .excelTable col:nth-child(3){  width: 90px;  } /* ✅ Livro menor */
#viewCensec .excelTable col:nth-child(4){  width: 90px;  } /* ✅ Folha menor */
#viewCensec .excelTable col:nth-child(5){  width: 120px; } /* ✅ Quinzena maior */
#viewCensec .excelTable col:nth-child(6){  width: 80px;  } /* Mês */
#viewCensec .excelTable col:nth-child(7){  width: 75px;  } /* ✅ Ano menor */
#viewCensec .excelTable col:nth-child(8){  width: 140px; } /* ✅ Situação maior */
#viewCensec .excelTable col:nth-child(9){  width: 70px;  } /* Dia */
#viewCensec .excelTable col:nth-child(10){ width: 80px;  } /* Mês */
#viewCensec .excelTable col:nth-child(11){ width: 75px;  } /* ✅ Ano menor */

/* Fallback: se NÃO houver <colgroup>, aplica nos th/td */
#viewCensec .excelTable th:nth-child(1),
#viewCensec .excelTable td:nth-child(1){ width:120px; text-align:left; }

#viewCensec .excelTable th:nth-child(2),
#viewCensec .excelTable td:nth-child(2){ width:180px; text-align:left; }

#viewCensec .excelTable th:nth-child(3),
#viewCensec .excelTable td:nth-child(3){ width:90px; }

#viewCensec .excelTable th:nth-child(4),
#viewCensec .excelTable td:nth-child(4){ width:90px; }

#viewCensec .excelTable th:nth-child(5),
#viewCensec .excelTable td:nth-child(5){ width:120px; }

#viewCensec .excelTable th:nth-child(6),
#viewCensec .excelTable td:nth-child(6){ width:80px; }

#viewCensec .excelTable th:nth-child(7),
#viewCensec .excelTable td:nth-child(7){ width:70px; }

#viewCensec .excelTable th:nth-child(8),
#viewCensec .excelTable td:nth-child(8){ width:140px; }

#viewCensec .excelTable th:nth-child(9),
#viewCensec .excelTable td:nth-child(9){ width:70px; }

#viewCensec .excelTable th:nth-child(10),
#viewCensec .excelTable td:nth-child(10){ width:80px; }

#viewCensec .excelTable th:nth-child(11),
#viewCensec .excelTable td:nth-child(11){ width:70px; }

/* =========================================================
   CENSEC — FIX (sem esmagar / sem vazio / cabeçalho legível)
   COLE NO FINAL DO CSS
   ========================================================= */

/* mantém full-bleed */
#viewCensec .content{
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 18px;
  padding-right: 18px;
}

/* painel do CENSEC: centraliza e evita “vazio feio” */
#viewCensec .excelWrap{
  width: min(1700px, 100%);
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0; /* importante */
}

/* ✅ aqui é o principal: NÃO usar fixed */
#viewCensec .excelTable{
  width: max-content;     /* ✅ a tabela fica do tamanho das colunas */
  min-width: 100%;        /* ✅ mas nunca menor que o painel */
  table-layout: auto;     /* ✅ evita esmagar e evitar sobreposição */
  border-collapse: collapse;
  font-size: 12px;
}

/* células */
#viewCensec .excelTable th,
#viewCensec .excelTable td{
  padding: 6px 8px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  text-align: center;
  white-space: nowrap;
}

/* cabeçalho: legível e sem “colidir” */
#viewCensec .excelTable thead th{
  background: var(--tableHeader-bg);
  color: var(--text);
  white-space: normal;
  line-height: 1.15;
  font-size: 11.5px;
  padding: 7px 8px;
}

/* inputs/selects (bonitos nos 2 temas) */
#viewCensec .excelTable input,
#viewCensec .excelTable select{
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-weight: 650;
  font-size: 12px;
}
:root[data-theme="dark"] #viewCensec .excelTable input,
:root[data-theme="dark"] #viewCensec .excelTable select{
  background: var(--input-bg);
}

/* =========================================================
   LARGURAS (EXATAMENTE O QUE VOCÊ PEDIU)
   - diminui descrição pela metade
   - diminui livro/folha
   - aumenta quinzena e situação
   - diminui ano
   ========================================================= */

/* 1 Tipo */
#viewCensec .excelTable th:nth-child(1),
#viewCensec .excelTable td:nth-child(1){
  width: 140px;
  min-width: 140px;
  text-align: left;
}

/* 2 Descrição (metade do que estava grande) */
#viewCensec .excelTable th:nth-child(2),
#viewCensec .excelTable td:nth-child(2){
  width: 180px;
  min-width: 180px;
  text-align: left;
}
#viewCensec .excelTable td:nth-child(2){
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 3 Livro (menor) */
#viewCensec .excelTable th:nth-child(3),
#viewCensec .excelTable td:nth-child(3){
  width: 75px;
  min-width: 75px;
}

/* 4 Folha (menor) */
#viewCensec .excelTable th:nth-child(4),
#viewCensec .excelTable td:nth-child(4){
  width: 70px;
  min-width: 70px;
}

/* 5 Quinzena (maior) */
#viewCensec .excelTable th:nth-child(5),
#viewCensec .excelTable td:nth-child(5){
  width: 125px;
  min-width: 125px;
}

/* 6 Mês */
#viewCensec .excelTable th:nth-child(6),
#viewCensec .excelTable td:nth-child(6){
  width: 70px;
  min-width: 70px;
}

/* 7 Ano (menor) */
#viewCensec .excelTable th:nth-child(7),
#viewCensec .excelTable td:nth-child(7){
  width: 85px;
  min-width: 85px;
}

/* 8 Situação (maior) */
#viewCensec .excelTable th:nth-child(8),
#viewCensec .excelTable td:nth-child(8){
  width: 120px;
  min-width: 120px;
}

/* 9 Dia */
#viewCensec .excelTable th:nth-child(9),
#viewCensec .excelTable td:nth-child(9){
  width: 80px;
  min-width: 80px;
}

/* 10 Mês */
#viewCensec .excelTable th:nth-child(10),
#viewCensec .excelTable td:nth-child(10){
  width: 85px;
  min-width: 85px;
}

/* 11 Ano */
#viewCensec .excelTable th:nth-child(11),
#viewCensec .excelTable td:nth-child(11){
  width: 75px;
  min-width: 75px;
}

/* =========================================================
   CORES “mais legais” sem mexer no tema todo:
   cabeçalho um pouco mais destacado e hover suave
   ========================================================= */
#viewCensec .excelTable thead th{
  box-shadow: inset 0 -1px 0 var(--border);
}
#viewCensec .excelTable tbody tr:hover td{
  background: rgba(99,102,241,.06);
}
:root[data-theme="dark"] #viewCensec .excelTable tbody tr:hover td{
  background: rgba(99,102,241,.10);
}

/* =========================================================
   CENSEC — compactar colunas (sem scroll horizontal)
   - remove Dia/Mês/Ano duplicados e usa Data (DD/MM/AAAA)
   ========================================================= */

#viewCensec .excelWrap{
  overflow-x: hidden; /* agora cabe (sem barra horizontal) */
}

#viewCensec .excelTable{
  min-width: 0;        /* permite encolher */
}

/* larguras novas (15 colunas) */
/* ✅ TIPO DE ATO */
#viewCensec .excelTable th:nth-child(1),
#viewCensec .excelTable td:nth-child(1){ width:150px; text-align:left; }

/* ✅ DESCRIÇÃO */
#viewCensec .excelTable th:nth-child(2),
#viewCensec .excelTable td:nth-child(2){ width:160px; text-align:left; }

/* ✅ LIVRO  */
#viewCensec .excelTable th:nth-child(3),
#viewCensec .excelTable td:nth-child(3){ width:70px; }

/* ✅ FOLHA */
#viewCensec .excelTable th:nth-child(4),
#viewCensec .excelTable td:nth-child(4){ width:70px; }

/* ✅ QUINZENA */
#viewCensec .excelTable th:nth-child(5),
#viewCensec .excelTable td:nth-child(5){ width:90px; }

/* ✅ CENSEC — aumentar coluna MÊS (override final) */
#viewCensec .excelTable th:nth-child(6),
#viewCensec .excelTable td:nth-child(6){
  width: 80px !important;
  min-width: 80px !important;
}

#viewCensec .excelTable td:nth-child(6) select,
#viewCensec .excelTable td:nth-child(6) input{
  min-width: 80px !important;
}

/* ✅ ANO */
#viewCensec .excelTable th:nth-child(7),
#viewCensec .excelTable td:nth-child(7){ width:65px; }

/* ✅ SITUAÇÃO */
#viewCensec .excelTable th:nth-child(8),
#viewCensec .excelTable td:nth-child(8){ width:125px; }

/* ✅ Data: DD/MM/AAAA (10 chars, sem sobra) */
#viewCensec .excelTable th:nth-child(9),
#viewCensec .excelTable td:nth-child(9){ width:100px; }

/* ✅ CARGA */
#viewCensec .excelTable th:nth-child(10),
#viewCensec .excelTable td:nth-child(10){ width:110px; }

/* ✅ SITUAÇÃO */
#viewCensec .excelTable th:nth-child(11),
#viewCensec .excelTable td:nth-child(11){ width:125px; }

/* ✅ DATA */
#viewCensec .excelTable th:nth-child(12),
#viewCensec .excelTable td:nth-child(12){ width:100px; }

/* ✅ CARGA */
#viewCensec .excelTable th:nth-child(13),
#viewCensec .excelTable td:nth-child(13){ width:110px; }

/* ✅ ENVIOU DOI? */
#viewCensec .excelTable th:nth-child(14),
#viewCensec .excelTable td:nth-child(14){ width:25px; }

/* ✅ ACOES */
#viewCensec .excelTable th:nth-child(15),
#viewCensec .excelTable td:nth-child(15){ width:55px; }

/* inputs data: não “estica” */
#viewCensec .excelTable td:nth-child(9) input,
#viewCensec .excelTable td:nth-child(12) input{
  font-variant-numeric: tabular-nums;
  letter-spacing: .2px;
}

/* =========================
   CENSEC — Filtros (Ano / Mês / Tipo) ao lado do + Novo Ato
   ========================= */
#viewCensec .censecTop{
  width: min(1700px, 100%);
  margin: 10px auto 10px;
}

#viewCensec .censecActions{
  display:flex;
  justify-content:flex-end;
  align-items:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

#viewCensec .censecFilters{
  display:flex;
  align-items:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

#viewCensec .censecFilters .field{ min-width: 140px; }
#viewCensec .censecFilters .field__label{ font-size: 12px; }

#viewCensec .censecFilters__actions{
  display:flex;
  gap:8px;
  align-items:center;
}

@media (max-width: 900px){
  #viewCensec .censecActions{ justify-content:stretch; }
  #viewCensec .censecFilters{ flex: 1 1 100%; }
  #viewCensec #censecAddBtn{ margin-left:auto; }
}

@media (max-width: 600px){
  #viewCensec .censecFilters{ width:100%; }
  #viewCensec .censecFilters .field{ flex:1 1 160px; min-width: 160px; }
  #viewCensec .censecFilters__actions{ width:100%; justify-content:flex-end; }
}

/* =========================
   CENSEC — cabeçalho (títulos de grupos) centralizados e com cor bonita
   ========================= */

/* Linha 1 do thead: "Controle de Dados Lançados" | "CENSEC" */
#viewCensec .excelTable thead tr:first-child th{
  text-align:center !important;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 11px;

  background: linear-gradient(180deg, var(--panel2), var(--tableHeader-bg));
  color: #111827;
  border-bottom: 1px solid var(--border);
}

/* dark mode: mantém contraste */
:root[data-theme="dark"] #viewCensec .excelTable thead tr:first-child th{
  color: var(--text);
  background: linear-gradient(180deg, rgba(255,255,255,.04), var(--tableHeader-bg));
}

/* Linha 2 do thead: subtítulos ("Dados do Ato", "Lançamento no Sistema", "Fechamento no Sistema") */
#viewCensec .excelTable thead tr:nth-child(2) th{
  text-align:center !important;
  font-weight: 800;
  font-size: 11.2px;
  color: var(--muted);
  background: var(--tableHeader-bg);
}

/* Linha 3 (nomes das colunas) fica mais “limpa” */
#viewCensec .excelTable thead tr:nth-child(3) th{
  text-align:center;
  font-weight: 750;
  color: var(--muted);
  background: var(--tableHeader-bg);
}

/* Pequeno “capricho” de separação entre blocos (fica com cara de planilha premium) */
#viewCensec .excelTable thead th{
  box-shadow: inset 0 -1px 0 var(--border);
}

/* =========================
   CENSEC — Top bar (alinha o + Novo Ato com o painel/tabela)
   ========================= */
#viewCensec .censecTop{
  width: min(1700px, 100%);
  margin: 10px auto 10px;
  display:flex;
  align-items:center;
}

/* joga o botão pra direita (direção do CCN) */
#viewCensec .censecActions{
  margin-left: auto;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
}

/* Filtros do CENSEC (ao lado do botão) */
#viewCensec .censecFilters{
  display:flex;
  gap:10px;
  align-items:flex-end;
  flex-wrap:wrap;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:14px;
  background: var(--panel2);
}

#viewCensec .censecFilters .field{ min-width: 140px; }
#viewCensec .censecFilters .field__label{ font-size:12px; }

#viewCensec .censecFilters__actions{
  display:flex;
  gap:8px;
  align-items:center;
}

/* opcional: em telas pequenas o botão ocupa a largura toda */
@media (max-width: 700px){
  #viewCensec .censecActions{
    width: 100%;
  }
  #viewCensec .censecFilters{ width:100%; }
  #viewCensec #censecAddBtn{
    width: 100%;
  }
}

/* =========================
   CENSEC — cores da SITUAÇÃO (2 colunas)
   Lançada = azul | Transmitida = verde | Negativa = laranja
   ========================= */

#viewCensec .excelTd--status{
  border-radius: 10px;          /* suave */
}

/* deixa o select “herdar” a cor do td */
#viewCensec .excelTd--status select{
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  font-weight: 800;
}

/* AZUL = Lançada */
#viewCensec .excelTd--status[data-status="Lançada"]{
  background: var(--badge-analise-bg);
  color: var(--badge-analise-tx);
}
#viewCensec .excelTd--status[data-status="Lançada"] select{
  color: var(--badge-analise-tx) !important;
}

/* VERDE = Transmitida */
#viewCensec .excelTd--status[data-status="Transmitida"]{
  background: var(--badge-concluido-bg);
  color: var(--badge-concluido-tx);
}
#viewCensec .excelTd--status[data-status="Transmitida"] select{
  color: var(--badge-concluido-tx) !important;
}

/* LARANJA = Negativa */
#viewCensec .excelTd--status[data-status="Negativa"]{
  background: var(--badge-pendente-bg);
  color: var(--badge-pendente-tx);
}
#viewCensec .excelTd--status[data-status="Negativa"] select{
  color: var(--badge-pendente-tx) !important;
}

/* quando vazio (—) fica neutro */
#viewCensec .excelTd--status[data-status=""]{
  background: transparent;
}


/* =========================================================
   MALOTE DIGITAL — full-bleed + tabela inline (travada por padrão)
   ========================================================= */

#viewMalote .content{
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 18px;
  padding-right: 18px;
}

#viewMalote .mdWrap{
  width: min(1700px, 100%);
  margin: 0 auto;
}

/* ===========================
   GRID DAS COLUNAS (ORDEM)
   1  Data Envio
   2  Data Leitura
   3  Código
   4  Remetente
   5  Assunto
   6  Observação
   7  Fronteira dos Vales (check)
   8  Machacalis (check)
   9  Crisólita (check)
   10 Ações (cadeado / salvar / lixeira)
   =========================== */

#viewMalote .tableHeader.mdHeader,
#viewMalote .row.mdRow{
  display:grid;
  grid-template-columns:
    110px                  /* 1) Data Envio (dd/mm/aaaa) */
    110px                  /* 2) Data Leitura (dd/mm/aaaa) */
    130px                  /* 3) Código */
    minmax(220px, 1.35fr)  /* 4) Remetente (maior) */
    minmax(170px, 1.0fr)   /* 5) Assunto (médio) */
    minmax(180px, 1.05fr)  /* 6) Observação (médio) */
    110px                  /* 7) Fronteira dos Vales (check) */
    95px                   /* 8) Machacalis (check) */
    95px                   /* 9) Crisólita (check) */
    84px;                 /* 10) Ações */
  gap:10px;
  padding:12px 14px;
  align-items:center;
  min-width: 1320px;
  text-align:center;
}

#viewMalote .tableHeader.mdHeader{
  font-size:12.5px;
  color:var(--muted);
  background:var(--tableHeader-bg);
  border-bottom:1px solid var(--border);
}

#viewMalote .row.mdRow{
  background:var(--panel);
  border-bottom:1px solid var(--border);
}
#viewMalote .row.mdRow:last-child{ border-bottom:none; }

#viewMalote .mdCell{ display:flex; align-items:center; justify-content:center; }

#viewMalote .mdCellInput{
  width:100%;
  min-width:0;
  height:34px;
  padding:6px 10px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  font-weight:650;
  font-size:12.5px;
  text-align:center;
}
:root[data-theme="dark"] #viewMalote .mdCellInput{ background:var(--input-bg); }

#viewMalote .mdCellInput.isInvalid{
  border-color: rgba(239,68,68,.7);
  box-shadow: 0 0 0 3px rgba(239,68,68,.12);
}

#viewMalote .mdCheck{
  width:18px;
  height:18px;
  accent-color: var(--badge-analise-tx);
}

#viewMalote .mdActions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
#viewMalote .mdActionBtn{
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--panel2);
}
#viewMalote .mdActionBtn:disabled{
  opacity:.45;
  cursor:not-allowed;
}

/* Linha travada (padrão): fica “mais calma” */
#viewMalote .mdRow[data-locked="1"] .mdCellInput,
#viewMalote .mdRow[data-locked="1"] .mdCheck{
  background: var(--panel2);
  opacity:.92;
}
:root[data-theme="dark"] #viewMalote .mdRow[data-locked="1"] .mdCellInput{
  background: rgba(255,255,255,.06);
}

/* filtros no topo */
#viewMalote .mdFilters{
  display:flex;
  align-items:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
#viewMalote .mdFilters__actions{
  display:flex;
  gap:8px;
  align-items:center;
}

@media (max-width: 700px){
  #viewMalote .mdFilters{ gap:8px; }
  #viewMalote .mdFilters .field{ min-width: 140px; }
}