/* GS Desk Control — casca e componentes server-rendered, fiéis ao protótipo
   Claude Design (spec/design). Usa exclusivamente os tokens Golden UI. */

/* ============================ LAYOUT / SHELL ============================ */
.app { display: flex; height: 100vh; width: 100%; overflow: hidden; }

/* ------------------------------- SIDEBAR ------------------------------- */
.sidebar {
  width: var(--sidebar-w); flex: 0 0 auto;
  background: var(--bg-raise);
  display: flex; flex-direction: column;
  transition: width .18s ease; overflow: hidden;
}
.app.is-collapsed .sidebar { width: var(--sidebar-w-slim); }
.sidebar__brand {
  height: 64px; flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px; padding: 0 16px;
  border-bottom: 1px solid var(--line);
}
.brand-tile {
  width: 26px; height: 26px; flex: 0 0 auto; border-radius: 5px;
  background: var(--gold); color: var(--gold-ink);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; letter-spacing: -.5px;
}
.brand-name {
  flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; letter-spacing: 1.4px;
  color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Cursor de terminal amarelo/dourado, à direita do nome. Some junto com o nome
   quando o menu recolhe (a regra .is-collapsed .brand-name esconde o conjunto). */
.brand-name::after {
  content: ""; display: inline-block;
  width: .5em; height: .95em; margin-left: .35em;
  background: var(--gold); vertical-align: middle;
  animation: terminal-cursor 1s steps(1, end) infinite;
}
@keyframes terminal-cursor {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
/* "GS" do nome em amarelo/dourado (menu aberto). */
.brand-name__gs { color: var(--gold); }
/* Tile "GS": escondido no menu aberto; aparece só quando o menu recolhe. */
.sidebar__brand .brand-tile { display: none; }
.app.is-collapsed .brand-tile { display: flex; }
.app.nav-autohide.is-collapsed .brand-tile { display: none; }
.collapse-btn {
  width: 26px; height: 26px; flex: 0 0 auto; display: flex; align-items: center;
  justify-content: center; border-radius: 5px; color: var(--text-faint);
  background: transparent; border: none; cursor: pointer;
}
.collapse-btn:hover { background: var(--line); color: var(--text); }
.collapse-btn svg { width: 20px; height: 20px; stroke-width: var(--icon-stroke); }

.nav { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 14px 0; }
.nav__group { margin-bottom: 6px; }
.nav__eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-faint); padding: 10px 20px 6px;
}
.nav__item {
  position: relative; display: flex; align-items: center; gap: 11px;
  padding: 9px 18px 9px 20px; color: var(--text-dim);
  font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav__item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav__item.is-active { background: var(--surface-2); color: var(--text); font-weight: 600; }
.nav__item.is-active::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  background: var(--gold); border-radius: 0 3px 3px 0;
}
.nav__item svg { width: 20px; height: 20px; flex: 0 0 auto; stroke-width: var(--icon-stroke); }
.nav__item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.app.is-collapsed .nav__eyebrow,
.app.is-collapsed .nav__item span,
.app.is-collapsed .brand-name { display: none; }
.app.is-collapsed .nav__item { justify-content: center; padding: 9px; gap: 0; }
.app.is-collapsed .sidebar__brand { justify-content: center; padding: 0; }

/* ---- Navegação auto-ocultável (Dashboard) --------------------------------
   No Dashboard o menu recolhe para dar toda a largura aos gráficos e reaparece
   ao aproximar o mouse da lateral esquerda. Vira overlay (position:absolute)
   para não reposicionar o conteúdo — o dashboard é um grid de altura fixa. */
.app.nav-autohide { position: relative; --nav-peek: 6px; }
.app.nav-autohide .sidebar {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 45;
  width: var(--sidebar-w);
  transform: translateX(calc(-100% + var(--nav-peek)));
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.app.nav-autohide .sidebar:hover,
.app.nav-autohide .sidebar:focus-within {
  transform: translateX(0);
  box-shadow: var(--shadow-modal);
}
/* Puxador: fina faixa dourada na borda enquanto o menu está recolhido. */
.app.nav-autohide .sidebar::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 3px;
  background: var(--gold); opacity: .5;
  transition: opacity var(--t-fast) var(--ease);
}
.app.nav-autohide .sidebar:hover::after,
.app.nav-autohide .sidebar:focus-within::after { opacity: 0; }

/* Em auto-hide o menu reaparece sempre completo, mesmo com o recolhido salvo. */
.app.nav-autohide.is-collapsed .sidebar { width: var(--sidebar-w); }
.app.nav-autohide.is-collapsed .nav__eyebrow,
.app.nav-autohide.is-collapsed .brand-name { display: block; }
.app.nav-autohide.is-collapsed .nav__item span { display: revert; }
.app.nav-autohide.is-collapsed .nav__item { justify-content: flex-start; padding: 9px 18px 9px 20px; gap: 11px; }
.app.nav-autohide.is-collapsed .sidebar__brand { justify-content: flex-start; padding: 0 16px; }

