/* Estrutura da aplicação, cartões, reservas, caronas, passageiros e modais */

/* Ícones monocromáticos (traço estilo Lucide) usados como máscara em
   ::before de avisos - a cor vem de currentColor, então seguem o texto
   de cada variante nos dois temas. Substituem os antigos emojis. */
:root{
  --icon-alert:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  --icon-octagon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
  --icon-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
}

/* ============ App shell / header ============ */
  .app-screen{
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
  }

  .app-header{
    position:sticky;
    top:0;
    z-index:80;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:14px 28px;
    background:var(--surface);
    border-bottom:1px solid var(--border);
  }

  .header-left{
    display:flex;
    align-items:center;
    gap:12px;
    flex-shrink:0;
  }

  .logo-img{
    height:56px;
    width:auto;
  }

  .header-title{
    display:flex;
    flex-direction:column;
    line-height:1.15;
  }

  .brand{
    font-family:var(--font-heading);
    font-weight:700;
    font-size:1.25rem;
    color:var(--text);
  }

  .brand-sub{
    font-size:var(--fs-xs);
    color:var(--text-muted);
    letter-spacing:0.3px;
  }

  /* Abas principais: lista vertical dentro do menu lateral (.app-sidebar). */
  .tabs{
    display:flex;
    flex-direction:column;
    gap:2px;
  }

  .tab-btn{
    /* Transparente, não "none": reserva o espaço do 1px que .active usa,
       para a aba não mudar de tamanho (e empurrar as vizinhas) ao ativar. */
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
    text-align:left;
    border:1px solid transparent;
    background:transparent;
    color:var(--text-muted);
    font-weight:600;
    font-size:var(--fs-sm);
    padding:10px 12px;
    border-radius:var(--radius-xs);
    cursor:pointer;
    transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    white-space:nowrap;
  }

  .tab-btn:hover{
    color:var(--text);
    background:var(--surface-hover);
  }

  .tab-btn:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
  }

  /* Fundo sozinho (--surface) quase não se distingue de --surface-sunken
     (o trilho) em nenhum dos dois temas - a diferença de luminância é
     mínima. --primary-soft-strong é um TINGIMENTO azul (não só mais claro/
     escuro), o que o olho capta mesmo com pouca diferença de luminância e
     já basta pra aba ativa ser reconhecível - o texto usa --text (a mesma
     cor de um título comum), não --accent: só o fundo precisa "avisar",
     o texto não precisa de mais um sinal por cima. */
  .tab-btn.active{
    background:var(--primary-soft-strong);
    border:1px solid transparent;
    color:var(--text);
    font-weight:700;
    box-shadow:var(--shadow-sm);
  }

  /* ============ Menu lateral ============
     Fica preso logo abaixo do cabeçalho (--app-header-h, medido em
     js/sidebar.js). Recolhido, mostra só os ícones; no celular vira gaveta
     (css/responsive.css). */
  .app-layout{
    flex:1;
    display:flex;
    align-items:stretch;
    min-height:0;
  }

  .app-sidebar{
    --sidebar-w:236px;
    position:sticky;
    top:var(--app-header-h, 85px);
    align-self:flex-start;
    height:calc(100vh - var(--app-header-h, 85px));
    height:calc(100dvh - var(--app-header-h, 85px));
    width:var(--sidebar-w);
    flex:0 0 var(--sidebar-w);
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:16px 12px;
    background:var(--surface);
    border-right:1px solid var(--border);
    overflow-x:hidden;
    overflow-y:auto;
    z-index:70;
    transition:width var(--dur) var(--ease), flex-basis var(--dur) var(--ease);
  }

  .app-content{
    flex:1;
    min-width:0;
    min-height:0;
    display:flex;
    flex-direction:column;
  }

  .nav-icon{
    width:20px;
    height:20px;
    flex:0 0 20px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .nav-label{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* Submenu da Gestão: aparece sob "Gestão" só com a Gestão aberta. */
  .app-sidebar .admin-section-tabs{
    display:none;
    flex-direction:column;
    gap:2px;
    margin:0 0 4px 21px;
    padding:2px 0 2px 10px;
    border-left:1px solid var(--border);
  }

  .app-screen.on-admin .app-sidebar .admin-section-tabs{
    display:flex;
  }

  .app-sidebar .admin-section-btn{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    padding:7px 10px;
    border:1px solid transparent;
    border-radius:var(--radius-xs);
    background:transparent;
    color:var(--text-muted);
    text-align:left;
    font-size:var(--fs-sm);
  }

  .app-sidebar .admin-section-btn:hover{
    background:var(--surface-hover);
    color:var(--text);
  }

  /* Mesmo destaque da aba ativa (ver .tab-btn.active). */
  .app-sidebar .admin-section-btn.active{
    background:var(--primary-soft-strong);
    color:var(--text);
    font-weight:700;
  }

  .app-sidebar .admin-section-btn .nav-icon{
    width:17px;
    height:17px;
    flex-basis:17px;
  }

  .sidebar-collapse-btn{
    margin-top:auto;
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
    padding:10px 12px;
    border:1px solid transparent;
    border-radius:var(--radius-xs);
    background:transparent;
    color:var(--text-muted);
    font-weight:600;
    font-size:var(--fs-sm);
    text-align:left;
    cursor:pointer;
    transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }

  .sidebar-collapse-btn:hover{
    background:var(--surface-hover);
    color:var(--text);
  }

  .sidebar-collapse-btn:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
  }

  .sidebar-backdrop{
    display:none;
  }

  /* Recolhido (só em tela larga; no celular o menu é sempre gaveta): os
     nomes saem da tela, mas continuam para leitor de tela; a dica vem do
     title (js/sidebar.js). */
  @media (min-width:721px){
    .app-screen.sidebar-collapsed .app-sidebar{
      --sidebar-w:68px;
      padding-inline:10px;
    }

    .app-screen.sidebar-collapsed .app-sidebar .nav-label{
      position:absolute;
      width:1px;
      height:1px;
      overflow:hidden;
      clip:rect(0 0 0 0);
      white-space:nowrap;
    }

    .app-screen.sidebar-collapsed .app-sidebar .tab-btn,
    .app-screen.sidebar-collapsed .app-sidebar .admin-section-btn,
    .app-screen.sidebar-collapsed .sidebar-collapse-btn{
      justify-content:center;
      padding-inline:0;
    }

    .app-screen.sidebar-collapsed .app-sidebar .admin-section-tabs{
      margin-left:0;
      padding:6px 0 0;
      border-left:0;
      border-top:1px solid var(--border);
    }

    .app-screen.sidebar-collapsed .sidebar-collapse-arrow{
      transform:scaleX(-1);
      transform-box:fill-box;
      transform-origin:center;
    }
  }

  .header-right{
    margin-left:auto;
    display:flex;
    align-items:center;
    flex-shrink:0;
  }

  .profile-btn{
    display:flex;
    align-items:center;
    gap:10px;
    background:var(--surface);
    border:1px solid var(--border);
    padding:4px 14px 4px 4px;
    border-radius:var(--radius-sm);
    cursor:pointer;
    color:var(--text);
    font-weight:600;
    font-size:var(--fs-sm);
    transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }

  .profile-btn:hover,
  .profile-btn[aria-expanded="true"]{
    background:var(--surface-hover);
    border-color:var(--border-strong);
  }

  /* Menu do nome/avatar no cabeçalho ("Minha CNH", "Sair") - mesmo padrão
     do sino de notificações (.notification-center/.notification-panel). */
  .profile-menu-center{
    position:relative;
  }

  .profile-menu-panel{
    position:absolute;
    z-index:150;
    top:calc(100% + 10px);
    right:0;
    min-width:180px;
    padding:6px;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    background:var(--surface);
    box-shadow:var(--shadow-md);
  }

  .profile-menu-item{
    display:block;
    width:100%;
    padding:10px 12px;
    border:none;
    border-radius:var(--radius-xs);
    background:none;
    color:var(--text);
    font-size:var(--fs-sm);
    font-weight:600;
    text-align:left;
    cursor:pointer;
    transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }

  .profile-menu-item:hover{
    background:var(--surface-hover);
  }

  .profile-menu-item-danger{
    color:var(--danger-text);
  }

  .profile-menu-item-danger:hover{
    background:var(--danger-surface);
  }

  /* Avatares (cabeçalho, perfil, ocupantes): mesmo padrão em todo o app -
     círculo em tom suave da marca com a inicial na cor de destaque. */
  .avatar{
    width:32px;
    height:32px;
    border-radius:50%;
    background:var(--primary-soft-strong);
    color:var(--accent);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:var(--fs-xs);
    font-weight:700;
    flex-shrink:0;
  }

  /* ============ Main / cards ============ */
  main{
    max-width:1180px;
    margin:0 auto;
    padding:28px 20px 60px;
    width:100%;
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
  }

  .tab-panel{
    animation:fadeIn .35s ease;
    width:100%;
  }

  /* Mesma largura em todas as abas - sem isso a tela "pula" de tamanho ao
     trocar entre Minhas Reservas/Caronas/Calendário/Nova Reserva/Gestão.
     O card de "Nova Reserva" mantém sua própria largura de formulário mais
     estreita (ver #panel-nova .card mais abaixo), só o contêiner da aba
     acompanha o padrão. */
  .tab-panel{
    max-width:1160px;
  }

  .card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    padding:30px 26px;
    margin-bottom:24px;
  }

  .card h2{
    margin-top:0;
    margin-bottom:20px;
    font-family:var(--font-heading);
    font-size:1.2rem;
    font-weight:700;
    color:var(--text);
    display:flex;
    align-items:center;
    gap:10px;
  }

  /* Ícone antes do título de cada tela: o mesmo do item no menu lateral
     (copiado em js/sidebar.js e, na Gestão, por seção). */
  .card h2 > .nav-icon{
    width:22px;
    height:22px;
    flex-basis:22px;
    color:var(--accent);
  }

  /* Título seguido da explicação da tela (.form-hint), como no Checklist. */
  .card h2 + .form-hint{
    margin-top:-8px;
  }

  #panel-nova .card{
    padding:24px;
  }

  /* Só o card do formulário (uma coluna de campos) fica mais estreito - o
     card de "Caronas disponíveis para este trajeto" logo abaixo aproveita a
     largura toda da aba, igual às demais listas de reserva. */
  #panel-nova .card:has(#reservaForm){
    max-width:640px;
    margin-left:auto;
    margin-right:auto;
  }

  #panel-nova .card h2{
    margin-bottom:12px;
  }

  #panel-nova .form-hint{
    margin-bottom:10px;
  }

  #reservaForm{
    gap:10px;
  }

  #reservaForm .row{
    gap:10px;
  }

  #reservaForm .field,
  #adminReservaForm .field{
    gap:4px;
  }

  .error-msg:empty{
    min-height:0;
  }

  .my-reservations-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:20px;
  }

  .card .my-reservations-heading h2{
    margin-bottom:0;
  }

  button.secondary-btn.my-new-reservation-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:var(--primary);
    border:1px solid transparent;
    border-radius:var(--radius-sm);
    color:var(--on-primary);
    font-weight:600;
    box-shadow:none;
  }

  button.secondary-btn.my-new-reservation-btn:hover{
    background:var(--primary-hover);
    border-color:transparent;
    color:var(--on-primary);
  }

  .heading-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    justify-content:flex-end;
  }

  /* "Ofertar carona": mesmo formato do "+ Nova reserva", em tom de sucesso
     para não competir com a ação principal da tela. */
  button.secondary-btn.offer-ride-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:var(--success-surface);
    border-color:var(--success-border);
    color:var(--success-text);
  }

  button.secondary-btn.offer-ride-btn:hover{
    background:var(--success-border);
  }

  .reservation-item .operation-status.own-car-badge{
    background:var(--success-surface);
    border-color:var(--success-border);
    color:var(--success-text);
  }

  .reservation-view-tabs{
    display:inline-flex;
    gap:4px;
    padding:4px;
    margin-bottom:18px;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    background:var(--surface-sunken);
  }

  .reservation-view-btn{
    min-height:36px;
    padding:7px 14px;
    border:1px solid transparent;
    border-radius:var(--radius-xs);
    background:transparent;
    color:var(--text-muted);
    font:inherit;
    font-size:var(--fs-xs);
    font-weight:600;
    cursor:pointer;
    transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }

  .reservation-view-btn:hover{
    color:var(--text);
    background:var(--surface-hover);
  }

  .reservation-view-btn:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
  }

  .reservation-view-btn span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:21px;
    min-height:21px;
    margin-left:4px;
    padding:0 6px;
    border-radius:var(--radius-pill);
    background:var(--neutral-surface);
    color:var(--neutral-text);
    font-size:var(--fs-xs);
    font-weight:600;
  }

  /* Mesmo raciocínio de .tab-btn.active acima. */
  .reservation-view-btn.active{
    color:var(--text);
    font-weight:700;
    background:var(--primary-soft-strong);
    border-color:transparent;
    box-shadow:var(--shadow-sm);
  }

  /* O contador precisa de um tom diferente do fundo do próprio botão -
     que agora é este mesmo --primary-soft-strong (ver .active acima) - senão
     o número some dentro do botão. --primary sólido com texto branco
     resolve isso nos dois temas. */
  .reservation-view-btn.active span{
    background:var(--primary);
    color:var(--on-primary);
  }

