/* ============================================
   RESPONSIVO - VOTO SEM VIÉS
   Versão completa com suporte a celular, tablet e desktop
   ============================================ */

/* ============================================
   TABLETS (768px - 1024px)
   ============================================ */
@media (max-width: 1024px) and (min-width: 769px) {
  .container { padding: 0 1.5rem; }
  
  .products-grid { 
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 1.5rem; 
  }
  
  .product-card.featured { transform: scale(1.02); }
  
  .client-reports-grid { 
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); 
  }
  
  .chart-container { height: 350px; }
  
  .visao-charts-container .chart-container { height: 400px; }

  /*  VCS - Ajuste leve no grid de municípios em tablets */
  #visaoComportamentalSeuMunicipioContent div[style*="grid-template-columns: 1fr 2fr 2fr"],
  #seuMunicipioPublico div[style*="grid-template-columns: 1fr 2fr 2fr"] {
    grid-template-columns: 1fr 1.5fr 1.5fr !important;
    gap: 0.75rem !important;
  }
}

/* ============================================
   CELULARES (até 768px)
   ============================================ */
@media (max-width: 768px) {
  /* --- HEADER E NAVEGAÇÃO --- */
  .header-content { flex-direction: column; text-align: center; }
  nav ul { justify-content: center; }
  .mobile-toggle { display: block; position: absolute; right: 1rem; top: 1rem; }
  nav ul { display: none; width: 100%; flex-direction: column; }
  nav ul.active { display: flex; }
  
  /* --- TABS GERAIS --- */
  .tabs { flex-wrap: wrap; }
  .tab-btn { flex: 1; min-width: 120px; text-align: center; }
  
  /* --- PRODUTOS --- */
  .product-card.featured { transform: none; }
  .product-card.featured:hover { transform: translateY(-8px); }
  .products-grid { grid-template-columns: 1fr; }
  
  /* --- TABELAS (AJUSTE CRÍTICO) --- */
  .report-table { 
    display: block; 
    overflow-x: auto; 
    white-space: nowrap; 
    -webkit-overflow-scrolling: touch; /* Scroll suave no iOS */
  }
  
  .results-table { 
    font-size: 0.8rem; 
  }
  
  .results-table th, 
  .results-table td { 
    padding: 6px 4px; 
    font-size: 0.75rem; 
  }
  
  /* Desabilita sticky em mobile (causa bugs no iOS) */
  .results-table th:first-child,
  .results-table td:first-child {
    position: relative;
    left: auto;
    z-index: auto;
    min-width: auto;
    border-right: none;
  }
  
  .results-table th {
    position: relative;
    top: auto;
    z-index: auto;
  }
  
  .secao-sticky thead th:nth-child(1),
  .secao-sticky tbody td:nth-child(1),
  .secao-sticky thead th:nth-child(2),
  .secao-sticky tbody td:nth-child(2) {
    position: relative;
    left: auto;
    z-index: auto;
    width: auto;
    min-width: auto;
  }
  
  .results-table-container {
    max-height: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* --- ÁREA DO CLIENTE --- */
  .client-selector-row { grid-template-columns: 1fr; }
  .client-reports-grid { 
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); 
    gap: 1rem;
  }
  
  .report-card { padding: 1rem; }
  .report-card-icon { font-size: 2rem; }
  .report-card-title { font-size: 0.9rem; }
  .report-card-desc { font-size: 0.75rem; }
  
  /* --- PLANOS --- */
  .plano-datas { flex-direction: column; gap: 0.25rem; }
  .plano-item { flex-direction: column; align-items: flex-start; }
  
  /* --- CONSOLIDADO E TURNOS --- */
  .consolidado-tabs { flex-direction: column; }
  .consolidado-tab { border-radius: 6px; border-bottom: 1px solid var(--border); }
  .turno-selector { flex-direction: column; }
  .turno-btn { width: 100%; }
  
  /* --- TICKER --- */
  .ticker { padding: 0.4rem 0; }
  .ticker-content { font-size: 0.75rem; padding-left: 100px; }
  .ticker-label { padding: 0.5rem 0.75rem; font-size: 0.8rem; }
  
  /* --- AUDITORIA --- */
  .auditoria-summary { grid-template-columns: 1fr; }
  .auditoria-table { font-size: 0.75rem; }
  .auditoria-table th,
  .auditoria-table td { padding: 0.5rem 0.25rem; }
  
  /* --- SRAG --- */
  .srag-tabs { flex-direction: column; }
  .srag-tab { border-radius: 6px; border-bottom: 1px solid var(--border); }
  .srag-stat-grid { grid-template-columns: repeat(2, 1fr); }
  
  /* --- WATERMARK (AJUSTE CRÍTICO) --- */
  .watermark { 
    font-size: 1.2rem; 
    white-space: pre-line;
    text-align: center;
  }
  
  /* --- FOOTER --- */
  .footer-social-grid { flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  
  /* --- MODAIS --- */
  .content-modal-container { 
    padding: 1rem; 
    margin: 1rem 0.5rem;
    max-width: calc(100% - 1rem);
  }
  .content-modal-title { font-size: 1.4rem; }
  
  /* --- PARTIDOS --- */
  .partido-info-grid { grid-template-columns: 1fr; }
  .partido-header { flex-direction: column; align-items: flex-start; }
  
  /* --- CLIENT WELCOME --- */
  .client-welcome-header { flex-direction: column; }
  .client-info-grid { grid-template-columns: 1fr; }
  
  /* --- INÍCIO --- */
  .inicio-titulo { font-size: 1.5rem; }
  .action-buttons { flex-direction: column; }
  .action-buttons .tab-btn { width: 100%; }
  
  /* --- DESTAQUE --- */
  .report-item { 
    flex-direction: column; 
    align-items: flex-start; 
    gap: 0.5rem; 
  }
  .btn-download { 
    width: 100%; 
    justify-content: center; 
  }
  .election-title { 
    font-size: 1rem; 
    padding: 0.6rem 0.8rem; 
  }
  .municipio-info { padding: 1rem; }
  .municipio-info h2 { font-size: 1.2rem; }
  
  /* --- GRÁFICOS (AJUSTE CRÍTICO) --- */
  .chart-container { 
    height: 300px; 
    min-height: 250px;
  }
  
  .data-section { padding: 1rem; }
  .data-section h3 { font-size: 1.1rem; }
  
  /* --- PERFIL ELEITOR (NOVO - AJUSTE CRÍTICO) --- */
  .genero-selector { 
    flex-direction: column; 
  }
  .genero-btn { 
    width: 100%; 
    text-align: center; 
  }
  
  .perfil-dimensao-tabs-row { 
    flex-direction: column; 
  }
  .dimensao-tab { 
    width: 100%; 
    text-align: center; 
  }
  
  .idade-media-card { padding: 0.75rem; }
  .idade-media-valor { font-size: 1.5rem; }
  
  /* --- VISÃO COMPORTAMENTAL (NOVO - AJUSTE CRÍTICO) --- */
  .visao-comportamental-selector { padding: 1rem; }
  
  .visao-charts-container .chart-container { 
    height: 300px; 
    min-height: 250px;
  }
  
  /* Grid de seleção de municípios (2 colunas -> 1 coluna) */
  #visaoComportamentalContent > div > div[style*="grid-template-columns: 1fr 1fr auto"],
  #visaoSecaoContent > div > div[style*="grid-template-columns: 1fr 1fr auto"],
  #visaoComportamentalPerfilEleitorContent > div > div[style*="grid-template-columns: 1fr 1fr auto"] {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  
  /* --- VISÃO COMPORTAMENTAL POR SEÇÃO --- */
  #visaoSecaoSelectors .client-selector-row {
    grid-template-columns: 1fr !important;
  }
  
  /* --- CARGOS TABS --- */
  .cargos-tabs-container { 
    flex-direction: column; 
  }
  .cargo-tab { 
    width: 100%; 
    text-align: center; 
  }
  
  /* --- MUNICÍPIO SELECTOR --- */
  .municipio-selector select { 
    max-width: 100%; 
  }
  
  /* --- ANO TABS --- */
  .ano-tabs { 
    flex-wrap: wrap; 
  }
  .ano-tab { 
    flex: 1; 
    min-width: 80px; 
    text-align: center; 
    font-size: 0.85rem;
    padding: 0.4rem 0.75rem;
  }
  
  /* --- FAQ PÚBLICO BOX --- */
  .faq-publico-box { padding: 1.5rem; }
  .faq-publico-box h3 { font-size: 1.1rem; }
  
  /* --- GLOSSÁRIO --- */
  .glossario-categoria { padding: 1rem; }
  .glossario-termo { padding: 0.75rem; }
  
  /* --- FONTES --- */
  .fonte-item { padding: 1rem; }

  /* ============================================ */
  /* 🆕 VCS - VISÃO COMPORTAMENTAL SEU MUNICÍPIO (PRIVADO) */
  /* ============================================ */
  
  /* Grid de 3 colunas (UF + Busca + Município) vira 1 coluna */
  #visaoComportamentalSeuMunicipioContent div[style*="grid-template-columns: 1fr 2fr 2fr"] {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  
  /* Selects e inputs ocupam largura total */
  #visaoComportamentalSeuMunicipioContent select,
  #visaoComportamentalSeuMunicipioContent input[type="text"] {
    width: 100% !important;
    font-size: 0.9rem;
  }
  
  /* Labels do Passo 1 */
  #visaoComportamentalSeuMunicipioContent label {
    font-size: 0.95rem;
  }
  
  /* Botão "Carregar Comparativo" em largura total */
  #btnCarregarVisaoSeuMunicipio {
    width: 100% !important;
    font-size: 0.95rem;
  }
  
  /* Tabela Detalhada - permite scroll horizontal suave */
  #vcsTabelaDetalhada {
    font-size: 0.75rem;
    min-width: 100%;
  }
  
  #vcsTabelaDetalhada th,
  #vcsTabelaDetalhada td {
    padding: 6px 4px;
    white-space: nowrap;
  }
  
  /* Container da tabela com scroll */
  #vcsTabelaDetalhada[style*="overflow: auto"] {
    -webkit-overflow-scrolling: touch;
  }
  
  /* Gráficos do VCS (Perfil Eleitor) */
  #vcsChartIdade,
  #vcsChartComparecimento,
  #vcsChartComparecObrigatorio,
  #vcsChartEvolucaoPartido,
  #vcsChartAbstencao,
  #vcsChartComparecimentoEleitoral,
  #vcsChartBrancos,
  #vcsChartNulos,
  #vcsChartVotoNominal {
    max-width: 100%;
  }
  
  /* Títulos das seções do VCS */
  #visaoComportamentalSeuMunicipioContent h3 {
    font-size: 1.05rem;
  }
  
  #visaoComportamentalSeuMunicipioContent h4 {
    font-size: 0.95rem;
  }
  
  /* Seção do Passo 2 (Partido/Cargo/Turno) */
  #vcsSeletoresEleitorais .client-selector-row {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  
  #vcsSeletoresEleitorais select {
    width: 100% !important;
  }

  /* ============================================ */
  /* 🆕 VCS PÚBLICO - SEU MUNICÍPIO (ÁREA PÚBLICA) */
  /* ============================================ */
  
  /* Container principal da seção pública */
  #seuMunicipioPublico .container {
    padding: 0 0.75rem;
  }
  
  /* Cabeçalho da seção pública */
  #seuMunicipioPublico h2 {
    font-size: 1.3rem;
    line-height: 1.3;
  }
  
  #seuMunicipioPublico > .container > div[style*="text-align: center"] p {
    font-size: 0.95rem !important;
  }
  
  /* Formulário público - Grid de 3 colunas vira 1 coluna */
  #vcsPubFormContainer div[style*="grid-template-columns: 1fr 2fr 2fr"] {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  
  /* Selects e inputs públicos ocupam largura total */
  #vcsPubFormContainer select,
  #vcsPubFormContainer input[type="text"] {
    width: 100% !important;
    font-size: 0.9rem !important;
  }
  
  /* Labels do formulário público */
  #vcsPubFormContainer label {
    font-size: 0.95rem;
  }
  
  /* Botão "Carregar Comparativo" público em largura total */
  #btnCarregarVisaoSeuMunicipioPub {
    width: 100% !important;
    font-size: 0.95rem;
    padding: 0.75rem !important;
  }
  
  /* Seletor de filtros públicos (Passo 2) */
  #vcsPubSeletoresEleitorais > div[style*="grid-template-columns: repeat"] {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  
  #vcsPubSeletoresEleitorais select {
    width: 100% !important;
  }
  
  /* Botão "Gerar Comparativo Gratuito" em largura total */
  #btnGerarVcsPub {
    width: 100% !important;
    font-size: 0.95rem !important;
    padding: 0.75rem !important;
  }
  
  /* Loading público */
  #vcsPubLoading {
    padding: 1.5rem !important;
  }
  
  #vcsPubLoading > div:first-child {
    font-size: 0.95rem !important;
  }
  
  #vcsPubLoading > div:last-child {
    font-size: 0.8rem !important;
  }
  
  /* Gráficos públicos do VCS */
  #vcsPubChartsArea .chart-container {
    height: 300px !important;
    min-height: 250px;
  }
  
  #vcsPubChartsArea canvas {
    max-width: 100%;
  }
  
  /* Títulos das seções de gráficos públicos */
  #vcsPubChartsArea h3 {
    font-size: 1.05rem;
    line-height: 1.3;
  }
  
  #vcsPubChartsArea h4 {
    font-size: 0.95rem;
    line-height: 1.3;
  }
  
  /* Tabela detalhada pública */
  #vcsPubTabelaDetalhada {
    font-size: 0.75rem;
    min-width: 100%;
  }
  
  #vcsPubTabelaDetalhada th,
  #vcsPubTabelaDetalhada td {
    padding: 6px 4px;
    white-space: nowrap;
  }
  
  /* CTA (Call to Action) da seção pública */
  #vcsPubCta {
    padding: 1.5rem !important;
  }
  
  #vcsPubCta h3 {
    font-size: 1.1rem;
  }
  
  #vcsPubCta p {
    font-size: 0.9rem !important;
  }
  
  #vcsPubCta > div[style*="display: flex"] {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  
  #vcsPubCta button,
  #vcsPubCta a {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  
  /* Container de status (bloqueio/manutenção) */
  #vcsPubStatusContainer {
    padding: 2rem 1rem !important;
  }
}

