/* Complemento responsivo: mantém as cores e o layout de computador existentes. */
.abrir-menu, .fechar-menu, .rotulo-celula {
    display: none;
}

.fundo-menu[hidden] {
    display: none;
}

.shell, main, .panel, .dashboard-grid > *, .page-heading > *, .empresa-conectada {
    min-width: 0;
}

main {
    overflow-wrap: anywhere;
}

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

    main pre {
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }

.toolbar {
    flex-wrap: wrap;
}

.topbar .toolbar {
    flex-wrap: nowrap;
}

.page-heading {
    gap: 16px;
    flex-wrap: wrap;
}

.sidebar nav a[aria-current="page"] {
    background: #ffffff20;
    box-shadow: inset 3px 0 var(--amber);
}

.sidebar hr {
    width: 100%;
    border: 0;
    border-top: 1px solid #ffffff35;
}

:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--amber);
    outline-offset: 3px;
}

input[type="hidden"] {
    display: none;
}

@media (max-width: 900px) {
    /* Sem JavaScript o menu permanece visível e todos os links continuam acessíveis. */
    .sidebar {
        position: static;
        width: 100%;
        padding: 20px;
    }

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

            .sidebar nav a.has-icon {
                display: flex;
            }

            .sidebar nav hr {
                grid-column: 1 / -1;
            }

        .sidebar p, .sidebar > form {
            display: block;
        }

        .sidebar .brand {
            max-width: 230px;
        }

    .shell {
        margin-left: 0;
    }

    .navegacao-pronta .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(320px, 88vw);
        height: 100dvh;
        z-index: 1100;
        visibility: hidden;
        transform: translateX(-100%);
        padding: max(18px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
        overscroll-behavior: contain;
    }

        .navegacao-pronta .sidebar nav {
            grid-template-columns: 1fr;
            margin: 16px 0;
        }

            .navegacao-pronta .sidebar nav a {
                font-size: 15px;
                min-height: 44px;
                padding: 10px;
            }

        .navegacao-pronta .sidebar .brand {
            max-width: 225px;
            margin-top: 44px;
        }

    .navegacao-pronta .abrir-menu, .navegacao-pronta .fechar-menu {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        margin: 0;
        padding: 8px;
        font-size: 24px;
    }

    .fechar-menu {
        position: absolute;
        top: max(12px, env(safe-area-inset-top));
        right: 16px;
        border: 1px solid #ffffff60;
    }

    .menu-aberto {
        overflow: hidden;
    }

    .navegacao-pronta .menu-aberto .sidebar {
        visibility: visible;
        transform: translateX(0);
    }

    .fundo-menu {
        position: fixed;
        inset: 0;
        z-index: 1050;
        background: #0B2D5970;
    }

    .topbar {
        position: sticky;
        top: 0;
        z-index: 50;
        height: auto;
        min-height: 72px;
        padding: 10px 16px;
        gap: 10px;
    }

    .empresa-conectada {
        flex: 1;
    }

    .topbar strong {
        display: block;
        font-size: 14px;
        overflow-wrap: anywhere;
    }

    .topbar .toolbar {
        gap: 8px;
    }

    .topbar .gear {
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
    }

    main {
        padding: 22px;
    }

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

    .dashboard-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 700px) {
    .topbar {
        flex-wrap: wrap;
        padding: 10px 12px;
    }

    .empresa-conectada {
        flex-basis: calc(100% - 66px);
    }

    .topbar .toolbar {
        width: 100%;
        justify-content: flex-end;
    }

    .topbar .culture-switcher {
        flex: 1;
        min-width: 0;
        max-width: 240px;
    }

    .culture-switcher summary {
        min-height: 44px;
    }

    .culture-switcher form {
        min-width: 155px;
        max-width: calc(100vw - 24px);
    }

    main {
        padding: 16px 12px;
    }

    h1 {
        font-size: 25px;
    }

        h1.has-icon, h2.has-icon {
            align-items: flex-start;
        }

    .page-heading {
        align-items: flex-start;
        margin-bottom: 16px;
    }

        .page-heading > div {
            width: 100%;
        }

    .panel {
        padding: 16px 12px;
        margin-bottom: 16px;
    }

    main img {
        max-width: 100% !important;
    }

    .metric {
        padding: 14px 10px;
    }

        .metric strong {
            font-size: clamp(20px, 5vw, 28px);
            overflow-wrap: anywhere;
        }

        .metric .app-icon + span {
            max-width: 100%;
        }

    .cards, .cards-prospeccao {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .rates > * {
        min-width: 0;
        flex-basis: 100%;
    }

    .toolbar {
        gap: 8px;
    }

    input:not([type="checkbox"]):not([type="hidden"]), select, textarea {
        font-size: 16px;
        min-height: 44px;
        max-width: 100%;
    }

    input[type="number"] {
        max-width: 100%;
    }

    input[type="checkbox"], input[type="radio"] {
        min-width: 20px;
        min-height: 20px;
        vertical-align: middle;
    }

    button, .button, .lista-paginada td button, .lista-paginada td .button {
        min-height: 44px;
        padding: 10px 12px;
        white-space: normal;
        max-width: 100%;
    }

    .panel form {
        width: 100%;
    }

    summary {
        padding-block: 12px;
        min-height: 44px;
    }

    .paginacao {
        gap: 12px;
        padding-block: 12px;
    }

        .paginacao > *, .paginacao form {
            max-width: 100%;
        }

    .paginacao-links {
        gap: 6px;
    }

    .paginacao label {
        flex-wrap: wrap;
    }

    .paginacao select {
        width: auto;
    }

    .lista-paginada {
        max-height: none;
        overflow-x: auto;
        border: 0;
        border-radius: 0;
    }

    .historico-paginado {
        max-height: 60dvh;
    }

    .tabela-responsiva, .tabela-responsiva tbody {
        display: block;
        width: 100%;
    }

        .tabela-responsiva thead {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            overflow: hidden;
            clip-path: inset(50%);
            white-space: nowrap;
        }

        .tabela-responsiva tbody tr {
            display: block;
            border: 1px solid var(--border);
            border-radius: 9px;
            padding: 8px 12px;
            margin-bottom: 12px;
            background: var(--white);
        }

        .tabela-responsiva tbody td, .lista-paginada .tabela-responsiva tbody td {
            display: block;
            width: 100%;
            min-width: 0;
            padding: 8px 0;
            white-space: normal;
            overflow-wrap: anywhere;
            border-bottom: 1px solid var(--border);
        }

        .tabela-responsiva tbody tr td:last-child {
            border-bottom: 0;
        }

    .rotulo-celula {
        display: block;
        font-size: 12px;
        font-weight: 600;
        color: var(--muted);
        margin-bottom: 4px;
    }

    .tabela-responsiva td > a:not(.button) {
        display: inline-block;
        min-height: 44px;
        padding-block: 10px;
    }

    .tabela-responsiva .cliente-combobox {
        width: 100%;
        min-width: 0;
    }

    .cliente-combobox-lista {
        max-width: calc(100vw - 24px);
    }

    .cliente-combobox-opcao {
        min-height: 44px;
        font-size: 16px;
    }

    .funnel-step {
        flex-wrap: wrap;
        gap: 4px;
        font-size: 11px;
        padding-inline: 8px;
    }

    .chart-legend {
        gap: 6px;
    }

    footer {
        padding: 16px 12px max(16px, env(safe-area-inset-bottom));
    }

    .auth {
        min-height: 100dvh;
    }

    .auth-card {
        width: calc(100% - 24px);
        padding: 22px 18px;
        margin: 90px 12px 24px;
    }

    .auth-language {
        right: 12px;
        top: 12px;
    }

    .auth-links {
        flex-wrap: wrap;
        gap: 12px;
    }

        .auth-links a, .manual-link {
            min-height: 44px;
            padding-block: 10px;
        }
}

@media (prefers-reduced-motion: no-preference) {
    .navegacao-pronta .menu-aberto .sidebar {
        animation: abrir-menu .18s ease-out;
    }

    @keyframes abrir-menu {
        from {
            transform: translateX(-100%);
        }

        to {
            transform: translateX(0);
        }
    }
}

/* Consentimento e configuracoes: controles legiveis em telas pequenas. */
summary{cursor:pointer}.actions{display:flex;gap:12px;flex-wrap:wrap}fieldset label{display:block;margin:10px 0}code{overflow-wrap:anywhere}.panel input[readonly]{max-width:100%}

/* A restauração do menu deve ser imediata, sem animação ou ancoragem automática. */
#menu-principal { overflow-anchor: none; scroll-behavior: auto; }