/* ============ Tabela de variantes: avisos e selos ============
   Um bloco por variante, com TODOS os valores vindos dos tokens
   semânticos. Como os tokens já trocam sozinhos por tema, este arquivo
   não tem - e não deve ganhar - nenhum override de tema claro para
   estas classes. Se um aviso novo precisar de cor, ele ganha uma
   variante aqui; nunca cor solta no ponto de uso.

   .notice = bloco de aviso    .tag = selo inline
   Variantes: warning | danger                                         */

  .notice{
    padding:11px 13px;
    border:1px solid;
    border-left-width:4px;
    border-radius:var(--radius-sm);
    font-size:var(--fs-sm);
    line-height:1.45;
  }

  /* Ícone do aviso: máscara SVG pintada com currentColor (ver --icon-*
     no topo do arquivo). Também usado por .form-hint e .rodizio-warning. */
  .notice::before,
  .form-hint::before,
  .rodizio-warning::before{
    content:"";
    display:inline-block;
    width:16px;
    height:16px;
    margin-right:6px;
    vertical-align:-3px;
    background-color:currentColor;
    -webkit-mask:var(--icon-info) center/contain no-repeat;
    mask:var(--icon-info) center/contain no-repeat;
  }

  .notice-warning{
    background:var(--warning-surface);
    border-color:var(--warning-border);
    border-left-color:var(--warning);
    color:var(--warning-text);
    font-weight:600;
  }
  .notice-warning::before{
    -webkit-mask-image:var(--icon-alert);
    mask-image:var(--icon-alert);
  }

  .notice-danger{
    background:var(--danger-surface);
    border-color:var(--danger-border);
    border-left-color:var(--danger);
    color:var(--danger-text);
    font-weight:600;
  }
  .notice-danger::before{
    -webkit-mask-image:var(--icon-octagon);
    mask-image:var(--icon-octagon);
  }

  .tag{
    display:inline-block;
    width:fit-content;
    padding:4px 9px;
    border-radius:var(--radius-pill);
    border:1px solid;
    font-size:var(--fs-xs);
    font-weight:600;
    white-space:nowrap;
  }

  .tag-info{
    background:var(--info-surface);
    border-color:var(--info-border);
    color:var(--info-text);
  }

  .tag-warning{
    background:var(--warning-surface);
    border-color:var(--warning-border);
    color:var(--warning-text);
  }

  .tag-danger{
    background:var(--danger-surface);
    border-color:var(--danger-border);
    color:var(--danger-text);
  }

  .tag-success{
    background:var(--success-surface);
    border-color:var(--success-border);
    color:var(--success-text);
  }

  /* .form-hint é a dica informativa de formulário (usada em vários lugares):
     só ícone + texto, sem caixa - é informação de apoio, não um alerta, e
     não deve competir visualmente com os avisos de atenção/erro (.notice).
     O ícone fica pendurado à esquerda (padding + position:absolute) para as
     linhas seguintes alinharem com o texto, sem virar flex - que separaria
     texto e <strong> em itens soltos. */
  .form-hint{
    position:relative;
    padding:0 0 0 24px;
    margin-bottom:16px;
    background:none;
    border:0;
    /* Azul informativo (não o cinza de texto secundário): destaca a dica
       do texto comum sem virar alerta. Contraste acima de 9,5:1 nos dois temas. */
    color:var(--info-text);
    font-size:var(--fs-sm);
    line-height:1.5;
  }

  .form-hint::before{
    position:absolute;
    left:0;
    top:2px;
    margin-right:0;
    background-color:var(--info);
  }

  /* Card "Reservando como" da Nova Reserva - avatar, nome e o status da CNH
     (categoria + validade) em etiquetas, no lugar de um aviso de texto
     corrido. Fica vazio (e escondido via :empty) antes do login. */
  .solicitante-card{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 14px;
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    margin-bottom:18px;
  }

  .solicitante-card:empty{
    display:none;
  }

  .solicitante-info{
    display:flex;
    flex-direction:column;
    gap:5px;
    min-width:0;
  }

  .solicitante-info strong{
    color:var(--text);
    font-size:var(--fs-sm);
    font-weight:700;
  }

  .solicitante-tags{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
  }

  .notification-center{
    position:relative;
  }

  .notification-bell{
    position:relative;
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    padding:0;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    background:var(--surface);
    color:var(--text-muted);
    cursor:pointer;
    transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }

  .notification-bell:hover,
  .notification-bell[aria-expanded="true"]{
    border-color:var(--border-strong);
    background:var(--surface-hover);
    color:var(--text);
  }

  .notification-bell:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
  }

  .notification-bell svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .notification-badge{
    position:absolute;
    top:-4px;
    right:-4px;
    display:grid;
    place-items:center;
    min-width:18px;
    height:18px;
    padding:0 4px;
    border:2px solid var(--surface);
    border-radius:var(--radius-pill);
    background:var(--danger-solid);
    color:#fff;
    font-size:var(--fs-xs);
    font-weight:700;
    /* Sem isso o número fica visualmente abaixo do centro: a caixa de
       linha do texto (herdada do body) é mais alta que o dígito, e o
       grid centraliza a CAIXA, não o glifo. */
    line-height:1;
  }

  .notification-panel{
    position:absolute;
    z-index:150;
    top:calc(100% + 12px);
    right:0;
    width:min(390px,calc(100vw - 24px));
    max-height:min(590px,calc(100dvh - 90px));
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    background:var(--surface);
    box-shadow:var(--shadow-lg);
  }

  .notification-panel-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:16px;
    border-bottom:1px solid var(--border);
  }

  .notification-panel-header > div{
    display:flex;
    flex-direction:column;
    gap:2px;
  }

  .notification-panel-header strong{font-size:1rem;font-weight:700;color:var(--text);}
  .notification-panel-header span{color:var(--text-muted);font-size:var(--fs-xs);}
  .notification-panel-header button{
    border:0;
    background:transparent;
    color:var(--accent);
    font-size:var(--fs-xs);
    font-weight:600;
    cursor:pointer;
  }
  .notification-panel-header button:disabled{opacity:.45;cursor:default;}

  .notification-list{
    max-height:min(500px,calc(100dvh - 170px));
    overflow-y:auto;
  }

  .notification-item{
    position:relative;
    display:grid;
    grid-template-columns:38px minmax(0,1fr);
    gap:11px;
    width:100%;
    padding:14px 16px;
    border:0;
    border-bottom:1px solid var(--border);
    background:transparent;
    color:var(--text);
    text-align:left;
    cursor:pointer;
    transition:background-color var(--dur) var(--ease);
  }

  .notification-item:hover{background:var(--surface-hover);}
  .notification-item.unread{background:var(--primary-soft);}
  .notification-item.unread:hover{background:var(--primary-soft-strong);}
  .notification-item.unread::after{
    content:'';
    position:absolute;
    top:18px;
    right:12px;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--accent);
  }

  .notification-item-icon{
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    border:1px solid var(--info-border);
    border-radius:var(--radius-sm);
    background:var(--info-surface);
    color:var(--info-text);
    font-size:1rem;
    font-weight:700;
  }
  .notification-item-icon.cancel{background:var(--danger-surface);border-color:var(--danger-border);color:var(--danger-text);}
  .notification-item-icon.key{background:var(--warning-surface);border-color:var(--warning-border);color:var(--warning-text);}
  .notification-item-icon.report{background:var(--warning-surface);border-color:var(--warning-border);color:var(--warning-text);}
  .notification-item-icon.block{background:var(--warning-surface);border-color:var(--warning-border);color:var(--warning-text);}

  .notification-item-copy{display:flex;flex-direction:column;gap:4px;padding-right:9px;}
  .notification-item-copy strong{font-size:var(--fs-sm);font-weight:600;line-height:1.3;}
  .notification-item-copy > span{color:var(--text-muted);font-size:var(--fs-xs);line-height:1.45;}
  .notification-item-copy small{color:var(--text-muted);font-size:var(--fs-xs);}
  .notification-empty{padding:32px 18px;color:var(--text-muted);text-align:center;font-size:var(--fs-sm);}

  /* Mesma variante de atenção da tabela acima, com nome próprio por já
     estar em uso em reservations.js / modals.js / admin.js. */
  .rodizio-warning{
    padding:11px 13px;
    border:1px solid var(--warning-border);
    border-left:4px solid var(--warning);
    border-radius:var(--radius-sm);
    background:var(--warning-surface);
    color:var(--warning-text);
    font-size:var(--fs-sm);
    font-weight:600;
    line-height:1.45;
  }

  .rodizio-warning::before{
    -webkit-mask-image:var(--icon-alert);
    mask-image:var(--icon-alert);
  }

  form{
    display:flex;
    flex-direction:column;
    gap:16px;
  }

  /* ============ Reservation lists ============ */
  /* auto-fill (não auto-fit): mantém a segunda coluna reservada mesmo com
     um só item, em vez de esticá-lo pra ocupar a linha inteira - é o que
     faz uma única reserva ocupar só metade da largura, como em "Gestão". */
  .reservations-list{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(min(100%,390px),1fr));
    gap:16px;
  }

  .empty-state{
    color:var(--text-muted);
    font-size:var(--fs-base);
    text-align:center;
    padding:26px 0;
  }

  .reservation-item{
    border:1px solid var(--border);
    border-left:3px solid var(--primary);
    border-radius:var(--radius-md);
    padding:17px 18px;
    background:var(--surface);
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:17px;
    transition:border-color var(--dur) var(--ease);
  }

  .reservation-item:hover{
    border-color:var(--border-strong);
    border-left-color:var(--primary);
  }

  .reservation-info{
    display:flex;
    flex-direction:column;
    gap:14px;
    width:100%;
    min-width:0;
  }

  .reservation-card-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
  }

  /* Envolve o selo de status (+ um selo extra opcional, como o aviso de
     avaria/foto da Gestão) - fica à direita de .reservation-card-top em
     todas as telas que usam renderReservationCardHTML (js/utils.js). */
  .reservation-card-badges{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:4px;
    flex-shrink:0;
  }

  .reservation-id-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:38px;
    margin-right:8px;
    padding:4px 9px;
    border:1px solid var(--neutral-border);
    border-radius:var(--radius-pill);
    background:var(--neutral-surface);
    color:var(--neutral-text);
    font-size:var(--fs-sm);
    font-weight:600;
    line-height:1.1;
    vertical-align:1px;
  }

  .reservation-route{
    font-weight:600;
    color:var(--text);
    font-size:1rem;
  }

  .reservation-details{
    font-size:var(--fs-sm);
    color:var(--text-muted);
  }

  /* Padrão único de "Ida/Volta" para qualquer tela que mostre o período de
     uma reserva (Minhas Reservas, confirmação de entrada na carona, admin,
     Caronas Disponíveis) - cada momento (Ida/Volta) ganha seu próprio
     cartão com borda, em vez de ficar solto dentro de um bloco só. Era o
     padrão exclusivo de .ride-card; agora é o padrão de todo mundo. */
  .reservation-period{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    border-radius:var(--radius-md);
    /* Transparente: o vão entre os cartões Ida/Volta (gap) mostra o próprio
       fundo do cartão de reserva que envolve tudo (.reservation-item). */
    background:transparent;
  }

  .reservation-period > .reservation-moment{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:6px;
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    background:var(--surface-2);
  }

  .reservation-moment-label{
    flex:0 0 100%;
    margin-bottom:2px;
    color:var(--text-muted);
    font-size:var(--fs-xs);
    font-weight:600;
    letter-spacing:.04em;
    text-transform:uppercase;
  }

  .reservation-moment-part{
    display:inline-flex;
    flex:0 0 auto;
    align-items:center;
    gap:4px;
    min-width:0;
    color:var(--text);
    white-space:nowrap;
  }

  .reservation-moment-part strong{
    color:var(--text);
    font-size:var(--fs-xs);
    font-weight:600;
  }

  .reservation-moment-icon{
    width:13px;
    height:13px;
    flex:0 0 13px;
    fill:none;
    stroke:var(--text-muted);
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .calendar-event-time{
    display:flex;
    align-items:center;
    gap:4px;
    min-width:0;
  }

  .calendar-event-id{
    display:inline-flex;
    align-self:flex-start;
    margin-bottom:2px;
    padding:2px 6px;
    border-radius:var(--radius-pill);
    /* Tom do próprio texto do evento (que já vem da cor do veículo). */
    background:color-mix(in srgb, currentColor 14%, transparent);
    color:inherit;
    font-size:var(--fs-xs);
    font-weight:600;
    line-height:1.2;
  }

  .calendar-event-time .reservation-moment-icon{
    width:12px;
    height:12px;
    flex-basis:12px;
  }

  .reservation-card-chips{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
  }

  .reservation-more-details{
    padding-top:9px;
    border-top:1px solid var(--border);
    color:var(--text-muted);
    font-size:var(--fs-xs);
  }

  .reservation-more-details summary{
    color:var(--accent);
    font-weight:600;
    cursor:pointer;
  }

  .reservation-more-content{
    display:grid;
    gap:5px;
    padding-top:10px;
  }

  .reservation-history-item,
  .reservation-history-item:hover{
    border-left-color:var(--success);
  }

  .reservation-name{
    font-size:var(--fs-sm);
    color:var(--text-muted);
    font-weight:600;
  }

  /* Destrutivo discreto (outline). */
  .delete-btn{
    background:transparent;
    border:1px solid var(--danger-border);
    color:var(--danger-text);
    cursor:pointer;
    font-size:var(--fs-xs);
    font-weight:600;
    min-height:36px;
    padding:7px 12px;
    border-radius:var(--radius-sm);
    flex-shrink:0;
    transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }

  .delete-btn:hover{
    background:var(--danger-surface);
  }

  /* Sair da carona: mesma forma do destrutivo discreto, em tom de atenção
     (o laranja antigo não é cor da marca). */
  .leave-btn{
    background:transparent;
    border:1px solid var(--warning-border);
    color:var(--warning-text);
    cursor:pointer;
    font-size:var(--fs-xs);
    font-weight:600;
    min-height:36px;
    padding:7px 12px;
    border-radius:var(--radius-sm);
    flex-shrink:0;
    transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }

  .leave-btn:hover{
    background:var(--warning-surface);
  }

  .reservation-actions{
    display:flex;
    flex-flow:row wrap;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    width:100%;
    padding-top:2px;
  }

  .reservation-item .operation-status{
    flex-shrink:0;
    margin-top:0;
  }

  .reservation-item .operation-status.status-waiting{
    background:var(--info-surface);
    border-color:var(--info-border);
    color:var(--info-text);
  }

  .reservation-item .operation-status.status-in-use{
    background:var(--warning-surface);
    border-color:var(--warning-border);
    color:var(--warning-text);
  }

  .reservation-item .operation-status.status-completed{
    background:var(--success-surface);
    border-color:var(--success-border);
    color:var(--success-text);
  }

  .role-badge{
    display:inline-block;
    font-size:var(--fs-xs);
    font-weight:600;
    padding:2px 9px;
    border:1px solid transparent;
    border-radius:var(--radius-pill);
    width:fit-content;
  }

  .role-badge.creator{
    background:var(--info-surface);
    border-color:var(--info-border);
    color:var(--info-text);
  }

  .role-badge.passenger{
    background:var(--success-surface);
    border-color:var(--success-border);
    color:var(--success-text);
  }

  /* ---- Caronas disponíveis (compartilhamento de vagas) ---- */
  .rides-section{
    margin-top:20px;
    padding-top:20px;
    border-top:1px solid var(--border);
    animation:fadeIn .3s ease;
  }

  .rides-section.hidden{
    display:none;
  }

  .rides-header{
    display:flex;
    align-items:flex-start;
    gap:8px;
    margin-bottom:12px;
  }

  .rides-header svg{
    flex-shrink:0;
    margin-top:1px;
  }

  .rides-header-text{
    display:flex;
    flex-direction:column;
    gap:2px;
  }

  .rides-header-text strong{
    font-weight:700;
    color:var(--text);
    font-size:var(--fs-base);
  }

  .rides-header-text span{
    font-weight:400;
    color:var(--text-muted);
    font-size:var(--fs-xs);
  }

  /* Mesmo grid de .reservations-list (auto-fill mantém a 2ª coluna
     reservada mesmo com uma única carona). */
  .rides-list{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(min(100%,390px),1fr));
    gap:16px;
  }

  /* Os cartões de carona (Caronas Disponíveis, sugestões de trajeto) usam as
     mesmas classes .reservation-item/.reservation-info/.reservation-actions
     de Minhas Reservas (ver renderRideCard/renderAvailableRideCard em
     js/rides.js) - por isso não há .ride-card/.ride-info/.ride-route/
     .ride-actions aqui: eram uma cópia paralela que só servia pra desviar
     visualmente das mesmas regras. */
  .reservation-vehicle{
    width:fit-content;
    margin-top:3px;
    color:var(--text-muted);
    font-size:var(--fs-xs);
    font-weight:600;
    line-height:1.25;
  }

  /* Badge visual da placa (formato/cores do padrão Mercosul, sem os
     detalhes de "BRASIL"/bandeira/estrelas) - ver js/utils.js:plateBadgeHTML. */
  .plate-badge{
    display:inline-flex;
    flex-direction:column;
    width:68px;
    flex-shrink:0;
    margin-top:3px;
    border:1.5px solid #000;
    border-radius:5px;
    overflow:hidden;
    vertical-align:middle;
    background:#fff;
    line-height:1;
  }

  .plate-badge-top{
    height:5px;
    background:#003699;
  }

  .plate-badge-text{
    display:block;
    padding:2px 0 3px;
    text-align:center;
    font-family:'Arial Narrow', Arial, Helvetica, sans-serif;
    font-weight:800;
    font-size:11px;
    letter-spacing:1px;
    color:#000;
  }

  .plate-badge-sm{
    width:52px;
  }

  .plate-badge-sm .plate-badge-top{
    height:4px;
  }

  .plate-badge-sm .plate-badge-text{
    font-size:9px;
    letter-spacing:.5px;
    padding:1px 0 2px;
  }

  /* Positivo em outline: a cor verde fica na borda/texto, o fundo acompanha
     o cartão - CTA principal da tela continua sendo o azul primário. */
  .join-ride-btn{
    background:var(--surface);
    color:var(--success-text);
    border:1px solid var(--success-border);
    min-height:36px;
    padding:8px 16px;
    font-size:var(--fs-sm);
    font-weight:600;
    border-radius:var(--radius-sm);
    cursor:pointer;
    white-space:nowrap;
    transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }

  .join-ride-btn:hover{
    background:var(--success-surface);
    border-color:var(--success);
  }

  .join-ride-btn:disabled{
    opacity:.5;
    cursor:not-allowed;
  }

  /* ---- Filtros da aba Caronas Disponíveis ---- */
  .rides-filters{
    display:flex;
    flex-direction:column;
    gap:16px;
    margin-bottom:22px;
    padding-bottom:20px;
    border-bottom:1px solid var(--border);
  }

  .ride-watch-panel{
    margin-bottom:22px;
    padding-bottom:20px;
    border-bottom:1px solid var(--border);
  }

  .ride-watch-panel summary{
    cursor:pointer;
    color:var(--accent);
    font-weight:600;
    font-size:var(--fs-sm);
  }

  .ride-watch-form-wrap{
    margin-top:14px;
    display:flex;
    flex-direction:column;
    gap:14px;
  }

  .ride-watch-hint{
    margin:0;
    font-size:var(--fs-sm);
    color:var(--text-muted);
  }

  .ride-watch-list{
    display:flex;
    flex-direction:column;
    gap:8px;
  }

  .ride-watch-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 14px;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    background:var(--surface-2);
  }

  .ride-watch-item strong{
    display:block;
    font-size:var(--fs-sm);
    font-weight:600;
    color:var(--text);
  }

  .ride-watch-item small{
    display:block;
    color:var(--text-muted);
    margin-top:2px;
  }