/* ============================================
   CELULARES MUITO PEQUENOS (até 480px)
   ============================================ */
@media (max-width: 480px) {
  .container { padding: 0 0.75rem; }
  
  section { padding: 1rem; }
  
  .brand { font-size: 1.2rem; }
  
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.2rem; }
  h3 { font-size: 1rem; }
  
  .tab-btn { 
    min-width: 100px; 
    font-size: 0.85rem; 
    padding: 0.4rem 0.75rem;
  }
  
  .chart-container { height: 250px; }
  
  .client-reports-grid { 
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); 
    gap: 0.75rem;
  }
  
  .report-card { padding: 0.75rem; }
  .report-card-icon { font-size: 1.5rem; }
  
  .watermark { font-size: 1rem; }
  
  .ticker-content { font-size: 0.7rem; padding-left: 90px; }
  
  .srag-stat-grid { grid-template-columns: 1fr; }
  
  .results-table { font-size: 0.7rem; }
  .results-table th,
  .results-table td { padding: 4px 2px; }

  /* 🆕 VCS PRIVADO - Ajustes extras para telas muito pequenas */
  #visaoComportamentalSeuMunicipioContent h3 {
    font-size: 0.95rem;
  }
  
  #visaoComportamentalSeuMunicipioContent h4 {
    font-size: 0.85rem;
  }
  
  #vcsTabelaDetalhada th,
  #vcsTabelaDetalhada td {
    font-size: 0.65rem;
    padding: 4px 2px;
  }
  
  #btnCarregarVisaoSeuMunicipio,
  #btnGerarVisaoSeuMunicipio {
    font-size: 0.85rem;
    padding: 0.6rem !important;
  }

  /* 🆕 VCS PÚBLICO - Ajustes extras para telas muito pequenas */
  #seuMunicipioPublico h2 {
    font-size: 1.1rem;
  }
  
  #seuMunicipioPublico > .container > div[style*="text-align: center"] p {
    font-size: 0.85rem !important;
  }
  
  #vcsPubFormContainer label {
    font-size: 0.85rem;
  }
  
  #vcsPubFormContainer select,
  #vcsPubFormContainer input[type="text"] {
    font-size: 0.85rem !important;
    padding: 0.4rem !important;
  }
  
  #btnCarregarVisaoSeuMunicipioPub,
  #btnGerarVcsPub {
    font-size: 0.85rem !important;
    padding: 0.6rem !important;
  }
  
  #vcsPubChartsArea .chart-container {
    height: 250px !important;
  }
  
  #vcsPubChartsArea h3 {
    font-size: 0.95rem;
  }
  
  #vcsPubChartsArea h4 {
    font-size: 0.85rem;
  }
  
  #vcsPubTabelaDetalhada th,
  #vcsPubTabelaDetalhada td {
    font-size: 0.65rem;
    padding: 4px 2px;
  }
  
  #vcsPubCta {
    padding: 1rem !important;
  }
  
  #vcsPubCta h3 {
    font-size: 1rem;
  }
  
  #vcsPubCta p {
    font-size: 0.85rem !important;
  }
  
  #vcsPubCta button,
  #vcsPubCta a {
    font-size: 0.85rem !important;
    padding: 0.6rem 1rem !important;
  }
}

