/* ═══════════════════════════════════════════════════════
   NODUS A11Y + MOBILE — overrides pros modais que criei
   ═══════════════════════════════════════════════════════ */

/* ── Touch targets minimo 44px (WCAG) ─────────────────── */
.pln-btn, .rel-btn, .nfb-btn, .nfa-btn, .cl-filtro-btn, .nodus-snooze-menu button {
    min-height: 36px;
}
@media (max-width: 767px) {
    .pln-btn, .rel-btn, .nfb-btn, .nfa-btn, .cl-filtro-btn {
        min-height: 44px;
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* ── BOTTOM SHEET no mobile (slide-up + drag handle) ──── */
@media (max-width: 767px) {
    .pln-modal-bg, .rel-modal-bg {
        padding: 0 !important;
        align-items: flex-end !important; /* sheet sobe do rodape */
    }
    .pln-modal, .rel-modal {
        max-width: 100% !important;
        width: 100% !important;
        border-radius: 18px 18px 0 0 !important;
        max-height: 92vh !important;
        padding: 28px 18px 18px !important; /* top maior pra acomodar drag handle */
        overflow-y: auto;
        animation: nodusSheetUp .28s cubic-bezier(.32,.72,.42,1);
        position: relative;
    }
    /* Drag handle visual no topo */
    .pln-modal::before, .rel-modal::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 44px;
        height: 4px;
        border-radius: 2px;
        background: var(--text-tertiary);
        opacity: .35;
    }
    .pln-modal.wide, .pln-modal.xwide, .rel-modal {
        max-width: 100% !important;
    }
    /* Action bar sticky no rodape — sempre acessivel */
    .pln-modal .actions, .rel-modal .actions {
        position: sticky;
        bottom: -18px;
        background: var(--bg-primary);
        margin: 16px -18px -18px;
        padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0));
        border-top: 1px solid var(--border);
        z-index: 5;
    }
    /* Grid 2 colunas vira 1 no mobile */
    .pln-modal .row2, .rel-modal .row2,
    .pln-modal .row3, .rel-modal .row3 {
        grid-template-columns: 1fr !important;
    }
}

@keyframes nodusSheetUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* Indicador visual de swipe (toast efemero ao trocar de section) */
.nodus-swipe-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(8, 145, 178, .95);
    color: #fff;
    padding: 14px 22px;
    border-radius: 999px;
    font-family: Outfit, sans-serif;
    font-weight: 700;
    font-size: .82rem;
    z-index: 99997;
    pointer-events: none;
    box-shadow: 0 10px 30px rgba(8, 145, 178, .4);
    animation: nodusSwipeToast .9s ease-out forwards;
}
@keyframes nodusSwipeToast {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(.85); }
    20%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    80%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(.95); }
}

/* ── Tabelas com scroll horizontal (leads, feedbacks) ── */
@media (max-width: 767px) {
    table {
        font-size: .68rem !important;
    }
    table th, table td {
        padding: 6px 8px !important;
    }
}

/* ── Comparativo de planos (PDF table) — mobile ───────── */
@media (max-width: 600px) {
    .pln-cmp-table th, .pln-cmp-table td {
        padding: 5px 4px !important;
        font-size: .62rem !important;
    }
    .pln-cmp-resumo {
        grid-template-columns: 1fr !important;
    }
}

/* ── Cards de empresa no painel de planos ─────────────── */
@media (max-width: 767px) {
    .pln-empresa-head {
        flex-direction: column;
        align-items: stretch !important;
    }
    .pln-empresa-head > div:last-child {
        align-items: stretch !important;
        flex-direction: row !important;
        justify-content: space-between;
    }
}

/* ── Feedback (cliente envia) ─────────────────────────── */
@media (max-width: 600px) {
    .nfb-card {
        padding: 16px !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }
    .nfb-tipo-btn {
        padding: 12px 6px !important;
        font-size: .68rem !important;
    }
    .nfb-tipo-btn .ico {
        font-size: 1.4rem !important;
    }
}

/* ── Stats cards do feedback admin ────────────────────── */
@media (max-width: 600px) {
    .nfa-stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .nfa-card .nfa-actions {
        flex-direction: column;
        align-items: stretch !important;
    }
    .nfa-card .nfa-actions select,
    .nfa-card .nfa-actions button {
        width: 100%;
    }
}

/* ── Modal de release pos-login ────────────────────────── */
@media (max-width: 600px) {
    #nodusReleaseBg > div {
        max-width: 100% !important;
        max-height: 95vh !important;
        margin: 8px;
    }
}

/* ── Banner persistente — nao cobre TODA a tela no mobile ── */
@media (max-width: 600px) {
    #nodusReleaseBanner {
        font-size: .7rem !important;
        padding: 8px 12px !important;
    }
    #nodusReleaseBanner > div:last-child {
        padding: 5px 10px !important;
        font-size: .65rem !important;
    }
}

/* ═══════════════════════════════════════════════════════
   ACESSIBILIDADE
   ═══════════════════════════════════════════════════════ */

/* ── Foco visivel em todos os botoes/links ────────────── */
.pln-btn:focus-visible, .rel-btn:focus-visible, .nfb-btn:focus-visible,
.nfa-btn:focus-visible, .cl-filtro-btn:focus-visible,
.nfb-tipo-btn:focus-visible, .nfa-filtro-btn:focus-visible {
    outline: 3px solid #06b6d4;
    outline-offset: 2px;
}

/* ── Modal background — clique fora fecha (visualmente sugere) ── */
.pln-modal-bg, .rel-modal-bg {
    cursor: pointer;
}
.pln-modal, .rel-modal {
    cursor: default;
}

/* ── Skip-link (oculto ate focar via teclado) ─────────── */
.nodus-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: #06b6d4;
    color: #fff;
    padding: 10px 16px;
    z-index: 999999;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 0 8px 0;
}
.nodus-skip-link:focus {
    left: 0;
}

/* ── prefers-reduced-motion: respeita usuario que nao quer animacao ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}