/*
 * Coastal Navigator Brasil — estilos da aplicação
 * Autor: Jossian Brito (Charlie Bravo)
 *
 * Extraído do app.html na v2.2.0. Eram 1.072 linhas embutidas no HTML,
 * recarregadas a cada visita sem chance de cache separado.
 */
    /*
    ══════════════════════════════════════════════════════════════════════════
      CSS VARIABLES - Sistema de Design Marítimo
    ══════════════════════════════════════════════════════════════════════════
    */
    :root {
      /* Cores Principais */
      --deep-ocean: #0A1929;
      --navigation-blue: #1976D2;
      --lighthouse-amber: #FFA726;
      --chart-white: #F5F5F5;
      --warning-red: #D32F2F;
      --success-green: #4CAF50;

      /* Cores Secundárias */
      --deck-gray: #37474F;
      --sea-foam: #00BCD4;
      --sunset-orange: #FF6F00;
      --night-navy: #0D47A1;

      /* Tipografia */
      --font-display: 'Orbitron', monospace;
      --font-body: 'Rajdhani', sans-serif;

      /* Espaçamento */
      --spacing-xs: 4px;
      --spacing-sm: 8px;
      --spacing-md: 16px;
      --spacing-lg: 24px;
      --spacing-xl: 32px;

      /* Transições */
      --transition-fast: 0.2s ease;
      --transition-normal: 0.3s ease;
      --transition-slow: 0.5s ease;
    }

    /*
    ══════════════════════════════════════════════════════════════════════════
      RESET E BASE
    ══════════════════════════════════════════════════════════════════════════
    */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: var(--font-body);
      background: var(--deep-ocean);
      color: var(--chart-white);
      overflow: hidden;
    }

    /*
    ══════════════════════════════════════════════════════════════════════════
      LAYOUT PRINCIPAL - Container da Aplicação
    ══════════════════════════════════════════════════════════════════════════
    */
    .app-container {
      display: flex;
      flex-direction: column;
      height: 100vh;
      width: 100vw;
    }

    /*
    ══════════════════════════════════════════════════════════════════════════
      HEADER - Barra de Controles
    ══════════════════════════════════════════════════════════════════════════
    */
    .app-header {
      background: linear-gradient(135deg, var(--deep-ocean), var(--night-navy));
      padding: var(--spacing-md);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
      z-index: 1000;
      border-bottom: 2px solid var(--navigation-blue);
    }

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--spacing-md);
      max-width: 1400px;
      margin: 0 auto;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: var(--spacing-sm);
    }

    .logo h1 {
      font-family: var(--font-display);
      font-size: clamp(1.2rem, 3vw, 1.8rem);
      color: var(--lighthouse-amber);
      text-shadow: 0 0 10px rgba(255, 167, 38, 0.5);
      letter-spacing: 2px;
    }

    .logo .version {
      font-size: 0.7rem;
      color: var(--sea-foam);
      font-weight: 600;
    }

    .controls {
      display: flex;
      gap: var(--spacing-sm);
      flex-wrap: wrap;
    }

    .btn {
      background: var(--navigation-blue);
      color: white;
      border: none;
      padding: 10px 16px;
      border-radius: 6px;
      font-family: var(--font-body);
      font-size: 0.95rem;
      font-weight: 600;
      cursor: pointer;
      transition: all var(--transition-fast);
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    .btn:hover {
      background: #1565C0;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    }

    .btn:active {
      transform: translateY(0);
    }

    .btn.active {
      background: var(--success-green);
      box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.4);
    }

    .btn-primary {
      background: var(--lighthouse-amber);
      color: var(--deep-ocean);
    }

    .btn-primary:hover {
      background: #FF9800;
    }

    .btn-success {
      background: var(--success-green);
    }

    .btn-success:hover {
      background: #45a049;
    }

    .btn-danger {
      background: var(--warning-red);
    }

    .btn-danger:hover {
      background: #C62828;
    }

    /*
    ══════════════════════════════════════════════════════════════════════════
      MODAL - Configuração de Viagem
    ══════════════════════════════════════════════════════════════════════════
    */
    .modal-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(10, 25, 41, 0.95);
      z-index: 2000;
      justify-content: center;
      align-items: center;
      animation: fadeIn var(--transition-normal);
    }

    .modal-overlay.active {
      display: flex;
    }

    .modal {
      background: linear-gradient(135deg, var(--deck-gray), var(--deep-ocean));
      border: 2px solid var(--navigation-blue);
      border-radius: 12px;
      padding: var(--spacing-xl);
      max-width: 600px;
      width: 90%;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
      animation: slideUp var(--transition-normal);
    }

    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--spacing-lg);
      border-bottom: 2px solid var(--lighthouse-amber);
      padding-bottom: var(--spacing-md);
    }

    .modal-header h2 {
      font-family: var(--font-display);
      color: var(--lighthouse-amber);
      font-size: 1.5rem;
    }

    .modal-close {
      background: var(--warning-red);
      color: white;
      border: none;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      cursor: pointer;
      font-size: 1.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all var(--transition-fast);
    }

    .modal-close:hover {
      background: #C62828;
      transform: rotate(90deg);
    }

    .form-group {
      margin-bottom: var(--spacing-md);
    }

    .form-group label {
      display: block;
      margin-bottom: var(--spacing-xs);
      font-weight: 600;
      color: var(--sea-foam);
      font-size: 0.95rem;
    }

    .form-group input,
    .form-group select {
      width: 100%;
      padding: 12px;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid var(--navigation-blue);
      border-radius: 6px;
      color: var(--chart-white);
      font-family: var(--font-body);
      font-size: 1rem;
      transition: all var(--transition-fast);
    }

    .form-group input:focus,
    .form-group select:focus {
      outline: none;
      border-color: var(--lighthouse-amber);
      box-shadow: 0 0 0 3px rgba(255, 167, 38, 0.2);
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--spacing-md);
    }

    .form-help {
      font-size: 0.85rem;
      color: #90CAF9;
      margin-top: var(--spacing-xs);
    }

    .modal-footer {
      display: flex;
      gap: var(--spacing-md);
      margin-top: var(--spacing-lg);
      padding-top: var(--spacing-md);
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    /*
    ══════════════════════════════════════════════════════════════════════════
      MAPA - Área Principal (CORRIGIDO v2.0.2 para Mobile)
    ══════════════════════════════════════════════════════════════════════════
    */
    .map-container {
      flex: 1;
      position: relative;
      overflow: hidden;
      background: #AAD3DF;
      /* CORREÇÃO v2.0.2: Altura mínima para mobile */
      min-height: 400px;
      height: calc(100vh - 200px);
      /* Viewport height menos header/footer */
    }

    #map {
      width: 100%;
      height: 100%;
      background: #AAD3DF;
      /* CORREÇÃO v2.0.2: Prevenir zoom e gestos do navegador */
      touch-action: none;
      /* CORREÇÃO v2.0.2: Garantir renderização */
      position: absolute;
      top: 0;
      left: 0;
    }

    /*
    ══════════════════════════════════════════════════════════════════════════
      PAINEL DE INFORMAÇÕES LATERAL
    ══════════════════════════════════════════════════════════════════════════
    */
    .info-panel {
      position: absolute;
      top: 0;
      right: -350px;
      width: 350px;
      height: 100%;
      background: linear-gradient(180deg, var(--deep-ocean), var(--deck-gray));
      box-shadow: -4px 0 16px rgba(0, 0, 0, 0.5);
      transition: right var(--transition-normal);
      z-index: 500;
      overflow-y: auto;
      border-left: 2px solid var(--navigation-blue);
    }

    .info-panel.active {
      right: 0;
    }

    .info-section {
      padding: var(--spacing-lg);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .info-title {
      font-family: var(--font-display);
      font-size: 1.1rem;
      color: var(--lighthouse-amber);
      margin-bottom: var(--spacing-md);
      display: flex;
      align-items: center;
      gap: var(--spacing-sm);
    }

    .waypoint-item,
    .lighthouse-item {
      background: rgba(255, 255, 255, 0.05);
      padding: var(--spacing-md);
      border-radius: 6px;
      margin-bottom: var(--spacing-sm);
      border-left: 3px solid var(--navigation-blue);
      transition: all var(--transition-fast);
    }

    .waypoint-item:hover,
    .lighthouse-item:hover {
      background: rgba(255, 255, 255, 0.1);
      border-left-color: var(--lighthouse-amber);
    }

    .item-name {
      font-weight: 700;
      font-size: 1.05rem;
      margin-bottom: var(--spacing-xs);
      color: var(--sea-foam);
    }

    .item-details {
      font-size: 0.9rem;
      line-height: 1.6;
      color: #CFD8DC;
    }

    .item-details strong {
      color: var(--chart-white);
    }

    /*
    ══════════════════════════════════════════════════════════════════════════
      TRIP INFO BAR - Barra de Informações da Viagem
    ══════════════════════════════════════════════════════════════════════════
    */
    .trip-info-bar {
      background: linear-gradient(135deg, var(--night-navy), var(--deck-gray));
      padding: var(--spacing-sm) var(--spacing-md);
      border-bottom: 2px solid var(--navigation-blue);
      display: none;
      flex-wrap: wrap;
      gap: var(--spacing-md);
      align-items: center;
      justify-content: space-between;
      font-size: 0.9rem;
    }

    .trip-info-bar.active {
      display: flex;
    }

    .trip-info-item {
      display: flex;
      align-items: center;
      gap: var(--spacing-xs);
    }

    .trip-info-label {
      color: var(--sea-foam);
      font-weight: 600;
    }

    .trip-info-value {
      color: var(--chart-white);
      font-weight: 700;
    }

    /*
    ══════════════════════════════════════════════════════════════════════════
      FOOTER - Barra de Status
    ══════════════════════════════════════════════════════════════════════════
    */
    .app-footer {
      background: linear-gradient(135deg, var(--deep-ocean), var(--deck-gray));
      padding: var(--spacing-sm) var(--spacing-md);
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--spacing-md);
      border-top: 2px solid var(--navigation-blue);
      font-size: 0.9rem;
    }

    .status-item {
      display: flex;
      align-items: center;
      gap: var(--spacing-xs);
    }

    .status-value {
      font-weight: 700;
      color: var(--lighthouse-amber);
    }

    .status-warning {
      color: var(--warning-red);
    }

    .status-success {
      color: var(--success-green);
    }

    /*
    ══════════════════════════════════════════════════════════════════════════
      LIGHTHOUSE MARKER - Customização
    ══════════════════════════════════════════════════════════════════════════
    */
    .lighthouse-marker {
      width: 24px;
      height: 24px;
      background: var(--lighthouse-amber);
      border: 2px solid var(--deep-ocean);
      border-radius: 50%;
      animation: pulse 2s infinite;
    }

    @keyframes pulse {

      0%,
      100% {
        box-shadow: 0 0 0 0 rgba(255, 167, 38, 0.7);
      }

      50% {
        box-shadow: 0 0 0 10px rgba(255, 167, 38, 0);
      }
    }

    /*
    ══════════════════════════════════════════════════════════════════════════
      ANIMAÇÕES
    ══════════════════════════════════════════════════════════════════════════
    */
    @keyframes fadeIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    @keyframes slideUp {
      from {
        transform: translateY(50px);
        opacity: 0;
      }

      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    /*
    ══════════════════════════════════════════════════════════════════════════
      RESPONSIVIDADE - Mobile First
    ══════════════════════════════════════════════════════════════════════════
    */
    @media (max-width: 768px) {
      .controls {
        width: 100%;
        justify-content: center;
      }

      .btn {
        flex: 1;
        justify-content: center;
        font-size: 0.85rem;
        padding: 8px 12px;
      }

      .info-panel {
        width: 90vw;
        right: -90vw;
      }

      .modal {
        width: 95%;
        padding: var(--spacing-lg);
      }

      .form-row {
        grid-template-columns: 1fr;
      }

      .trip-info-bar {
        font-size: 0.8rem;
      }
    }

    @media (max-width: 480px) {
      .logo h1 {
        font-size: 1rem;
      }

      .app-header {
        padding: var(--spacing-sm);
      }

      .btn {
        font-size: 0.8rem;
        padding: 6px 10px;
      }
    }

    /*
    ══════════════════════════════════════════════════════════════════════════
      TOUR / ONBOARDING STYLES
    ══════════════════════════════════════════════════════════════════════════
    */
    .tour-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: transparent;
      z-index: 9000;
      display: none;
      pointer-events: none;
      /* Allows clicks to pass through to highlighted elements if needed, but we usually block */
    }

    .tour-overlay.active {
      display: block;
      pointer-events: auto;
    }

    .tour-highlight {
      position: absolute;
      border-radius: 4px;
      box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.75);
      z-index: 9001;
      transition: all 0.3s ease;
      pointer-events: none;
      border: 2px solid var(--lighthouse-amber);
      display: none;
    }

    .tour-tooltip {
      position: absolute;
      background: linear-gradient(135deg, var(--deep-ocean), var(--deck-gray));
      border: 1px solid var(--navigation-blue);
      color: var(--chart-white);
      padding: 20px;
      border-radius: 8px;
      width: 300px;
      max-width: 90vw;
      /* Responsividade Mobile */
      z-index: 9002;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
      font-family: var(--font-body);
      transition: all 0.3s ease;
      display: none;
    }

    .tour-title {
      font-family: var(--font-display);
      color: var(--lighthouse-amber);
      font-size: 1.1rem;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .tour-text {
      font-size: 0.95rem;
      line-height: 1.5;
      margin-bottom: 20px;
      color: #CFD8DC;
    }

    .tour-controls {
      display: flex;
      justify-content: space-between;
      gap: 10px;
    }

    .tour-btn {
      padding: 6px 12px;
      border-radius: 4px;
      border: 1px solid var(--navigation-blue);
      background: transparent;
      color: var(--sea-foam);
      cursor: pointer;
      font-size: 0.9rem;
      transition: all 0.2s;
    }

    .tour-btn:hover {
      background: rgba(25, 118, 210, 0.2);
    }

    .tour-btn-primary {
      background: var(--navigation-blue);
      color: white;
      border: none;
    }

    .tour-btn-primary:hover {
      background: #1565C0;
    }

    /* ═══ MÓDULO DE NAVEGAÇÃO GPS ═══ */
    .btn-nav {
      background: #00838F;
    }

    .btn-nav:hover {
      background: #006064;
    }

    .btn-nav.active {
      background: var(--success-green);
      animation: navBtnPulse 1.6s infinite;
    }

    @keyframes navBtnPulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.6); }
      50% { box-shadow: 0 0 0 8px rgba(76, 175, 80, 0); }
    }

    .nav-hud {
      display: none;
      position: fixed;
      bottom: 56px;
      left: 12px;
      z-index: 1500;
      width: 344px;                        /* 6 botões de 44 px por linha */
      max-width: calc(100vw - 24px);
      background: rgba(10, 25, 41, 0.94);
      border: 2px solid var(--success-green);
      border-radius: 10px;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
      font-family: var(--font-body);
      color: #E3F2FD;
      backdrop-filter: blur(4px);
      overflow: hidden;
    }

    .nav-hud.active {
      display: block;
    }

    .nav-hud-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      /*
      QUEBRA DE LINHA OBRIGATÓRIA. A fileira de botões precisa de 366 px
      (8 x 44 px + vãos) e o painel tem 290. Sem permitir quebra, o excedente é
      SIMPLESMENTE CORTADO: a bordo sumiram o 🚢, o ℹ️ e até o ▾ de recolher, sem
      nenhum sinal de que existiam. Um botão que não cabe tem de descer de
      linha, nunca desaparecer.
      */
      flex-wrap: wrap;
      row-gap: 4px;
      background: linear-gradient(135deg, #00695C, #004D40);
      padding: 8px 10px;
      cursor: pointer;
      user-select: none;
    }

    .nav-hud-title {
      font-weight: 700;
      letter-spacing: 1px;
      font-size: 0.9rem;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .nav-pulse {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #69F0AE;
      box-shadow: 0 0 8px #69F0AE;
      animation: navBtnPulse 1.6s infinite;
    }

    /*
    A fileira de ferramentas ocupa a linha inteira, abaixo do título.

    Hierarquia deliberada: em cima o cromo do painel (o rótulo NAVEGANDO e o ▾
    de recolher), embaixo as ferramentas. Misturar os dois numa linha só fazia o
    ▾ — que fecha o painel — brigar por espaço com os botões de bordo, e foi o
    que empurrou o 🚢 para fora da tela.
    */
    .nav-hud-actions {
      display: flex;
      gap: 2px;
      row-gap: 2px;
      flex: 1 1 100%;           /* linha própria */
      flex-wrap: wrap;          /* o que não couber desce, nunca some */
      justify-content: space-between;
    }

    /*
    ALVO DE TOQUE DE PASSADIÇO — 44 px.

    Estes botões tinham 2px 5px de padding e ~24 px de alvo. No passadiço a mão
    vem molhada, o navio joga e às vezes há luva: 24 px erra, e o vizinho do 🎯
    (o botão mais usado) era o 🧪 da simulação. 44 px é o mínimo recomendado de
    acessibilidade para toque e o que separa "tocar o alvo" de "tocar por perto".
    */
    .nav-icon-btn {
      background: transparent;
      border: none;
      color: #E3F2FD;
      font-size: 1.05rem;
      cursor: pointer;
      min-width: 44px;
      min-height: 44px;
      padding: 4px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      -webkit-tap-highlight-color: rgba(255, 255, 255, 0.25);
    }

    .nav-icon-btn:hover {
      background: rgba(255, 255, 255, 0.15);
    }
    .nav-icon-btn:active { background: rgba(255, 255, 255, 0.3); }

    /*
    ESTADO POR COR, NÃO POR TRANSPARÊNCIA. O 🎯 sinalizava "não estou seguindo o
    barco" com opacity 0.4 — sob sol no passadiço a diferença entre 1,0 e 0,4 num
    emoji simplesmente some, e o comandante não descobre que o mapa parou de
    acompanhar. Estado desligado ganha moldura e fundo próprios.
    */
    .nav-icon-btn.off {
      background: rgba(255, 255, 255, 0.06);
      box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35);
      filter: grayscale(1);
    }
    .nav-icon-btn.on {
      background: rgba(76, 175, 80, 0.28);
      box-shadow: inset 0 0 0 1.5px rgba(129, 199, 132, 0.75);
    }

    /*
    ════════════════════════════════════════════════════════════════════════
    IARA — os quatro estados do microfone                            (v2.7.0)
    ════════════════════════════════════════════════════════════════════════
    "O microfone está aberto" é a última informação do mundo que pode ficar
    ambígua numa ponte. Por isso cada estado tem TRÊS canais redundantes e
    independentes — ícone, cor de fundo e moldura — porque um deles vai falhar:
    o ícone some sob reflexo, a cor lava no sol, a moldura fica invisível para
    quem tem daltonismo. Três canais, nenhum deles a transparência (lição da
    v2.3.3: sob sol de passadiço, opacidade 0,4 e 1,0 são a mesma coisa).

    OUVINDO é o único estado com animação, e de propósito: movimento é o que o
    olho periférico capta sem que a cabeça vire. Quem está com os olhos no
    tráfego precisa perceber que o microfone ficou aberto sem parar de olhar
    para fora.
    */
    .nav-icon-btn.iara-off {
      background: rgba(255, 255, 255, 0.06);
      box-shadow: inset 0 0 0 1.5px rgba(179, 229, 252, 0.45);
    }
    .nav-icon-btn.iara-ouvindo {
      background: rgba(244, 67, 54, 0.30);
      box-shadow: inset 0 0 0 2px rgba(255, 82, 82, 0.95);
      animation: iaraPulso 1.1s ease-in-out infinite;
    }
    .nav-icon-btn.iara-processando {
      background: rgba(255, 193, 7, 0.24);
      box-shadow: inset 0 0 0 2px rgba(255, 213, 79, 0.85);
    }
    .nav-icon-btn.iara-respondendo {
      background: rgba(3, 169, 244, 0.30);
      box-shadow: inset 0 0 0 2px rgba(129, 212, 250, 0.9);
    }
    /* Muda: cinza e dessaturada, como o 🔇 dos alertas — mesma gramática
       visual, para não obrigar a aprender dois vocabulários de estado. */
    .nav-icon-btn.iara-muda {
      background: rgba(255, 255, 255, 0.06);
      box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35);
      filter: grayscale(1);
    }
    @keyframes iaraPulso {
      0%, 100% { box-shadow: inset 0 0 0 2px rgba(255, 82, 82, 0.95), 0 0 0 0 rgba(244, 67, 54, 0.55); }
      50%      { box-shadow: inset 0 0 0 2px rgba(255, 82, 82, 0.95), 0 0 0 7px rgba(244, 67, 54, 0); }
    }
    /* Quem pediu menos movimento no sistema não perde a informação: o estado
       continua legível pela cor e pela moldura, que nunca dependeram da
       animação para existir. */
    @media (prefers-reduced-motion: reduce) {
      .nav-icon-btn.iara-ouvindo { animation: none; }
    }

    /*
    O RELATÓRIO DA IARA NO ESPELHO.                                  (v2.8.0)
    Só existe para quem acompanha em terra — `body.mirror-mode`. A bordo o
    comandante JÁ OUVIU a frase; repeti-la na tela tomaria espaço do XTE e do
    próximo waypoint, que é o que ele precisa olhar. Em terra é o oposto: é a
    única forma de saber o que foi dito no passadiço.
    */
    .mirror-rel { display: none; }
    body.mirror-mode .mirror-rel.active {
      display: block;
      margin: 6px 0 2px;
      padding: 8px 10px;
      border-radius: 8px;
      background: rgba(3, 169, 244, 0.14);
      box-shadow: inset 0 0 0 1.5px rgba(129, 212, 250, 0.5);
      font-family: var(--font-body);
    }
    .mirror-rel-cab { font-size: 0.72rem; font-weight: 700; color: #81D4FA; letter-spacing: 0.4px; }
    .mirror-rel-txt { font-size: 0.82rem; line-height: 1.35; color: #E3F2FD; margin-top: 3px; }

    /*
    ENTRADA DE MÁQUINAS.                                            (v2.11.0)
    Campo numérico de passadiço: alto o bastante para o polegar molhado (36 px
    de altura, que é menos que os 44 px de um botão porque aqui o alvo é largo
    e não se toca por engano), e `inputmode` numérico para o tablete abrir o
    teclado certo. O fundo escuro e a borda azul seguem o resto do HUD.
    */
    .nav-maq { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
    .nav-maq-in {
      flex: 1 1 64px; min-width: 56px; max-width: 92px; height: 36px;
      background: rgba(255, 255, 255, 0.10); color: #fff;
      border: 1px solid var(--navigation-blue); border-radius: 6px;
      font-family: var(--font-body); font-size: 0.95rem; font-weight: 700;
      text-align: center; padding: 2px 4px;
    }
    .nav-maq-in::placeholder { color: rgba(227, 242, 253, 0.45); font-weight: 400; }
    /* Tempo no painel: uma linha, aparece só quando há dado. */
    .nav-tempo { display: none; }
    .nav-tempo.active { display: block; font-size: 0.78rem; line-height: 1.3; color: #B3E5FC; }
    /* A dica honesta da falta de previsão.                              (C5)
       Âmbar e não vermelho: isto não é alarme de navegação, é explicação de
       serviço. Vermelho a bordo é reservado para o que ameaça o navio — gastar
       vermelho em "cota esgotada" é gastar a atenção que o vermelho de verdade
       vai precisar. */
    .nav-tempo-dica { display: none; }
    .nav-tempo-dica.active {
      display: block; font-size: 0.72rem; line-height: 1.35;
      color: #FFD9A0; background: rgba(255,167,38,0.08);
      border-left: 3px solid #FFA726; padding: 6px 8px; margin-top: 4px;
      border-radius: 0 4px 4px 0;
    }
    .nav-tempo-dica a { color: #4FC3F7; font-weight: bold; }

    /* Mar medido pelos sensores. Vazio até a janela encher. */
    .nav-mar { display: none; }
    .nav-mar.active { display: block; font-size: 0.78rem; line-height: 1.3; color: #C5E1A5; }

    /* O conselho de rotação. Vazio por padrão: só ocupa espaço quando tem o
       que dizer — mesma disciplina do relatório por exceção. */
    .nav-eco { display: none; }
    .nav-eco.active { display: block; font-size: 0.8rem; line-height: 1.3; }
    .nav-eco.reduzir { color: #A5D6A7; }
    .nav-eco.aumentar { color: #FFCC80; }
    .nav-eco.alerta { color: #EF9A9A; }

    .nav-hud-body {
      padding: 10px;
    }

    .nav-hud.collapsed .nav-hud-body {
      display: none;
    }

    .nav-clock {
      text-align: center;
      font-variant-numeric: tabular-nums;
      font-size: 0.9rem;
      font-weight: 600;
      color: #90CAF9;
      background: rgba(25, 118, 210, 0.12);
      border-radius: 6px;
      padding: 4px 6px;
      margin-bottom: 8px;
      letter-spacing: 0.3px;
    }

    .wp-info-row {
      background: rgba(25, 118, 210, 0.08);
      border-left: 3px solid var(--navigation-blue);
      border-radius: 4px;
      padding: 8px 10px;
      margin-bottom: 8px;
    }
    .wp-info-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 8px;
    }
    .wp-info-head strong { color: var(--lighthouse-amber); }
    .wp-info-head span { font-size: 0.8rem; color: #90CAF9; font-variant-numeric: tabular-nums; }
    .wp-info-meta { font-size: 0.82rem; color: #CFD8DC; margin-top: 4px; line-height: 1.45; }

    .nav-grid {
      display: flex;
      gap: 8px;
      margin-bottom: 6px;
    }

    .nav-cell {
      flex: 1;
      background: rgba(25, 118, 210, 0.12);
      border: 1px solid rgba(25, 118, 210, 0.4);
      border-radius: 6px;
      padding: 6px 8px;
      display: flex;
      align-items: baseline;
      gap: 5px;
    }

    .nav-cell-wide {
      flex: 1 1 100%;
    }

    .nav-label {
      font-size: 0.7rem;
      color: var(--lighthouse-amber);
      font-weight: 700;
      letter-spacing: 0.5px;
    }

    .nav-val {
      font-size: 1.5rem;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      color: #FFFFFF;
      line-height: 1;
    }

    .nav-unit {
      font-size: 0.75rem;
      color: #90CAF9;
    }

    /* ⚠️ `hidden` TEM DE SIGNIFICAR ESCONDIDO.                    (C5)

       Defeito encontrado por uma prova de fumaça endurecida, e ele é
       PRÉ-EXISTENTE — não nasceu na C5, foi herdado por ela.

       `.nav-tempo { display: none }` está na linha 908 e `.nav-line
       { display: flex }` na 1015. Mesma especificidade (uma classe cada), logo
       a ORDEM DE ORIGEM decide: o `flex` ganha. Resultado — o atributo
       `hidden`, que o navegador implementa como `display: none` na folha do
       próprio agente, era silenciosamente derrotado por uma regra de autor.
       Um elemento marcado `hidden` continuava sendo caixa viva no layout.

       Hoje isso é inofensivo só porque a caixa fica vazia e com altura zero.
       É armadilha armada: basta alguém dar padding ou borda a `.nav-line` para
       uma tarja aparecer sozinha na tela, sem conteúdo e sem explicação.

       Duas classes vencem uma, e classe + atributo vence classe. A emenda é
       declarativa e vale para TODA nav-line, não só para as duas de hoje. */
    .nav-line[hidden] { display: none; }
    .nav-line.nav-tempo:not(.active),
    .nav-line.nav-tempo-dica:not(.active) { display: none; }

    .nav-line {
      font-size: 0.85rem;
      margin: 4px 0;
      display: flex;
      justify-content: space-between;
      gap: 8px;
    }

    .nav-line strong {
      color: var(--lighthouse-amber);
    }

    .nav-divider {
      height: 1px;
      background: rgba(255, 255, 255, 0.12);
      margin: 8px 0;
    }

    .nav-lh {
      display: block;
      background: rgba(255, 167, 38, 0.12);
      border-left: 3px solid var(--lighthouse-amber);
      padding: 6px 8px;
      border-radius: 4px;
      line-height: 1.35;
    }

    .nav-lh.alert {
      animation: navLhFlash 1s ease-in-out 3;
    }

    @keyframes navLhFlash {
      0%, 100% { background: rgba(255, 167, 38, 0.12); }
      50% { background: rgba(255, 167, 38, 0.55); }
    }

    .nav-status {
      font-size: 0.72rem;
      color: #90CAF9;
      display: block;
    }

    .nav-share-big {
      width: 100%;
      margin-top: 10px;
      padding: 10px;
      border: none;
      border-radius: 6px;
      background: #00838F;
      color: #fff;
      font-family: var(--font-body);
      font-size: 0.95rem;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background var(--transition-fast);
    }

    .nav-share-big:hover { background: #006064; }
    .nav-share-big.sharing {
      background: var(--success-green);
      animation: navBtnPulse 1.6s infinite;
    }

    /* Itens do gerenciador de compartilhamentos */
    .share-item {
      background: rgba(25, 118, 210, 0.1);
      border: 1px solid rgba(25, 118, 210, 0.4);
      border-radius: 6px;
      padding: 8px 10px;
      margin-bottom: 8px;
    }
    .share-item-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 6px;
    }
    .share-item-head strong { color: var(--lighthouse-amber); }
    .share-meta { font-size: 0.74rem; color: #90CAF9; margin-bottom: 6px; }
    .share-link-row {
      display: flex;
      gap: 6px;
    }
    .share-link-row input {
      flex: 1;
      min-width: 0;
      padding: 7px 8px;
      border-radius: 5px;
      border: 1px solid var(--navigation-blue);
      background: var(--deep-ocean);
      color: #E3F2FD;
      font-size: 0.78rem;
    }
    .share-link-row .btn { flex: 0 0 auto; width: 46px; justify-content: center; padding: 7px 0; }

    .nav-warn { color: #FFB74D !important; }
    .nav-danger { color: #FF5252 !important; }
    .nav-ok { color: #69F0AE !important; }

    .nav-boat-icon {
      font-size: 26px;
      line-height: 1;
      filter: drop-shadow(0 0 3px #000);
      transform-origin: center;
      transition: transform 0.3s linear;
    }

    @media (max-width: 480px) {
      .nav-hud { width: calc(100vw - 24px); bottom: 64px; }
      .nav-val { font-size: 1.3rem; }
    }

    /* Banner do modo espelho */
    .mirror-banner {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 2000;
      background: linear-gradient(135deg, #6A1B9A, #4A148C);
      color: #fff;
      text-align: center;
      padding: 8px 12px;
      font-family: var(--font-body);
      font-size: 0.9rem;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    }

    .mirror-banner.active { display: block; }
    body.mirror-mode .app-header .controls { display: none; }
    body.mirror-mode { padding-top: 38px; }
    .mirror-conn {
      margin-left: 8px;
      padding: 1px 8px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.2);
      font-size: 0.78rem;
    }
    .mirror-conn.ok { background: var(--success-green); }
    .mirror-conn.off { background: var(--warning-red); }
    /* Âmbar: conectado mas SEM receber. Não é falha de conexão — é a
       embarcação que parou de transmitir. Estados diferentes, cores
       diferentes: vermelho para "caiu", âmbar para "está mudo". */
    .mirror-conn.warn { background: var(--lighthouse-amber); color: var(--deep-ocean); }
    #mirrorBannerToken { font-weight: 700; letter-spacing: 1px; margin-left: 6px; }

    /* Compartilhamento criado mas ainda não confirmado pelo servidor: o link
       existe na tela e NÃO funciona para quem o recebe. Precisa gritar. */
    .share-item.pendente { border-left: 3px solid var(--lighthouse-amber); }
    .share-pendente {
      font-size: 0.75rem;
      line-height: 1.4;
      color: var(--lighthouse-amber);
      margin: 4px 0 6px;
    }

    /* Painel de atitude 3D */
    /* Faixa de SIMULAÇÃO no painel do observador. Cor de alerta e não de erro:
       não há falha nenhuma — há uma informação que não é real, e essa distinção
       tem de saltar aos olhos antes da posição, do rumo e do ETA. */
    .mirror-sim-banner {
      display: none;
      position: fixed; top: 0; left: 0; right: 0; z-index: 1201;
      background: repeating-linear-gradient(45deg, #B26A00, #B26A00 12px, #8F5500 12px, #8F5500 24px);
      color: #fff; text-align: center; padding: 7px 10px;
      font-size: 0.86rem; letter-spacing: 0.4px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    }
    .mirror-sim-banner.active { display: block; }
    /* Empurra o banner do espelho para baixo quando a faixa está visível. */
    .mirror-sim-banner.active ~ .mirror-banner { top: 34px; }

    .ship3d-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 2500;
      background: radial-gradient(circle at 50% 35%, #0d2438, #05101c 75%);
      flex-direction: column;
    }
    .ship3d-overlay.active { display: flex; }
    /*
    A LIÇÃO DA v2.4.2, APLICADA AQUI — MAS COM O DEFEITO CERTO.        (v2.6.0)
    No painel de navegação um botão a mais numa fileira rígida CORTOU o 🚢: lá
    o painel tem largura fixa (344 px) e os botões têm `min-width: 44px`, então
    o excedente some pela borda.

    Aqui é diferente, e foi medido em navegador antes de escrever esta regra:
    este cabeçalho ocupa a largura inteira da tela e tem itens que encolhem
    (título e seletor). Nada era cortado — o excesso virava APERTO. Com o 💡
    somado e a fileira rígida, a 320 px o seletor de casco caía de 108 px para
    94 px, e "ASD 2810 “SAAM Aguia”" não cabe em 94 px.

    Com a quebra de linha o seletor volta aos 108 px de projeto e o cabeçalho
    até encurta (97 px de altura contra 112 px), porque o título deixa de
    disputar a linha. E é isso que segura o PRÓXIMO botão, que virá.
    Os 44 px de alvo continuam intactos: dedo molhado na ponte não acerta menos.
    */
    .ship3d-header {
      display: flex;
      flex-wrap: wrap;
      row-gap: 6px;
      justify-content: space-between;
      align-items: center;
      padding: 10px 14px;
      background: rgba(0, 0, 0, 0.35);
      color: #E3F2FD;
      font-family: var(--font-body);
    }
    /* Base de 120 px (e não o tamanho do texto): assim um nome comprido vira
       reticências na PRÓPRIA linha em vez de empurrar o resto para baixo. */
    .ship3d-title { font-weight: 700; letter-spacing: 0.5px; flex: 1 1 120px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ship3d-actions { display: flex; flex-wrap: wrap; gap: 4px; }
    /* O 💡 comanda os faróis do GLOBO. Na vista de Atitude não há globo, e um
       botão que não faz nada na tela em que está confunde mais que ajuda. */
    .ship3d-overlay:not(.earth) #s3dFaroisBtn { display: none; }
    .ship3d-modes { display: flex; gap: 0; border: 1px solid var(--navigation-blue); border-radius: 6px; overflow: hidden; margin: 0 8px; }
    .ship3d-mode {
      background: transparent; color: #90CAF9; border: none; padding: 5px 10px;
      font-family: var(--font-body); font-size: 0.82rem; font-weight: 700; cursor: pointer;
    }
    .ship3d-mode.active { background: var(--navigation-blue); color: #fff; }
    /* Seletor de casco: encolhe primeiro que o título quando a tela é estreita,
       porque o nome do navio importa mais que a lista no cabeçalho. */
    .ship3d-select {
      background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 0.72rem; font-weight: 600;
      border: 1px solid var(--navigation-blue); border-radius: 6px; padding: 4px 6px;
      max-width: 190px; min-width: 0; flex-shrink: 1; cursor: pointer;
    }
    .ship3d-select option { background: #0b1f30; color: #fff; }
    @media (max-width: 480px) { .ship3d-select { max-width: 108px; } }

    .ship3d-view { flex: 1; position: relative; min-height: 0; }
    #ship3dCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
    #cesiumContainer { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
    .ship3d-overlay.earth #ship3dCanvas { display: none; }
    .ship3d-overlay.earth #cesiumContainer { display: block; }
    .ship3d-overlay.earth #ship3dCalBtn { display: none; }
    /* Esconde widgets/creditos pesados do Cesium para caber no painel */
    #cesiumContainer .cesium-viewer-bottom, #cesiumContainer .cesium-widget-credits { display: none !important; }
    .ship3d-readout {
      display: flex;
      justify-content: space-around;
      gap: 6px;
      padding: 10px 8px;
      background: rgba(10, 25, 41, 0.85);
      border-top: 2px solid var(--navigation-blue);
    }
    .ship3d-readout > div { text-align: center; min-width: 60px; }
    .ship3d-readout span { display: block; font-size: 0.7rem; color: var(--lighthouse-amber); font-weight: 700; letter-spacing: 0.5px; }
    .ship3d-readout strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; color: #fff; }
    .ship3d-readout strong.warn { color: #FF5252; }
    .ship3d-status {
      text-align: center;
      font-size: 0.78rem;
      color: #90CAF9;
      padding: 4px;
      background: rgba(10, 25, 41, 0.85);
      font-family: var(--font-body);
    }
    .ship3d-credit {
      text-align: center;
      font-size: 0.65rem;
      color: #5C7A99;
      padding: 4px 8px 8px;
      background: rgba(10, 25, 41, 0.85);
      font-family: var(--font-body);
    }

    .mirror-blocked {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 3000;
      background: rgba(10, 25, 41, 0.97);
      align-items: center;
      justify-content: center;
      padding: 24px;
    }
    .mirror-blocked.active { display: flex; }
    .mirror-blocked-box {
      text-align: center;
      max-width: 420px;
      color: #E3F2FD;
      font-family: var(--font-body);
    }
    .mirror-blocked-icon { font-size: 64px; margin-bottom: 12px; }
    .mirror-blocked-box h2 { color: var(--lighthouse-amber); margin-bottom: 10px; }
    .mirror-blocked-box p { color: #90CAF9; line-height: 1.5; }