/* ---- Bloco "Quem já está no carro" ---- */
  .occupants-chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:8px;
  }

  .occupant-chip{
    display:flex;
    align-items:center;
    gap:6px;
    background:var(--neutral-surface);
    border:1px solid var(--neutral-border);
    border-radius:var(--radius-pill);
    padding:4px 10px 4px 4px;
    font-size:var(--fs-xs);
    color:var(--text);
  }

  .occupant-avatar{
    width:22px;
    height:22px;
    border-radius:50%;
    background:var(--primary-soft-strong);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:var(--fs-xs);
    font-weight:700;
    color:var(--accent);
    flex-shrink:0;
  }

  .occupant-chip.is-driver{
    background:var(--info-surface);
    border-color:var(--info-border);
  }

  .occupant-chip .occupant-role{
    color:var(--accent);
    font-size:var(--fs-xs);
    font-weight:600;
  }

  .occupant-remove-btn{
    display:grid;
    place-items:center;
    width:24px;
    height:24px;
    margin-left:2px;
    padding:0;
    border:none;
    border-radius:50%;
    background:var(--danger-surface);
    color:var(--danger-text);
    font-size:14px;
    line-height:1;
    cursor:pointer;
    transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }

  .occupant-remove-btn:hover{
    background:color-mix(in srgb, var(--danger) 22%, transparent);
    color:var(--danger-text);
  }

  /* ---- Ocupação editável direto no mapa (ver createInteractiveOccupancyWidget) ---- */
  .occupant-name-btn{
    background:none;
    border:none;
    padding:0;
    margin:0;
    font:inherit;
    color:inherit;
    cursor:pointer;
  }

  .occupant-name-btn:hover,
  .occupant-name-btn:focus-visible{
    text-decoration:underline;
  }

  .occupant-chip-editing{
    padding:0;
    background:none;
    border:none;
  }

  .occupant-chip-editing .passenger-input-wrap{
    min-width:220px;
  }

  .occupant-chip-editing input[type="text"]{
    background:var(--surface);
    border:1px solid var(--primary);
    border-radius:var(--radius-pill);
    color:var(--text);
    padding:6px 14px;
    font-size:var(--fs-xs);
    width:100%;
    box-shadow:0 0 0 3px var(--focus-ring);
  }

  .occupant-chip-editing input[type="text"]::placeholder{
    color:var(--text-subtle);
  }

  .occupant-chip-editing input[type="text"]:focus{
    outline:none;
  }

  .occupant-chip-add{
    display:flex;
    align-items:center;
    background:transparent;
    border:1px dashed var(--border-strong);
    border-radius:var(--radius-pill);
    color:var(--accent);
    padding:4px 12px;
    font-size:var(--fs-xs);
    font-weight:600;
    cursor:pointer;
    transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }

  .occupant-chip-add:hover{
    background:var(--primary-soft);
    border-color:var(--accent);
  }

  /* Lugar clicável do mapa: hover só reforça o traço do banco, sem
     brilho nem aumento de escala. */
  .seat-clickable{
    cursor:pointer;
  }

  .seat-clickable rect{
    transition:stroke var(--dur) var(--ease), stroke-width var(--dur) var(--ease);
  }

  .seat-clickable:hover rect,
  .seat-clickable:focus-visible rect{
    stroke:var(--success);
    stroke-width:2;
  }

  .seat-clickable:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
  }

  .field-hint{
    font-size:var(--fs-xs);
    color:var(--text-muted);
    margin:-2px 0 8px;
  }

  /* Combobox customizado usado por todo campo <select> do sistema (ver
     js/styled-select.js) - existe porque um <select> nativo não aceita
     marcação dentro da <option> (só texto puro, por isso a etiqueta
     "Recomendado" do campo Veículo não dava pra estilizar só com CSS) nem
     tem a lista aberta alcançável por CSS (o navegador desenha por fora da
     página). O <select> real de cada campo fica escondido (.hidden) e
     continua sendo a fonte da verdade para o resto do formulário. */
  .styled-select{
    position:relative;
  }

  .styled-select-trigger{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    width:100%;
    padding:12px 15px;
    border:1px solid var(--border-strong);
    border-radius:var(--radius-sm);
    background:var(--surface);
    color:var(--text);
    font-size:0.95rem;
    font-family:inherit;
    text-align:left;
    cursor:pointer;
    transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
  }

  .styled-select-trigger:hover:not(:disabled){
    border-color:var(--text-subtle);
  }

  .styled-select-trigger[aria-expanded="true"]{
    border-color:var(--primary);
  }

  .styled-select-trigger:not(.has-value) .styled-select-trigger-value{
    color:var(--text-subtle);
  }

  .styled-select-trigger-value{
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .styled-select-arrow{
    flex-shrink:0;
    color:var(--text-muted);
    transition:transform var(--dur-fast) var(--ease);
  }

  .styled-select-trigger[aria-expanded="true"] .styled-select-arrow{
    transform:rotate(180deg);
  }

  .styled-select-trigger:focus-visible{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 3px var(--focus-ring);
  }

  .styled-select-trigger:disabled{
    opacity:.5;
    cursor:not-allowed;
  }

  .styled-select-list{
    position:absolute;
    z-index:20;
    top:calc(100% + 6px);
    left:0;
    right:0;
    max-height:260px;
    overflow-y:auto;
    margin:0;
    padding:6px;
    list-style:none;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    box-shadow:var(--shadow-md);
  }

  .styled-select-list:focus-visible{
    outline:none;
  }

  .styled-select-option{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:9px 10px;
    border-radius:var(--radius-xs);
    color:var(--text);
    font-size:0.92rem;
    cursor:pointer;
  }

  .styled-select-option:hover,
  .styled-select-option.active{
    background:var(--surface-hover);
  }

  .styled-select-option[aria-selected="true"]{
    background:var(--primary-soft);
    color:var(--accent);
    font-weight:600;
  }

  .styled-select-option[aria-selected="true"]:hover,
  .styled-select-option[aria-selected="true"].active{
    background:var(--primary-soft-strong);
  }

  .styled-select-option[aria-disabled="true"]{
    color:var(--text-subtle);
    cursor:not-allowed;
    opacity:.55;
  }

  .styled-select-option[aria-disabled="true"]:hover{
    background:transparent;
  }

  .styled-select-option .recommended-badge{
    flex-shrink:0;
  }

  /* Etiqueta "Recomendado" dentro da lista do combobox (ver .styled-select-option
     acima) - único lugar onde ela aparece; a lista fechada não mostra mais
     nenhum destaque depois de escolhido. */
  .recommended-badge{
    display:inline-block;
    padding:2px 9px;
    border-radius:var(--radius-pill);
    border:1px solid var(--success-border);
    background:var(--success-surface);
    color:var(--success-text);
    font-size:var(--fs-2xs);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.03em;
  }

  .occupants-unidentified{
    font-size:var(--fs-xs);
    color:var(--text-muted);
    margin-bottom:6px;
  }

  .passenger-input-wrap{
    position:relative;
    flex:1;
    min-width:0;
  }

  /* Destaque visual quando o campo está vinculado a um usuário corporativo
     já cadastrado (ver attachPersonAutocomplete em js/rides.js), para deixar
     claro que não se trata de um visitante/nome digitado livremente. */
  .person-input-matched > input[type="text"],
  .person-input-matched > input[type="text"]:hover{
    border-color:var(--success);
    padding-right:34px;
  }

  .person-input-matched > input[type="text"]:focus{
    border-color:var(--success);
    box-shadow:0 0 0 3px var(--success-surface);
  }

  .person-input-matched::after{
    content:'✓';
    position:absolute;
    top:50%;
    right:12px;
    transform:translateY(-50%);
    color:var(--success);
    font-weight:700;
    font-size:.95rem;
    pointer-events:none;
  }

  .passenger-add-btn{
    background:transparent;
    border:1px dashed var(--border-strong);
    color:var(--accent);
    border-radius:var(--radius-sm);
    min-height:40px;
    padding:10px 14px;
    font-size:var(--fs-base);
    font-weight:600;
    cursor:pointer;
    transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
    width:100%;
  }

  .passenger-add-btn:hover{
    background:var(--primary-soft);
    border-color:var(--accent);
  }

  .passenger-list-hint{
    font-size:var(--fs-xs);
    color:var(--text-muted);
    margin-top:4px;
  }

  /* ---- Modal de confirmação para entrar na carona ---- */
  .modal-card.join-confirm-card{
    max-width:560px;
    text-align:left;
  }

  .passenger-suggestions{
    position:absolute;
    z-index:30;
    top:calc(100% + 5px);
    left:0;
    right:0;
    padding:5px;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    background:var(--surface);
    box-shadow:var(--shadow-md);
  }

  .passenger-suggestion{
    display:block;
    width:100%;
    padding:9px 10px;
    border:0;
    border-radius:var(--radius-xs);
    background:transparent;
    color:var(--text);
    text-align:left;
    cursor:pointer;
  }

  .passenger-suggestion:hover,
  .passenger-suggestion:focus{
    background:var(--surface-hover);
    outline:none;
  }

  .pickup-availability-card{
    max-width:420px;
    text-align:center;
  }

  .pickup-availability-card > p{
    margin:2px 0 12px;
    color:var(--text-muted);
    font-size:var(--fs-base);
  }

  .pickup-availability-icon{
    display:grid;
    place-items:center;
    width:54px;
    height:54px;
    margin:0 auto 14px;
    border:1px solid var(--info-border);
    border-radius:var(--radius-lg);
    background:var(--info-surface);
    color:var(--info-text);
  }

  .pickup-availability-icon svg{
    width:29px;
    height:29px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .pickup-availability-date{
    margin-bottom:12px;
    color:var(--text);
    font-size:1.15rem;
    font-weight:700;
  }

  .pickup-availability-card .quick-reserve-summary{
    margin-bottom:15px;
    text-align:center;
  }

  .pickup-availability-card .submit-btn{
    width:100%;
  }

  .site-dialog-card{
    max-width:420px;
    text-align:center;
  }

  /* O cartão do diálogo fica sempre na superfície neutra do modal - a
     variante (info/atenção/erro/sucesso) é comunicada só pelo ícone. */
  .site-dialog-card.site-dialog-info,
  .site-dialog-card.site-dialog-warning,
  .site-dialog-card.site-dialog-danger,
  .site-dialog-card.site-dialog-success{
    background:var(--surface);
  }

  .site-dialog-icon{
    display:grid;
    place-items:center;
    width:54px;
    height:54px;
    margin:0 auto 14px;
    border:1px solid var(--info-border);
    border-radius:var(--radius-lg);
    background:var(--info-surface);
    color:var(--info-text);
  }

  .site-dialog-icon.info{
    border-color:var(--info-border);
    background:var(--info-surface);
    color:var(--info-text);
  }

  .site-dialog-icon.warning{
    border-color:var(--warning-border);
    background:var(--warning-surface);
    color:var(--warning-text);
  }

  .site-dialog-icon.danger{
    border-color:var(--danger-border);
    background:var(--danger-surface);
    color:var(--danger-text);
  }

  .site-dialog-icon.success{
    border-color:var(--success-border);
    background:var(--success-surface);
    color:var(--success-text);
  }

  .site-dialog-icon svg{
    width:29px;
    height:29px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .site-dialog-card > p{
    white-space:pre-line;
    line-height:1.55;
  }

  .site-dialog-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-top:18px;
  }

  .site-dialog-actions .submit-btn,
  .site-dialog-actions .secondary-btn{
    width:100%;
    height:52px;
    margin:0;
    padding:0 12px;
    border-radius:var(--radius-sm);
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1.2;
    white-space:nowrap;
  }

  .site-dialog-actions .site-dialog-confirm:only-child,
  .site-dialog-actions .secondary-btn.hidden + .site-dialog-confirm{
    grid-column:1 / -1;
  }

  .site-dialog-confirm.danger{
    background:var(--danger-solid);
    border-color:transparent;
    color:#fff;
    box-shadow:none;
  }

  .site-dialog-confirm.danger:hover{
    background:var(--danger-solid-hover);
  }

  .join-confirm-card h3{
    text-align:center;
  }

  .join-confirm-route{
    margin-top:-4px;
  }

  .join-confirm-actions{
    display:flex;
    gap:10px;
    margin-top:16px;
  }

  .join-confirm-actions button,
  .trip-rules-actions button{
    flex:1;
  }

  /* Normaliza altura/espaçamento entre .join-confirm-cancel e .submit-btn -
     sem isso cada um herda o padding/margem do próprio componente-base
     (button.submit-btn tem margin-top e padding maiores) e os dois botões
     de uma mesma linha ficam com tamanhos diferentes. Mesmo padrão já usado
     em .site-dialog-actions/.user-form-actions/.fleet-edit-actions. */
  .join-confirm-actions .submit-btn,
  .join-confirm-actions .join-confirm-cancel,
  .trip-rules-actions .submit-btn,
  .trip-rules-actions .join-confirm-cancel{
    height:48px;
    margin:0;
    padding:0 12px;
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1.2;
    white-space:nowrap;
  }

  /* Secundário (cancelar). */
  .join-confirm-cancel{
    background:var(--surface);
    color:var(--text);
    border:1px solid var(--border-strong);
    font-size:var(--fs-base);
    font-weight:600;
    border-radius:var(--radius-sm);
    cursor:pointer;
    transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }

  .join-confirm-cancel:hover{
    background:var(--surface-hover);
  }

  .join-confirm-cancel:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
  }

  /* ---- Modal de Regras Básicas da Viagem ---- */
  .modal-card.trip-rules-card{
    max-width:460px;
    text-align:left;
  }

  .trip-rules-card h3{
    text-align:center;
    margin:0 0 16px;
  }

  .trip-rules-list{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-bottom:18px;
  }

  .trip-rule{
    display:flex;
    align-items:flex-start;
    gap:12px;
  }

  .trip-rule-icon{
    flex:0 0 auto;
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    border:1px solid transparent;
    border-radius:var(--radius-md);
  }

  .trip-rule-icon svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .trip-rule-danger .trip-rule-icon{
    border-color:var(--danger-border);
    background:var(--danger-surface);
    color:var(--danger-text);
  }

  .trip-rule-info .trip-rule-icon{
    border-color:var(--info-border);
    background:var(--info-surface);
    color:var(--info-text);
  }

  .trip-rule-warning .trip-rule-icon{
    border-color:var(--warning-border);
    background:var(--warning-surface);
    color:var(--warning-text);
  }

  .trip-rule-success .trip-rule-icon{
    border-color:var(--success-border);
    background:var(--success-surface);
    color:var(--success-text);
  }

  .trip-rule-muted .trip-rule-icon{
    border-color:var(--neutral-border);
    background:var(--neutral-surface);
    color:var(--neutral-text);
  }

  .trip-rule h4{
    margin:0 0 2px;
    font-size:var(--fs-sm);
    color:var(--text);
    font-weight:600;
  }

  .trip-rule p{
    margin:0;
    font-size:var(--fs-xs);
    color:var(--text-muted);
    line-height:1.45;
  }

  .trip-rules-agree{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding-top:14px;
    margin-top:2px;
    border-top:1px solid var(--border);
    font-size:var(--fs-sm);
    color:var(--text);
    cursor:pointer;
  }

  .trip-rules-agree input[type="checkbox"]{
    margin-top:1px;
  }

  .trip-rules-actions{
    display:flex;
    gap:10px;
    margin-top:16px;
  }

  .trip-rules-actions .submit-btn:disabled{
    opacity:.5;
    cursor:not-allowed;
  }

  .trip-rules-actions .submit-btn:disabled:hover{
    background:var(--primary);
    box-shadow:none;
  }

  /* Primário. */
  .reserve-day-btn{
    background:var(--primary);
    color:var(--on-primary);
    border:1px solid transparent;
    min-height:40px;
    padding:9px 18px;
    font-size:var(--fs-sm);
    font-weight:600;
    border-radius:var(--radius-sm);
    box-shadow:none;
    cursor:pointer;
    transition:background-color var(--dur) var(--ease);
    display:flex;
    align-items:center;
    gap:6px;
  }

  .reserve-day-btn:hover{
    background:var(--primary-hover);
  }

  .reserve-day-btn:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
  }

  .reserve-day-btn:disabled,
  .reserve-day-btn:disabled:hover{
    background:var(--primary);
    opacity:.5;
    cursor:not-allowed;
  }

  /* ---- Modal de reserva rápida pelo calendário ---- */
  .modal-card.quick-reserve-card{
    max-width:560px;
    padding-top:24px;
    text-align:left;
  }

  .quick-reserve-card h3{
    margin:0 0 4px;
    font-size:1.1rem;
    font-weight:700;
    color:var(--text);
  }

  .quick-reserve-summary{
    background:var(--surface-2);
    border:1px solid var(--border);
    color:var(--text);
    font-size:var(--fs-sm);
    padding:10px 14px;
    border-radius:var(--radius-sm);
    margin-bottom:16px;
  }

  .quick-reserve-card form{
    gap:12px;
    text-align:left;
  }