/* ------------------------------- TOPBAR ------------------------------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: 64px; min-height: 64px; flex: 0 0 auto;
  background: var(--surface); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; padding: 0 28px; gap: 24px;
}
.topbar__titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.topbar__title { font-size: 15px; font-weight: 600; white-space: nowrap; }
.topbar__subtitle { font-size: 11.5px; color: var(--text-faint); white-space: nowrap; }
.topbar__spacer { flex: 1; }
.topbar__toggle { margin-right: 4px; }   /* toggle de recolher o menu, na topbar */

.seg {
  display: flex; align-items: center; gap: 4px;
  background: var(--surface-3); border: 1px solid var(--line); border-radius: 7px; padding: 3px;
}
.seg__item {
  padding: 5px 12px; border-radius: 5px; font-size: 12.5px; color: var(--text-dim);
  cursor: pointer; user-select: none;
}
.seg__item.is-active { background: var(--surface); color: var(--text); font-weight: 600; }
.seg__item.is-disabled { color: var(--text-faint); cursor: not-allowed; }

.topbar__user {
  display: flex; align-items: center; gap: 9px; padding-left: 20px;
  border-left: 1px solid var(--line);
}
.topbar__avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--surface-3);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: var(--text-dim);
}
.topbar__uname { font-size: 13px; font-weight: 600; line-height: 1.25; }
.topbar__shift { font-size: 11.5px; color: var(--text-faint); font-family: var(--font-num); }
.topbar__logout { color: var(--text-faint); }
.topbar__logout:hover { color: var(--text); }

.content { flex: 1; min-height: 0; overflow-y: auto; view-transition-name: gs-content; }

/* Transição entre abas (htmx boost + View Transitions): o conteúdo faz
   crossfade + leve slide; a barra lateral fica parada. */
@keyframes gs-content-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes gs-content-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-4px); } }
::view-transition-old(gs-content) { animation: gs-content-out var(--t-fast) var(--ease) both; }
::view-transition-new(gs-content) { animation: gs-content-in var(--t-med) var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(gs-content), ::view-transition-new(gs-content),
  .modal, .modal-veil, .drawer, .drawer-veil { animation: none !important; }
}
.wrap { padding: 28px 40px 64px; max-width: 1500px; margin: 0 auto; width: 100%; }
/* Página em largura total (igual ao Mapa) — sem o cap centralizado do .wrap. */
.content-full { padding: 24px 32px 40px; width: 100%; }

.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.page-head__title { font-size: 20px; font-weight: 600; }

/* ============================ EYEBROW / TÍTULOS ============================ */
.eyebrow { font-size: 11px; letter-spacing: .9px; color: var(--text-faint); font-weight: 600; text-transform: uppercase; }
.section-title { font-size: 14px; font-weight: 600; color: var(--text); }

/* ============================ AVATAR ============================ */
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface-3); color: var(--text-dim);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; flex: none;
}

/* ============================ CARTÕES / PAINÉIS ============================ */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.panel--pad { padding: 22px 24px; }
.panel__head {
  display: flex; align-items: center; gap: 12px; padding: 15px 22px;
  border-bottom: 1px solid var(--line);
}
.panel__title { font-size: 14px; font-weight: 600; }

/* KPI cards */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 12px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; min-height: 104px; }
.kpi__label { font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--text-faint); }
.kpi__value { font-family: var(--font-num); font-size: 28px; font-weight: 600; margin-top: 8px; letter-spacing: -.4px; }
.kpi__hint { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.kpi__value--gold { color: var(--gold); }
.kpi__value--red { color: var(--red); }

/* Faixa de stats (dividida por bordas) */
.statstrip { display: flex; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 18px; }
.statstrip__cell { flex: 1; padding: 15px 22px; border-right: 1px solid var(--line); }
.statstrip__cell:last-child { border-right: none; }
.statstrip__num { font-size: 25px; font-weight: 600; margin-top: 3px; }
.statstrip__num--gold { color: var(--gold); }
.statstrip__num--red { color: var(--red); }

/* ============================ BOTÕES ============================ */
.btn {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px;
  border-radius: 8px; font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text);
  cursor: pointer; transition: all var(--t-fast) var(--ease); white-space: nowrap;
}
.btn:hover { background: var(--surface-3); text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn svg { width: 18px; height: 18px; stroke-width: var(--icon-stroke); }
.btn--primary { background: var(--gold-grad); color: var(--gold-ink); border-color: transparent; box-shadow: var(--shadow-gold); }
.btn--primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-gold-hover); background: var(--gold-grad); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--text-dim); }
.btn--ghost:hover { background: var(--surface-3); color: var(--text); }
.btn--danger { color: var(--red); }
.btn--danger:hover { background: var(--red-dim); }
.btn--sm { height: 34px; font-size: 12.5px; padding: 0 12px; }
/* Botão à espera do horário da ronda — apagado e não clicável até liberar. */
.btn.is-locked { opacity: .45; pointer-events: none; box-shadow: none; filter: saturate(.5); }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 8px; background: transparent; border: 1px solid var(--line); color: var(--text-dim); cursor: pointer;
}
.icon-btn:hover { background: var(--surface-3); color: var(--gold); }
.icon-btn svg { width: 15px; height: 15px; stroke-width: var(--icon-stroke); }

