/* =====================================================================
   Sistema Web Santa Rosa - Identidade Visual
   Paleta: Azul Marinho + Branco + Prata/Cinza
   Estilo: clean, minimalista, moderno
   ===================================================================== */

:root {
  /* Azul marinho */
  --navy:      #0b2e5c;
  --navy-2:    #082243;
  --navy-3:    #12447f;
  --navy-soft: #eaf0f8;

  /* Prata / cinza */
  --silver-1:  #f6f8fa;
  --silver-2:  #e7ebf0;
  --silver-3:  #d3d9e1;
  --gray-sel:  #aeb4bd;   /* botão selecionado (cinza) */
  --gray-line: #e2e6eb;

  /* Texto */
  --ink:       #1f2a37;
  --muted:     #6b7280;
  --white:     #ffffff;

  /* Degradê prata horizontal (botões) */
  --grad-silver: linear-gradient(90deg, #f8fafc 0%, #e7ebf0 45%, #d1d7df 100%);
  --grad-silver-hover: linear-gradient(90deg, #ffffff 0%, #eef1f5 45%, #dbe0e7 100%);

  --shadow-sm: 0 1px 2px rgba(11,46,92,.06), 0 1px 3px rgba(11,46,92,.08);
  --shadow-md: 0 4px 14px rgba(11,46,92,.10);
  --radius:    12px;
  --radius-sm: 8px;

  --sidebar-w: 264px;
  --topbar-h:  60px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

.icon { display: inline-block; vertical-align: middle; }

/* =====================================================================
   BOTÕES
   ===================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--ink);
  padding: 10px 16px; border: 1px solid var(--silver-3);
  border-radius: var(--radius-sm); cursor: pointer;
  background: var(--grad-silver);
  box-shadow: var(--shadow-sm);
  transition: background .15s, box-shadow .15s, transform .05s, color .15s;
}
.btn:hover { background: var(--grad-silver-hover); }
.btn:active { transform: translateY(1px); }

/* Estado SELECIONADO: fica cinza (indica função ativa/clicada) */
.btn.is-selected,
.btn:focus-visible {
  background: var(--gray-sel);
  color: var(--navy-2);
  border-color: #9aa0a8;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.12);
  outline: none;
}

.btn--primary {
  background: linear-gradient(90deg, var(--navy-3), var(--navy));
  color: #fff; border-color: var(--navy-2);
}
.btn--primary:hover { background: linear-gradient(90deg, #185193, var(--navy-3)); }
.btn--danger {
  background: linear-gradient(90deg, #e35d5b, #d64541);
  color:#fff; border-color:#c23b37;
}
.btn--danger:hover { filter: brightness(1.05); }
.btn--ghost {
  background: transparent; box-shadow: none; border-color: var(--gray-line);
  color: var(--muted);
}
.btn--ghost:hover { background: var(--silver-1); color: var(--ink); }
.btn--sm { padding: 6px 10px; font-size: 13px; }

/* =====================================================================
   TELA DE LOGIN
   ===================================================================== */
.login {
  min-height: 100vh; display: grid; grid-template-columns: 1fr;
  place-items: center;
  background:
    radial-gradient(1200px 600px at 20% -10%, #12447f22, transparent),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 55%, #05192f 100%);
  padding: 24px;
}
.login__card {
  width: 100%; max-width: 400px;
  background: var(--white); border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  padding: 34px 30px 28px; text-align: center;
  animation: rise .35s ease;
}
@keyframes rise { from { opacity:0; transform: translateY(12px);} to {opacity:1; transform:none;} }

.login__logo {
  width: 120px; height: 120px; margin: 0 auto 14px;
  border-radius: 20px;
  background: var(--silver-1);
  border: 1px dashed var(--silver-3);
  display: grid; place-items: center; overflow: hidden;
  color: var(--muted);
}
.login__logo img { max-width: 100%; max-height: 100%; }
.login__logo small { font-size: 11px; padding: 0 8px; }

.login__title { margin: 6px 0 2px; font-size: 20px; color: var(--navy); }
.login__sub { margin: 0 0 22px; font-size: 13px; color: var(--muted); }

.field { text-align: left; margin-bottom: 14px; }
.field label {
  display: block; font-size: 12.5px; font-weight: 600;
  color: var(--muted); margin-bottom: 6px;
}
.field input, .field select {
  width: 100%; padding: 11px 12px; font-size: 14px;
  border: 1px solid var(--silver-3); border-radius: var(--radius-sm);
  background: var(--silver-1); color: var(--ink);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.field input:focus, .field select:focus {
  outline: none; border-color: var(--navy-3); background: #fff;
  box-shadow: 0 0 0 3px #12447f22;
}
.field input[readonly] {
  background: var(--silver-2, #e9edf2); color: var(--muted); cursor: not-allowed;
}
.login .btn { width: 100%; justify-content: center; margin-top: 6px; }

.login__msg {
  min-height: 20px; margin-top: 12px; font-size: 13px;
  color: #d64541; font-weight: 600;
}
.login__hint {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--gray-line);
  font-size: 12px; color: var(--muted); text-align: left; line-height: 1.6;
}
.login__hint code { background: var(--silver-2); padding: 1px 6px; border-radius: 4px; }

/* =====================================================================
   SHELL: topbar + sidebar + conteúdo
   ===================================================================== */
.topbar {
  position: sticky; top: 0; z-index: 40;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 18px;
  background: linear-gradient(90deg, var(--navy) 0%, var(--navy-2) 100%);
  color: #fff; box-shadow: var(--shadow-md);
}
.topbar__hamburger {
  display: none; background: transparent; border: 0; color: #fff;
  cursor: pointer; padding: 6px; border-radius: 6px;
}
.topbar__hamburger:hover { background: #ffffff1a; }
.topbar__brand { display: flex; align-items: center; gap: 10px; color:#fff; }
.topbar__logo {
  width: 38px; height: 38px; border-radius: 9px; overflow: hidden;
  background: #ffffff14; border: 1px solid #ffffff2e;
  display: grid; place-items: center;
}
.topbar__logo img { max-width: 100%; max-height: 100%; }
.topbar__title { display: flex; flex-direction: column; line-height: 1.1; }
.topbar__title strong { font-size: 15px; }
.topbar__title small { font-size: 11px; color: #cdd9ea; }
.topbar__spacer { flex: 1; }
.topbar__user { display: flex; align-items: center; gap: 10px; color: #fff; }
.topbar__user-ico {
  width: 34px; height: 34px; border-radius: 50%;
  background: #ffffff1f; display: grid; place-items: center;
}
.topbar__user-info { display: flex; flex-direction: column; line-height: 1.15; text-align: right; }
.topbar__user-info strong { font-size: 13px; }
.topbar__user-info small { font-size: 11px; color: #cdd9ea; }
.topbar__logout {
  display: flex; align-items: center; gap: 6px; margin-left: 6px;
  background: #ffffff14; border: 1px solid #ffffff33; color: #fff;
  padding: 7px 12px; border-radius: 8px; cursor: pointer; font-size: 13px;
  transition: background .15s;
}
.topbar__logout:hover { background: #ffffff2b; }

.layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: calc(100vh - var(--topbar-h));
  transition: grid-template-columns .16s ease;
}

/* -------- Ocultar/exibir menu lateral (botão global, injetado por js/ui.js) --------
   Mesmo comportamento que já existia só em Rastreio Pedidos digitados,
   agora disponível em toda tela que chama UI.mount(). */
.explorer-toggle {
  position: fixed; top: calc(var(--topbar-h) + 12px); left: calc(var(--sidebar-w) - 15px);
  z-index: 50; width: 30px; height: 30px; border-radius: 50%;
  background: var(--navy, #0b2e5c); color: #fff; border: 2px solid #fff;
  box-shadow: 0 2px 10px rgba(11,46,92,.35); cursor: pointer; font-size: .82rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: left .16s ease, background .12s ease;
}
.explorer-toggle:hover { background: var(--navy2, #123f78); }
.explorer-toggle .tgl-arrow { display: inline-block; transition: transform .16s ease; }
.explorer-toggle::after {
  content: attr(data-tip); position: absolute; top: 50%; left: calc(100% + 10px); transform: translateY(-50%);
  background: #1a2535; color: #fff; font-size: .7rem; font-weight: 600; white-space: nowrap;
  padding: 6px 10px; border-radius: 6px; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .12s ease; box-shadow: 0 3px 10px rgba(0,0,0,.28); letter-spacing: .01em;
}
.explorer-toggle:hover::after { opacity: 1; visibility: visible; }
body.explorer-collapsed .explorer-toggle { left: 8px; }
body.explorer-collapsed .explorer-toggle .tgl-arrow { transform: rotate(180deg); }
body.explorer-collapsed .layout { grid-template-columns: 0 1fr; }
body.explorer-collapsed .sidebar { overflow: hidden; padding: 0; border: none; min-width: 0; }
@media (max-width: 980px) { .explorer-toggle { display: none; } }

/* -------- Sidebar -------- */
.sidebar {
  background: var(--silver-1);
  border-right: 1px solid var(--gray-line);
  padding: 14px 12px 30px; overflow-y: auto;
  position: sticky; top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
}
.sidebar__head { padding: 4px 6px 10px; }
.sidebar__home {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; color: var(--navy); font-size: 14px;
  padding: 8px 10px; border-radius: 8px; background: #fff;
  border: 1px solid var(--gray-line);
}
.sidebar__home:hover { background: var(--navy-soft); }
.sidebar__section {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 700; padding: 10px 8px 6px;
}
.side-item { margin-bottom: 2px; }
.side-item__link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px; color: var(--ink);
  font-size: 13.5px; font-weight: 500;
  transition: background .12s, color .12s;
}
.side-item__link:hover { background: #fff; }
.side-item__ico { color: var(--navy-3); display: inline-flex; }
.side-item.is-active > .side-item__link {
  background: linear-gradient(90deg, var(--navy) , var(--navy-3));
  color: #fff; box-shadow: var(--shadow-sm);
}
.side-item.is-active > .side-item__link .side-item__ico { color: #fff; }
/* Caret de recolher/expandir (só no módulo ativo): triângulo pra baixo quando
   expandido; gira -90° e oculta os submenus quando recolhido (.is-collapsed). */
.side-item__caret {
  margin-left: auto; width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: .85;
  transition: transform .15s ease;
}
.side-item.is-collapsed .side-item__caret { transform: rotate(-90deg); }
.side-item.is-collapsed .side-sub { display: none; }

.side-sub {
  margin: 3px 0 8px 16px; padding-left: 10px;
  border-left: 2px solid var(--silver-3);
  display: flex; flex-direction: column; gap: 1px;
}
.side-sub__link {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border-radius: 7px;
  font-size: 12.7px; color: var(--muted);
}
.side-sub__link:hover { background: #fff; color: var(--navy); }
.side-sub__ico { color: #9aa2ad; display: inline-flex; }
.side-sub__link.is-active {
  background: var(--navy-soft); color: var(--navy); font-weight: 700;
  box-shadow: inset 2px 0 0 var(--navy-3);
}
.side-sub__link.is-active .side-sub__ico { color: var(--navy-3); }
.sidebar__empty { font-size: 12.5px; color: var(--muted); padding: 10px; }

/* -------- Área principal -------- */
.main { padding: 20px 26px 40px; min-width: 0; }

.breadcrumb {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--muted); margin-bottom: 18px;
  background: var(--silver-1); border: 1px solid var(--gray-line);
  padding: 9px 14px; border-radius: 10px;
}
.breadcrumb__ico { color: var(--navy-3); display: inline-flex; }
.breadcrumb__link { color: var(--navy-3); font-weight: 600; }
/* 08/09/2026 -- Jhosef: "tira todos os sublinhados de todos os efeitos de
   passar o mouse, fica muito feio". Sublinhado no hover e heranca de
   navegador dos anos 90: engrossa o texto, desloca a linha de base e
   pisca a cada passada do mouse. O alvo continua se anunciando -- pela
   COR, que e o que muda sem mexer no layout. */
.breadcrumb__link:hover { color: var(--navy3, #1b4f92); }
.breadcrumb__cur { color: var(--ink); font-weight: 700; }
.breadcrumb__sep { color: var(--silver-3); }

.page-head { margin-bottom: 22px; }
.page-head h1 {
  margin: 0 0 4px; font-size: 22px; color: var(--navy); font-weight: 700;
  display: flex; align-items: center; gap: 10px;
}
.page-head p { margin: 0; color: var(--muted); font-size: 14px; }
.page-head .icon { color: var(--navy-3); }

/* =====================================================================
   SELEÇÃO DE MÓDULOS (cards com ícone)
   ===================================================================== */
.mod-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.mod-card {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 20px 18px; border-radius: var(--radius);
  background: var(--white); border: 1px solid var(--gray-line);
  box-shadow: var(--shadow-sm); cursor: pointer;
  transition: transform .12s, box-shadow .15s, border-color .15s;
}
.mod-card:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-md);
  border-color: var(--navy-3);
}
.mod-card__ico {
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--navy-3), var(--navy));
  box-shadow: var(--shadow-sm);
}
.mod-card__nome { font-size: 16px; font-weight: 700; color: var(--navy); }
.mod-card__desc { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.mod-card__go {
  margin-top: auto; font-size: 12.5px; font-weight: 600; color: var(--navy-3);
  display: flex; align-items: center; gap: 6px;
}
.mod-card.is-locked { opacity: .5; cursor: not-allowed; }
.mod-card.is-locked:hover { transform: none; border-color: var(--gray-line); box-shadow: var(--shadow-sm); }
.mod-card__lock { position: absolute; top: 12px; right: 12px; color: var(--muted); }

/* =====================================================================
   MENUS DENTRO DO MÓDULO (botões modernos, estilo "SAP" repaginado)
   ===================================================================== */
.menu-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.menu-btn {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 16px; border-radius: var(--radius);
  background: var(--grad-silver); border: 1px solid var(--silver-3);
  box-shadow: var(--shadow-sm); cursor: pointer; text-align: left;
  transition: background .15s, transform .1s, box-shadow .15s, border-color .15s;
}
.menu-btn:hover {
  background: var(--grad-silver-hover); transform: translateY(-2px);
  box-shadow: var(--shadow-md); border-color: var(--navy-3);
}
.menu-btn:active { transform: translateY(0); }
/* Selecionado -> cinza */
.menu-btn.is-selected {
  background: var(--gray-sel); border-color: #9aa0a8;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.14);
}
.menu-btn__ico {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--navy-3), var(--navy));
}
.menu-btn.is-selected .menu-btn__ico { background: linear-gradient(135deg,#6b7280,#4b5563); }
.menu-btn__txt { display: flex; flex-direction: column; min-width: 0; }
.menu-btn__txt strong { font-size: 14.5px; color: var(--navy); }
.menu-btn__txt small { font-size: 12px; color: var(--muted); }
.menu-btn.is-selected .menu-btn__txt strong { color: var(--navy-2); }

/* =====================================================================
   FAVORITOS — estrela de favoritar + bloco na sidebar
   ---------------------------------------------------------------------
   Estrela: contorno cinza quando inativa; dourada preenchida quando o
   submódulo está favoritado (.is-on). É sempre um <button> irmão do
   botão/link do submódulo (nunca dentro dele), então o clique na estrela
   não dispara a navegação.
   ===================================================================== */
:root { --gold: #f5b301; }

.fav-star {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; padding: 4px;
  border-radius: 8px; color: #c2c8d0; line-height: 0;
  transition: color .15s, background .15s, transform .08s;
}
.fav-star svg { fill: none; transition: fill .15s; }
.fav-star:hover { color: var(--gold); background: rgba(245,179,1,.14); }
.fav-star:active { transform: scale(.82); }
.fav-star.is-on { color: var(--gold); }
.fav-star.is-on svg { fill: var(--gold); }

/* Célula do submódulo na tela do módulo: o botão ocupa tudo e a estrela
   fica sobreposta no canto superior direito. */
.menu-cell { position: relative; display: flex; }
.menu-cell > .menu-btn { flex: 1 1 auto; width: 100%; padding-right: 40px; }
.menu-cell > .fav-star { position: absolute; top: 8px; right: 8px; z-index: 2; }

/* Linha do submódulo na sidebar: link + estrela lado a lado. */
.side-sub__row { display: flex; align-items: center; gap: 2px; }
.side-sub__row > .side-sub__link { flex: 1 1 auto; min-width: 0; }
.side-sub__row > .fav-star { flex: 0 0 auto; padding: 3px; }

/* Bloco "Favoritos" no topo da sidebar. */
/* Cabeçalho do bloco Favoritos: é um <button> que recolhe/expande, mas
   mantém o visual de rótulo de seção (.sidebar__section). */
.sidebar__section--favs {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  width: 100%; background: none; border: none; cursor: pointer;
  font-family: inherit; text-align: left; color: var(--gold);
}
.sidebar__section--favs:hover { color: #d99a00; }
.sidebar__section-txt { display: inline-flex; align-items: center; gap: 6px; }
.sidebar__section--favs .icon { color: var(--gold); }
.sidebar__favs-cont {
  font-size: 10px; font-weight: 700; color: var(--muted);
  background: var(--silver-2); border-radius: 10px; padding: 1px 6px; letter-spacing: 0;
}
/* Seta do cabeçalho: aponta para baixo (expandido); gira -90° quando recolhido. */
.sidebar__section--favs .side-item__caret { border-top-color: currentColor; }
.sidebar__favs-wrap.is-collapsed .side-item__caret { transform: rotate(-90deg); }
.sidebar__favs-wrap.is-collapsed .side-sub--favs,
.sidebar__favs-wrap.is-collapsed .sidebar__favs-vazio { display: none; }

.side-sub--favs { margin-top: 2px; border-left-color: rgba(245,179,1,.5); }
.sidebar__favs-vazio { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.sidebar__favs-vazio .icon { color: var(--gold); }

/* Card "Favoritos" na seleção de módulos (destaque dourado). */
.mod-card--fav { border-color: rgba(245,179,1,.55); }
.mod-card--fav:hover { border-color: var(--gold); }
.mod-card__ico--fav { background: linear-gradient(135deg, #f7c948, #f5b301); }

/* Estado vazio da página Favoritos. */
.fav-vazio {
  text-align: center; max-width: 460px; margin: 40px auto;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 32px 24px; border: 1px dashed var(--silver-3);
  border-radius: var(--radius); background: var(--silver-1);
}
.fav-vazio__ico { color: var(--gold); }
.fav-vazio h3 { margin: 0; color: var(--navy); font-size: 17px; }
.fav-vazio p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.fav-vazio p .icon { color: var(--gold); vertical-align: middle; }
.fav-vazio .btn { margin-top: 6px; }

/* =====================================================================
   PÁGINA "EM CONSTRUÇÃO"
   ===================================================================== */
.construcao {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 60px 20px; gap: 14px;
  background: var(--silver-1); border: 1px dashed var(--silver-3);
  border-radius: var(--radius);
}
.construcao__ico {
  width: 90px; height: 90px; border-radius: 24px; color: var(--navy);
  background: repeating-linear-gradient(45deg, #f2c94c33, #f2c94c33 12px, #fff 12px, #fff 24px);
  display: grid; place-items: center; border: 1px solid var(--silver-3);
}
.construcao h2 { margin: 0; color: var(--navy); font-size: 22px; }
.construcao p { margin: 0; color: var(--muted); max-width: 460px; line-height: 1.6; }

/* =====================================================================
   TABELAS / FORMULÁRIOS (cadastro de usuários)
   ===================================================================== */
.card {
  background: #fff; border: 1px solid var(--gray-line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 18px 18px; margin-bottom: 18px;
}
.card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.card__head h3 { margin: 0; font-size: 16px; color: var(--navy); }

.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.toolbar .field { margin: 0; }
.toolbar input { min-width: 220px; }

.table-wrap { overflow-x: auto; }
table.grid { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.grid th, table.grid td {
  text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--gray-line);
  vertical-align: middle;
}
table.grid th { white-space: nowrap; }
table.grid td:last-child { white-space: nowrap; width: 1%; }
table.grid.tbl-usuarios td:nth-child(3) { max-width: 220px; white-space: normal; } /* cargo */
table.grid.tbl-usuarios td:nth-child(5) { max-width: 260px; white-space: normal; } /* módulos */
table.grid thead th {
  background: var(--silver-1); color: var(--muted);
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
  position: sticky; top: 0;
}
table.grid tbody tr:hover { background: var(--navy-soft); }
.badge {
  display: inline-block; padding: 3px 9px; border-radius: 20px;
  font-size: 11.5px; font-weight: 700;
}
.badge--n1 { background:#eef2f7; color:#5b6470; }
.badge--n2 { background:#e3f0ff; color:#1f5fae; }
.badge--n3 { background:#e7f6ec; color:#1f8a4c; }
.badge--n4 { background:#ece4fb; color:#6b3fb0; }
.badge--n5 { background:#fde7e6; color:#c0392b; }
.badge--on  { background:#e7f6ec; color:#1f8a4c; }
.badge--off { background:#f1f2f4; color:#8a8f98; }
.row-actions { display: flex; gap: 6px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-size: 11.5px; padding: 3px 9px; border-radius: 20px;
  background: var(--silver-2); color: var(--ink);
}
.chip--all { background: var(--navy-soft); color: var(--navy); font-weight: 700; }

/* Grid do formulário */
.form-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
.form-grid .field.col-2 { grid-column: 1 / -1; }
.mods-pick {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px; padding: 12px; border: 1px solid var(--gray-line);
  border-radius: var(--radius-sm); background: var(--silver-1);
}
.mods-pick label {
  display: flex; align-items: center; gap: 8px; font-size: 13px;
  font-weight: 500; color: var(--ink); cursor: pointer;
}
.mods-pick input { width: auto; }

/* Módulos + telas granulares (usuarios.html): cada módulo vira um bloco
   com o checkbox do módulo inteiro em cima e, embaixo, as telas dele —
   habilitadas só quando o módulo NÃO está marcado por inteiro. */
.mods-pick { grid-template-columns: 1fr; max-height: 360px; overflow-y: auto; }
.mod-block {
  border-bottom: 1px dashed var(--gray-line); padding-bottom: 8px; margin-bottom: 4px;
}
.mod-block:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.mod-block__head {
  display: flex; align-items: center; gap: 8px; font-size: 13px;
  font-weight: 700; color: var(--navy); cursor: pointer; margin-bottom: 6px;
}
.mod-block__head input { width: auto; }
.mod-block__telas {
  display: flex; flex-direction: column; gap: 4px; padding-left: 24px;
}
.mod-block__telas.is-disabled { opacity: .45; }
.mod-block__tela {
  display: flex; align-items: center; gap: 6px; font-size: 12.5px;
  font-weight: 400; color: var(--ink); cursor: pointer;
}
.mod-block__tela input { width: auto; }
.mod-block__tela input:disabled { cursor: not-allowed; }
.chip--tela { background: #fff3cd; color: #8a6300; font-weight: 600; }

/* Uma linha por tela: nome/checkbox à esquerda, permissões de empresa
   (quando a tela tiver) alinhadas à direita, na MESMA linha. */
.tela-linha {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; padding: 2px 0;
}

/* Empresas com acesso liberado (usuarios.html) */
.empresas-pick {
  display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 12px;
  border: 1px solid var(--gray-line); border-radius: var(--radius-sm); background: var(--silver-1);
}

/* Checkboxes de empresa POR TELA, inline dentro da árvore de módulos
   (usuarios.html > montarModsPick > empresaTelaHtml) — só aparecem nas
   telas com dado segregado por empresa (TELAS_COM_EMPRESA). */
.tela-empresa-cols {
  display: inline-flex; align-items: center; gap: 3px 8px; flex-wrap: wrap;
  margin-left: 8px; padding: 2px 7px; border-radius: 20px;
  background: #eef2ff; font-size: 11px; color: var(--navy);
}
.tela-empresa-cb-label {
  display: inline-flex; align-items: center; gap: 2px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.tela-empresa-cb-label input { width: auto; }

/* =====================================================================
   MODAL
   ===================================================================== */
.modal-back {
  position: fixed; inset: 0; background: rgba(8,34,67,.5);
  display: none; align-items: flex-start; justify-content: center;
  padding: 40px 16px; z-index: 60; overflow-y: auto;
}
.modal-back.is-open { display: flex; }
.modal {
  background: #fff; width: 100%; max-width: 640px;
  border-radius: var(--radius); box-shadow: 0 30px 80px rgba(0,0,0,.4);
  animation: rise .25s ease;
}
.modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--gray-line);
}
.modal__head h3 { margin: 0; color: var(--navy); font-size: 17px; }
.modal__close {
  background: transparent; border: 0; font-size: 22px; cursor: pointer;
  color: var(--muted); line-height: 1;
}
.modal__body { padding: 20px; }
.modal__foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 20px; border-top: 1px solid var(--gray-line);
  background: var(--silver-1); border-radius: 0 0 var(--radius) var(--radius);
}

.form-msg { font-size: 13px; font-weight: 600; margin-top: 10px; min-height: 18px; }
.form-msg.err { color: #d64541; }
.form-msg.ok  { color: #1f8a4c; }

.alert {
  padding: 12px 16px; border-radius: var(--radius-sm);
  font-size: 13.5px; margin-bottom: 16px;
  background: #fff8e6; border: 1px solid #f2d98a; color: #8a6d1a;
}

/* =====================================================================
   RESPONSIVO
   ===================================================================== */
@media (max-width: 900px) {
  .topbar__hamburger { display: inline-flex; }
  .layout { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; top: var(--topbar-h); left: 0; z-index: 45;
    width: var(--sidebar-w); transform: translateX(-100%);
    transition: transform .2s ease; box-shadow: var(--shadow-md);
  }
  body.sidebar-open .sidebar { transform: translateX(0); }
  .topbar__user-info { display: none; }
  .form-grid { grid-template-columns: 1fr; }
}

/* ---- Empresa (filial) ativa na barra superior ---- */
.topbar__empresa { display:flex; align-items:center; gap:6px; margin-right:14px; color:#fff; }
.topbar__empresa-ico { display:flex; opacity:.85; }
.topbar__empresa-nome { font-size:13px; font-weight:600; }
.topbar__empresa-sel { background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.25);
  border-radius:8px; padding:5px 8px; font-size:13px; font-weight:600; cursor:pointer; }
.topbar__empresa-sel option { color:#12233d; }
@media (max-width:640px){ .topbar__empresa-nome, .topbar__empresa-sel { max-width:120px; } }

/* =====================================================================
   NOTIFICAÇÕES — sininho + painel lateral (V2)
   ===================================================================== */
.topbar__bell {
  position: relative; background: #ffffff14; border: 1px solid #ffffff2e; color: #fff;
  width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
  display: grid; place-items: center; transition: background .15s;
}
.topbar__bell:hover { background: #ffffff2b; }
.topbar__bell-badge {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px;
  background: #e5484d; color: #fff; border-radius: 10px; font-size: 11px; font-weight: 700;
  display: grid; place-items: center; border: 2px solid var(--navy-2);
}

/* Painel lateral direito */
.notif-panel {
  position: fixed; top: var(--topbar-h); right: 0; z-index: 60;
  width: 360px; max-width: 90vw; height: calc(100vh - var(--topbar-h));
  background: #fff; border-left: 1px solid var(--gray-line); box-shadow: -8px 0 24px rgba(11,46,92,.10);
  transform: translateX(100%); transition: transform .22s ease;
  display: flex; flex-direction: column;
}
/* IMPORTANTE: usar o ID (#notifPanel), não a classe (.notif-panel) — a classe
   também é usada pelo painel da IA (#iaPanel) só para herdar o visual, e um
   seletor por classe abriria os dois painéis juntos ao clicar em qualquer um. */
body.notif-open #notifPanel { transform: translateX(0); }
/* "espreme" a área de trabalho no desktop */
@media (min-width: 981px) {
  .layout { transition: margin-right .22s ease; }
  body.notif-open .layout { margin-right: 360px; }
}
.notif-overlay { position: fixed; inset: 0; background: rgba(8,24,48,.28); z-index: 55; opacity: 0; visibility: hidden; transition: opacity .2s; }
@media (max-width: 980px) { body.notif-open #notifOverlay { opacity: 1; visibility: visible; } }

.notif-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--gray-line); }
.notif-panel__head strong { display: flex; align-items: center; gap: 8px; color: var(--navy); font-size: 15px; }
.notif-panel__head-acoes { display: flex; gap: 4px; }
.notif-icobtn { background: transparent; border: 0; color: var(--muted); cursor: pointer; width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; transition: background .12s, color .12s; }
.notif-icobtn:hover { background: var(--silver-1); color: var(--navy); }
.notif-panel__filtros { display: flex; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--gray-line); }
.notif-panel__lista { flex: 1; overflow-y: auto; padding: 6px 0 20px; }

.notif-grupo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 12px 14px 4px; }
.notif-item { display: flex; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--silver-1); cursor: pointer; transition: background .12s; align-items: flex-start; }
.notif-item:hover { background: var(--silver-1); }
.notif-item.is-nova { background: #f3f8ff; }
.notif-item.is-nova:hover { background: #e9f2ff; }
.notif-item__ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; background: var(--silver-2); color: var(--muted); }
.notif-item.tipo-info .notif-item__ico { background: #e3f0ff; color: #1f5fae; }
.notif-item.tipo-aprovacao .notif-item__ico { background: #fff3e0; color: #b26a00; }
.notif-item.tipo-alerta .notif-item__ico { background: #fde7e6; color: #c0392b; }
.notif-item.tipo-sucesso .notif-item__ico { background: #e7f6ec; color: #1f8a4c; }
.notif-item__corpo { flex: 1; min-width: 0; }
.notif-item__topo { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.notif-item__topo strong { font-size: 13.5px; color: var(--ink); font-weight: 600; }
.notif-item.is-nova .notif-item__topo strong { font-weight: 800; }
.notif-item__tempo { font-size: 11px; color: var(--muted); white-space: nowrap; }
.notif-item__msg { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.notif-item__tag { display: inline-block; margin-top: 5px; font-size: 10px; font-weight: 700; color: #b26a00; background: #fff3e0; padding: 2px 7px; border-radius: 20px; }
.notif-item__acoes { display: flex; flex-direction: column; gap: 2px; opacity: 0; transition: opacity .12s; }
.notif-item:hover .notif-item__acoes { opacity: 1; }
.notif-vazio { text-align: center; color: var(--muted); padding: 48px 20px; }
.notif-vazio p { margin: 10px 0 0; font-size: 13px; }

/* =====================================================================
   IA / CHAT — casca (V7)
   ===================================================================== */
.ia-panel { display: flex; flex-direction: column; }
/* mesmo cuidado aqui: por ID, para não reabrir o painel de notificações junto */
body.ia-open #iaPanel { transform: translateX(0); }
body.ia-open #iaOverlay { opacity: 1; visibility: visible; }
@media (min-width: 981px) { body.ia-open .layout { margin-right: 360px; } }
.ia-mensagens { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ia-msg { max-width: 85%; padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.4; }
.ia-msg--ia { background: var(--silver-1); color: var(--ink); align-self: flex-start; border-bottom-left-radius: 4px; }
.ia-msg--user { background: var(--navy-3); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.ia-msg--pensando { opacity: .6; font-style: italic; }
.ia-input-row { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--gray-line); }
.ia-input-row input { flex: 1; padding: 10px 12px; border: 1px solid var(--silver-3); border-radius: var(--radius-sm); background: var(--silver-1); font-size: 13.5px; }
.ia-input-row input:focus { outline: none; border-color: var(--navy-3); background: #fff; }
.ia-send { background: linear-gradient(90deg, var(--navy-3), var(--navy)); border: none; }

/* ícone flutuante da IA (fora do topbar) — círculo azul, arrastável, fechável */
.ia-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 900;
  width: 54px; height: 54px; border-radius: 50%; border: none; padding: 0;
  display: grid; place-items: center; cursor: grab;
  background: linear-gradient(135deg, #2a7fe0, var(--navy-3), var(--navy));
  color: #fff; box-shadow: 0 6px 18px rgba(20, 40, 80, .35);
  transition: transform .12s, box-shadow .12s;
}
.ia-float:hover { transform: scale(1.06); box-shadow: 0 8px 22px rgba(20, 40, 80, .45); }
.ia-float:active { cursor: grabbing; }
.ia-float__close {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; color: #c0392b; font-size: 14px; line-height: 18px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.25); opacity: 0; transform: scale(.7);
  transition: opacity .12s, transform .12s;
}
.ia-float:hover .ia-float__close { opacity: 1; transform: scale(1); }
@media (max-width: 640px) { .ia-float { right: 14px; bottom: 14px; width: 48px; height: 48px; } }

/* Banner de aniversário pessoal (V11) — fluxo normal, nunca overlay/fixed,
   por isso jamais sobrepõe sino/perfil no topbar. */
.aniv-banner {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(90deg, #ffdf6b, #ffb84d);
  color: #4a3200; font-weight: 600; font-size: 14px;
  padding: 10px 20px; position: relative;
}
.aniv-banner__ico { display: inline-flex; }
.aniv-banner__texto { flex: 1; }
.aniv-banner__fechar {
  border: none; background: none; cursor: pointer; font-size: 20px;
  line-height: 1; color: #4a3200; padding: 0 4px;
}

/* Popup flutuante de "faltam dados para cruzar as bases" (2026-07-29) — cor
   bege/dourado (mesma família do card "Aguardando embarque" do calendário,
   #b26a00), texto branco, BEM visível, fixo no canto — diferente do banner de
   aniversário (que é sempre em fluxo normal). Ver UI.avisoCobertura() em
   js/ui.js e Rastreio.diagnosticoCobertura() em js/data-rastreio.js. */
.aviso-cobertura-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 900;
  display: flex; align-items: flex-start; gap: 12px;
  max-width: 420px; background: linear-gradient(135deg, #b26a00, #8a5000);
  color: #fff; border-radius: 12px; padding: 14px 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
  animation: avisoCoberturaEntra .25s ease-out;
}
@keyframes avisoCoberturaEntra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.aviso-cobertura-float__ico { flex-shrink: 0; margin-top: 1px; }
.aviso-cobertura-float__corpo { flex: 1; min-width: 0; }
.aviso-cobertura-float__titulo { font-weight: 800; font-size: 14px; margin-bottom: 4px; }
.aviso-cobertura-float__texto { font-size: 12.5px; line-height: 1.4; opacity: .96; }
.aviso-cobertura-float__link {
  display: inline-block; margin-top: 8px; color: #fff; font-weight: 700; font-size: 12.5px;
  text-decoration: underline; text-underline-offset: 2px;
}
.aviso-cobertura-float__link:hover { opacity: .85; }
.aviso-cobertura-float__fechar {
  border: none; background: none; cursor: pointer; font-size: 19px; line-height: 1;
  color: #fff; opacity: .85; padding: 0 2px; flex-shrink: 0;
}
.aviso-cobertura-float__fechar:hover { opacity: 1; }
@media (max-width: 640px) { .aviso-cobertura-float { left: 14px; right: 14px; bottom: 14px; max-width: none; } }

/* Card de aniversariantes de hoje (modulos.html) */
.aniv-card {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--navy-soft); border: 1px solid var(--silver-3);
  border-radius: var(--radius); padding: 16px; margin-bottom: 20px;
}
.aniv-card__titulo { margin: 0; color: var(--navy); font-size: 16px; }
.aniv-card__lista { display: flex; flex-wrap: wrap; gap: 12px; }
.aniv-card__pessoa { display: flex; align-items: center; gap: 8px; }
.aniv-card__avatar {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--gray-line); background: #fff;
}
.aniv-card__avatar--empty { display: grid; place-items: center; color: #b6bcc4; }


/* =======================================================================
   Filtros multi-seleção (.ms) — PADRÃO OFICIAL DO PROJETO (30/07/2026)
   Motor em js/ui-filtros.js. Nasceu na tela Rastreio de Pedidos Digitados
   e foi promovido a padrão: TODO filtro do sistema é multi-seleção, com
   busca por digitação e checkbox para marcar mais de uma opção.
   ======================================================================= */
.ms { display:flex; flex-direction:column; gap:4px; margin-bottom:12px; position:relative; }
.ms-label { font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted, #5c7290); font-weight:700; }
.ms-btn { background:var(--bg, #f0f4f8); border:1px solid var(--border, #d7e0ea); border-radius:6px; color:var(--text, #1a2535);
  font-family:var(--font, 'Segoe UI', system-ui, Arial, sans-serif); font-size:.78rem; padding:8px 10px; text-align:left; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; width:100%; }
.ms-btn::after { content:'▾'; color:var(--muted, #5c7290); font-size:.62rem; margin-left:6px; }
.ms-btn.ativo { border-color:var(--navy3, #1b4f92); background:var(--navy5, #c7d6ea); font-weight:700; color:var(--navy2, #123f78); }
.ms-panel { position:absolute; top:100%; left:0; right:0; background:#fff; border:1px solid var(--border, #d7e0ea);
  border-radius:8px; box-shadow:var(--shadow, 0 2px 12px rgba(11,46,92,.10)); z-index:60; padding:8px; margin-top:4px; }
.ms-panel.hidden { display:none; }
.ms-search { width:100%; box-sizing:border-box; padding:7px 9px; border:1px solid var(--border, #d7e0ea); border-radius:6px;
  font-family:var(--font, 'Segoe UI', system-ui, Arial, sans-serif); font-size:.76rem; margin-bottom:7px; outline:none; }
.ms-search:focus { border-color:var(--navy3, #1b4f92); }
/* overflow-y:auto sozinho faz o navegador tratar overflow-x como "auto"
   também (regra da spec de CSS) -- sem isto aparece uma barra de rolagem
   horizontal indevida e o texto das opções fica cortado/invisível. */
.ms-list { max-height:200px; overflow-y:auto; overflow-x:hidden; }
.ms-empty { color:var(--muted, #5c7290); font-size:.72rem; padding:8px; text-align:center; font-style:italic; }
.ms-opt { display:flex; align-items:center; gap:8px; font-size:.75rem; padding:5px 6px; border-radius:5px; cursor:pointer; }
.ms-opt:hover { background:var(--bg, #f0f4f8); }
.ms-opt input { cursor:pointer; flex:0 0 auto; }
.ms-actions { border-top:1px solid var(--border, #d7e0ea); margin-top:6px; padding-top:6px; display:flex; justify-content:space-between; }
.ms-actions a { cursor:pointer; color:var(--navy3, #1b4f92); font-size:.72rem; font-weight:700; text-decoration:none; }
.ms-actions a:hover { color:var(--navy, #0b2e5c); background:var(--bg, #f0f4f8);
  border-radius:5px; box-shadow:0 0 0 4px var(--bg, #f0f4f8); }

/* Faixa de filtros ativos (chips) — padrão do projeto: o usuário enxerga
   tudo que está filtrando no cabeçalho do relatório e remove clicando. */
.filters-bar { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; align-items:center; min-height:20px; }
.tag { background:var(--navy5, #c7d6ea); border:1px solid var(--navy4, #3f6fae); border-radius:20px; padding:4px 12px;
  font-size:.73rem; color:var(--navy2, #123f78); }