/* ============ Profile modal ============ */
  .modal-overlay{
    position:fixed;
    inset:0;
    background:var(--overlay);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:200;
    padding:20px;
    animation:fadeIn .2s ease;
  }

  .modal-card{
    position:relative;
    width:100%;
    max-width:340px;
    /* Sem isso, um conteúdo que cresce (ex.: o popover do calendário abrindo
       dentro de um campo de data) faz a PÁGINA inteira ganhar uma barra de
       rolagem esquisita pra acompanhar - com altura travada e rolagem
       própria, o que excede fica contido dentro do card, de forma normal. */
    max-height:calc(100dvh - 40px);
    overflow-y:auto;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
    padding:34px 26px 26px;
    text-align:center;
    animation:slideUp .25s ease;
  }

  .modal-close{
    position:absolute;
    top:2px;
    right:4px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    padding:0;
    background:none;
    border:none;
    border-radius:var(--radius-sm);
    color:var(--text-muted);
    font-size:1.3rem;
    cursor:pointer;
    line-height:1;
    transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }

  .modal-close:hover{
    color:var(--text);
    background:var(--surface-hover);
  }

  .modal-close:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
  }

  .profile-avatar-lg{
    width:64px;
    height:64px;
    border-radius:50%;
    background:var(--primary-soft-strong);
    color:var(--accent);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.4rem;
    font-weight:700;
    margin:0 auto 14px;
  }

  .modal-card h3{
    margin:0 0 4px;
    font-family:var(--font-heading);
    font-size:1.1rem;
    font-weight:700;
    color:var(--text);
  }

  .modal-card p{
    margin:0 0 20px;
    color:var(--text-muted);
    font-size:var(--fs-sm);
  }

  footer{
    text-align:center;
    color:var(--text-muted);
    font-size:var(--fs-sm);
    padding-bottom:calc(30px + env(safe-area-inset-bottom, 0px));
  }