/* ============================ TABELAS (grid-look) ============================ */
.table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
table.data { width: 100%; border-collapse: collapse; }
table.data thead th {
  text-align: left; font-size: 11px; letter-spacing: .8px; text-transform: uppercase;
  color: var(--text-faint); font-weight: 600; padding: 12px 22px; border-bottom: 1px solid var(--line);
}
table.data tbody td { padding: 14px 22px; border-bottom: 1px solid var(--line); font-size: 13.5px; vertical-align: middle; }
/* Cabeçalho fixo ao rolar (tabela dentro de modal com scroll). */
table.data--sticky thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); }
table.data tbody tr { transition: background var(--t-fast) var(--ease); }
table.data tbody tr:hover { background: var(--surface-2); }
table.data tbody tr:last-child td { border-bottom: none; }
.cell-num { font-family: var(--font-num); }

/* ============================ BADGES DE STATUS ============================ */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
  border-radius: var(--r-pill); font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--nodot::before { display: none; }
.badge--success { background: var(--green-dim); color: var(--green); }
.badge--progress, .badge--warn { background: var(--gold-dim); color: var(--gold); }
.badge--pending, .badge--info { background: var(--blue-dim); color: var(--blue); }
.badge--danger { background: var(--red-dim); color: var(--red); }
.badge--neutral { background: var(--surface-3); color: var(--text-dim); }
/* tag/chip (classificações) */
.tag { padding: 3px 9px; border: 1px solid var(--line); border-radius: 20px; font-size: 12px; color: var(--text-dim); background: var(--surface-2); white-space: nowrap; }

/* ============================ FORMULÁRIOS ============================ */
.field { margin-bottom: 16px; }
.field__label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; }
.field__hint { font-size: 11.5px; color: var(--text-dim); margin-top: 4px; }
.field__error { font-size: 11.5px; color: var(--red); margin-top: 4px; }
.input, .select, .textarea {
  width: 100%; height: 38px; padding: 0 12px; background: var(--surface-2);
  border: 1px solid var(--line-strong); border-radius: 8px; color: var(--text);
  font-family: var(--font-ui); font-size: 13px; transition: border-color var(--t-fast) var(--ease);
}
.textarea { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--gold-line); }
.input.num { font-family: var(--font-num); }

/* ============================ TOOLBAR / BUSCA ============================ */
.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.toolbar__search {
  flex: 1; min-width: 200px; max-width: 320px; height: 38px; display: flex; align-items: center;
  gap: 8px; padding: 0 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
}
.toolbar__search input { border: none; background: transparent; height: 100%; flex: 1; color: var(--text); font-size: 13.5px; outline: none; }
.toolbar__search svg { width: 19px; height: 19px; color: var(--text-faint); stroke-width: var(--icon-stroke); }
.chip { padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; font-size: 12.5px; color: var(--text-dim); background: var(--surface); cursor: pointer; height: 38px; display: inline-flex; align-items: center; }
.chip.is-active { border-color: var(--gold-line); color: var(--gold); background: var(--gold-dim); }

/* ============================ DRAWER / MODAL ============================ */
.drawer-veil { position: fixed; inset: 0; background: rgba(10,10,14,.55); backdrop-filter: blur(2px); z-index: 50; display: flex; justify-content: flex-end; animation: veil-in var(--t-med) var(--ease); }
.drawer { width: 460px; max-width: 92vw; background: var(--surface); height: 100%; border-left: 1px solid var(--line); box-shadow: var(--shadow-modal); display: flex; flex-direction: column; animation: drawer-in var(--t-med) var(--ease); }
@keyframes drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes veil-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.drawer__title { font-size: 15px; font-weight: 600; }
.drawer__body { padding: 20px 22px; overflow-y: auto; flex: 1; }
.drawer__foot { padding: 16px 22px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; }
.modal-veil { position: fixed; inset: 0; background: rgba(10,10,14,.6); backdrop-filter: blur(2px); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 24px; animation: veil-in var(--t-med) var(--ease); }
.modal { width: 520px; max-width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-modal); display: flex; flex-direction: column; max-height: 88vh; min-width: 0; min-height: 0; overflow: hidden; animation: modal-in var(--t-med) var(--ease); }
/* Modais de formulário longo (Bases, Agentes): altura menor, corpo rola por dentro. */
.modal--compact { max-height: 74vh; }
.modal__head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); }
/* Form que preenche o modal: corpo rola, rodapé fixo no fundo. */
.modal__form { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.modal__title { font-size: 16px; font-weight: 600; }
/* Corpo do modal: cabeçalho/rodapé fixos; a LISTA de pendências é que rola,
   deixando os campos (instrução + dropdown + comentário) fixos no lugar. */
.modal__body { flex: 1 1 auto; min-height: 0; padding: 20px 22px; display: flex; flex-direction: column; overflow: visible; }

/* Registro de ronda por pendência (dropdown + comentário + lista).
   flex-basis:0 + min-width:0 = largura proporcional FIXA, independente do texto
   selecionado (o nome da base não estica o campo nem quebra o botão de linha). */
.pend-add { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; margin-bottom: 12px; flex: 0 0 auto; }
.pend-add .input { flex: 1.3 1 0; min-width: 0; }
.pend-add .btn { flex: 0 0 auto; }
.pend-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* Dropdown customizado de base (flutuante — não empurra os campos de baixo) */
.basedd { position: relative; flex: 1 1 0; min-width: 0; }
.basedd__trigger { width: 100%; height: 38px; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 0 12px; background: var(--surface-2); border: 1px solid var(--line-strong);
  border-radius: 8px; color: var(--text); font-family: var(--font-ui); font-size: 13px; cursor: pointer;
  transition: border-color var(--t-fast) var(--ease); }
.basedd__trigger:hover, .basedd.is-open .basedd__trigger { border-color: var(--gold-line); }
.basedd__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.basedd__label.is-placeholder { color: var(--text-faint); }
.basedd__chev { width: 18px; height: 18px; flex: none; color: var(--text-faint); transition: transform .15s var(--ease); }
.basedd.is-open .basedd__chev { transform: rotate(180deg); }
.basedd__panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  width: min(340px, calc(100vw - 90px)); min-width: 100%; background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: var(--shadow-modal); overflow: hidden; }
.basedd__search { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-bottom: 1px solid var(--line); }
.basedd__search svg { width: 16px; height: 16px; flex: none; color: var(--text-faint); stroke-width: var(--icon-stroke); }
.basedd__search input { flex: 1; min-width: 0; border: none; background: transparent; color: var(--text); font-size: 13px; outline: none; }
.basedd__list { max-height: 200px; overflow-y: auto; padding: 5px; }
.basedd__opt { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%;
  text-align: left; padding: 8px 10px; background: transparent; border: none; border-radius: 7px;
  cursor: pointer; color: var(--text); }
