/* =====================================================================
   RESPONSIVO — tablets e celulares
   ===================================================================== */
/* telas de notebook (1181–1400px): menu completo + cidade + avisos + conta cabem sem rolar para o lado */
@media (min-width: 1181px) and (max-width: 1400px) {
    .nav-links { gap: 2px; }
    .nav-links a { padding: .45em .6em; font-size: .77rem; }
    .nav-acoes { gap: 4px; }
    .seletor-cidade { padding: 7px 10px; }
    .local-rotulo { display: inline-block; max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .nome-nav { display: inline-block; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (min-width: 1181px) and (max-width: 1260px) { .nome-nav { display: none; } }

@media (max-width: 1100px) {
    .grade-4 { grid-template-columns: repeat(3, 1fr); }
    .nav-links a { padding: .45em .6em; font-size: .76rem; }
    .rodape-grid { grid-template-columns: repeat(3, 1fr); }
    .rodape-slogan { grid-column: span 3; justify-self: start; }
}

@media (max-width: 1180px) {
    .menu-mobile { display: inline-grid; }
    .nav-links {
        position: absolute; left: 18px; right: 18px; top: calc(100% + 8px);
        flex-direction: column; align-items: stretch; gap: 2px;
        background: var(--branco); border-radius: 20px; padding: 10px; box-shadow: var(--sombra-lg);
        opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all var(--trans);
    }
    .nav-links.aberto { opacity: 1; visibility: visible; transform: none; }
    .nav-links a { padding: .8em 1em; font-size: .9rem; }
    .nav-pilula { position: relative; }
    .nav-acoes { margin-left: auto; }
}

@media (max-width: 960px) {
    .menu-mobile { display: inline-grid; }
    .nav-links {
        position: absolute; left: 18px; right: 18px; top: calc(100% + 8px);
        flex-direction: column; align-items: stretch; gap: 2px;
        background: var(--branco); border-radius: 20px; padding: 10px; box-shadow: var(--sombra-lg);
        opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all var(--trans);
    }
    .nav-links.aberto { opacity: 1; visibility: visible; transform: none; }
    .nav-links a { padding: .8em 1em; font-size: .9rem; }
    .nav-pilula { position: relative; }
    .nav-acoes { margin-left: auto; }
    .local-rotulo { max-width: 110px; }

    .hero, .perfil-hero, .detalhe, .agendar, .historia, .auth { grid-template-columns: 1fr; }
    .detalhe-midia { position: static; }
    .auth-arte { min-height: 220px; padding: 28px; }
    .auth-arte::before { display: none; }
    .auth-arte::after { height: 100%; background: linear-gradient(rgba(20, 30, 45, .45), rgba(20, 30, 45, .55)); }   /* texto legível em cima da foto */
    .rodape-marca img { margin: 0; }
    .perfil-arco { width: 100%; max-width: 420px; margin: 0 auto; order: -1; }   /* largura cheia: sem foto, o arco não encolhe */
    .hero-grande { min-height: 300px; }
    .grade-3, .grade-4 { grid-template-columns: repeat(2, 1fr); }
    .passos { grid-template-columns: 1fr; }
    .explorar { grid-template-columns: 1fr; }
    .filtros { position: static; display: none; background: var(--azul-50); padding: 18px; border-radius: 16px; }
    .filtros.aberto { display: block; }
    .btn-filtros { display: inline-flex; margin-bottom: 16px; }
    .resumo-proc { position: static; }

    .painel { grid-template-columns: 1fr; }
    .menu-lateral { position: static; max-height: none; display: none; }
    .menu-lateral.aberto { display: block; }
    .btn-menu-painel { display: inline-grid !important; place-items: center; }
}

@media (max-width: 640px) {
    body { font-size: 14px; }
    .container { padding-left: 16px; padding-right: 16px; }   /* só nas laterais: o espaço de cima/baixo das seções (.secao) continua */
    .topo { padding: 10px 10px 0; }
    .nav-pilula { padding: 6px 6px 6px 16px; gap: 8px; }
    .marca span, .nome-nav, .nav-acoes > a.btn-icone { display: none; }
    .avatar-btn { padding-right: 6px; }
    .seletor-cidade { padding-left: 8px; }
    .local-rotulo { max-width: 92px; }
    .seletor-cidade { font-size: .72rem; padding: 6px 10px; }
    .local-painel { position: fixed; left: 12px; right: 12px; top: 74px; width: auto; }
    .grade-2, .grade-3, .grade-4 { grid-template-columns: 1fr; }
    .grade-auto { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .form-grid, .form-grid-3 { grid-template-columns: 1fr; }
    .form-grid .col-2 { grid-column: span 1; }
    .hero-texto { padding-left: 18px; }
    .hero-redes { display: none; }
    .mosaico { columns: 2 140px; column-gap: 10px; }
    .mosaico-item { margin-bottom: 10px; }
    .mosaico.grade-espaco { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .grade-espaco .mosaico-item { margin: 0; }
    .rodape-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
    .rodape-slogan { grid-column: span 2; }
    .compromisso { grid-template-columns: 62px 1fr; }
    .compromisso > :last-child { grid-column: span 2; }
    .card-linha { flex-wrap: wrap; }
    .card-linha .lado { width: 100%; align-items: stretch; }
    .toasts { left: 12px; right: 12px; max-width: none; top: 76px; }
    .cookie-banner { flex-direction: column; text-align: center; left: 10px; right: 10px; bottom: 10px; }
    .semana-dia { grid-template-columns: 1fr; }
    .dropdown-notif { width: calc(100vw - 24px); max-width: 380px; }
    .modal-caixa { padding: 22px 18px; }

    /* tabelas viram cartões (o app.js põe em cada célula o nome da coluna) — nada sai para fora da tela */
    .tabela-wrap:has(.tabela-pilha) { overflow: visible; border: 0; border-radius: 0; background: none; }
    .tabela-pilha, .tabela-pilha tbody, .tabela-pilha tfoot, .tabela-pilha tr, .tabela-pilha td { display: block; width: 100%; }
    .tabela-pilha { border: 0 !important; background: none; overflow: visible !important; }
    .tabela-pilha thead { display: none; }
    .tabela-pilha tr { border: 1.5px solid var(--azul-200); border-radius: 14px; background: var(--branco); padding: 10px 14px; margin-bottom: 10px; }
    .tabela-pilha tr:hover td, .tabela-pilha tr.hoje td { background: none; }
    .tabela-pilha tr.hoje { background: var(--azul-50); }
    .tabela-pilha td { border: 0; padding: 6px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: right; min-width: 0; overflow-wrap: anywhere; }
    .tabela-pilha td + td { border-top: 1px dashed var(--azul-100); }
    .tabela-pilha td::before { content: attr(data-rotulo); flex-shrink: 0; max-width: 45%; text-align: left; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--azul-600); }
    .tabela-pilha td[data-rotulo=""]::before, .tabela-pilha td.celula-larga::before, .tabela-pilha td:first-child::before { display: none; }
    .tabela-pilha td:first-child { justify-content: flex-start; text-align: left; font-size: 1.02em; }
    .tabela-pilha td[data-rotulo=""] { justify-content: flex-end; }
    .tabela-pilha td.celula-larga { justify-content: center; text-align: center; }
    .tabela-pilha td:empty { display: none; }
    .tabela-pilha td > * { min-width: 0; }
    .tabela-pilha td select { width: auto !important; max-width: 100%; }
    .tabela-pilha .acoes { justify-content: flex-end; }
}

/* o botão que abre o menu do painel só existe em telas pequenas (antes ficava escondido até no celular) */
@media (min-width: 961px) { .btn-menu-painel { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media print {
    .topo, .rodape, .menu-lateral, .faixa-teste, .cookie-banner, .toasts { display: none !important; }
    .painel { grid-template-columns: 1fr; }
}