/* ============ CNH no "Meu perfil" ============ */
  .modal-card.profile-card{
    max-width:640px;
    text-align:left;
  }

  .profile-card > h3,
  .profile-card > .profile-avatar-lg{
    text-align:center;
  }

  .profile-card > h3{
    margin-bottom:10px;
  }

  .profile-cnh{
    margin:20px 0;
    padding-top:18px;
    border-top:1px solid var(--border);
    display:flex;
    flex-direction:column;
    gap:14px;
  }

  .profile-cnh-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
  }

  .profile-cnh-head h4{
    margin:0;
    font-size:var(--fs-md);
    font-weight:700;
    color:var(--text);
  }

  /* Esconde visualmente mas mantém acessível a leitor de tela e teclado -
     usado no <input type="file"> da e-CNH, que é acionado pelo <label>
     estilizado (.cnh-file-picker). */
  .visually-hidden{
    position:absolute !important;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    border:0;
    overflow:hidden;
    clip:rect(0 0 0 0);
    clip-path:inset(50%);
    white-space:nowrap;
  }

  /* ---- CNH importada da e-CNH (somente leitura) ---- */
  .cnh-summary{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin:0;
  }

  .cnh-summary > div{
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    background:var(--surface-2);
    min-width:0;
  }

  .cnh-summary dt{
    color:var(--text-muted);
    font-size:var(--fs-2xs);
    font-weight:600;
  }

  .cnh-summary dd{
    margin:2px 0 0;
    color:var(--text);
    font-size:var(--fs-base);
    font-weight:600;
    font-variant-numeric:tabular-nums;
    overflow-wrap:anywhere;
  }

  .cnh-verified{
    display:flex;
    align-items:center;
    gap:6px;
    margin:-4px 0 0;
    color:var(--success-text);
    font-size:var(--fs-xs);
  }

  .cnh-verified::before{
    content:"";
    flex:0 0 15px;
    width:15px;
    height:15px;
    background-color:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center/contain no-repeat;
  }

  /* ---- Importação da e-CNH ---- */
  .cnh-import{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:14px;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    background:var(--surface);
  }

  .cnh-import-title,
  .cnh-privacy h5{
    margin:0;
    color:var(--text);
    font-size:var(--fs-sm);
    font-weight:700;
  }

  .cnh-import-steps{
    margin:0;
    padding-left:20px;
    color:var(--text-muted);
    font-size:var(--fs-xs);
    line-height:1.5;
  }

  .cnh-import-steps li + li{
    margin-top:4px;
  }

  .cnh-import-steps strong{
    color:var(--text);
    font-weight:600;
  }

  .cnh-file-picker{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    border:1px dashed var(--border-strong);
    border-radius:var(--radius-sm);
    background:var(--surface-2);
    color:var(--text);
    cursor:pointer;
    transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }

  .cnh-file-picker:hover{
    border-color:var(--primary);
    background:var(--primary-soft);
  }

  /* O input real fica escondido; o anel de foco vai para o rótulo. */
  .cnh-import:has(#cnhArquivo:focus-visible) .cnh-file-picker{
    outline:2px solid var(--accent);
    outline-offset:2px;
  }

  .cnh-file-picker.is-busy{
    opacity:.6;
    cursor:progress;
    pointer-events:none;
  }

  .cnh-file-picker svg{
    flex:0 0 26px;
    width:26px;
    height:26px;
    fill:none;
    stroke:var(--accent);
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .cnh-file-picker span{
    display:flex;
    flex-direction:column;
    gap:1px;
    min-width:0;
  }

  .cnh-file-picker strong{
    color:var(--accent);
    font-size:var(--fs-sm);
    font-weight:600;
  }

  .cnh-file-picker small{
    color:var(--text-muted);
    font-size:var(--fs-2xs);
  }

  .cnh-import-status{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--text-muted);
    font-size:var(--fs-xs);
  }

  .cnh-import-status::before{
    content:"";
    flex:0 0 14px;
    width:14px;
    height:14px;
    border:2px solid var(--border-strong);
    border-top-color:var(--primary);
    border-radius:50%;
    animation:cnhSpin .8s linear infinite;
  }

  @keyframes cnhSpin{
    to{transform:rotate(360deg);}
  }

  /* ---- Aviso de privacidade (LGPD) ---- */
  .cnh-privacy{
    padding:12px 14px;
    border:1px solid var(--success-border);
    border-left:3px solid var(--success);
    border-radius:var(--radius-sm);
    background:var(--success-surface);
  }

  .cnh-privacy h5{
    display:flex;
    align-items:center;
    gap:7px;
    color:var(--success-text);
  }

  .cnh-privacy h5::before{
    content:"";
    flex:0 0 16px;
    width:16px;
    height:16px;
    background-color:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center/contain no-repeat;
  }

  .cnh-privacy ul{
    margin:8px 0 0;
    padding-left:18px;
    color:var(--text);
    font-size:var(--fs-xs);
    line-height:1.5;
  }

  .cnh-privacy li + li{
    margin-top:3px;
  }

  .cnh-privacy strong{
    font-weight:600;
  }

  .cnh-actions{
    justify-content:flex-end;
  }

  @media (max-width:560px){
    .cnh-summary{
      grid-template-columns:1fr;
    }
  }

  /* ---- Guia visual de categorias (ver CNH_CATEGORIA_INFO em
     js/cnh-categorias.js e os ícones em js/config.js) ---- */
  .cnh-categoria-guia-btn{
    align-self:flex-start;
    background:none;
    border:none;
    padding:0;
    color:var(--accent);
    font-size:var(--fs-xs);
    font-weight:600;
    cursor:pointer;
    text-decoration:underline;
  }

  .cnh-veiculo-icon{
    display:inline-grid;
    place-items:center;
    width:26px;
    height:26px;
    flex:0 0 auto;
    border-radius:var(--radius-xs);
    background:var(--neutral-surface);
    color:var(--text-muted);
  }

  .cnh-veiculo-icon svg{
    width:16px;
    height:16px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .cnh-categoria-preview{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:8px;
    padding:8px 10px;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    background:var(--surface-2);
    font-size:var(--fs-xs);
    color:var(--text-muted);
  }

  .cnh-categoria-legend{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
    gap:8px;
    margin-top:10px;
  }

  .cnh-categoria-card{
    padding:10px;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    background:var(--surface-2);
  }

  .cnh-categoria-card-head{
    display:flex;
    align-items:center;
    gap:6px;
    margin-bottom:4px;
  }

  .cnh-categoria-code{
    font-weight:600;
    font-size:var(--fs-sm);
    color:var(--text);
    margin-right:2px;
  }

  .cnh-categoria-card p{
    margin:0;
    font-size:var(--fs-2xs);
    color:var(--text-muted);
    line-height:1.4;
  }

/* ============ Mapa de lugares (ver js/seat-map.js) ============
   O desenho vem do tipo e da capacidade do veículo, então van e ônibus
   funcionam sem CSS novo. */
  .seat-map{
    display:flex;
    flex-direction:column;
    gap:5px;
    align-items:center;
    width:fit-content;
    margin:10px 0;
    padding:10px 14px;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    background:var(--surface-2);
  }

  .seat-map-head{
    display:flex;
    align-items:baseline;
    gap:8px;
    margin-bottom:3px;
  }

  .seat-map-head strong{
    font-size:var(--fs-xs);
    font-weight:600;
    color:var(--text);
  }

  .seat-map-head small{
    font-size:var(--fs-2xs);
    color:var(--text-muted);
  }

  /* Contorno do veículo (ver renderVehicleSVG em js/seat-map.js): carroceria
     na superfície do cartão com traço neutro forte - tudo em tokens, então
     funciona nos dois temas sem override. */
  .car-body{
    fill:var(--surface);
    stroke:var(--border-strong);
    stroke-width:2;
  }

  .car-aisle{
    fill:var(--surface-sunken);
  }

  /* Pneu com fundo sólido (--text-subtle é um cinza médio equivalente nos
     dois temas) - lembra a borracha do pneu em vez de sumir contra o cartão.
     É elemento gráfico, não texto, então o contraste de texto não se aplica. */
  .car-wheel{
    fill:var(--text-subtle);
    stroke:var(--text-subtle);
    stroke-width:1.5;
  }

  .seat rect{
    fill:var(--surface-2);
    stroke:var(--border);
    stroke-width:1;
  }

  .seat-motorista rect{
    stroke:var(--info-border);
    fill:var(--info-surface);
  }

  .seat-motorista .seat-icon{
    color:var(--info-text);
  }

  .seat-ocupado rect{
    stroke:var(--danger-border);
    fill:var(--danger-surface);
  }

  .seat-ocupado .seat-icon{
    color:var(--danger-text);
  }

  .seat-livre rect{
    stroke:var(--success-border);
    fill:var(--success-surface);
  }

  .seat-livre .seat-icon{
    color:var(--success-text);
  }

/* ============ Ocupação (ver renderOccupancyHTML) ============
   O quadro traz o mapa de lugares e, logo abaixo, quem está no veículo.
   As duas etiquetas (ocupantes e vagas) NÃO ficam aqui: elas vão na linha
   .reservation-card-chips, logo depois do quadro de datas/horários, junto
   do selo de Motorista/Passageiro. O fundo é o de bloco aninhado
   (--surface-2), igual aos cartões Ida/Volta de ".reservation-period". */
  /* width:100% (não fit-content) em vez de encolher pro conteúdo: dentro de
     um pai flex-column (.ride-info, .reservation-info etc.) um item
     fit-content não estica e fica preso à esquerda, então o quadro inteiro -
     mapa incluso - ficava menor que o card e "colado" na borda esquerda em
     vez de acompanhar a largura dele. Com width:100% o quadro acompanha o
     card, e o align-self:center do .seat-map (mais abaixo) passa a
     centralizar de verdade, não só dentro de uma caixa pequena. */
  .occupancy{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    width:100%;
    margin:10px 0;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    background:var(--surface-2);
  }

  .occupancy-tag{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 10px;
    border:1px solid var(--neutral-border);
    border-radius:var(--radius-pill);
    background:var(--neutral-surface);
    color:var(--neutral-text);
    font-size:var(--fs-xs);
    font-weight:600;
    white-space:nowrap;
  }

  .occupancy-tag svg{
    width:14px;
    height:14px;
    flex-shrink:0;
  }

  .occupancy-tag-free{
    border-color:var(--success-border);
    background:var(--success-surface);
    color:var(--success-text);
  }

  .occupancy-tag-full{
    border-color:var(--warning-border);
    background:var(--warning-surface);
    color:var(--warning-text);
  }

  /* Separador sutil entre o mapa e as pessoas: são a mesma informação
     (quem ocupa o quê), por isso ficam no mesmo quadro em vez de dois. */
  .occupancy-people{
    width:100%;
    padding-top:10px;
    border-top:1px solid var(--border);
  }

  .occupancy-people .occupants-chips{
    margin-bottom:0;
  }

  .occupancy-people .occupants-unidentified{
    margin-top:8px;
  }

  /* Dentro do bloco o mapa não precisa da própria moldura. */
  .occupancy .seat-map{
    margin:0;
    /* Só embaixo: o gap:10px do .occupancy já separa bem a linha de cima
       (etiquetas) do desenho, mas o carro é o elemento mais alto do quadro -
       com só esse gap, o traço que separa dos ocupantes ficava colado na
       curva de baixo do desenho, como se estivesse cortado. */
    margin-bottom:14px;
    padding:0;
    border:0;
    background:none;
    /* As etiquetas e os chips de passageiro ficam à esquerda (leitura
       natural), mas o desenho do veículo é o elemento mais largo do quadro -
       sem centralizar só ele, sobra um vão vazio do lado direito sempre que
       ocupa menos largura que a linha de cima. */
    align-self:center;
  }

  /* ============ Checklist de avaria (retirada/devolução) ============ */
  .checkbox-field{
    display:flex;
  }

  .checklist-toggle-label{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:var(--fs-sm);
    color:var(--text);
    cursor:pointer;
  }


  .checklist-block{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    padding:14px;
    margin-bottom:14px;
  }

  .checklist-block-title{
    font-weight:700;
    font-size:var(--fs-sm);
    color:var(--text);
    margin-bottom:6px;
  }

  /* ---- Diagrama clicável do veículo: em vez das 4 vistas juntas (ficavam
     pequenas e apertadas), o usuário escolhe uma aba (Frente / Traseira /
     Lateral esquerda / Lateral direita) e vê só aquela vista, bem maior.
     Grade fixa de 2 colunas (em vez de flex-wrap, que deixava a 4ª aba
     sozinha numa linha) - Frente/Traseira sempre em cima, as duas laterais
     embaixo, na mesma ordem de CHECKLIST_DIAGRAM_VIEWS. ---- */
  /* Segmentado neutro (mesmo padrão das abas do cabeçalho): contêiner
     afundado, aba ativa na superfície com sombra curta. */
  .checklist-diagram-tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4px;
    margin:10px 0 12px;
    padding:4px;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    background:var(--surface-sunken);
  }

  .checklist-diagram-tab{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:8px 6px;
    border:1px solid transparent;
    border-radius:var(--radius-xs);
    background:transparent;
    color:var(--text-muted);
    font-size:var(--fs-2xs);
    font-weight:600;
    letter-spacing:0.02em;
    text-transform:uppercase;
    cursor:pointer;
    transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }

  .checklist-diagram-tab:hover{
    color:var(--text);
    background:var(--surface-hover);
  }

  .checklist-diagram-tab:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
  }

  .checklist-diagram-tab.is-active{
    background:var(--surface);
    border-color:var(--border);
    color:var(--text);
    box-shadow:var(--shadow-sm);
  }

  /* Contador de avarias marcadas na vista: é um alerta, por isso fica em
     tom de erro nas duas situações (aba ativa ou não). */
  .checklist-diagram-tab-count{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:16px;
    height:16px;
    padding:0 4px;
    border:1px solid var(--danger-border);
    border-radius:var(--radius-pill);
    background:var(--danger-surface);
    color:var(--danger-text);
    font-size:10px;
    font-weight:600;
    line-height:1;
  }

  .checklist-diagram-views{
    max-width:340px;
    margin:0 auto;
  }

  /* Só a vista ativa fica visível - as outras continuam no DOM (mais
     simples e rápido do que recriar tudo a cada troca de aba). */
  .checklist-diagram-view{
    display:none;
  }

  .checklist-diagram-view.is-active{
    display:block;
  }

  /* Cada vista é uma ilustração realista (PNG desenhado à mão) com os
     pontos clicáveis posicionados por cima via HTML/CSS absolute, em vez
     de formas SVG simples - fica muito mais fácil de reconhecer cada
     parte do carro. */
  .checklist-diagram{
    position:relative;
    width:100%;
    margin:0 auto;
  }

  .checklist-diagram-img{
    display:block;
    width:100%;
    height:auto;
    -webkit-user-drag:none;
    user-select:none;
  }

  .checklist-points{
    position:absolute;
    inset:0;
  }

  /* Linhas/setas para pontos cuja bolinha fica fora do carro (ex:
     retrovisor) - ver CHECKLIST_DIAGRAM_POINTS (tx/ty) em
     management-operations.js. */
  .checklist-leader-lines{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
  }

  .checklist-leader-lines line{
    stroke:var(--danger);
    stroke-width:1.6;
    opacity:0.85;
  }

  .checklist-point{
    position:absolute;
    display:flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    margin:-14px 0 0 -14px;
    border-radius:50%;
    border:2px solid var(--surface-solid);
    background:var(--primary);
    color:var(--on-primary);
    font-size:13px;
    font-weight:700;
    line-height:1;
    cursor:pointer;
    /* Marcador flutuando sobre a ilustração: precisa se destacar dela. */
    box-shadow:var(--shadow-md);
    transition:background-color var(--dur) var(--ease);
  }

  .checklist-point:hover{
    background:var(--primary-strong);
  }

  .checklist-point:focus-visible{
    background:var(--primary-strong);
    outline:2px solid var(--accent);
    outline-offset:2px;
  }

  .checklist-point.is-marked{
    background:var(--danger-solid);
    color:#fff;
  }

  .checklist-point.is-marked:hover,
  .checklist-point.is-marked:focus-visible{
    background:var(--danger-solid-hover);
  }

  .checklist-diagram-selected{
    font-size:var(--fs-2xs);
    color:var(--text-muted);
    text-align:center;
    line-height:1.5;
    margin-top:8px;
  }

  /* ---- Legenda numerada abaixo do diagrama ---- */
  .checklist-diagram-legend{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4px 14px;
    margin-top:10px;
    padding-top:10px;
    border-top:1px solid var(--border);
  }

  .checklist-diagram-legend-item{
    font-size:var(--fs-2xs);
    color:var(--text-muted);
    line-height:1.4;
  }

  .checklist-diagram-legend-item b{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:16px;
    height:16px;
    padding:0 3px;
    margin-right:4px;
    border-radius:var(--radius-xs);
    background:var(--primary-soft-strong);
    color:var(--accent);
    font-size:10px;
    font-weight:700;
  }

  @media (max-width:420px){
    .checklist-diagram-legend{
      grid-template-columns:1fr;
    }
  }

  /* ---- Legenda C / A / X ---- */
  .checklist-legend{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin:8px 0 12px;
    font-size:var(--fs-2xs);
    color:var(--text-muted);
  }

  .checklist-legend-item{
    display:inline-flex;
    align-items:center;
    gap:6px;
  }

  .checklist-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    border:1px solid transparent;
    border-radius:var(--radius-xs);
    font-weight:700;
    font-size:var(--fs-2xs);
  }

  /* Mesmo tom (surface/border/text) dos botões C/A/X ativos logo abaixo,
     para a legenda bater com o que o usuário vê ao marcar. */
  .checklist-badge-c{ background:var(--success-surface); border-color:var(--success-border); color:var(--success-text); }
  .checklist-badge-a{ background:var(--warning-surface); border-color:var(--warning-border); color:var(--warning-text); }
  .checklist-badge-x{ background:var(--danger-surface); border-color:var(--danger-border); color:var(--danger-text); }

  /* ---- Lista de componentes ---- */
  .checklist-components{
    display:flex;
    flex-direction:column;
    gap:6px;
  }

  .checklist-component-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:6px 0;
    border-bottom:1px solid var(--border);
  }

  .checklist-component-row:last-child{
    border-bottom:none;
  }

  .checklist-component-label{
    font-size:var(--fs-xs);
    color:var(--text);
  }

  .checklist-component-options{
    display:flex;
    gap:4px;
    flex:0 0 auto;
  }

  .checklist-component-btn{
    width:28px;
    height:28px;
    border-radius:var(--radius-xs);
    border:1px solid var(--border-strong);
    background:var(--surface);
    color:var(--text-muted);
    font-weight:600;
    font-size:var(--fs-xs);
    cursor:pointer;
    transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }

  .checklist-component-btn:hover{
    background:var(--surface-hover);
    color:var(--text);
  }

  .checklist-component-btn:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
  }

  /* Estado escolhido: tom de estado + borda na cor sólida para ficar
     inequívoco qual das três opções está marcada. */
  .checklist-component-btn[data-status="C"].is-active{
    background:var(--success-surface);
    border-color:var(--success);
    color:var(--success-text);
    font-weight:700;
  }

  .checklist-component-btn[data-status="A"].is-active{
    background:var(--warning-surface);
    border-color:var(--warning);
    color:var(--warning-text);
    font-weight:700;
  }

  .checklist-component-btn[data-status="X"].is-active{
    background:var(--danger-surface);
    border-color:var(--danger);
    color:var(--danger-text);
    font-weight:700;
  }

  @media (max-width:480px){
    .checklist-component-row{
      flex-direction:column;
      align-items:flex-start;
      gap:6px;
    }
  }