.basedd__opt:hover { background: var(--surface-2); }
.basedd__opt-nome { font-size: 13px; font-weight: 500; }
.basedd__opt-sub { font-size: 11.5px; color: var(--text-faint); }
.basedd__empty { padding: 16px; text-align: center; color: var(--text-faint); font-size: 12.5px; }
.pend-lista { display: flex; flex-direction: column; gap: 8px; }
.pend-item { display: flex; align-items: center; gap: 10px; justify-content: space-between;
  padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; }
.pend-item__nome { font-weight: 600; font-size: 13px; }
.pend-item__obs { font-size: 12px; color: var(--text-dim); margin-top: 2px; word-break: break-word; }
.pend-vazio { text-align: center; color: var(--text-faint); font-size: 12.5px;
  padding: 16px; border: 1px dashed var(--line-strong); border-radius: 10px; }
.modal__foot { flex: 0 0 auto; padding: 16px 22px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

/* ---- Formulários em modal/drawer: FULLSCREEN responsivo no celular ----
   Preencher a tela toda ao preencher formulário no celular. Usa !important para
   sobrepor larguras inline (ex.: width:min(460px,...)); 100dvh acompanha a barra
   dos navegadores mobile; env(safe-area-*) respeita notch/indicador dos aparelhos. */
@media (max-width: 640px) {
  .modal-veil { padding: 0; align-items: stretch; justify-content: stretch; }
  .modal {
    width: 100% !important; max-width: 100% !important;
    height: 100dvh !important; max-height: 100dvh !important;
    border: none !important; border-radius: 0 !important;
  }
  .modal__head { padding: 16px; padding-top: max(16px, env(safe-area-inset-top)); }
  .modal__body { padding: 16px; overflow-y: auto; }
  .modal__foot {
    padding: 14px 16px; padding-bottom: max(14px, env(safe-area-inset-bottom));
    position: sticky; bottom: 0; background: var(--surface);
  }
  .modal__foot .btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }

  /* Drawer lateral também vira tela cheia. */
  .drawer-veil { justify-content: stretch; }
  .drawer {
    width: 100vw !important; max-width: 100% !important;
    height: 100dvh; border-left: none;
  }
  .drawer__head { padding: 16px; padding-top: max(16px, env(safe-area-inset-top)); }
  .drawer__body { padding: 16px; }
  .drawer__foot { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .drawer__foot .btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }

  /* Campos com 16px evitam o zoom automático do iOS ao focar. */
  .modal input, .modal select, .modal textarea,
  .drawer input, .drawer select, .drawer textarea { font-size: 16px; }
}

/* ============================ BANNER / MENSAGENS ============================ */
.banner { border-radius: 8px; padding: 12px 16px; font-size: 13px; border: 1px solid var(--line-strong); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.banner--success { background: var(--green-dim); color: var(--green); border-color: transparent; }
.banner--error, .banner--danger { background: var(--red-dim); color: var(--red); border-color: transparent; }
.banner--info { background: var(--blue-dim); color: var(--blue); border-color: transparent; }
.banner--warning { background: var(--gold-dim); color: var(--gold); border-color: transparent; }

/* ============================ EMPTY / STUB ============================ */
.empty { text-align: center; padding: 36px; color: var(--text-faint); font-size: 13px; }
.empty__title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.stub { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 55vh; text-align: center; gap: 14px; }
.stub svg { width: 40px; height: 40px; color: var(--gold); stroke-width: var(--icon-stroke); }
.stub__title { font-size: 18px; font-weight: 600; }
.stub__desc { color: var(--text-dim); max-width: 440px; }

/* ============================ NOTIFICAÇÃO DE RONDA ============================ */
/* Fora do fluxo flex p/ não distorcer — círculo fixo, centralizado à direita. */
.nav__dot {
  position: absolute; right: 16px; top: 50%; margin-top: -3.5px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--red); pointer-events: none;
}
.app.is-collapsed .nav__dot { right: 8px; top: 8px; margin-top: 0; }

