/* SGCE · responsivo.css — extraído de index.html (divisão por seção; cascata preservada) */

/* ── Desktop / Tablet: coluna centralizada na visão do usuário ──
   O app é mobile-first; sem isto o conteúdo do usuário estica em telas
   grandes e o widget premium fica "inchado". A barra inferior já é
   centralizada (máx. 460px); aqui a coluna acompanha esse mesmo eixo.
   O Painel Público (#tab-publico) fica de fora para o mapa usar a largura. */
@media (min-width: 700px) {
  body.has-bottom-nav .content > .tc:not(#tab-publico) {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Telas grandes (≥1000px): tela inicial em DUAS COLUNAS, mais compacta.
   Widget premium à esquerda; "Meu Status" + resumo (saldo/uso) empilhados
   na coluna direita (#inicio-right). O aviso de aceite ocupa a linha toda. */
@media (min-width: 1000px) {
  /* .active garante que o flex só valha quando a aba está aberta —
     senão a alta especificidade sobrepõe o `.tc { display:none }` e a
     tela inicial fica visível por cima das outras abas. */
  body.has-bottom-nav .content > #tab-inicio.tc.active {
    max-width: 860px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 18px;
  }
  #tab-inicio > #ev-widget    { flex: 1 1 0; min-width: 0; margin-bottom: 0; }
  #tab-inicio > #inicio-right { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
  #tab-inicio > #termo-banner { flex: 1 1 100%; order: -1; }   /* linha toda, no topo */
}

/* ── PADRONIZAÇÃO GLOBAL: modais de tela cheia respeitam a ilha dinâmica ──
   Sem isto, o cabeçalho/X de qualquer modal fica escondido atrás da barra de
   status no iPhone. Cobre todos os overlays position:fixed;inset:0. */
#modalUsuario, #modalRelatorio, #modalPerfilReembolso, #modalEstacao,
#modalLocEstacao, #sobreModal, #exportModal, #modalCurva, #modalReserva,
#confirmModal, #gruModal, #pixModal, #trocaSenhaModal, #modalReembolso {
  padding-top: max(24px, calc(env(safe-area-inset-top) + 14px)) !important;
  padding-bottom: max(24px, calc(env(safe-area-inset-bottom) + 14px)) !important;
}

/* ── PADRONIZAÇÃO GLOBAL de <select> ──
   Sem estilo, o iOS renderiza os <select> como pílula nativa branca, destoando
   do tema. Aqui: base para selects "crus" + força aparência custom e a seta em
   TODOS (o !important vence os `background` shorthand dos selects já estilizados
   — .ff/.fi/.fg/reservas — sem alterar o layout deles). */
select {
  background-color: var(--g700);
  border: 1px solid var(--g500); border-radius: 6px;
  color: var(--text); font-size: 13px;
  padding: 8px 30px 8px 12px; outline: none; cursor: pointer;
  transition: border-color .15s;
  -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 11px !important;
  padding-right: 30px !important;
}
select:focus { border-color: var(--accent); }

/* ── Tablet (≤ 900px) ── */

/* ── Polling: suprime animações nos re-renders periódicos ── */
body.polling .sc,
body.polling .est-card,
body.polling .pub-st-card,
body.polling tr,
body.polling .live-card,
body.polling .res-card {
  animation: none !important;   /* evita o "piscar" (fadeInUp) a cada atualização */
}

@media (max-width: 900px) {
  .sc-row { grid-template-columns: repeat(2, 1fr) !important; }
  .fg2    { grid-template-columns: 1fr 1fr !important; }
  .content { padding: 16px !important; }
  .fc { max-width: 100% !important; }
}

/* ── Mobile (≤ 640px) ── */
@media (max-width: 640px) {

  /* ── Topbar ── (respeita a barra de status do iPhone) */
  .topbar { padding: env(safe-area-inset-top, 0px) 10px 0 !important; height: calc(48px + env(safe-area-inset-top, 0px)) !important; }
  .tb-eyebrow { display: none !important; }
  .tb-name { font-size: 13px !important; letter-spacing: 0.5px !important; }
  .topbar > .tb-brand img { height: 24px !important; }
  /* Saudação "Olá, Nome" fica visível ao lado da foto; o cargo some no celular */
  .user-rl { display: none !important; }
  .user-nm { display: block !important; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px !important; }
  .user-chip { padding: 4px 8px 4px 4px !important; }
  .btn-out { padding: 4px 8px !important; font-size: 10px !important; }
  .tb-right { gap: 6px !important; }

  /* ── Navegação ── */
  .nav { padding: 0 4px !important; gap: 0 !important; }
  .ntab { padding: 0 10px !important; font-size: 10px !important; height: 38px !important; min-width: fit-content !important; }

  /* ── Conteúdo ── */
  .content { padding: 10px 8px !important; }

  /* ── Anti-zoom do iOS ──
     O Safari dá zoom automático ao focar qualquer campo com fonte < 16px
     (e não desfaz depois — foi o "zoom" que aparecia após o login).
     Forçar 16px nos campos evita isso sem desabilitar o pinch-zoom. */
  input, select, textarea { font-size: 16px !important; }

  /* ── Stat cards ── */
  .sc-row { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; margin-bottom: 14px !important; }
  .sc { padding: 12px 10px 10px !important; }
  .sc-val { font-size: 20px !important; }
  .sc-lbl { font-size: 8px !important; }
  .sc-sub { font-size: 9px !important; }

  /* ── Grids de formulário → 1 coluna ── */
  .fg2 { grid-template-columns: 1fr !important; gap: 10px !important; }
  .fg3 { grid-template-columns: 1fr !important; }

  /* ── Filtros ── */
  .frow { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
  .frow .fg { width: 100% !important; min-width: unset !important; }
  .frow .btn-filt,
  .frow .btn-exp,
  .frow button { width: 100% !important; text-align: center !important; justify-content: center !important; }

  /* ── Tabelas ── */
  .tw table { min-width: 480px; }
  th { padding: 8px 8px !important; font-size: 8px !important; letter-spacing: 0.8px !important; }
  td { padding: 8px 8px !important; font-size: 11px !important; }
  code { font-size: 10px !important; }

  /* ── Gráficos ── */
  .chart-canvas-wrap { height: 100px !important; }
  .bars { height: 75px !important; }
  .cw { padding: 12px !important; }

  /* ── Dois gráficos lado a lado → empilhar ── */
  .charts-2col {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .charts-2col .cw {
    margin: 0 !important;
  }

  /* ── Cards de formulário ── */
  .fc { padding: 14px 10px !important; max-width: 100% !important; }
  .fc-title { font-size: 13px !important; }

  /* ── Botões de ação ── */
  .fc-btns { flex-direction: column !important; gap: 8px !important; }
  .fc-btns button { width: 100% !important; }

  /* ── Área de toque ≥ 40px nos botões de tabela (3.5) ── */
  td button, .btn-del, .btn-edit-usr, .btn-edit-est, .btn-curva, .row-menu-btn {
    min-height: 40px !important; min-width: 40px !important;
  }

  /* ── Hero card mobile: proeminente ── */
  .hero-card { padding: 18px 16px !important; }
  .hero-val { font-size: 42px !important; }
  .hero-lbl { font-size: 11px !important; }
  /* Métricas de uso (energia/gasto): discretas no celular — o saldo é o destaque */
  .hero-metrics { gap: 14px !important; margin-top: 10px !important; opacity: .85; }
  .hero-metrics > div { font-size: 9px !important; }
  .hero-metrics strong { font-size: 13px !important; }
  .hero-actions { flex-direction: column !important; gap: 10px !important; }
  .hero-actions button {
    width: 100% !important; min-height: 50px !important;
    font-size: 15px !important; border-radius: 12px !important;
  }
  .hero-actions button[onclick*="interromper"] {
    min-height: 64px !important; font-size: 17px !important;
    background: var(--red) !important; letter-spacing: 0.3px;
    box-shadow: 0 4px 18px rgba(220,50,50,.35) !important;
  }
  /* QR hero button — só mostra grande no mobile */
  .qr-hero-btn { min-height: 80px !important; font-size: 17px !important; }
  .qr-hero-btn i { font-size: 36px !important; }
  /* Links secundários abaixo do botão QR */
  .hero-secondary-links { display: flex !important; gap: 10px !important; }
  .hero-secondary-links button { flex: 1 !important; min-height: 46px !important; font-size: 13px !important; }

  /* ── Mini-grid de estações: 2 colunas no mobile ── */
  .est-mini-grid { gap: 6px !important; }
  .est-mini-chip { padding: 8px 10px !important; }
  .est-mini-chip .emc-nome { max-width: 90px !important; }

  /* ── Painel público mobile-first (3.3): coluna única na ordem
       status → mapa → estatísticas → resto ── */
  #publicScreen .content { display: flex; flex-direction: column; }
  #publicScreen .content > * { order: 0; }
  #publicScreen .content > .pub-hero { order: -4; }
  #publicScreen .content > #pub-status-cards { order: -3; }
  #publicScreen .content > #mapa-pub-wrap-standalone { order: -2; }
  #publicScreen .content > .pub-sc { order: -1; }
  #pub-status-cards { grid-template-columns: 1fr 1fr; }

  /* ── Seção header ── */
  .sh { flex-wrap: wrap !important; gap: 4px !important; }

  /* ── Login ── */
  #loginScreen { padding: 16px !important; }
  .lbox { width: 100% !important; max-width: 400px !important; padding: 28px 18px 22px !important; }

  /* ── Modais ── */
  .modal-box { min-width: unset !important; width: 96vw !important; max-width: 96vw !important; padding: 18px 14px !important; margin: 8px !important; }
  div[id*="modal"],
  div[class*="modal"] { padding: 12px 8px !important; }

  /* ── GRU / PIX modais internos ── */
  .gru-box { width: 96vw !important; max-width: 96vw !important; padding: 0 !important; }
  .gru-header { padding: 14px 16px !important; }
  .gru-header-doc { font-size: 13px !important; }
  .gru-body { padding: 16px 14px !important; }
  /* Dados fixos da UG: empilhar rótulo/valor (o min-width 220px do rótulo cortava o valor) */
  .gru-fixos { padding: 12px 14px !important; }
  .gru-fixo-item { flex-direction: column !important; gap: 2px !important; }
  .gru-fixo-label { min-width: 0 !important; }
  .gru-fixo-val { word-break: break-word !important; }
  /* Campos editáveis: uma coluna só (o grid 2col estourava a largura) */
  .gru-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .gru-field input { font-size: 16px !important; }   /* evita zoom automático do iOS */
  .gru-footer { padding: 12px 14px 16px !important; }
  .gru-footer-btns { flex-wrap: wrap !important; }
  .gru-footer-btns button { flex: 1 1 auto !important; }
  .pix-modal-box { width: 96vw !important; max-width: 96vw !important; }

  /* ── Mapa ── */
  #mapaPublico { height: 240px !important; }
  #mapaEstacao { height: 200px !important; }

  /* ── Seção histórico sessões — esconder colunas menos importantes ── */
  #tSessHist thead tr th:nth-child(3),
  #tSessHist tbody tr td:nth-child(3),
  #tSessHist thead tr th:nth-child(4),
  #tSessHist tbody tr td:nth-child(4) { display: none !important; }

  /* ── Seção de busca ── */
  .tbl-search { width: 100% !important; max-width: 100% !important; }

  /* ── Estações cards ── */
  .est-card { flex-direction: column !important; gap: 10px !important; }
  .est-card-body { flex-direction: column !important; }

  /* ── Painel público ── */
  .pub-kpi-row { grid-template-columns: repeat(2,1fr) !important; }
}

/* ── Muito pequeno iPhone SE (≤ 390px) ── */
@media (max-width: 390px) {
  .sc-row { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }
  .sc-val { font-size: 18px !important; }
  .ntab { font-size: 9px !important; padding: 0 8px !important; }
  .content { padding: 8px 6px !important; }
  td, th { padding: 7px 6px !important; font-size: 10px !important; }
}