/* ============ Grupos de usuários (Gestão › Grupos e cadastro do veículo) ============ */
  .group-section-head{
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
    gap:16px;
  }

  .group-section-head h3{
    margin:0 0 4px;
  }

  .group-section-head .field-hint{
    margin:0;
    max-width:720px;
  }

  .group-section-head .submit-btn{
    flex:0 0 auto;
    margin-top:0;
  }

  .group-members-preview{
    display:block;
    margin-top:2px;
    color:var(--text-subtle);
  }

  /* fieldset sem a borda/recuo padrão do navegador - vira um .field comum. */
  .group-picker-field{
    margin:0;
    padding:0;
    border:0;
    min-width:0;
  }

  .group-picker-field legend{
    margin-bottom:6px;
    padding:0;
    font-size:var(--fs-xs);
    font-weight:600;
    color:var(--text);
  }

  .group-picker{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }

  .group-picker .permission-option small,
  .group-member-option small{
    color:var(--text-muted);
    font-size:var(--fs-2xs);
    font-weight:400;
  }

  .group-picker-empty{
    margin:0;
    color:var(--text-muted);
    font-size:var(--fs-xs);
  }

  .vehicle-access-tag{
    margin-top:6px;
  }

  .modal-card.group-modal-card{
    max-width:560px;
    text-align:left;
  }

  .group-modal-card h3{
    margin-bottom:4px;
  }

  .group-modal-card form{
    gap:12px;
  }

  .group-members-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:12px;
  }

  .group-members-head small{
    color:var(--text-muted);
    font-size:var(--fs-2xs);
  }

  .group-member-list{
    display:flex;
    flex-direction:column;
    gap:2px;
    max-height:260px;
    margin-top:6px;
    padding:4px;
    overflow-y:auto;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    background:var(--surface-2);
  }

  .group-member-option{
    display:flex;
    /* Sem isto a lista (flex em coluna com altura máxima) encolhe as linhas
       até caberem, sobrepondo-as, em vez de rolar. */
    flex-shrink:0;
    align-items:center;
    gap:10px;
    padding:6px 8px;
    border-radius:var(--radius-xs);
  }

  .group-member-option:hover{
    background:var(--surface-hover);
  }

  .group-member-option span{
    display:flex;
    flex-direction:column;
    min-width:0;
  }

  @media (max-width:560px){
    .group-section-head{
      flex-direction:column;
    }
  }

  /* Dentro da lista rolável, a opção é uma linha plana (a caixa com borda de
     .permission-option fica só nos seletores soltos). */
  .group-member-list .permission-option{
    min-height:0;
    border:0;
    background:transparent;
  }

  .group-member-list .permission-option:hover{
    background:var(--surface-hover);
  }