.ronda-toast {
  position: fixed; right: 24px; bottom: 24px; z-index: 100;
  width: 344px; max-width: calc(100vw - 32px);
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 14px 14px 16px;
  background: var(--surface); border: 1px solid var(--gold-line); border-radius: 14px;
  box-shadow: var(--shadow-modal); animation: toast-in .38s var(--ease, ease) both;
}
.ronda-toast.is-out { animation: toast-out .4s var(--ease, ease) forwards; }
/* Entra deslizando da direita; sai deslizando para fora da direita — suave. */
@keyframes toast-in { from { transform: translateX(calc(100% + 32px)); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toast-out { from { transform: none; opacity: 1; } to { transform: translateX(calc(100% + 32px)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ronda-toast, .ronda-toast.is-out { animation-duration: .01ms; } }
.ronda-toast__icon { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 10px;
  background: var(--gold-dim); color: var(--gold); display: flex; align-items: center; justify-content: center; }
.ronda-toast__icon svg { width: 20px; height: 20px; stroke-width: var(--icon-stroke); }
.ronda-toast__body { flex: 1; min-width: 0; }
.ronda-toast__title { font-size: 13.5px; font-weight: 600; }
.ronda-toast__sub { font-size: 12px; color: var(--text-dim); margin: 2px 0 6px; }
.ronda-toast__link { font-size: 12.5px; color: var(--gold); font-weight: 600; }
.ronda-toast__link:hover { text-decoration: underline; }
.ronda-toast__x { flex: 0 0 auto; background: none; border: none; color: var(--text-faint);
  font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; }
.ronda-toast__x:hover { color: var(--text); }

/* ============================ RONDAS ============================ */
/* Cobertura do plantão */
.ronda-cover__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.ronda-cover__count { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; }
.ronda-cover__num { font-family: var(--font-num); font-size: 32px; font-weight: 600; letter-spacing: -.5px; line-height: 1; }
.ronda-cover__of { font-size: 13px; color: var(--text-dim); }
.ronda-cover__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

.legend { display: flex; align-items: center; gap: 16px; }
.legend__item { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-dim); }
.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.dot--green { background: var(--green); }
.dot--gold { background: var(--gold); }
.dot--gray { background: var(--text-faint); }

/* Timeline de ciclos */
.timeline { display: flex; gap: 6px; margin-top: 14px; }
.timeline__slot { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.timeline__hour {
  font-family: var(--font-num); font-size: 11.5px; color: var(--text-faint);
  text-align: center; padding: 4px 0; border-radius: 6px;
}
.timeline__slot.is-current .timeline__hour { background: var(--surface-3); color: var(--text); font-weight: 600; }
.timeline__bar { height: 4px; border-radius: 3px; background: var(--line); }
.timeline__bar--green { background: var(--green); }
.timeline__bar--gold { background: var(--gold); }
.timeline__bar--gray { background: var(--line-strong); }

/* Abas (Plantão atual / Histórico) */
.seg--tabs { width: max-content; margin-bottom: 18px; }
.seg--tabs .seg__item { text-decoration: none; }

/* Relatório textual (copiável) */
.relatorio-texto {
  width: 100%; min-height: 60vh; white-space: pre; overflow-wrap: normal;
  font-family: var(--font-num); font-size: 13px; line-height: 1.6;
}

/* Definir horário da cadência: só na troca de plantão, editando o horário no card */
.input--time { width: auto; height: 34px; padding: 0 10px; font-family: var(--font-num); }
.hora-edit-wrap { position: relative; display: inline-block; }
.hora-edit {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  color: var(--gold); border-bottom: 1px dashed var(--gold-line);
}
.hora-edit svg { width: 13px; height: 13px; stroke-width: var(--icon-stroke); }
.hora-pop {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 20;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px;
  box-shadow: var(--shadow-modal); padding: 12px;
}
.hora-edit-wrap.is-open .hora-pop { display: block; }
.hora-pop form { display: flex; flex-direction: column; gap: 8px; }
.hora-pop__label { font-size: 11.5px; color: var(--text-faint); white-space: nowrap; }
.hora-pop__row { display: flex; align-items: center; gap: 8px; }

/* Colunas profissionais da tabela de rondas */
.data--rondas .col-ciclo { width: 84px; }
.data--rondas .col-horario { width: 130px; white-space: nowrap; }
.data--rondas .col-acao { width: 44px; }
.ciclo-chip { display: inline-flex; align-items: baseline; gap: 1px; font-family: var(--font-num);
  font-weight: 600; font-size: 13px; padding: 3px 9px; border-radius: 7px;
  background: var(--surface-3); border: 1px solid var(--line); color: var(--text-dim); }
.ciclo-chip__tot { font-size: 11px; color: var(--text-faint); }
.ciclo-chip--now { background: var(--gold-dim); border-color: var(--gold-line); color: var(--gold); }
.cell-dash { color: var(--text-faint); margin: 0 5px; }
.cell-muted { color: var(--text-faint); }
.bases-cell { display: inline-flex; align-items: center; gap: 7px; }
.bases-cell svg { width: 15px; height: 15px; flex: none; color: var(--text-faint); stroke-width: var(--icon-stroke); }
.chip-prob { display: inline-flex; align-items: center; margin-left: 8px; padding: 2px 8px;
  border-radius: var(--r-pill); font-size: 11px; font-weight: 600; background: var(--gold-dim); color: var(--gold); }
.op-cell { display: inline-flex; align-items: center; gap: 9px; }
.avatar--sm { width: 26px; height: 26px; font-size: 10.5px; }

/* Filtros do histórico */
.hist-filtros { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hist-filtros .toolbar__search { height: 34px; }
.hist-filtros .input--time { height: 34px; }
.hist-periodo { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); }

/* Grupos do histórico de ocorrências (por plantão / por dia) */
.oco-grupo { margin-top: var(--sp-4); }
.oco-grupo__head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  font-size: 13px; font-weight: 600; color: var(--text-dim); border-bottom: 1px solid var(--line); }
.oco-grupo__head svg { width: 16px; height: 16px; stroke-width: var(--icon-stroke); color: var(--gold); }
.oco-grupo__count { margin-left: auto; font-family: var(--font-num); font-size: 12px; font-weight: 600;
  color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 1px 9px; }

/* Grid de ocorrências em caixinhas (cards) — cada card abre o detalhe em modal */
.oco-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-3); }
.oco-card { display: flex; flex-direction: column; padding: var(--sp-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  cursor: pointer; transition: border-color .16s var(--ease), transform .16s var(--ease),
  box-shadow .16s var(--ease); }
.oco-card:hover { border-color: var(--gold); transform: translateY(-2px);
  box-shadow: var(--shadow-1, 0 6px 20px rgba(0,0,0,.18)); }
.oco-card:focus-visible { outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold-dim); }

/* Situação com problema: badge de alerta + linha destacada */
.sit-pend { gap: 5px; }
.sit-pend svg { width: 13px; height: 13px; stroke-width: var(--icon-stroke); }
table.data tbody tr.row-pend > td { background: var(--gold-dim); }
table.data tbody tr.row-pend > td:first-child { box-shadow: inset 3px 0 0 var(--gold); }

/* Situação (dot-label sem pílula) */
.sit { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; }
.sit::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.sit--green { color: var(--green); }
.sit--gold { color: var(--gold); }
.sit--gray { color: var(--text-faint); }

/* ============ QUADRO DE RONDAS (Pendentes | Realizadas) ============ */
.ronda-board { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-top: var(--sp-4); align-items: start; }
.board-col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); display: flex; flex-direction: column; min-height: 160px; }

