/* Secondary TV screens. Kept free of modern-only CSS so it runs on Chrome 68/webOS 5. */

.content-scroll.is-scrollable::-webkit-scrollbar,
.news-detail-scroll::-webkit-scrollbar,
.notification-detail-scroll::-webkit-scrollbar,
.hotel-description::-webkit-scrollbar {
  width: 7px;
}

.content-scroll.is-scrollable::-webkit-scrollbar-thumb,
.news-detail-scroll::-webkit-scrollbar-thumb,
.notification-detail-scroll::-webkit-scrollbar-thumb,
.hotel-description::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
}

.secondary-screen {
  width: 100%;
  min-height: 100%;
}

.catalog-state {
  width: 100%;
  height: 100%;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.catalog-state h2 {
  margin: 18px 0 0;
  font-size: 38px;
}

.catalog-state p {
  max-width: 760px;
  margin: 14px 0 26px;
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1.45;
}

.catalog-state-spinner {
  width: 54px;
  height: 54px;
  border: 5px solid rgba(255, 255, 255, 0.16);
  border-top-color: #c11c36;
  border-radius: 50%;
  animation: spinner 780ms linear infinite;
}

.screen-title-block {
  margin: 8px 0 24px;
}

.screen-title-block h1 {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
}

.screen-title-block > span {
  width: 250px;
  height: 3px;
  margin-top: 8px;
  display: block;
  background: #c11c36;
}

/* News: same five-column dark newspaper metaphor used by the Flutter screen. */
.news-screen {
  padding: 16px 0 36px;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-gap: 22px 18px;
}

.news-card {
  position: relative;
  height: 248px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 2px solid rgba(232, 226, 210, 0.12);
  border-radius: 5px;
  background: radial-gradient(circle at top center, #26282e 0%, #17181c 72%);
  color: #e8e2d2;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.38);
  text-align: center;
  cursor: default;
}

.news-card.is-focused,
.news-card:focus {
  border-color: #c11c36 !important;
  background: radial-gradient(circle at top center, #33262a 0%, #201618 72%);
  box-shadow: 0 0 0 4px rgba(193, 28, 54, 0.28), 0 18px 36px rgba(0, 0, 0, 0.55);
}

.news-source {
  height: 22px;
  overflow: hidden;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.3px;
  line-height: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-rule {
  width: 100%;
  height: 1px;
  margin-top: 3px;
  display: block;
  background: rgba(232, 226, 210, 0.7);
}

.news-rule.is-strong {
  height: 2px;
  background: #e8e2d2;
}

.news-card.is-focused .news-rule,
.news-card:focus .news-rule {
  background: #c11c36;
}

.news-date {
  height: 24px;
  margin: 5px 0 2px;
  display: flex;
  align-items: center;
  color: rgba(232, 226, 210, 0.64);
  font-size: 10px;
  font-style: italic;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.news-date i {
  height: 1px;
  flex: 1 1 auto;
  background: rgba(232, 226, 210, 0.3);
}

.news-date b {
  margin: 0 6px;
  overflow: hidden;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-headline {
  min-height: 70px;
  max-height: 88px;
  margin: auto 0 5px;
  display: -webkit-box;
  overflow: hidden;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.news-lead {
  height: 35px;
  margin-bottom: auto;
  display: -webkit-box;
  overflow: hidden;
  color: rgba(232, 226, 210, 0.62);
  font-size: 12px;
  font-style: italic;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.news-footer {
  padding-top: 6px;
  overflow: hidden;
  border-top: 1px solid rgba(232, 226, 210, 0.3);
  color: rgba(232, 226, 210, 0.55);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-card.is-focused .news-footer,
.news-card:focus .news-footer {
  color: #e14760;
}

#modal-root .modal-card {
  width: 1120px;
  max-width: calc(100% - 100px);
  max-height: calc(100% - 90px);
}

.news-detail {
  height: 680px;
  min-height: 510px;
  display: flex;
}

.news-detail-image {
  width: 42%;
  min-height: 510px;
  flex: 0 0 42%;
  border-radius: 18px 0 0 18px;
  object-fit: cover;
  background: #17181c;
}

.news-detail-copy {
  min-width: 0;
  padding: 4px;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.news-detail-copy header,
.news-detail-copy header > div {
  display: flex;
  align-items: center;
}

.news-detail-copy header {
  justify-content: space-between;
}

.news-detail-source {
  padding: 6px 11px;
  border-radius: 6px;
  background: #c11c36;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.6px;
}

.news-detail h2 {
  max-width: 94%;
  margin: 20px 0;
  font-size: 34px;
  line-height: 1.15;
}

.news-detail-date {
  margin-left: 14px;
  color: var(--text-muted);
  font-size: 15px;
}

.news-close {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 3px solid transparent;
  border-radius: 50%;
  background: #c11c36;
  color: #ffffff;
  font-size: 30px;
  line-height: 42px;
}

.news-detail hr {
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.2);
}

.news-detail h3 {
  margin: 22px 0 10px;
  color: #e14760;
  font-size: 17px;
  letter-spacing: 0.5px;
}

.news-detail-scroll {
  margin: 0;
  padding-right: 14px;
  flex: 1 1 auto;
  overflow-y: auto;
  color: rgba(255, 255, 255, 0.88);
  font-size: 19px;
  line-height: 1.55;
  white-space: pre-line;
}

.news-related-item {
  padding: 14px 8px;
  display: flex;
  align-items: flex-start;
}

.news-related-item + .news-related-item {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.news-related-item > i {
  width: 7px;
  height: 7px;
  margin: 10px 14px 0 0;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #c11c36;
}

.news-related-item strong,
.news-related-item span {
  display: block;
}

.news-related-item strong {
  color: #ffffff;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.4;
}

.news-related-item span {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.54);
  font-size: 14px;
}

.news-related-empty {
  padding: 70px 20px;
  color: rgba(255, 255, 255, 0.54);
  text-align: center;
}

.modal-close-button {
  align-self: flex-start;
}

/* Hotel: HotelPage @1920x1080 — scale=(minSide/720).clamp(0.6,1.4)=1.4 */
.content-scroll.route-hotel {
  padding: 0;
  overflow: hidden;
  background: linear-gradient(to left, #000000, #212121);
}

.hotel-screen {
  height: 100%;
  min-height: 0;
  /* top: percentHeight(.19); left: (28*scale).clamp(16,40)=39.2px */
  padding: 19vh 0 0 2.0417vw;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hotel-chips {
  width: 100%;
  /* O overflow-x: hidden abaixo e necessario para o scrollLeft do D-pad, mas
     nao existe um eixo hidden e o outro visible: o overflow-y vira auto e a
     caixa recorta na vertical. Sem folga, o anel de foco (4px) some e a escala
     (1.035) do chip focado corta ~1px em cima e embaixo. O padding abre essa
     folga e a margem negativa a devolve, para os chips seguirem na linha de
     19vh (a mesma do cardapio). */
  padding: 6px 0;
  margin: -6px 0;
  display: flex;
  flex: 0 0 auto;
  overflow-x: hidden;
}

.hotel-chip {
  /* index even → percentWidth(.20); odd → percentWidth(.14) */
  width: 20vw;
  min-width: 12vw;
  max-width: 22vw;
  flex: 0 0 20vw;
  /* chipPadding=(10*scale).clamp=14px; chipMargin=(3*scale).clamp=4.2px */
  margin: 0 0.2187vw;
  padding: 1.2963vh 0.7292vw;
  overflow: hidden;
  /* chipBorder=(2*scale).clamp=2.8px; radius uses pill (Flutter circular 64) */
  border: 0.2593vh solid #ffffff;
  border-radius: 999px;
  background: transparent;
  color: #ffffff;
  /* (18*scale).clamp(12,22)=22px */
  font-size: 2.037vh;
  font-weight: 400;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hotel-chip:nth-child(even) {
  width: 14vw;
  max-width: 16vw;
  flex-basis: 14vw;
}

.hotel-chip.is-selected,
.hotel-chip.is-focused,
.hotel-chip:focus {
  border-color: transparent !important;
  background: #c11c36;
  /* (20*scale).clamp(14,24)=24px */
  font-size: 2.2222vh;
  /* O realce global de foco ([data-focusable].is-focused) desenha um anel + uma
     sombra grande (0 18px 46px) e um scale(1.035). Dentro de .hotel-chips
     (overflow-x:hidden, que tambem recorta na vertical) essa sombra/escala eram
     cortadas e o chip aparecia "estourado". O proprio preenchimento vermelho ja
     marca a selecao (igual ao menu), entao remove anel/sombra/escala. */
  box-shadow: none !important;
  transform: none;
}

.hotel-detail {
  /* SizedBox height percentHeight(.67), width percentWidth(.9) */
  width: 90vw;
  height: 67vh;
  min-height: 0;
  /* sectionGap=(20*scale).clamp=28px */
  margin-top: 2.5926vh;
  display: flex;
  flex: 0 0 auto;
  overflow: hidden;
}

.hotel-detail-copy,
.hotel-detail-media {
  width: 50%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  flex: 0 0 50%;
}

.hotel-detail-copy {
  /* Flutter: Expanded Column — sem padding extra; gap between columns via spacer */
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.hotel-detail-copy h2 {
  /* detailTitleSize=(28*scale).clamp(18,32)=32px; innerGap below=16.8px */
  margin: 0 0 1.5556vh;
  flex: 0 0 auto;
  color: #ffffff;
  font-size: 2.963vh;
  font-weight: 700;
  line-height: 1.15;
}

.hotel-description {
  min-height: 0;
  padding-right: 0.875vw;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  color: #c7c7c7;
  /* detailTextSize=(16*scale).clamp(12,20)=20px */
  font-size: 1.8519vh;
  font-weight: 400;
  line-height: 1.5;
  white-space: pre-line;
}

.hotel-detail-media {
  /* SizedBox(width: innerGap) between columns ≈ padding-left 16.8px */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-left: 0.875vw;
  box-sizing: border-box;
}

.hotel-detail-media img {
  /* height: percentHeight(.6); imageRadius=(50*scale).clamp=64px; BoxFit.fill */
  width: 100%;
  height: 60vh;
  max-height: 100%;
  border-radius: 5.9259vh 0 0 0;
  object-fit: fill;
  background: #0e0e0e;
}

/* Flights. */
.content-scroll.route-flights {
  /* VooPage (Flutter) begins after the responsive collapsed sidebar. */
  --flights-menu-offset: 9.7vh;
  /* Recuo esquerdo da tabela: alinhada bem a esquerda como no Flutter. */
  --flights-inset: 1vw;
  /* Sem padding-top no scroller: o espaco do topo vai no .flights-head para que,
     ao rolar, o cabecalho fixo cubra tambem essa faixa (senao as linhas apareciam
     por cima, na regiao do relogio). */
  padding: 0;
  /* Mesmo gradiente das demais telas (hotel/cardapio), no lugar do cinza chapado. */
  background: linear-gradient(to left, #000000, #212121);
}

.flights-screen {
  min-height: 100%;
}

/* Subtitulo padrao do titulo fixado (Voos: "Aeroporto <IATA>"; Espelhamento: a
   instrucao). Fica logo abaixo do titulo, dentro do bloco fixado. */
.flights-subtitle,
.mirror-subtitle,
.hotel-subtitle,
.food-subtitle {
  margin: 0.8vh 0 0;
  color: var(--text-muted);
  font-size: 2.3vh;
  font-weight: 500;
}

/* Cabecalho fixo: os rotulos de coluna NAO rolam com a lista. Sticky dentro do
   proprio .content-scroll (que continua sendo o scroller — o scrollIntoView do
   D-pad depende disso). O gradiente identico ao do scroller mascara as linhas que
   passam por baixo ao rolar. Titulo + subtitulo sao fixados no header
   (.screen-title-block.is-pinned.flights-titlebar), fora deste fluxo. */
.flights-head {
  position: sticky;
  top: 0;
  z-index: 3;
  /* padding-top livra a logo/faixa do header (base ~118px) para os rotulos. */
  padding-top: 14vh;
  padding-bottom: 0.6vh;
  background: linear-gradient(to left, #000000, #212121);
}

/* Tabela alinhada a esquerda como no Flutter (sem o antigo recuo grande). */
.flight-header,
.flight-body {
  margin-left: var(--flights-inset);
}

/* O grid fica no cabecalho (div) e no wrapper interno das linhas: Chrome <71
   (webOS 5) ignora display:grid aplicado direto no <button>.flight-row. */
.flight-header,
.flight-cells {
  display: grid;
  grid-template-columns: 3fr 2fr 2fr 3fr 3fr 2fr 2fr;
  grid-column-gap: 1vw;
  align-items: center;
}

.flight-cells {
  width: 100%;
  height: 100%;
}

.flight-header {
  height: 5vh;
  padding: 0.6vh 3vw;
  color: #c7c7c7;
  font-size: 2.4vh;
  font-weight: 500;
}

.flight-body {
  padding: 0 1.5vw 3vh;
}

.flight-row {
  display: block;
  width: 100%;
  margin: 1vh 0;
  padding: 1.5vh 1.8vw;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  background: #0e0e0e;
  color: #c7c7c7;
  font-weight: 500;
  text-align: left;
}

/* Higher specificity keeps the compact webOS view at Flutter's 74px row rhythm. */
.content-scroll.route-flights .flight-header {
  height: 4.6vh;
}

.content-scroll.route-flights .flight-row {
  height: 8vh;
  padding: 1vh 1.5vw;
}

.flight-row strong,
.flight-row span {
  min-width: 0;
  overflow: hidden;
  font-size: 2.7vh;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flight-row strong {
  color: #ffffff;
}

/* Primeira coluna: logo da companhia a esquerda do nome. */
.flight-airline {
  display: flex;
  align-items: center;
}

/* Chip branco arredondado: as logos do CDN sao desenhadas para fundo claro.
   Usado na lista e no cabecalho do detalhe; cada um define so o tamanho. */
.flight-airline-logo {
  flex-shrink: 0;
  padding: 2px;
  border-radius: 8px;
  background: #ffffff;
  object-fit: contain;
}

.flight-airline .flight-airline-logo {
  width: 4vh;
  height: 4vh;
  margin-right: 0.7vw;
}

.flight-row.is-focused,
.flight-row:focus {
  border-color: #c11c36 !important;
  border-width: 2px;
  background: rgba(193, 28, 54, 0.15);
  box-shadow: none;
  transform: none;
}

/* Flight detail: mirrors Flutter's constrained, red-bordered dialog. */
#modal-root .modal-card.flight-modal-card {
  width: 84vw;
  max-width: calc(100% - 80px);
  max-height: calc(100% - 56px);
  padding: 0;
  overflow: hidden;
  border: 2px solid #c11c36;
  border-radius: 16px;
  background: #0e0e0e;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
}

.flight-detail {
  max-height: calc(100vh - 56px);
  padding: 3.4vh 2vw 4.4vh;
  overflow-y: auto;
  background: #0e0e0e;
}

.flight-detail header,
.flight-detail header > div {
  display: flex;
  align-items: center;
}

.flight-detail header {
  justify-content: space-between;
}

.flight-detail header > div:first-child {
  min-width: 0;
  flex: 1 1 auto;
}

.flight-symbol {
  width: 4.4vh;
  height: 4.4vh;
  margin-right: 1.8vh;
  flex: 0 0 4.4vh;
  color: #c11c36;
  line-height: 1;
}

.flight-symbol svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
}

/* Com a logo da companhia no lugar do aviao: a logo e uma imagem com detalhe,
   precisa de mais area que o icone vetorial para ficar legivel na TV. */
.flight-symbol.has-logo {
  width: 6.6vh;
  height: 6.6vh;
  flex-basis: 6.6vh;
}

.flight-symbol .flight-airline-logo {
  width: 100%;
  height: 100%;
  display: block;
}

.flight-detail header h2 {
  max-height: 7.8vh;
  margin: 0;
  display: -webkit-box;
  overflow: hidden;
  color: #ffffff;
  font-size: 3.3vh;
  font-weight: 700;
  line-height: 1.15;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.flight-detail header p {
  margin: 0.35vh 0 0;
  overflow: hidden;
  color: #c7c7c7;
  font-size: 2.05vh;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flight-status {
  max-width: 32%;
  margin-left: 0.8vw;
  padding: 0.9vh 1vw;
  overflow: hidden;
  flex: 0 1 auto;
  border: 1px solid #c11c36;
  border-radius: 20px;
  background: rgba(193, 28, 54, 0.18);
  color: #ffffff;
  font-size: 1.85vh;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flight-route {
  margin: 3vh 0;
  padding: 2.5vh 1.4vw;
  display: flex;
  align-items: center;
  border-radius: 12px;
  /* Card levemente mais claro que o fundo do modal (raised), como no Flutter. */
  background: rgba(255, 255, 255, 0.06);
}

.flight-route > div:first-child,
.flight-route > div:last-child {
  min-width: 0;
  display: flex;
  flex: 0 1 30%;
  flex-direction: column;
}

.flight-route .is-destination {
  align-items: flex-end;
  text-align: right;
}

.flight-route strong {
  color: #ffffff;
  font-size: 4.6vh;
  font-weight: 800;
  line-height: 1.1;
}

.flight-route span {
  max-width: 20vw;
  margin-top: 0.4vh;
  overflow: hidden;
  color: #c7c7c7;
  font-size: 1.9vh;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flight-route-line {
  min-width: 0;
  padding: 0 1.04vw;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
}

.flight-route-line svg {
  width: 3.4vh;
  height: 3.4vh;
  display: block;
  fill: #c7c7c7;
  /* Icons.flight aponta pra cima; girado aponta para o destino (direita). */
  transform: rotate(90deg);
}

.flight-route-line i {
  width: 100%;
  height: 2px;
  margin-top: 0.37vh;
  background: #c7c7c7;
}

.flight-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 1.9vh 1.1vw;
}

.flight-info-tile {
  min-width: 0;
  padding: 1.7vh 1.1vw;
  display: flex;
  align-items: center;
  border-radius: 10px;
  /* Mesmo card "raised" da rota, como no Flutter. */
  background: rgba(255, 255, 255, 0.06);
}

.flight-info-icon {
  width: 2.7vh;
  height: 2.7vh;
  margin-right: 0.9vw;
  flex: 0 0 2.7vh;
  color: #c7c7c7;
}

.flight-info-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.flight-info-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.flight-info-copy span,
.flight-info-copy strong {
  display: block;
}

.flight-info-copy span {
  color: #c7c7c7;
  font-size: 1.55vh;
  font-weight: 400;
  line-height: 1.2;
}

.flight-info-copy strong {
  margin-top: 0.3vh;
  display: -webkit-box;
  overflow: hidden;
  color: #ffffff;
  font-size: 2.3vh;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.flight-close-hint {
  width: 100%;
  margin: 2.4vh 0 0;
  display: block;
  color: #c7c7c7;
  font-size: 1.7vh;
  font-weight: 400;
  text-align: center !important;
}

.flight-detail::-webkit-scrollbar {
  width: 7px;
}

.flight-detail::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
}

/* Food. */
/* O gradiente vai no proprio scroller (full-bleed) e nao no .food-screen: assim
   ele cobre toda a area de conteudo sem o "corte" em cima/esquerda causado pelo
   padding do .content-scroll (110/52/56). */
.content-scroll.route-food {
  background: linear-gradient(to left, #000000, #212121);
}

.food-screen {
  position: relative;
  /* Chips na mesma altura dos da tela do hotel, que os posiciona por 19vh.
     Desconta o padding-top do .content-scroll (138px) e os 5px do
     .food-categories, para a borda do chip cair exatamente em 19vh. */
  padding: calc(19vh - 143px) 0 40px;
}

/* Titulo fixado na faixa do header, ao lado da logo (cardapio e hotel). Logo e
   canto do header sao px fixos, mas essas telas posicionam o conteudo por 19vh:
   em 1600x900 (viewport real da TV) sobram so 52px entre a logo e a linha dos
   chips, e o bloco do titulo tem 46px — nao cabe naquela coluna. Entao usa a
   mesma posicao do titulo da tela de voos, que resolve esse mesmo conflito
   (.flights-head padding-top 9vh; .flights-title padding-left 7.5vw + 9.7vh).
   Assim escapa da logo pela direita, do canto decorativo (x ate 303px) e dos
   chips por cima, em qualquer altura de viewport.

   `fixed` e ancorado na viewport de proposito: a logo nao se mexe quando a
   barra lateral abre, mas o .shell-main inteiro desliza (menu-expanded menos
   menu-collapsed). Preso no fluxo, o titulo desgrudava da logo nessa hora. */
/* Formato novo do titulo fixado (todas as telas: Cardapio, O Hotel, Espelhamento,
   Voos): barra vertical vermelha a esquerda + titulo em negrito. Fica logo apos a
   logo (left fixo em px, alinhado igual em qualquer viewport) e mais para cima. */
.screen-title-block.is-pinned {
  position: fixed;
  /* left fixo: a logo/canto decorativo terminam em ~303px (px fixos); 314 encosta
     logo depois deles em qualquer largura (antes o calc vw/vh variava e ora caia
     atras da logo no compacto, ora ficava longe demais no wide). */
  top: 4.7vh;
  left: 314px;
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Acima do cabecalho fixo das listas (ex.: .flights-head z-index:3, com fundo
     em gradiente): sem isso o fundo do head cobre o titulo fixado. */
  z-index: 40;
}

/* Barra vertical vermelha (altura = ~1 linha do titulo). */
.screen-title-block.is-pinned::before {
  content: "";
  position: absolute;
  top: 0.2vh;
  left: 0;
  width: 5px;
  height: 5.2vh;
  border-radius: 3px;
  background: #c11c36;
}

.screen-title-block.is-pinned h1 {
  font-size: 4.4vh;
  font-weight: 800;
  line-height: 1;
}

/* Sublinhado horizontal antigo nao existe no formato novo. */
.screen-title-block.is-pinned > span {
  display: none;
}

.food-top {
  margin-bottom: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.food-categories {
  min-width: 0;
  padding: 5px 6px;
  display: flex;
  flex: 1 1 auto;
  overflow-x: hidden;
}

.food-category {
  width: 245px;
  min-width: 245px;
  /* Mesma altura dos chips da tela do hotel: o .hotel-chip e todo em vh
     (padding 1.2963 + borda 0.2593 + fonte 2.037), o que fecha 5.5556vh = 60px
     em 1080. Aqui a min-height e quem define a altura, entao ela recebe o
     valor de la e acompanha a viewport do mesmo jeito. */
  min-height: 5.5556vh;
  margin-right: 12px;
  padding: 9px 20px;
  overflow: hidden;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: transparent;
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.food-category.is-selected,
.food-category.is-focused,
.food-category:focus {
  border-color: #c11c36 !important;
  background: #c11c36;
}

.food-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 24px;
}

.food-card {
  width: 100%;
  height: 165px;
  padding: 15px;
  display: flex;
  overflow: hidden;
  border: 3px solid transparent;
  border-radius: 16px;
  background: #303030;
  color: #ffffff;
  text-align: left;
}

.food-card.is-focused,
.food-card:focus {
  border-color: #c11c36 !important;
  box-shadow: 0 0 0 4px rgba(193, 28, 54, 0.22), 0 18px 40px rgba(0, 0, 0, 0.4);
}

.food-card > img {
  width: 135px;
  height: 135px;
  flex: 0 0 135px;
  border-radius: 13px;
  object-fit: cover;
  background: #171717;
}

.food-card-copy {
  min-width: 0;
  padding: 4px 0 0 18px;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.food-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.food-card-heading strong {
  max-width: 66%;
  overflow: hidden;
  font-size: 22px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.food-card-heading b {
  margin-left: 14px;
  color: #69e9ae;
  font-size: 18px;
  white-space: nowrap;
}

.food-card-description {
  margin-top: 13px;
  display: -webkit-box;
  overflow: hidden;
  color: #c7c7c7;
  font-size: 16px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* Modal do item: card branco (texto) + cinza (imagem) e botao Fechar como
   circulo vermelho centralizado ABAIXO do card. Espelha o food_detail_dialog. */
.modal-card.food-modal-shell {
  width: auto;
  max-width: calc(100% - 40px);
  max-height: calc(100% - 40px);
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.food-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.food-modal-card {
  width: 1120px;
  max-width: 84vw;
  height: 600px;
  max-height: 72vh;
  display: flex;
  overflow: hidden;
  border-radius: 12px;
  background: #ffffff;
  color: #111111;
}

.food-modal-copy,
.food-modal-media {
  width: 50%;
  flex: 0 0 50%;
}

.food-modal-copy {
  padding: 26px 30px;
  display: flex;
  flex-direction: column;
}

.food-modal-text {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
}

.food-modal-copy h2 {
  margin: 0 0 14px;
  color: #111111;
  font-size: 32px;
}

.food-modal-copy p {
  margin: 0;
  color: #4d4d4d;
  font-size: 18px;
  line-height: 1.5;
  white-space: pre-line;
}

.food-modal-media {
  background: #9a9a9a;
}

.food-modal-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #9a9a9a;
}

.food-modal-footer {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.food-close {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.food-close-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(150, 150, 150, 0.7);
  color: #ffffff;
  font-size: 22px;
  line-height: 1;
}

.food-close-label {
  margin-top: 10px;
  color: #ffffff;
  font-size: 16px;
}

.food-close.is-focused,
.food-close:focus {
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none;
}

.food-close.is-focused .food-close-icon,
.food-close:focus .food-close-icon {
  background: #c11c36;
}

.food-close.is-focused .food-close-label,
.food-close:focus .food-close-label {
  color: #c11c36;
}

/* Notifications: NotificationPage @1920x1080 — scale=1.4; lista .sp ≈ N*scale (TV) */
.content-scroll.route-notifications {
  padding: 0;
  overflow: hidden;
  background: #000000;
}

.notifications-screen {
  height: 100%;
  /* topo em px: livra a logo do canto (fixa em 303x129px) em 900/1080/720. */
  padding: 140px 3.125vw 3.5vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Cabecalho estilo v5: titulo + subtitulo (esq.) e chip de nao lidos (dir.). */
.notifications-header {
  margin-bottom: 2.2222vh;
  display: flex;
  align-items: flex-start;
  flex: 0 0 auto;
}

.notifications-header-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.notifications-header-copy h1 {
  margin: 0;
  color: #ffffff;
  font-size: 3.2407vh;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.notifications-header-copy p {
  margin: 0.7407vh 0 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 1.8519vh;
}

.notifications-unread-chip {
  margin-left: 1.0417vw;
  padding: 0.8333vh 1.0417vw;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  border: 0.0926vh solid rgba(193, 28, 54, 0.35);
  border-radius: 1.2963vh;
  background: rgba(193, 28, 54, 0.15);
  color: #ff8a9b;
  font-size: 1.6667vh;
  font-weight: 700;
  white-space: nowrap;
}

.notifications-unread-chip:before {
  content: "";
  width: 1.2037vh;
  height: 1.2037vh;
  margin-right: 0.5208vw;
  border-radius: 50%;
  background: #c11c36;
}

.notifications-body {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  overflow: hidden;
}

.notification-list {
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
}

.notifications-screen.has-detail .notification-list {
  width: 44%;
  flex: 0 0 44%;
  padding-right: 1.5625vw;
}

.notification-rows {
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  /* folga p/ o glow e o scale do foco nao serem cortados pelo overflow */
  padding: 0.9259vh 0.5208vw 2.5vh;
  overflow-x: hidden;
  overflow-y: auto;
}

.notification-row {
  width: 100%;
  margin: 0 0 1.1111vh;
  padding: 1.2963vh 1.0417vw;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 0.0926vh solid rgba(255, 255, 255, 0.08);
  border-radius: 1.4815vh;
  background: #1b1b1f;
  color: #ffffff;
  text-align: left;
  box-sizing: border-box;
  transition: transform 0.16s ease-out, border-color 0.16s ease-out, box-shadow 0.16s ease-out, background 0.16s ease-out;
}

/* Nao lido: realce de accent na borda esquerda (gradiente) + borda mais viva. */
.notification-row.is-unread {
  border-color: rgba(255, 255, 255, 0.12);
  background: linear-gradient(90deg, rgba(193, 28, 54, 0.12), #1b1b1f 44%);
}

.notification-row.is-read {
  background: #1b1b1f;
}

.notification-row.is-active-detail {
  border-color: rgba(193, 28, 54, 0.5);
  background: #232327;
}

/* Foco v5: card escuro + borda/glow accent + leve zoom (nao mais preenchido). */
.notification-row.is-focused,
.notification-row:focus {
  transform: scale(1.012);
  border-color: #c11c36;
  background: #26262b;
  box-shadow: 0 0 0 0.1852vh rgba(193, 28, 54, 0.45), 0 1.3889vh 2.7778vh -0.9259vh rgba(0, 0, 0, 0.7);
}

.notification-leading {
  width: 6.4815vh;
  height: 6.4815vh;
  flex: 0 0 6.4815vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 1.2963vh;
  background: #0e0e0e;
}

.notification-leading img {
  width: 100%;
  height: 100%;
  border-radius: 1.2963vh;
  object-fit: cover;
}

.notification-row-copy {
  min-width: 0;
  padding-left: 0.9375vw;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.notification-heading {
  display: flex;
  align-items: center;
}

.notification-heading strong {
  min-width: 0;
  overflow: hidden;
  flex: 1 1 auto;
  color: #f2f2f2;
  font-size: 1.9444vh;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-row.is-read .notification-heading strong {
  color: #9a9a9a;
  font-weight: 500;
}

.notification-row.is-focused .notification-heading strong,
.notification-row:focus .notification-heading strong {
  color: #ffffff;
}

.notification-heading time {
  margin-left: 0.6vw;
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.42);
  font-size: 1.5556vh;
}

.notification-row.is-focused .notification-heading time,
.notification-row:focus .notification-heading time {
  color: rgba(255, 255, 255, 0.72);
}

/* Indicador de nao lido (ponto), agora antes do titulo como no v5. */
.notification-heading i {
  width: 1.037vh;
  height: 1.037vh;
  margin-right: 0.5208vw;
  flex: 0 0 1.037vh;
  border-radius: 50%;
  background: #c11c36;
  box-shadow: 0 0 0.7407vh rgba(193, 28, 54, 0.7);
}

.notification-row:focus .notification-heading i,
.notification-row.is-focused .notification-heading i {
  background: #ffffff;
  box-shadow: none;
}

.notification-preview {
  margin-top: 0.4630vh;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.6852vh;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-row.is-read .notification-preview {
  color: rgba(255, 255, 255, 0.4);
}

.notification-row.is-focused .notification-preview,
.notification-row:focus .notification-preview {
  color: rgba(255, 255, 255, 0.8);
}

.notification-detail {
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
  padding: 2.4074vh 1.9792vw;
  border: 0.0926vh solid rgba(255, 255, 255, 0.1);
  border-radius: 1.8519vh;
  background: #17171b;
}

/* Cabecalho do detalhe: icone grande do tipo + badges + remetente + data. */
.notification-detail-head {
  margin-bottom: 1.6667vh;
  display: flex;
  align-items: flex-start;
  flex: 0 0 auto;
}

.notification-detail-icon {
  width: 7.7778vh;
  height: 7.7778vh;
  flex: 0 0 7.7778vh;
  margin-right: 1.0417vw;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1.6667vh;
}

.notification-detail-icon.type-info { background: rgba(96, 165, 250, 0.16); }
.notification-detail-icon.type-alerta { background: rgba(251, 191, 36, 0.16); }
.notification-detail-icon.type-multimedia { background: rgba(45, 212, 191, 0.16); }
.notification-detail-icon .notification-icon { width: 4.6296vh; height: 4.6296vh; }

.notification-detail-headcopy {
  min-width: 0;
  flex: 1 1 auto;
}

.notification-detail-from {
  margin-top: 1.037vh;
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.7592vh;
  font-weight: 500;
}

.notification-detail-when {
  margin-top: 0.2778vh;
  color: rgba(255, 255, 255, 0.45);
  font-size: 1.4815vh;
}

/* Chamada de mensagem pessoal (escopo pessoal), como no v5. */
.notification-personal {
  margin-bottom: 1.5vh;
  padding: 1.0185vh 1.0417vw;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  border: 0.0926vh solid rgba(193, 28, 54, 0.28);
  border-radius: 1.1111vh;
  background: rgba(193, 28, 54, 0.12);
  color: #ffb3bf;
  font-size: 1.6667vh;
  font-weight: 600;
}

.notification-detail h2 {
  margin: 0 0 1.2963vh;
  color: #ffffff;
  font-size: 2.9630vh;
  font-weight: 700;
  line-height: 1.2;
  flex: 0 0 auto;
}

.notification-detail-divider {
  height: 0.0926vh;
  margin-bottom: 1.6667vh;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.1);
}

.notification-detail-scroll {
  min-height: 0;
  flex: 1 1 auto;
  padding-right: 0.7vw;
  overflow-x: hidden;
  overflow-y: auto;
  color: rgba(255, 255, 255, 0.82);
  font-size: 2.037vh;
  line-height: 1.55;
}

.notification-detail-foot {
  margin-top: 1.6667vh;
  padding-top: 1.3889vh;
  flex: 0 0 auto;
  border-top: 0.0926vh solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.4);
  font-size: 1.4815vh;
  text-align: center;
}

.notification-detail-text {
  white-space: pre-line;
}

/* --- Avisos por tipo (info/alerta/multimidia) e escopo (geral/pessoal) ---
   Cores espelham AvisoType do app novo: info=azul, alerta=ambar, midia=teal. */
.notification-leading.type-info { background: rgba(96, 165, 250, 0.16); }
.notification-leading.type-alerta { background: rgba(251, 191, 36, 0.16); }
.notification-leading.type-multimedia { background: rgba(45, 212, 191, 0.16); }

/* Icones SVG do tipo: cor viva do tipo sobre o quadrado com fundo tingido. */
.notification-icon {
  width: 3.4259vh;
  height: 3.4259vh;
  display: block;
}
.notification-icon path { fill: currentColor; }
.glyph-info { color: #60a5fa; }
.glyph-alerta { color: #fbbf24; }
.glyph-multimedia { color: #2dd4bf; }

.notification-tags {
  margin-top: 0.4630vh;
  display: flex;
  align-items: center;
}

.notification-type-badge {
  padding: 0.1852vh 0.5208vw;
  border-radius: 0.6481vh;
  /* 11.sp ≈ 11*scale = 15.4px */
  font-size: 1.4259vh;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.notification-type-badge.type-info { background: rgba(96, 165, 250, 0.16); color: #60a5fa; }
.notification-type-badge.type-alerta { background: rgba(251, 191, 36, 0.16); color: #fbbf24; }
.notification-type-badge.type-multimedia { background: rgba(45, 212, 191, 0.16); color: #2dd4bf; }

.notification-scope {
  margin-left: 0.4167vw;
  padding: 0.1852vh 0.5208vw;
  border-radius: 0.6481vh;
  font-size: 1.4259vh;
  font-weight: 500;
  white-space: nowrap;
}
.notification-scope.scope-todos { background: rgba(255, 255, 255, 0.08); color: #cfcfcf; }
.notification-scope.scope-pessoal { background: rgba(193, 28, 54, 0.18); color: #ff8a9b; }

/* No foco a linha fica vermelha: badges viram neutros de alto contraste. */
.notification-row.is-focused .notification-type-badge,
.notification-row:focus .notification-type-badge,
.notification-row.is-focused .notification-scope,
.notification-row:focus .notification-scope {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.notification-detail-tags {
  margin-bottom: 1.037vh;
  display: flex;
  align-items: center;
}
.notification-detail-tags .notification-type-badge { font-size: 1.5741vh; }
.notification-detail-tags .notification-scope { font-size: 1.5741vh; }

.notification-detail-media {
  margin-bottom: 1.8519vh;
  border-radius: 1.1111vh;
  overflow: hidden;
  background: #101014;
}
.notification-detail-media img {
  width: 100%;
  max-height: 38vh;
  object-fit: cover;
  display: block;
}
.notification-detail-media.is-video,
.notification-detail-media.is-broken {
  height: 26vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.notification-play-icon {
  width: 8.3333vh;
  height: 8.3333vh;
}
.notification-play-icon path { fill: rgba(255, 255, 255, 0.85); }
.notification-detail-media.is-broken:after {
  content: "";
  width: 5.5556vh;
  height: 5.5556vh;
  border: 0.2778vh solid rgba(255, 255, 255, 0.24);
  border-radius: 0.9259vh;
}

/* Checkout: mirrors CheckoutPage's black Row with an intrinsic-width QR image. */
.content-scroll.route-checkout {
  padding: 0;
  background: #000000;
}

.content-scroll.route-checkout .checkout-screen {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: #000000;
}

.content-scroll.route-checkout .checkout-copy {
  min-width: 0;
  max-width: none;
  padding: 0 0 0 2.5vh;
  flex: 1 1 auto;
  text-align: center;
}

.content-scroll.route-checkout .checkout-copy h1 {
  margin: 0;
  color: rgba(255, 255, 255, 0.70);
  font-size: 3.47vh;
  font-weight: 700;
  line-height: 1.2;
}

.content-scroll.route-checkout .checkout-copy > p {
  margin: 0;
  color: rgba(255, 255, 255, 0.70);
  font-size: 2.5vh;
  font-weight: 400;
  line-height: 1.4;
  white-space: pre-line;
}

.content-scroll.route-checkout .checkout-code-card {
  width: auto;
  height: 40vh;
  min-height: 0;
  margin-left: 7vw;
  margin-right: 12vw;
  padding: 0;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 2.78vh;
}

.content-scroll.route-checkout .checkout-code-card img {
  width: auto;
  height: 40vh;
  max-width: 100%;
  max-height: 100%;
  border-radius: inherit;
  object-fit: contain;
  image-rendering: auto;
}

/* Flutter clamps sideGap at 80px, tailGap at 120px, and typography by height. */
@media (min-width: 1143px) {
  .content-scroll.route-checkout .checkout-code-card { margin-left: 80px; }
}

@media (min-width: 1000px) {
  .content-scroll.route-checkout .checkout-code-card { margin-right: 120px; }
}

@media (min-height: 864px) {
  .content-scroll.route-checkout .checkout-copy h1 { font-size: 30px; }
}

@media (min-height: 880px) {
  .content-scroll.route-checkout .checkout-copy > p { font-size: 22px; }
}

@media (min-height: 1008px) {
  .content-scroll.route-checkout .checkout-code-card { border-radius: 28px; }
}

@media (max-width: 1366px), (max-height: 768px) {
  .catalog-state { min-height: 330px; }
  .screen-title-block { margin-bottom: 14px; }
  .screen-title-block h1 { font-size: 25px; }
  /* Titulo fixado usa left fixo (314px) na regra base — vale em qualquer viewport,
     entao nao precisa de override aqui. */
  .news-grid { grid-gap: 14px 12px; }
  .news-card { height: 177px; padding: 9px; }
  .news-source { height: 16px; font-size: 10px; line-height: 16px; }
  .news-date { height: 17px; margin: 3px 0; font-size: 8px; }
  .news-headline { min-height: 48px; max-height: 60px; font-size: 14px; }
  .news-lead { height: 27px; font-size: 9px; }
  .news-footer { padding-top: 3px; font-size: 7px; }
  #modal-root .modal-card { max-height: calc(100% - 48px); padding: 26px; }
  .news-detail { height: 520px; min-height: 390px; }
  .news-detail-image { min-height: 390px; }
  .news-detail h2 { font-size: 27px; }
  .news-detail-scroll { font-size: 16px; }
  /* ~720p: scale≈1.0 — clamps abertos em (N*1.0) */
  .hotel-screen { padding: 19vh 0 0 2.1875vw; }
  .hotel-chip { margin: 0 0.2344vw; padding: 1.3889vh 0.7813vw; border-width: 0.2778vh; font-size: 2.5vh; }
  .hotel-chip.is-selected,
  .hotel-chip.is-focused,
  .hotel-chip:focus { font-size: 2.7778vh; }
  .hotel-detail { height: 67vh; margin-top: 2.7778vh; }
  .hotel-detail-copy h2 { margin-bottom: 1.6667vh; font-size: 3.8889vh; }
  .hotel-description { font-size: 2.2222vh; }
  .hotel-detail-media { padding-left: 0.9375vw; }
  .hotel-detail-media img { height: 60vh; border-radius: 6.9444vh 0 0 0; }
  /* A logo do hotel (.header-logo-wrap) e fixa: base em 118px. O padding-top em
     9vh (base) da ~65px nesta viewport compacta (TV ~1280x720), entao os rotulos
     de coluna ("Companhia") subiam por baixo da logo. 88px em px garante que a
     linha de titulo+colunas comece abaixo da logo em qualquer altura compacta. */
  /* Logo fixa termina em ~118px: os rotulos precisam comecar abaixo dela E do
     bloco titulo+badge (fixados acima) nesta viewport compacta. */
  .flights-head { padding-top: 124px; }
  .flight-header { height: 4.2vh; padding: 0 2.5vw; font-size: 2.1vh; }
  .flight-row { margin: 0.8vh 0; padding: 1.2vh 1.5vw; }
  .flight-row strong, .flight-row span { font-size: 2.3vh; }
  .food-top { margin-bottom: 15px; }
  .food-category { width: 180px; min-width: 180px; min-height: 42px; font-size: 13px; }
  .food-grid { grid-gap: 15px; }
  .food-card { height: 112px; padding: 10px; }
  .food-card > img { width: 90px; height: 90px; flex-basis: 90px; }
  .food-card-copy { padding-left: 12px; }
  .food-card-heading strong { font-size: 16px; }
  .food-card-heading b { font-size: 13px; }
  .food-card-description { margin-top: 7px; font-size: 12px; }
  .food-modal-card { height: 420px; max-height: 80vh; }
  .food-modal-copy { padding: 18px 20px; }
  .food-modal-copy h2 { font-size: 25px; }
  .food-modal-copy p { font-size: 15px; }
  .food-close-icon { width: 48px; height: 48px; font-size: 19px; }
  .food-close-label { font-size: 14px; }
  /* ~720p: cabecalho compacto + cards e detalhe menores (topo livra a logo). */
  .notifications-screen { padding: 132px 3.125vw 3vh; }
  .notifications-header { margin-bottom: 1.6667vh; }
  .notifications-header-copy h1 { font-size: 3vh; }
  .notifications-header-copy p { font-size: 1.9444vh; }
  .notification-row { padding: 1.1111vh 1.25vw; border-radius: 1.6667vh; }
  .notification-leading { width: 6.9444vh; height: 6.9444vh; flex-basis: 6.9444vh; border-radius: 1.6667vh; }
  .notification-row-copy { padding-left: 1.25vw; }
  .notification-heading strong { font-size: 1.9444vh; }
  .notification-heading time { font-size: 1.6667vh; }
  .notification-heading i { width: 1.1111vh; height: 1.1111vh; flex-basis: 1.1111vh; margin-right: 0.625vw; }
  .notification-preview { margin-top: 0.5556vh; font-size: 1.8056vh; }
  .notification-detail { padding: 2.2222vh 2.5vw; }
  .notification-detail h2 { margin-bottom: 1.1111vh; font-size: 3.3333vh; }
  .notification-detail-when { font-size: 1.6667vh; }
  .notification-detail-scroll { font-size: 2.2222vh; }
  .checkout-screen { padding: 0 45px 24px 20px; }
  .checkout-copy { padding-right: 45px; }
  .checkout-copy h1 { font-size: 36px; }
  .checkout-copy > p { margin-bottom: 20px; font-size: 19px; }
  .checkout-code-card { width: 360px; min-height: 310px; flex-basis: 360px; }
  .checkout-code-card img { width: 360px; height: 310px; }
}

/* === Espelhamento de Tela (mirroring) — no design do app atual (V4) === */
/* Mesmo gradiente das demais telas secundarias (cardapio/hotel/voos): vai no
   scroller full-bleed via route-mirroring, nao no .mirroring-screen, para cobrir
   tambem o padding do .content-scroll (senao sobra moldura preta em cima/lados). */
.content-scroll.route-mirroring {
  background: linear-gradient(to left, #000000, #212121);
}

.mirroring-screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}

.mirror-steps {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
}

/* Cartao no mesmo estilo dos cards do app (ex.: .food-card): #303030, canto 16px,
   borda 3px que fica vermelha no foco. Sem tons/glow coloridos. */
.mirror-card {
  position: relative;
  flex: 1 1 0%;
  margin: 0 0.55vw;
  overflow: hidden;
  border: 3px solid transparent;
  border-radius: 16px;
  background: #303030;
  color: #ffffff;
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.mirror-card:first-child { margin-left: 0; }
.mirror-card:last-child { margin-right: 0; }

/* Detalhe: fio de acento no topo do card, na cor do app (vermelho). */
.mirror-card:after {
  content: "";
  position: absolute;
  top: 0;
  left: 16%;
  right: 16%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(193, 28, 54, 0), rgba(193, 28, 54, 0.62), rgba(193, 28, 54, 0));
  opacity: 0.6;
  z-index: 2;
}

.mirror-card.is-focused,
.mirror-card:focus {
  border-color: #c11c36 !important;
  box-shadow: 0 0 0 4px rgba(193, 28, 54, 0.22), 0 18px 40px rgba(0, 0, 0, 0.4) !important;
}
.mirror-card.is-focused:after,
.mirror-card:focus:after {
  opacity: 1;
}

.mirror-card-number {
  position: absolute;
  top: -1.4vh;
  left: 0.5vw;
  color: #c11c36;
  opacity: 0.16;
  font-size: 11.5vh;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.06em;
  pointer-events: none;
}

.mirror-card-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  padding: 2vh 1.3vw 1.7vh;
  text-align: center;
}

.mirror-card-title {
  flex: 0 0 auto;
  margin: 0;
  color: #ffffff;
  font-size: 2.8vh;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.mirror-illus {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.8vh 0;
}
.mirror-illus-glow {
  position: absolute;
  width: 16vh;
  height: 16vh;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(193, 28, 54, 0.16) 0%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
}
.mirror-glyph {
  position: relative;
  width: 10.5vh;
  height: 10.5vh;
}

.mirror-qr {
  position: relative;
  padding: 0.9vh;
  border-radius: 1.6vh;
  background: #ffffff;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.5);
}
.mirror-qr-img,
.mirror-qr-fallback {
  display: block;
  width: 12vh;
  height: 12vh;
  background: #ffffff;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.mirror-qr-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 0.4vh solid #111111;
  color: #111111;
  font-weight: 800;
  font-size: 2.6vh;
}

.mirror-card-foot {
  flex: 0 0 auto;
}

.mirror-step-text {
  margin: 0 0 0.9vh;
  color: var(--text-muted);
  font-size: 1.8vh;
  font-weight: 600;
  line-height: 1.3;
}
.mirror-url {
  display: inline-block;
  padding: 0.2vh 0.55vw;
  border-radius: 0.7vh;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-family: "Roboto Mono", monospace;
  font-weight: 700;
}

.mirror-info {
  border-radius: 1.2vh;
  padding: 1vh 0.9vw;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid var(--border);
}
.mirror-info-label {
  color: var(--text-faint);
  font-size: 1.25vh;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mirror-info-value {
  margin-top: 0.4vh;
  color: #ffffff;
  font-size: 2.5vh;
  font-weight: 900;
}
.mirror-info--mono .mirror-info-value {
  font-family: "Roboto Mono", monospace;
  letter-spacing: 0.04em;
}
.mirror-info--code .mirror-info-value {
  color: #ff5c74;
  letter-spacing: 0.18em;
}

.mirror-status {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin: 1.4vh auto 0;
  max-width: 60vw;
  padding: 1vh 1.4vw;
  border-radius: 999px;
  background: #303030;
  border: 1px solid var(--border);
}
.mirror-status-icon {
  flex: 0 0 auto;
  width: 4.2vh;
  height: 4.2vh;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1.1vw;
}
.mirror-spinner {
  width: 2.1vh;
  height: 2.1vh;
  border-radius: 50%;
  border: 0.3vh solid rgba(255, 255, 255, 0.22);
  border-top-color: var(--text-muted);
  animation: mirror-spin 1s linear infinite;
}
.mirror-status-copy {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}
.mirror-status-label {
  color: var(--text-faint);
  font-size: 1.2vh;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.mirror-status-text {
  margin-top: 0.2vh;
  color: #ffffff;
  font-size: 2.1vh;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mirror-status-badge {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin-left: 1vw;
  padding: 0.8vh 1vw;
  border-radius: 999px;
  background: rgba(193, 28, 54, 0.14);
  border: 1px solid rgba(193, 28, 54, 0.4);
  color: #ff8ea0;
  font-size: 1.45vh;
  font-weight: 800;
}
.mirror-status-dot {
  width: 0.9vh;
  height: 0.9vh;
  border-radius: 50%;
  background: #c11c36;
  margin-right: 0.6vw;
  animation: mirror-blink 1.5s ease-in-out infinite;
}

@keyframes mirror-spin {
  to { transform: rotate(360deg); }
}
@keyframes mirror-blink {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}