/* ============ Termos de uso ============ */
  /* Acima de qualquer outro modal: enquanto não houver aceite, nada mais
     do app pode ser usado. */
  .modal-overlay.terms-gate{
    z-index:400;
  }

  .terms-card.modal-card{
    max-width:760px;
    display:flex;
    flex-direction:column;
    gap:12px;
    max-height:calc(100dvh - 40px);
  }

  .terms-card .site-dialog-actions{
    margin-top:6px;
  }

  /* Texto dos termos (tela de aceite e pré-visualização do editor):
     sempre alinhado à esquerda, mesmo dentro do modal centralizado. */
  .terms-content{
    flex:1;
    min-height:160px;
    max-height:55vh;
    overflow-y:auto;
    padding:16px 18px;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    background:var(--surface-sunken);
    color:var(--text);
    text-align:left;
    line-height:1.6;
  }

  .terms-content:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
  }

  .terms-check{
    align-items:flex-start;
    text-align:left;
  }

  .markdown-body > :first-child{
    margin-top:0;
  }

  .markdown-body > :last-child{
    margin-bottom:0;
  }

  .markdown-body p,
  .markdown-body ul,
  .markdown-body ol,
  .markdown-body blockquote{
    margin:0 0 12px;
  }

  .markdown-body h3,
  .markdown-body h4,
  .markdown-body h5{
    margin:20px 0 8px;
    font-family:var(--font-heading);
    color:var(--text);
    line-height:1.3;
  }

  .markdown-body h3{ font-size:1.15rem; }
  .markdown-body h4{ font-size:1rem; }
  .markdown-body h5{ font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:.3px; }

  .markdown-body ul,
  .markdown-body ol{
    padding-left:22px;
  }

  .markdown-body li + li{
    margin-top:4px;
  }

  .markdown-body blockquote{
    padding:6px 12px;
    border-left:3px solid var(--border-strong);
    color:var(--text-muted);
  }

  .markdown-body blockquote p{
    margin:0;
  }

  .markdown-body hr{
    border:0;
    border-top:1px solid var(--border);
    margin:18px 0;
  }

  .markdown-body code{
    padding:1px 5px;
    border-radius:var(--radius-xs);
    background:var(--surface);
    font-size:.92em;
  }

  .markdown-body a{
    color:var(--accent);
  }

  #termsPreview{
    max-height:360px;
  }

  /* Mesmo visual do rótulo de um campo (.field label). */
  .field-caption{
    font-size:var(--fs-xs);
    font-weight:600;
    color:var(--text);
  }

  .terms-publish summary{
    cursor:pointer;
  }