/* Aba do plantão preenche a altura visível: o quadro ocupa o espaço restante e cada
   coluna rola por dentro — a página não ganha scroll, em qualquer tela. */
.content-full--fill { height: 100%; display: flex; flex-direction: column; min-height: 0; padding-bottom: var(--sp-4); }
.content-full--fill #ronda-painel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.content-full--fill .ronda-board { flex: 1; min-height: 0; align-items: stretch; }
.content-full--fill .board-col { min-height: 0; }
.content-full--fill .board-col__body { flex: 1; min-height: 0; max-height: none; }
.board-col__head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); font-weight: 600; font-size: 13px; }
.board-col__head svg { width: 18px; height: 18px; stroke-width: var(--icon-stroke); }
.board-col--pend .board-col__head svg { color: var(--gold); }
.board-col--done .board-col__head svg { color: var(--green); }
.board-col__count { margin-left: auto; font-family: var(--font-num); font-size: 12px; font-weight: 600; color: var(--text-dim);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 1px 9px; }
.board-col__body { padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); overflow-y: auto; max-height: 62vh; }

.ronda-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3);
  display: flex; flex-direction: column; gap: 5px; animation: ronda-card-in var(--t-med) var(--ease); }
@keyframes ronda-card-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ronda-card.is-clickable { cursor: pointer; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.ronda-card.is-clickable:hover { border-color: var(--gold-line); background: var(--surface-3); }
.ronda-card.is-current { border-color: var(--gold-line); box-shadow: inset 3px 0 0 var(--gold); }
.ronda-card--done.has-pend { border-color: var(--gold-line); }
.ronda-card__top { display: flex; align-items: center; gap: var(--sp-2); }
.ronda-card__hora { font-family: var(--font-num); font-weight: 600; font-size: 14px; color: var(--text); }
.ronda-card__foot { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.ronda-card__op { margin-left: auto; font-size: 11.5px; color: var(--text-faint); max-width: 55%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.board-empty { display: flex; align-items: center; gap: var(--sp-2); justify-content: center;
  padding: var(--sp-5) var(--sp-3); color: var(--text-faint); font-size: 12.5px; text-align: center; }
.board-empty svg { width: 16px; height: 16px; stroke-width: var(--icon-stroke); }

@media (max-width: 720px) { .ronda-board { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ronda-card { animation: none !important; } }

/* ============================ PREVENÇÃO — CHECK QUINZENAL DE PR ============================ */
.pvx-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.pvx-chip { text-decoration: none; font-size: 12.5px; font-weight: 600; color: var(--text-dim);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; background: var(--surface); }
.pvx-chip:hover { border-color: var(--gold); color: var(--text); }
.pvx-chip.is-active { background: var(--gold-dim); border-color: var(--gold); color: var(--gold); }
.pvx-cycle { font-size: 12.5px; color: var(--text-faint); }

/* Cartão de contato do PR. */
.pvx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.pvx-card { display: flex; flex-direction: column; padding: 16px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; }
.pvx-card--vencido { border-color: var(--red); }
.pvx-card__head { display: flex; align-items: flex-start; gap: 10px; }
.pvx-card__id { flex: 1; min-width: 0; }
.pvx-card__nome { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pvx-card__regiao { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pvx-card__tel { display: flex; align-items: center; gap: 9px; margin-top: 14px; padding: 10px 12px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; }
.pvx-card__tel svg { width: 15px; height: 15px; color: var(--text-faint); flex: none; }
.pvx-card__tel .cell-num { font-size: 14px; color: var(--text); }
/* Sem retorno: número editável direto no card. */
.pvx-num-edit { display: flex; align-items: center; gap: 6px; flex: 1; }
.pvx-num-edit .pvx-num-input { height: 30px; padding: 0 8px; font-size: 14px; flex: 1; min-width: 0; }
.pvx-num-edit .icon-btn { flex: none; }
.pvx-card__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.pvx-k { font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--text-faint); font-weight: 700; }
.pvx-v { font-size: 13px; color: var(--text); margin-top: 4px; }
.pvx-v.cell-num { font-family: var(--font-num); }
.pvx-v--alt { color: var(--gold); }
.pvx-card__foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.pvx-prazo { flex: 1; font-family: var(--font-num); font-size: 11.5px; }
.pvx-prazo--red { color: var(--red); }
.pvx-prazo--gold { color: var(--gold); }
.pvx-prazo--faint { color: var(--text-faint); }
.pvx-empty { padding: 36px; text-align: center; font-size: 13px; color: var(--text-faint); }

/* Modal 'Fazer check' — opções de resultado (radio como cartão). */
.pvx-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pvx-opt { position: relative; display: flex; flex-direction: column; gap: 2px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--surface-2); }
.pvx-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pvx-opt:hover { border-color: var(--gold); }
.pvx-opt:has(input:checked) { border-color: var(--gold); background: var(--gold-dim); }
.pvx-opt__t { font-size: 13px; font-weight: 600; color: var(--text); }
.pvx-opt__d { font-size: 11.5px; color: var(--text-dim); }

@media (max-width: 560px) { .pvx-opts, .pvx-card__grid { grid-template-columns: 1fr; } }

/* --- Abas do check quinzenal (A verificar / Verificados / Pendentes) --- */
.seg__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px;
  height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: var(--surface-3);
  color: var(--text-dim); font-family: var(--font-num); font-size: 11px; font-weight: 700; }
.seg__item.is-active .seg__badge { background: var(--gold-dim); color: var(--gold); }

/* Estados dos cards na tela única: verde (verificado), âmbar (pendente). */
.pvx-card--ok { border-color: var(--green); }
.pvx-card--pend { border-color: var(--gold); }
/* Conferido = "apagadinho": o número continua na tela, só recuado, com a contagem
   de reativação. Passa o mouse e ele acende de novo (fácil reverificar/consultar). */
.pvx-card.is-conferido { opacity: .5; border-color: var(--green); }
.pvx-card.is-conferido:hover { opacity: 1; }

/* Linha de filtros por coluna (estilo Excel) no cabeçalho da tabela. */
.data__filters th { padding: 6px 10px 10px; background: var(--surface); position: sticky; top: 0; }
.data__filters .input, .data__filters .select { height: 32px; font-size: 12px; padding: 0 8px; }

/* Subcabeçalho da tela única (resumo + ciclo). */
.pvx-subhead { display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: space-between;
  align-items: baseline; margin-bottom: 14px; font-size: 12.5px; color: var(--text-faint); }

/* Ações por card (salvam na hora). */
.pvx-actions { display: flex; gap: 8px; }
.pvx-mark-btn--ok.is-on { border-color: var(--green); color: var(--green); background: rgba(123,211,164,.12); }
.pvx-mark-btn--pend.is-on { border-color: var(--gold); color: var(--gold); background: var(--gold-dim); }

/* Marcação na aba 'A verificar' — dois botões por card. */
.pvx-marks { display: flex; gap: 8px; }
.pvx-mark-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface-2);
  color: var(--text-dim); font-family: var(--font-ui); font-size: 12px; font-weight: 600;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.pvx-mark-btn svg { width: 14px; height: 14px; }
.pvx-mark-btn--ok:hover { border-color: var(--green); color: var(--green); }
.pvx-mark-btn--pend:hover { border-color: var(--gold); color: var(--gold); }
/* Card já marcado: destaca o botão escolhido. */
.pvx-card--ok .pvx-mark-btn--ok { border-color: var(--green); color: var(--green); background: rgba(123,211,164,.12); }
.pvx-card--pend .pvx-mark-btn--pend { border-color: var(--gold); color: var(--gold); background: var(--gold-dim); }

/* Barra fixa de confirmação — aparece quando há pelo menos 1 marcado. */
.pvx-confirmbar { position: sticky; bottom: 0; z-index: 5; display: none; align-items: center;
  justify-content: flex-end; gap: 14px; margin-top: 16px; padding: 12px 16px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px;
  box-shadow: 0 -8px 24px rgba(0,0,0,.35); }
.pvx-confirmbar.is-visible { display: flex; }
.pvx-confirmbar__txt { font-size: 13px; color: var(--text-dim); }


/* Linha clicável + chevron */
table.data tbody tr.is-linked { cursor: pointer; }
.cell-chevron { text-align: right; width: 40px; color: var(--text-faint); }
.cell-chevron svg { width: 18px; height: 18px; stroke-width: var(--icon-stroke); vertical-align: middle; }

/* ============================ PAGINAÇÃO ============================ */
.pagination { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 16px; }
.pagination__info { font-size: 11.5px; color: var(--text-dim); font-family: var(--font-num); }

/* Paginação responsiva: info à esquerda, navegação à direita; empilha no celular. */
.pagination--responsive { flex-wrap: wrap; justify-content: space-between; margin-top: var(--sp-3); }
.pagination--responsive .pagination__nav { display: flex; gap: 8px; margin-left: auto; }
.pagination--responsive .btn.is-disabled { opacity: .4; pointer-events: none; }
@media (max-width: 560px) {
  .pagination--responsive { justify-content: center; }
  .pagination--responsive .pagination__info { flex: 1 0 100%; text-align: center; margin-bottom: 8px; }
  .pagination--responsive .pagination__nav { width: 100%; margin-left: 0; }
  .pagination--responsive .pagination__nav .btn { flex: 1 1 0; justify-content: center; min-height: 44px; }
}

/* Tela cheia sem scroll de página: a barra de ferramentas e a paginação ficam fixas
   (topo/rodapé) e só a tabela ocupa o meio, rolando por dentro quando há muitas linhas.
   Assim a paginação está sempre visível e o layout se adapta a qualquer dispositivo. */
.content-full--fill > .toolbar,
.content-full--fill > .banner,
.content-full--fill > .pagination { flex: 0 0 auto; }
.content-full--fill .table-wrap--fill { flex: 1 1 auto; min-height: 0; overflow: auto; }
.table-wrap--fill { overflow: auto; }
/* min-width evita colunas espremidas — abaixo dele, rola na horizontal (celular). */
@media (max-width: 640px) { .data--min { min-width: 640px; } }

/* ==================== DROPDOWN ENCADEADO (Estado → Cidade) ====================
   Combobox custom que substitui o <select> nativo nos cadastros de Base/PR: abre
   ao clicar, filtra ao digitar e mostra SOMENTE 3 linhas de opções (o resto rola).
   O <select> nativo fica oculto e continua sendo o dono do valor enviado. */
.gdrop { position: relative; }
.gdrop__trigger {
  width: 100%; height: 38px; padding: 0 10px 0 12px; display: flex; align-items: center;
  gap: 8px; background: var(--surface-2); border: 1px solid var(--line-strong);
  border-radius: 8px; color: var(--text); font-family: var(--font-ui); font-size: 13px;
  cursor: pointer; transition: border-color var(--t-fast) var(--ease);
}
.gdrop.is-open .gdrop__trigger, .gdrop__trigger:focus { outline: none; border-color: var(--gold-line); }
.gdrop__val { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gdrop__val.is-placeholder { color: var(--text-faint); }
.gdrop__caret { width: 16px; height: 16px; flex: none; stroke: var(--text-faint); fill: none;
  stroke-width: 2; transition: transform var(--t-fast) var(--ease); }
.gdrop.is-open .gdrop__caret { transform: rotate(180deg); }
.gdrop__panel {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px;
  box-shadow: 0 14px 34px rgba(0,0,0,.45); overflow: hidden;
}
.gdrop__search { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; height: 36px; }
.gdrop__search:focus { border-color: var(--line); border-bottom-color: var(--gold-line); }
/* 3 linhas: cada opção ~36px, então ~108px de altura visível — o resto rola. */
.gdrop__list { max-height: 108px; overflow-y: auto; padding: 4px; }
.gdrop__opt {
  padding: 8px 10px; border-radius: 6px; font-size: 13px; line-height: 1.25; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gdrop__opt:hover { background: var(--surface-3); }
.gdrop__opt.is-active { background: var(--gold-dim); color: var(--gold); }
.gdrop__empty { padding: 12px 10px; color: var(--text-faint); font-size: 12.5px; }