/* ============================================================
   NAVBAR 2-LINHAS — Mobile antes do login (≤ 768px)

   REGRA: Apenas header (linha 1) + filterBar (linha 2).
   Nenhum outro breakpoint, componente ou modal é tocado.
   ============================================================ */

@media (max-width: 768px) {

  /* ── LINHA 1: esconde toggle de perfil ──────────────────── */
  #modoWrap { display: none !important; }

  /* ── LINHA 1: logo nome completo (igual ao desktop) ─────── */
  .logo-symbol { display: none  !important; }
  .logo-svg    { display: block !important; height: 32px !important; }

  /* ── LINHA 1: remove borda inferior do header ────────────── */
  /* A linha 2 (filterBar) fica responsável pela borda */
  header { border-bottom: none !important; }

  /* ── LINHA 2: filterBar como segunda linha do navbar ─────── */
  /* display:flex !important sobrepõe inline style que o logout (resetUI) define */
  #filterBar {
    display:       flex    !important;
    background:    #fff;
    border-bottom: 1px solid rgba(0,0,0,.1) !important;
    padding:       6px 10px !important;
  }

  /* ── LINHA 2: chip Distância sempre visível ──────────────── */
  /* Sobrepõe inline style display:none do HTML */
  #fcDistancia { display: inline-flex !important; }


  /* ── CORREÇÃO 1: botão fechar card/popup — mais visível ──── */
  /* .ppc já existe no HTML; aqui aumentamos para 30×30 igual ao .mdc dos modais */
  .pp .ppc {
    width:     30px !important;
    height:    30px !important;
    font-size: 16px !important;
    top:       12px !important;
    right:     12px !important;
  }


  /* ── CORREÇÃO 2: form fields — empilhar pares side-by-side ── */

  /* Experiência + Formação (form-sub-card) em todos os formulários */
  .form-sub-card .fr { grid-template-columns: 1fr !important; }

  /* Pares no modal Criar Conta (CPF+DataNasc, Nome+Tel e outros) */
  #modalCadastro .fr { grid-template-columns: 1fr !important; }

  /* Campo Número no bloco de endereço: 40% (não precisa de largura total) */
  .fg-row .fg:last-child { width: 40% !important; }


  /* ── CORREÇÃO 2b: date pickers — largura e borda consistentes ─ */
  /* Cobre input[type="date"] (DataNasc) e input[type="month"] (Data Início/Fim) */
  input[type="date"],
  input[type="month"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    height: auto !important;
    min-height: 44px !important;
    overflow: hidden !important;
  }


  /* ── CORREÇÃO 3: controles do mapa ocultos com popup aberto ─ */
  /* Classe toggled via JS (MutationObserver em app.js) */
  .mcs.map-controls-hidden { display: none !important; }

  /* Garante que modais e popup não extravazem inputs de data no mobile */
  .md { overflow-x: hidden !important; }

}


/* ============================================================
   MOBILE — ConnectVagas App
   Breakpoint: ≤ 640px

   REGRA: Tudo aqui dentro só é ativado em telas ≤ 640px.
   Nunca interfere no layout desktop.
   ============================================================ */

