@font-face {
  font-family: "Gobold Extra2";
  src: url("../fonts/gobold-extra2.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

/* Identidade do Checklist de Bordo, isolada da página administrativa. */
.embarque {
  --p-fundo: #f8fafc;
  --p-superficie: #fff;
  --p-superficie-2: #edf1f4;
  --p-tinta: #16324c;
  --p-tinta-media: #526779;
  --p-tinta-fraca: #526779;
  --p-linha: #dce5ed;
  --p-linha-forte: #8da7bc;
  --p-acao: #71206c;
  --p-acao-escura: #541850;
  --p-acao-fraca: #f5ebf4;
  --p-volta: #087e62;
  position: fixed;
  inset: 0 auto 0 0;
  width: min(460px, calc(100vw - 16px));
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--p-fundo);
  color: var(--p-tinta);
  box-shadow: 16px 0 40px rgba(4, 29, 58, .22);
  transform: translateX(-100%);
  transition: transform .32s cubic-bezier(.16, 1, .3, 1);
  overflow: hidden;
  flex-direction: column;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.embarque:not([open]) { display: none; }
.embarque[open] { display: flex; }
.embarque.is-open { transform: translateX(0); }
.embarque::backdrop { background: rgba(2, 14, 28, .68); backdrop-filter: blur(4px); }
.embarque [hidden], .embarque-launch[hidden] { display: none !important; }
.embarque .visualmente-oculto { inset: 0 auto auto 0; }
.painel.embarque-open { overflow: hidden; }
.embarque ::selection { background: var(--p-acao-fraca); color: var(--p-tinta); }
.embarque :is(button, a, input, select):focus-visible, .embarque-launch:focus-visible {
  outline: 3px solid #083965;
  outline-offset: 3px;
}
.embarque-launch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  border: 0;
  border-radius: 8px;
  background: #041d3a;
  color: #fff;
  font: inherit;
  font-size: .875rem;
  font-weight: 650;
  cursor: pointer;
}
.embarque-launch:hover { background: #083965; }
.embarque-launch svg, .embarque-icon-button svg, .embarque-trip svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.embarque-launch__count { padding: 2px 7px; border-radius: 4px; background: #163b60; font-size: .75rem; font-variant-numeric: tabular-nums; }
.painel__acoes-topo { gap: 12px; }
.embarque-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: center;
  flex-shrink: 0;
  padding: 16px 20px;
  background: #041d3a;
}
.embarque-header__lead { display: flex; align-items: center; gap: 12px; min-width: 0; }
.embarque-header__copy { align-self: center; min-width: 0; }
.embarque-header h2 { margin: 0; font: 400 1.55rem/1.25 "Gobold Extra2", system-ui, sans-serif; color: #fff; }
.embarque-header p { margin: 8px 0 0; font-size: .8125rem; color: #c5dfef; }
.embarque-header__actions { grid-column: 2; grid-row: 1; display: flex; align-self: start; gap: 4px; }
.embarque-icon-button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #c5dfef; cursor: pointer; }
.embarque-icon-button:hover { background: #163b60; color: #fff; }
/* Atualizar e Fechar compartilham o fundo sólido; o offline fica só no ícone. */
.embarque-close, #embarque-update { background: #163b60; color: #fff; }
.embarque-close:hover, #embarque-update:hover { background: #28567d; color: #fff; }
.embarque-icon-button:disabled { opacity: .5; cursor: wait; }
.embarque .embarque-header :is(button, a):focus-visible { outline-color: #fff; }
.embarque-trip { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; gap: 8px; min-width: 0; }
/* Ida 25% · Volta 25% · Ônibus 50%: o segmento ocupa metade e divide em colunas iguais. */
.embarque .embarque-trip .embarque-segment { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 0 0 calc(50% - 4px); min-width: 0; gap: 4px; padding: 4px; background: #163b60; border-radius: 8px; }
.embarque .embarque-trip button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; padding-inline: 12px; color: #c5dfef; }
.embarque .embarque-trip .embarque-segment button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.embarque .embarque-trip button[aria-pressed="true"] { background: #fff; color: #041d3a; }
.embarque .embarque-trip button:hover:not([aria-pressed="true"]) { background: #28567d; color: #fff; }
.embarque-trip svg { width: 18px; height: 18px; }
.embarque-buses-select { flex: 1; min-width: 0; min-height: 52px; padding: 8px; border: 1px solid #4f708c; border-radius: 8px; background: #163b60; color: #fff; color-scheme: dark; font: inherit; font-size: .8125rem; cursor: pointer; }
.embarque-buses-select option { background: #fff; color: #16324c; font: inherit; }
.embarque .embarque-buses-select:focus-visible { outline-color: #fff; }
.embarque-bus-picker { position: relative; flex: 0 0 calc(50% - 4px); min-width: 0; height: 52px; z-index: 2; }
.embarque-bus-picker .embarque-buses-select { position: absolute; inset: 0; width: 100%; opacity: 0; pointer-events: none; }
.embarque .embarque-trip .embarque-bus-picker__trigger { width: 100%; height: 100%; min-height: 0; justify-content: space-between; gap: 8px; padding: 8px; border: 1px solid #4f708c; border-radius: 8px; background: #163b60; color: #fff; font: inherit; font-size: .8125rem; font-weight: 400; }
.embarque-bus-picker__trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.embarque-bus-picker__trigger svg { width: 16px; height: 16px; flex-shrink: 0; }
.embarque .embarque-bus-picker__trigger:focus-visible { outline-color: #fff; }
.embarque-bus-picker__menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 2; width: max(100%, 260px); max-width: calc(100vw - 40px); max-height: 240px; overflow-y: auto; margin: 0; padding: 8px; border: 1px solid #8da7bc; border-radius: 8px; background: #fff; color: var(--p-tinta); box-shadow: 0 8px 24px rgba(0, 0, 0, .2); list-style: none; }
.embarque-bus-picker__menu li { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px; border-radius: 4px; font-size: 1.125rem; line-height: 1.35; cursor: pointer; }
.embarque-bus-picker__menu li:is(:hover, .is-active) { background: #e8eff6; }
.embarque-bus-picker__menu li[aria-selected="true"] { font-weight: 650; }
.embarque-bus-picker__menu svg { width: 20px; height: 20px; flex-shrink: 0; }
.embarque-bus-picker__menu li:not([aria-selected="true"]) svg { visibility: hidden; }
.embarque-mascot { flex: 0 0 auto; width: 64px; height: 64px; object-fit: contain; }
.embarque-overview { flex-shrink: 0; padding: 12px 20px; background: #fff; border-bottom: 1px solid var(--p-linha); }
.embarque-totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; }
.embarque-totals > div + div { padding-inline-start: 12px; border-inline-start: 1px solid var(--p-linha); }
.embarque-totals dt { color: var(--p-tinta-media); font-size: .75rem; }
.embarque-totals dd { margin: 2px 0 0; font-size: 1.75rem; font-weight: 750; line-height: 1.2; font-variant-numeric: tabular-nums; }
.embarque-totals__present dd { color: var(--p-ok); }
.embarque-totals__missing dd { color: var(--p-espera); }
.embarque-progress { margin-top: 10px; }
.embarque-progress p { margin: 0 0 6px; font-size: .75rem; color: var(--p-tinta-media); }
.embarque-progress__track { position: relative; height: 7px; }
.embarque-progress progress { --embarque-fill: var(--p-acao); --embarque-track: var(--p-linha); appearance: none; display: block; width: 100%; height: 7px; border: 0; border-radius: 4px; overflow: hidden; accent-color: var(--embarque-fill); background: var(--embarque-track); }
.embarque-progress progress::-webkit-progress-bar { background: var(--embarque-track); }
.embarque-progress progress::-webkit-progress-value { background: var(--embarque-fill); border-radius: 4px; }
.embarque-progress progress::-moz-progress-bar { background: var(--embarque-fill); border-radius: 4px; }
.embarque-progress__track.is-return { height: 10px; }
.embarque-progress__track.is-return #embarque-progress-outbound { height: 10px; }
.embarque-progress__track.is-return #embarque-progress { --embarque-fill: var(--p-volta); --embarque-track: transparent; position: absolute; inset: 2px 0 auto; height: 6px; }
.embarque-progress__track.is-return #embarque-progress::-webkit-progress-value { border: 1px solid #fff; box-sizing: border-box; }
.embarque-progress__track.is-return #embarque-progress::-moz-progress-bar { border: 1px solid #fff; box-sizing: border-box; }
.embarque-progress__legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; color: var(--p-tinta-media); font-size: .75rem; font-variant-numeric: tabular-nums; }
.embarque-progress__legend span { display: inline-flex; align-items: center; gap: 6px; }
.embarque-progress__legend span::before { content: ""; width: 12px; height: 4px; border-radius: 2px; background: var(--p-acao); }
.embarque-progress__legend .embarque-progress__return::before { background: var(--p-volta); }
.embarque-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px 24px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #8da7bc transparent; }
.embarque-segment { display: inline-flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--p-superficie-2); }
.embarque-segment button { min-height: 44px; padding: 8px 16px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--p-tinta-media); font: inherit; font-size: .8125rem; font-weight: 650; cursor: pointer; }
.embarque-segment button[aria-pressed="true"] { background: #083965; color: #fff; }
.embarque-segment button:hover:not([aria-pressed="true"]) { color: #083965; background: #fff; }
.embarque-tabs { display: flex; margin-bottom: 16px; border-bottom: 1px solid var(--p-linha); }
.embarque-tab { position: relative; flex: 1; min-width: 0; min-height: 48px; padding: 10px 12px; border: 0; border-radius: 0; background: transparent; color: var(--p-tinta-media); font: inherit; font-size: .875rem; font-weight: 650; cursor: pointer; }
.embarque-tab::after { content: ""; position: absolute; inset: auto 12px 0; height: 3px; border-radius: 2px 2px 0 0; background: transparent; }
.embarque-tab[aria-selected="true"] { color: #083965; }
.embarque-tab[aria-selected="true"]::after { background: #083965; }
.embarque-tab:hover { background: #edf1f4; color: #083965; }
.embarque .embarque-tab:focus-visible { outline-offset: -4px; }
.embarque-toolbar { display: grid; gap: 8px; }
.embarque-toolbar .campo-busca { min-width: 0; }
.embarque-toolbar input { width: 100%; min-height: 48px; caret-color: var(--p-acao); }
.embarque-toolbar input::placeholder { color: var(--p-tinta-fraca); opacity: 1; }
.embarque-statusbar { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 10px 0 20px; color: var(--p-tinta-media); font-size: .75rem; }
.embarque-statusbar p { margin: 0; }
#embarque-sync[data-state="warning"] { color: var(--p-espera); }
.embarque-bus-section { margin-bottom: 24px; }
.embarque-bus-section__header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.embarque-bus-section__header h3 { margin: 0; font-size: 1.0625rem; }
.embarque-bus-section__header > span { color: var(--p-tinta-media); font-size: .75rem; }
.embarque-group { margin-bottom: 24px; }
.embarque-group__header { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.embarque-group__header h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 3px; font-size: .9375rem; overflow-wrap: anywhere; }
.embarque-group__meeple { width: 20px; height: 20px; flex-shrink: 0; fill: currentColor; }
.embarque-group__meeple--vip { color: #d97706; }
.embarque-group__meeple--solo { color: #0077b6; }
.embarque-group__meeple--group { color: #7b1fa2; }
.embarque-group__header span { color: var(--p-tinta-media); font-size: .75rem; }
.embarque-group__primary { display: block; margin-bottom: 3px; }
.embarque-group__count { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.embarque-people { margin: 0; padding: 0; list-style: none; }
.embarque-person { display: grid; grid-template-columns: minmax(0, 1fr) 124px; align-items: center; gap: 12px; padding: 12px; cursor: pointer; border-bottom: 1px solid var(--p-linha); border-radius: 8px; transition: background-color 150ms ease; }
.embarque-person:hover { background: #f1f5f9; }
.embarque-person.is-present { background: #eef7f1; }
.embarque-person.is-present:hover { background: #e2f1e7; }
.embarque-person__info { grid-column: 1; grid-row: 1; display: grid; gap: 3px; min-width: 0; }
.embarque-person__info strong { font-size: .875rem; font-weight: 650; overflow-wrap: anywhere; }
.embarque-person__child { width: 14px; height: 14px; margin-inline-end: 6px; fill: currentColor; vertical-align: -2px; }
.embarque-person__meta, .embarque-person__detail { overflow-wrap: anywhere; font-size: .75rem; color: var(--p-tinta-media); }
.embarque-person.is-present .embarque-person__detail { color: #43614e; }
/* Sincronizando / Aguardando conexão: mesmo texto do "Aguardando embarque", com ícone de 12 px. */
.embarque-person.is-queued .embarque-person__detail { display: inline-flex; align-items: center; gap: 4px; color: var(--p-tinta-media); }
.embarque-person__status-icon { width: 12px; height: 12px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.embarque-person__spinner { animation: embarque-spin .8s linear infinite; }
.embarque-person__spinner circle { opacity: .3; }
.embarque-person[data-readonly="true"] { cursor: not-allowed; }
.embarque-person:focus-within { background: #f1f5f9; }
.embarque-person.is-present:focus-within { background: #e2f1e7; }
.embarque-person__checks { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: repeat(2, 60px); gap: 4px; }
.embarque-check { --embarque-check-color: var(--p-acao); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 60px; min-height: 80px; padding: 8px 4px; border: 0; border-radius: 8px; background: transparent; color: var(--embarque-check-color); font: inherit; cursor: pointer; }
.embarque-check[data-check-leg="return"] { --embarque-check-color: var(--p-volta); }
.embarque-check svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.embarque-check span { font-size: .75rem; font-weight: 650; line-height: 1.2; }
.embarque-check[data-check-leg="return"] span { color: #066b53; }
.embarque-check[aria-pressed="true"] svg { padding: 6px; background: var(--embarque-check-color); border-radius: 6px; color: #fff; stroke-width: 2.2; }
.embarque-check:hover:not(:disabled) { background: #f5ebf4; }
.embarque-check[data-check-leg="return"]:hover:not(:disabled) { background: #e2f1e7; }
.embarque-check:disabled { cursor: not-allowed; opacity: .6; }
.embarque-check.is-inactive { opacity: .38; cursor: default; }
.embarque-check[aria-busy="true"] { cursor: wait; }
.embarque-notice { display: grid; justify-items: start; gap: 12px; padding: 12px; margin: 12px 0; border: 1px solid var(--p-linha-forte); border-radius: 8px; background: var(--p-espera-fundo); }
.embarque-notice p { margin: 0; font-size: .875rem; }
.embarque-empty { padding: 24px 0; }
.embarque-empty h3 { margin: 0 0 8px; font-size: 1rem; }
.embarque-empty p { margin: 0 0 16px; color: var(--p-tinta-media); font-size: .875rem; }
.embarque-loading { margin-block: 24px; color: var(--p-tinta-media); }
.embarque-export { flex-shrink: 0; padding: 0 20px max(4px, env(safe-area-inset-bottom)); border-top: 1px solid var(--p-linha); background: #fff; }
.embarque-export__heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0; border: 0; background: transparent; color: var(--p-tinta-media); font: 700 .75rem/1.5 system-ui, sans-serif; text-align: start; cursor: pointer; }
.embarque-export__heading:hover { color: var(--p-tinta); }
.embarque-export__heading > span { display: inline-flex; align-items: center; gap: 6px; }
.embarque-export svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.embarque-export__heading > span svg { width: 15px; height: 15px; }
.embarque-export__heading .embarque-export__chevron { width: 20px; height: 20px; stroke-width: 2; transition: transform 240ms cubic-bezier(.16, 1, .3, 1); }
.embarque-export.is-open .embarque-export__chevron { transform: rotate(180deg); }
/* Sobe de baixo para cima: a linha da grade cresce e os botões deslizam junto. */
.embarque-export__drawer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 280ms cubic-bezier(.16, 1, .3, 1); }
.embarque-export.is-open .embarque-export__drawer { grid-template-rows: 1fr; }
.embarque-export__drawer > .embarque-export__controls { min-height: 0; overflow: hidden; transform: translateY(12px); opacity: 0; transition: transform 280ms cubic-bezier(.16, 1, .3, 1), opacity 200ms ease, padding-bottom 280ms cubic-bezier(.16, 1, .3, 1); }
.embarque-export.is-open .embarque-export__drawer > .embarque-export__controls { padding-bottom: 8px; transform: none; opacity: 1; }
.embarque-export__controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.embarque-export__controls :is(button, a) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 60px; padding: 8px 4px; border: 1px solid #c3d3e2; border-radius: 6px; background: #f1f5f9; color: var(--p-tinta); font: 600 .75rem/1.5 system-ui, sans-serif; text-decoration: none; cursor: pointer; transition: background-color 150ms ease, color 150ms ease; }
.embarque-export__controls :is(button, a):hover:not([aria-disabled="true"]) { background: var(--p-acao); border-color: var(--p-acao); color: #fff; }
.embarque-export__controls [aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.embarque-export__controls [aria-busy="true"] { opacity: 1; cursor: wait; }
.embarque-export-feedback { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 20px; pointer-events: none; }
.embarque-export-feedback__card { position: relative; display: grid; justify-items: center; gap: 12px; width: 100%; max-width: 320px; padding: 36px 24px 28px; border-radius: 12px; background: #fff; color: var(--p-tinta); box-shadow: 0 12px 48px rgba(0, 0, 0, .28); text-align: center; pointer-events: auto; }
.embarque-export-feedback__card > svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.embarque-export-feedback__close { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 44px; height: 44px; padding: 12px; border: 0; border-radius: 8px; color: var(--p-tinta-media); background: transparent; cursor: pointer; }
.embarque-export-feedback__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.embarque-export-feedback__close:hover { background: #edf1f4; }
.embarque-export-feedback__card .embarque-export-feedback__loading,
.embarque-export-feedback__card .embarque-export-feedback__success,
.embarque-export-feedback__card .embarque-export-feedback__error { display: none; }
.embarque-export-feedback[data-state="loading"] .embarque-export-feedback__loading { display: block; color: var(--p-acao); animation: embarque-spin .8s linear infinite; }
.embarque-export-feedback__loading circle { stroke: #ead9e9; }
.embarque-export-feedback[data-state="success"] .embarque-export-feedback__success { display: block; color: #087e62; }
.embarque-export-feedback[data-state="error"] .embarque-export-feedback__error { display: block; color: #ad2831; }
.embarque-export__status { margin: 0; font-size: .9375rem; line-height: 1.5; }
#embarque-update[aria-busy="true"] svg { animation: embarque-spin .8s linear infinite; }
#embarque-update[aria-busy="false"].is-updated svg { animation: embarque-spin .65s cubic-bezier(.16, 1, .3, 1); }
@keyframes embarque-spin { to { transform: rotate(360deg); } }
.embarque-export__text { width: 100%; min-height: 160px; padding: 12px; border: 1px solid var(--p-linha-forte); border-radius: 6px; color: var(--p-tinta); background: #fff; font: inherit; font-size: .875rem; resize: vertical; }
#embarque-sync { margin-inline-start: auto; text-align: right; }
.embarque-offline { position: relative; }
/* Nuvem = central de avisos: cor pela rede, traço sem conexão, número de pendências. */
.embarque-offline__toggle { position: relative; --embarque-cloud-gap: #041d3a; }
.embarque-offline__toggle:hover { --embarque-cloud-gap: #163b60; }
.embarque-offline__toggle svg { overflow: visible; width: 26px; height: 26px; }
.embarque-offline__toggle svg path:first-child { stroke-width: 1.8; }
.embarque-offline__mark-ready, .embarque-offline__mark-pending { stroke-width: 2.2; }
.embarque-offline__toggle[data-network="online"] { color: #7fe0c4; }
.embarque-offline__toggle[data-network="unstable"] { color: #ffd166; }
.embarque-offline__toggle[data-network="offline"] { color: #ff8b8b; }
.embarque-offline__toggle[data-ready="true"] .embarque-offline__mark-pending,
.embarque-offline__toggle:not([data-ready="true"]) .embarque-offline__mark-ready,
.embarque-offline__toggle[data-network="offline"] :is(.embarque-offline__mark-ready, .embarque-offline__mark-pending) { display: none; }
.embarque-offline__slash, .embarque-offline__slash-gap { display: none; stroke-width: 2; }
/* O traço da nuvem "cortada" ganha uma folga na cor do cabeçalho para não se fundir ao contorno. */
.embarque-offline__toggle svg .embarque-offline__slash-gap { stroke: var(--embarque-cloud-gap); stroke-width: 5; }
.embarque-offline__toggle[data-network="offline"] :is(.embarque-offline__slash, .embarque-offline__slash-gap) { display: inline; }
.embarque-offline__badge, .embarque-offline__dot { position: absolute; top: 5px; right: 3px; border-radius: 999px; background: #d92d20; box-shadow: 0 0 0 2px var(--embarque-cloud-gap); pointer-events: none; }
.embarque-offline__badge { top: 3px; right: 1px; min-width: 20px; height: 20px; padding: 0 5px; color: #fff; font: 700 .75rem/20px system-ui, sans-serif; font-variant-numeric: tabular-nums; text-align: center; }
.embarque-offline__dot { top: 8px; right: 7px; width: 10px; height: 10px; }
.embarque-offline__toggle[aria-busy="true"] svg { animation: embarque-pulse 1.2s ease-in-out infinite; }
.embarque-offline__toggle.is-alerting { animation: embarque-alert .9s cubic-bezier(.16, 1, .3, 1) 1; }
@keyframes embarque-pulse { 50% { opacity: .45; } }
@keyframes embarque-alert { 0% { box-shadow: 0 0 0 0 rgba(255, 209, 102, .75); transform: scale(1); } 35% { transform: scale(1.12); } 100% { box-shadow: 0 0 0 14px rgba(255, 209, 102, 0); transform: scale(1); } }
/* Alinha a borda direita do menu à do botão Fechar (Atualizar + Fechar + gaps = 96 px). */
.embarque-offline__menu { position: absolute; top: calc(100% + 8px); right: -96px; z-index: 6; width: min(340px, calc(100vw - 32px)); max-height: calc(100dvh - 96px); overflow-y: auto; overscroll-behavior: contain; padding: 14px; border-radius: 10px; background: #fff; color: var(--p-tinta); box-shadow: 0 12px 32px rgba(4, 29, 58, .28); text-align: start; scrollbar-width: thin; }
.embarque-offline__menu p { margin: 0; font-size: .8125rem; line-height: 1.45; color: var(--p-tinta-media); overflow-wrap: anywhere; }
.embarque-offline__menu .embarque-offline__network { display: flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 700; color: var(--p-tinta); }
.embarque-offline__network::before { content: ""; flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--p-linha-forte); }
.embarque-offline__network[data-network="online"]::before { background: #087e62; }
.embarque-offline__network[data-network="unstable"]::before { background: #c58a00; }
.embarque-offline__network[data-network="offline"]::before { background: #c81e1e; }
.embarque-offline__menu #embarque-network-help { margin-top: 2px; padding-inline-start: 18px; }
.embarque-offline__readiness { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--p-linha); }
.embarque-offline__menu #embarque-offline-state { font-size: .875rem; font-weight: 700; color: var(--p-tinta); }
.embarque-offline__menu #embarque-offline-state[data-ready="true"] { color: #066b53; }
.embarque-offline__menu .embarque-offline__actions { margin-top: 12px; }
.embarque-notice-item .botao[aria-disabled="true"] { opacity: .6; cursor: wait; }
.embarque-notices { display: grid; gap: 8px; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--p-linha); list-style: none; }
.embarque-notice-item { display: grid; justify-items: start; gap: 6px; padding: 12px; border-radius: 8px; background: #edf1f4; color: var(--p-tinta); }
.embarque-notice-item[data-tone="warning"] { background: #fff2d6; color: #694512; }
.embarque-notice-item[data-tone="error"] { background: var(--p-falha-fundo); color: var(--p-falha); }
.embarque-offline__menu .embarque-notice-item p { color: inherit; }
.embarque-offline__menu .embarque-notice-item .embarque-notice-item__help { font-size: .75rem; opacity: .9; }
.embarque-notice-item strong { font-size: .875rem; overflow-wrap: anywhere; }
.embarque-notice-item__eyebrow { font-size: .6875rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.embarque-notice-item .botao { min-height: 44px; white-space: normal; text-align: center; }
.embarque-notice-item .embarque-conflict__actions { width: 100%; margin-top: 4px; }
.embarque-notice-item .embarque-conflict__actions .botao { flex: 1 1 120px; }
.embarque-offline__menu .embarque-offline__actions .botao { flex: 1; }
.embarque .embarque-header .embarque-offline__menu :is(button, a):focus-visible { outline-color: var(--p-acao); }
.embarque-offline__actions, .embarque-conflict__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.embarque-offline__actions .botao, .embarque-conflict__actions .botao { min-height: 44px; white-space: normal; text-align: center; }
.embarque-check.is-queued svg { stroke-dasharray: 3 2; }
.embarque :is(summary):focus-visible { outline: 3px solid #083965; outline-offset: 3px; }
.painel--chamada .painel-footer { display: none; }
.painel--chamada .embarque { width: min(720px, 100vw); inset: 0; margin-inline: auto; }
@media (max-width: 1023px) {
  .embarque { transform: translateY(100%); }
  .embarque.is-open { transform: translateY(0); }
}
@media (max-width: 560px) {
  .painel__topo { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 16px; }
  .painel__logo img { width: 76px; }
  .painel__titulo-bloco { flex: 1; min-width: 0; }
  .painel__titulo-principal { font-size: .875rem; }
  .painel__subtitulo { display: none; }
  .painel__acoes-topo { width: 100%; justify-content: space-between; }
  .painel__acoes-topo .botao { min-height: 44px; }
  .painel__conteudo { padding-top: 16px; }
  .painel .filtro { flex-wrap: wrap; }
  .embarque { width: calc(100vw - 8px); }
  .embarque-header { padding-inline: 16px; }
  .embarque-export { padding-inline: 16px; }
  .embarque .embarque-trip button { gap: 6px; padding-inline: 8px; }
  .embarque-buses-select { min-height: 52px; height: 52px; padding: 8px; font-size: .8125rem; }
  .embarque-buses-select option { font-size: 1.125rem; }
  .embarque-scroll, .embarque-overview { padding-inline: 16px; }
}
@media (max-width: 374px) {
  .embarque-header { gap: 8px; }
  .embarque-header h2 { font-size: 1.35rem; }
  .embarque-mascot { width: 52px; height: 52px; }
  .embarque-header__lead { gap: 8px; }
  .embarque-header__copy p { display: none; }
  .embarque-trip { gap: 4px; }
  .embarque .embarque-trip .embarque-segment { flex-basis: calc(50% - 2px); gap: 2px; padding: 2px; }
  .embarque-bus-picker { flex-basis: calc(50% - 2px); }
  .embarque .embarque-trip button { gap: 2px; padding-inline: 4px; }
  .embarque-trip svg { width: 14px; height: 14px; }
  .embarque-buses-select { min-height: 48px; height: 48px; font-size: .75rem; }
  .embarque-bus-picker { height: 48px; }
  .embarque .embarque-trip .embarque-bus-picker__trigger { font-size: .75rem; }
}
@media (max-height: 620px) {
  .embarque-header { padding-block: 12px; }
  .embarque-mascot { width: 52px; height: 52px; }
  .embarque-header h2 { font-size: 1.3rem; }
  .embarque-header p, .embarque-progress p { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .embarque, .embarque * { transition: none !important; animation: none !important; }
}
