/*
 * APROTVALE — estabilização global mobile-first
 * Carregado após os estilos dos módulos para corrigir responsividade
 * sem alterar regras de negócio ou identidade visual.
 */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

body,
main,
section,
header,
footer,
.container,
.narrow,
.header-inner,
.footer-grid,
.petition-signature-grid,
.supporter-access-card,
.supporter-profile-page,
.supporter-profile-grid,
.supporter-petition-card,
.mobilization-hero-grid,
.mobilization-goal-grid,
.mobilization-highlight-grid,
.mobilization-ranking-card,
.mobilization-chart,
.admin-dashboard,
.admin-panel-grid,
.admin-panel-card,
.admin-mobilization-grid,
.admin-mobilization-summary {
    min-width: 0;
}

img,
svg,
video,
iframe,
canvas {
    max-width: 100%;
    height: auto;
}

p,
li,
a,
strong,
small,
span,
label,
td,
th,
pre,
code {
    overflow-wrap: anywhere;
}

.button,
button,
input,
select,
textarea {
    max-width: 100%;
}

@media (max-width: 860px) {
    .site-header {
        position: sticky;
        top: 0;
    }

    .header-inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 9px 0 10px;
        min-height: 0;
    }

    .brand {
        align-self: flex-start;
        min-width: 0;
    }

    .brand img {
        flex: 0 0 auto;
    }

    .brand span {
        min-width: 0;
    }

    .main-nav {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        width: 100%;
        gap: 5px;
        align-items: stretch;
    }

    .main-nav a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        min-width: 0;
        padding: 7px 6px;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: #fff;
        text-align: center;
        line-height: 1.15;
        font-size: .86rem;
    }

    .hero-grid,
    .petition-signature-grid,
    .supporter-profile-grid,
    .mobilization-goal-grid,
    .mobilization-highlight-grid,
    .admin-mobilization-grid,
    .admin-mobilization-summary,
    .admin-stat-grid,
    .admin-panel-grid,
    .users-admin-grid,
    .users-role-options,
    .users-permissions-grid {
        grid-template-columns: 1fr !important;
    }

    .petition-signature-grid {
        gap: 22px;
    }

    .signature-card {
        position: static;
        top: auto;
    }

    .supporter-petition-card {
        grid-template-columns: 1fr !important;
    }

    .supporter-profile-header,
    .admin-dashboard-top,
    .users-admin-top,
    .users-review-footer,
    .mobilization-hero-grid,
    .mobilization-section-head,
    .mobilization-callout-grid,
    .admin-mobilization-head {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-panel-card:first-child {
        grid-column: auto !important;
    }

    .users-table-wrap {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .mobilization-chart {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        grid-template-columns: repeat(30, 28px) !important;
        justify-content: start;
    }
}

@media (max-width: 640px) {
    .container,
    .narrow {
        width: min(100% - 24px, 1160px) !important;
    }

    h1,
    .petition-signature-content h1,
    .supporter-access-card h1,
    .supporter-profile-header h1,
    .mobilization-hero-copy h1,
    .admin-dashboard-top h1,
    .admin-mobilization h1,
    .users-admin-top h1,
    .invitation-card h1 {
        font-size: clamp(2rem, 10vw, 3rem) !important;
        line-height: 1.05;
    }

    h2,
    .supporter-profile-section h2,
    .mobilization-section-head h2,
    .mobilization-callout h2 {
        font-size: clamp(1.55rem, 7vw, 2.25rem) !important;
    }

    .main-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .main-nav a {
        font-size: .84rem;
    }

    .button,
    button {
        min-height: 44px;
    }

    .actions .button,
    .campaign-actions .button,
    .mobilization-actions .button,
    .mobilization-callout-actions .button,
    .supporter-access-actions .button,
    .supporter-petition-card .button,
    .admin-panel-card .button,
    .admin-dashboard-top .button,
    .admin-mobilization .button,
    .users-review-footer .button {
        width: 100%;
        text-align: center;
    }

    input,
    select,
    textarea,
    .signature-field input,
    .signature-field select,
    .admin-form input,
    .admin-mobilization-card input[type="number"] {
        font-size: 16px !important;
    }

    .petition-signature-hero,
    .supporter-access-page,
    .supporter-profile-page,
    .mobilization-hero,
    .mobilization-section,
    .mobilization-callout,
    .admin-dashboard,
    .admin-mobilization,
    .section,
    .campaign-hero {
        padding-top: 28px !important;
        padding-bottom: 34px !important;
    }

    .petition-text-card,
    .petition-donor-note,
    .signature-card,
    .signature-success-card,
    .supporter-access-card,
    .supporter-profile-card,
    .supporter-petition-card,
    .mobilization-goal-card,
    .mobilization-ranking-card,
    .mobilization-highlight-card,
    .admin-panel-card,
    .admin-mobilization-card,
    .admin-mobilization-history,
    .users-invite-card,
    .users-list-card,
    .users-history-card,
    .users-review-card,
    .invitation-card,
    .admin-auth-card {
        border-radius: 16px !important;
    }

    .signature-card,
    .supporter-access-card,
    .admin-auth-card,
    .users-invite-card,
    .users-list-card,
    .users-history-card,
    .users-review-card,
    .invitation-card {
        padding: 18px !important;
    }

    .signature-location-grid {
        grid-template-columns: 1fr !important;
    }

    .petition-signature-grid {
        grid-template-columns: 1fr !important;
    }

    .petition-text-heading {
        flex-direction: column;
        align-items: flex-start;
    }

    .petition-text {
        padding: 18px !important;
    }

    .signature-check {
        align-items: flex-start;
    }

    .supporter-profile-grid {
        grid-template-columns: 1fr !important;
    }

    .supporter-petition-card {
        padding: 16px !important;
    }

    .supporter-petition-card > * {
        min-width: 0;
    }

    .mobilization-goal-grid,
    .mobilization-highlight-grid {
        grid-template-columns: 1fr !important;
    }

    .mobilization-total-card,
    .mobilization-coverage {
        width: 100%;
        min-width: 0 !important;
        text-align: left !important;
    }

    .mobilization-goal-head,
    .mobilization-goal-super {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .mobilization-ranking-card {
        padding: 14px !important;
    }

    .mobilization-ranking-row {
        grid-template-columns: 42px minmax(0, 1fr) 72px !important;
        gap: 8px;
        font-size: .88rem;
    }

    .mobilization-rank-growth,
    .mobilization-rank-gap {
        grid-column: 2 / -1;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 6px;
    }

    .mobilization-chart {
        width: 100%;
        min-height: 225px;
        padding: 14px 8px 8px;
        grid-template-columns: repeat(30, 28px) !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .mobilization-chart-column {
        min-width: 28px;
    }

    .admin-mobilization-grid,
    .admin-mobilization-summary,
    .admin-stat-grid,
    .admin-panel-grid {
        grid-template-columns: 1fr !important;
    }

    .admin-dashboard-top form,
    .admin-dashboard-top form .button {
        width: 100%;
    }

    .permission-list {
        align-items: stretch;
    }

    .permission-list span {
        max-width: 100%;
    }

    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 22px;
    }

    .footer-grid > div {
        min-width: 0;
    }
}

@media (max-width: 414px) {
    .container,
    .narrow {
        width: min(100% - 20px, 1160px) !important;
    }

    .brand {
        gap: 8px;
    }

    .brand img {
        width: 48px !important;
        height: 48px !important;
    }

    .brand strong {
        font-size: .92rem;
    }

    .brand small {
        display: none;
    }

    .main-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
    }

    .main-nav a {
        min-height: 44px;
        padding: 6px 4px;
        font-size: .78rem;
    }

    .mobilization-ranking-row {
        grid-template-columns: 38px minmax(0, 1fr) !important;
    }

    .mobilization-rank-number,
    .mobilization-rank-growth,
    .mobilization-rank-gap {
        grid-column: 2;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 5px;
    }

    .mobilization-rank-number strong,
    .mobilization-rank-number span,
    .mobilization-rank-growth strong,
    .mobilization-rank-growth span,
    .mobilization-rank-gap strong,
    .mobilization-rank-gap span {
        display: inline;
    }

    .mobilization-actions,
    .mobilization-callout-actions,
    .supporter-access-actions {
        gap: 8px;
    }

    .notice-card,
    .signature-alert,
    .petition-summary {
        padding: 14px !important;
    }
}

@media (max-width: 390px) {
    .site-header {
        position: relative;
    }

    .main-nav a {
        font-size: .76rem;
    }

    .mobilization-total-card strong {
        font-size: clamp(2.2rem, 15vw, 3.2rem);
    }

    .signature-counter strong,
    .supporter-progress-box strong {
        font-size: 1.55rem;
    }
}

@media (max-width: 360px) {
    .container,
    .narrow {
        width: min(100% - 18px, 1160px) !important;
    }

    .header-inner {
        padding-top: 7px;
    }

    .main-nav a {
        font-size: .73rem;
        padding-left: 3px;
        padding-right: 3px;
    }

    h1,
    .petition-signature-content h1,
    .supporter-access-card h1,
    .supporter-profile-header h1,
    .mobilization-hero-copy h1,
    .admin-dashboard-top h1,
    .admin-mobilization h1 {
        font-size: clamp(1.85rem, 10.5vw, 2.45rem) !important;
    }

    .signature-card,
    .supporter-access-card,
    .admin-panel-card,
    .admin-mobilization-card {
        padding: 15px !important;
    }
}

@media (max-width: 320px) {
    .container,
    .narrow {
        width: min(100% - 14px, 1160px) !important;
    }

    .brand img {
        width: 44px !important;
        height: 44px !important;
    }

    .brand strong {
        font-size: .86rem;
    }

    .main-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .main-nav a {
        min-height: 44px;
        font-size: .69rem;
        letter-spacing: 0;
    }

    .button,
    button {
        min-height: 44px;
        padding-left: 12px;
        padding-right: 12px;
        font-size: .82rem;
    }

    .mobilization-ranking-row {
        grid-template-columns: 34px minmax(0, 1fr) !important;
    }
}

/* CTA flutuante do abaixo-assinado — mobile only */
.mobile-signature-cta {
    display: none;
}

@media (max-width: 860px) {
    .mobile-signature-cta {
        position: fixed;
        right: 14px;
        bottom: calc(14px + env(safe-area-inset-bottom));
        z-index: 1200;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        max-width: calc(100vw - 28px);
        min-height: 44px;
        padding: 10px 16px;
        border: 1px solid rgba(255, 255, 255, .34);
        border-radius: 999px;
        background: #0b7a42;
        color: #fff;
        box-shadow: 0 8px 22px rgba(16, 69, 48, .28);
        font-size: .84rem;
        font-weight: 800;
        line-height: 1;
        letter-spacing: .02em;
        text-decoration: none;
        transition:
            opacity .18s ease,
            transform .18s ease,
            visibility .18s ease;
    }

    .mobile-signature-cta:hover,
    .mobile-signature-cta:focus-visible {
        color: #fff;
        text-decoration: none;
    }

    .mobile-signature-cta:focus-visible {
        outline: 3px solid rgba(11, 122, 66, .28);
        outline-offset: 3px;
    }

    .mobile-signature-cta.is-hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(12px);
    }

    #assinar {
        scroll-margin-top: 150px;
    }
}

@media (max-width: 414px) {
    .mobile-signature-cta {
        right: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        max-width: calc(100vw - 20px);
        min-height: 44px;
        padding: 9px 14px;
        font-size: .78rem;
    }
}

@media (max-width: 360px) {
    .mobile-signature-cta {
        font-size: .74rem;
        padding-inline: 12px;
    }
}

@media (min-width: 861px) {
    .mobile-signature-cta {
        display: none !important;
    }
}