@media (max-width: 640px) {

  /* ── BODY ───────────────────────────────────────────────── */
  body { height: 100svh; }


  /* ── HEADER ─────────────────────────────────────────────── */
  header {
    height: 52px;
    padding: 0 10px;
    gap: 8px;
  }

  /* Logo: herda do bloco ≤768px — nome completo, símbolo oculto */
  .logo-symbol { display: none  !important; }
  .logo-svg    { display: block !important; height: 32px !important; }

  /* Tabs modo: compactas */
  .mt { padding: 2px; border-radius: 8px; }
  .mb { padding: 5px 10px; font-size: 11px; }

  /* Oculta emojis dentro das tabs para economizar espaço */
  #bC, #bE { font-size: 11px; }

  /* Lado direito */
  .hr { gap: 6px; }

  /* Cadastrar: compacto no mobile */
  .hr .bs {
    font-size: 11px !important;
    padding: 6px 10px !important;
  }

  /* Entrar: botão compacto */
  .hr .bo {
    padding: 6px 14px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
  }

  /* Barra de pesquisa: ocupa espaço disponível */
  #headerSearch { margin: 0 !important; flex: 1; }
  #headerSearch input { font-size: 14px !important; }

  /* Sino: área de toque mínima */
  #sinoBtn { padding: 8px !important; }

  /* Avatar */
  .ua { width: 34px; height: 34px; font-size: 11px; }


  /* ── LAYOUT PRINCIPAL ───────────────────────────────────── */
  .main { position: relative; }

  /* Mapa ocupa 100% — sidebar flutua sobre ele como drawer */
  .ma { width: 100%; }


  /* ── SIDEBAR → BOTTOM DRAWER ────────────────────────────── */
  .sb {
    position: fixed !important;
    bottom: 0 !important;
    left:   0 !important;
    right:  0 !important;
    top:    auto !important;

    width:      100% !important;
    min-width:  0   !important;
    height:     62vh;
    max-height: 62vh;

    border-radius: 20px 20px 0 0;
    border-right: none;
    border-top: 1px solid rgba(0,0,0,.1);
    box-shadow: 0 -6px 32px rgba(0,0,0,.16);
    z-index: 150;
    overflow: hidden;

    /* Estado inicial: visível (sem .collapsed) */
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    transition: transform .35s cubic-bezier(.25,.46,.45,.94),
                opacity    .3s  ease;
  }

  /* Handle de arraste no topo do drawer */
  .sbh::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: #d0d0d0;
    border-radius: 2px;
    margin: 0 auto 12px;
  }
  .sbh { padding-top: 12px; }

  /* Collapsed: sai pela base da tela */
  .sb.collapsed {
    transform:      translateY(110%) !important;
    opacity:        0               !important;
    pointer-events: none            !important;
    width:          100%            !important;
    min-width:      0               !important;
    border-right:   none            !important;
  }


  /* ── FAB (substitui o sb-toggle lateral) ─────────────────── */
  /*
     O JS injeta `style.left = "330px"` inline no botão.
     `!important` em @media tem precedência sobre inline styles,
     portanto o posicionamento abaixo vence em qualquer cenário.
  */
  .sb-toggle {
    position: fixed      !important;
    bottom:   20px       !important;
    left:     50%        !important;
    right:    auto       !important;
    top:      auto       !important;
    transform: translateX(-50%) !important;

    width:      auto     !important;
    min-width:  120px    !important;
    height:     44px     !important;
    padding:    0 22px   !important;

    border-radius: 22px  !important;
    border: none         !important;
    background: #1a1a1a  !important;
    color: #fff          !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size:   13px    !important;
    font-weight: 700     !important;
    letter-spacing: .2px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.35) !important;
    z-index: 160         !important;

    /* Transição suave ao mudar de estado */
    transition: background .2s, box-shadow .2s !important;
  }

  .sb-toggle:hover,
  .sb-toggle:active {
    background:  #333     !important;
    box-shadow:  0 6px 24px rgba(0,0,0,.45) !important;
  }


  /* ── POPUP DO MAPA → BOTTOM SHEET ───────────────────────── */
  .pp.vis {
    position:   fixed    !important;
    bottom:     0        !important;
    left:       0        !important;
    right:      0        !important;
    top:        auto     !important;
    width:      100%     !important;
    max-width:  100%     !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 72vh     !important;
    z-index:    200      !important;
    box-shadow: 0 -4px 24px rgba(0,0,0,.2) !important;
    display:    flex     !important;
    flex-direction: column !important;
    animation: slideUp .28s cubic-bezier(.25,.46,.45,.94);
    overflow-x: hidden;
  }


  /* ── MODAIS → SOBEM DO RODAPÉ ───────────────────────────── */
  .mo {
    padding: 0          !important;
    align-items: flex-end !important;
  }

  .md {
    border-radius: 20px 20px 0 0 !important;
    max-width:  100%    !important;
    width:      100%    !important;
    max-height: 92vh    !important;
    animation: slideUp .28s cubic-bezier(.25,.46,.45,.94) !important;
  }

  /* Modal de cadastro precisa de mais espaço (formulário longo) */
  #modalCadastro .md { max-height: 96vh !important; }

  @keyframes slideUp {
    from { transform: translateY(40px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }


  /* ── MAP CONTROLS ───────────────────────────────────────── */
  .mcs { top: 60px; right: 10px; }

  .mcb {
    width:     44px !important;
    height:    44px !important;
    font-size: 18px !important;
  }


  /* ── TOUCH TARGETS (mínimo 44px) ────────────────────────── */
  .pabp, .pabs,
  .bf,
  .btn-step, .btn-step-back,
  .tela-back,
  .loc-btn, .loc-add-btn,
  .conv-send,
  .epm-btn-save, .epm-btn-cancel { min-height: 44px; }


  /* ── iOS: evita auto-zoom ao focar inputs ───────────────── */
  input, select, textarea { font-size: 16px !important; }


  /* ── TELAS INTERNAS (notificações, chats, localizações) ─── */
  /* Já cobrem 100% da tela com position:fixed — só garantir z-index */
  .tela { z-index: 700; }

  /* ── iOS: evita "dança lateral" ao rolar modais e "Meu cadastro" ── */
  .md,
  .epm-box {
    overscroll-behavior: contain !important;
    overflow-x: hidden !important;
  }

  /* ── Slider de raio desktop: oculto no mobile (usa painel próprio) ── */
  #raioWrap { display: none !important; }

  /* ── Painel Distância (bottom sheet no mobile) ── */
  #painelDistancia {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: #fff !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 20px 24px 32px !important;
    box-shadow: 0 -6px 32px rgba(0,0,0,.18) !important;
    z-index: 500 !important;
    transform: translateY(110%) !important;
    transition: transform .32s cubic-bezier(.25,.46,.45,.94) !important;
  }
  #painelDistancia.vis {
    transform: translateY(0) !important;
  }
  #painelDistancia::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: #d0d0d0;
    border-radius: 2px;
    margin: 0 auto 18px;
  }

  /* ── Experiência profissional: impede extravazamento nas bordas ── */
  .form-sub-card {
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  /* Grid 2-col dentro de cards de formulário: colunas não podem ser menores que 0 */
  .form-sub-card .fr > * { min-width: 0; }
  /* Inputs respeitam a largura do container */
  .form-sub-card .fi2 {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Endereço 3-col no cadastro: empilhar bairro em mobile */
  .fg-row.addr3 {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto;
  }
  .fg-row.addr3 .addr-bairro { grid-column: 1 / -1; }

  /* Meu Cadastro — Bairro+Cidade+Estado: quebrar em 2 linhas */
  .mc-addr-row { flex-wrap: wrap; }
  .mc-addr-row .mc-bairro { flex: 0 0 100%; max-width: 100%; }
  .mc-addr-row .mc-cidade { flex: 7; }
  .mc-addr-row .mc-estado { flex: 3; max-width: none; }

}