/* ============================================
   ORIENTAÇÃO PAISAGEM EM CELULARES
   ============================================ */
@media (max-height: 500px) and (orientation: landscape) {
  /* Oculta marca d'água apenas em celulares (largura pequena) */
  @media (max-width: 768px) {
    .watermark { display: none; }
  }
  
  .chart-container { height: 250px; }
  
  .content-modal-container { 
    max-height: 90vh; 
    overflow-y: auto; 
  }
  
  /* Reduz padding em landscape para ganhar área útil */
  section { padding: 1rem; }
  
  /* Gráficos públicos em landscape */
  #vcsPubChartsArea .chart-container {
    height: 220px !important;
  }
  
  #visaoComportamentalSeuMunicipioContent .chart-container,
  .visao-charts-container .chart-container {
    height: 220px !important;
  }
}

/* ============================================
   MELHORIAS GERAIS DE TOQUE (MOBILE)
   ============================================ */
@media (hover: none) and (pointer: coarse) {
  /* Aumenta área de toque em botões */
  .tab-btn,
  .cargo-tab,
  .ano-tab,
  .turno-btn,
  .consolidado-tab,
  .genero-btn,
  .dimensao-tab,
  .cargo-group-btn {
    min-height: 44px; /* Padrão Apple para toque */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Remove hover effects em touch */
  .tab-btn:hover,
  .cargo-tab:hover,
  .btn-primary:hover,
  .btn-secondary:hover {
    transform: none;
  }
  
  /* Botões do VCS público com área de toque adequada */
  #btnCarregarVisaoSeuMunicipioPub,
  #btnGerarVcsPub,
  #vcsPubCta button,
  #vcsPubCta a {
    min-height: 44px;
  }
}

/* ============================================
   IMPRESSÃO (BÔNUS)
   ============================================ */
@media print {
  .watermark,
  .ticker,
  .mobile-toggle,
  nav,
  footer,
  .btn-primary,
  .btn-secondary,
  .btn-download {
    display: none !important;
  }
  
  body { background: white; }
  
  section { 
    box-shadow: none; 
    page-break-inside: avoid;
  }
  
  .chart-container { 
    height: 300px !important;
    page-break-inside: avoid;
  }
}