/* ============ Menu de ajuda (js/help.js) ============ */
  /* Mesmo botão 40×40 do tema (.theme-toggle); o menu usa o padrão do perfil. */
  #helpMenuPanel{
    min-width:260px;
  }

  .about-card.modal-card{
    max-width:460px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
  }

  .about-logo{
    height:56px;
    width:auto;
  }

  .about-card h3{
    margin:0;
  }

  .about-sub{
    margin:0 0 6px;
    color:var(--text-muted);
    font-size:var(--fs-sm);
  }

  .about-list{
    width:100%;
    margin:0;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
  }

  .about-list > div{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:10px 14px;
    font-size:var(--fs-sm);
  }

  .about-list > div + div{
    border-top:1px solid var(--border);
  }

  .about-list dt{
    color:var(--text-muted);
  }

  .about-list dd{
    margin:0;
    font-weight:600;
    text-align:right;
  }

  .about-details{
    width:100%;
    text-align:left;
    font-size:var(--fs-sm);
  }

  .about-details summary,
  .feedback-tech summary{
    cursor:pointer;
    color:var(--accent);
    font-weight:600;
  }

  .about-license,
  .feedback-tech pre{
    max-height:220px;
    overflow:auto;
    margin:8px 0 0;
    padding:10px 12px;
    border-radius:var(--radius-sm);
    background:var(--surface-sunken);
    font-size:var(--fs-xs);
    white-space:pre-wrap;
    word-break:break-word;
  }

  .about-deps{
    margin:8px 0 0;
    padding-left:20px;
  }

  .help-center-card.modal-card{
    max-width:900px;
    display:flex;
    flex-direction:column;
    gap:12px;
    max-height:calc(100dvh - 40px);
  }

  .help-center-content{
    overflow-y:auto;
    text-align:left;
    line-height:1.6;
    padding-right:6px;
  }

  .feedback-card.modal-card{
    max-width:560px;
    display:flex;
    flex-direction:column;
    gap:12px;
    text-align:left;
  }

  .feedback-card form{
    display:flex;
    flex-direction:column;
    gap:12px;
  }

  .feedback-kind{
    border:0;
    margin:0;
    padding:0;
    display:flex;
    flex-wrap:wrap;
    gap:8px 16px;
  }

  .feedback-kind legend{
    width:100%;
    margin-bottom:6px;
    font-size:var(--fs-xs);
    font-weight:600;
    color:var(--text);
  }

  .feedback-text{
    margin:10px 0;
    white-space:normal;
    line-height:1.5;
  }

  .feedback-item .feedback-tech dl{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:4px 12px;
    margin:8px 0 0;
    font-size:var(--fs-xs);
  }

  .feedback-item .feedback-tech dd{
    margin:0;
    word-break:break-word;
  }

  /* Tabelas do manual (Markdown). */
  .markdown-table{
    overflow-x:auto;
    margin:0 0 12px;
  }

  .markdown-body table{
    width:100%;
    border-collapse:collapse;
    font-size:var(--fs-sm);
  }

  .markdown-body th,
  .markdown-body td{
    padding:8px 10px;
    border:1px solid var(--border);
    text-align:left;
    vertical-align:top;
  }

  .markdown-body th{
    background:var(--surface-sunken);
  }

  .markdown-body h6{
    margin:16px 0 6px;
    font-size:var(--fs-sm);
  }