/* ── MathJax overflow no mobile ── */
@media (max-width: 767px) {
    mjx-container {
        overflow-x: auto;
        overflow-y: hidden;
        max-width: 100%;
        display: block !important;
    }

    mjx-container svg,
    mjx-container mjx-math {
        max-width: 100%;
    }

    /* Bloco de math display ($$...$$) */
    mjx-container[display="true"] {
        margin: 0.5em 0;
        padding-bottom: 4px;
    }
}

/* ── Tabs de área responsivas no header do simulado ── */
@media (max-width: 576px) {
    .prova-tabs-areas {
        flex-direction: column;
        align-items: stretch;
    }

    .prova-tabs-areas [role="tab"] {
        width: 100% !important;
        justify-content: center;
    }
}

/* ── Cartão-resposta: botões html.Button sem ID Dash (event delegation) ── */
.cartao-btn-plain {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    padding: 0 6px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    border: 1.5px solid var(--cbtn-c, currentColor);
    background: transparent;
    color: var(--cbtn-c, currentColor);
    line-height: 1;
    user-select: none;
    transition: background-color 0.1s, color 0.1s, border-color 0.1s;
    font-family: inherit;
}

.cartao-btn-plain[data-selected="true"] {
    background: var(--cbtn-c, currentColor);
    color: #fff;
    border-color: var(--cbtn-c, currentColor);
}

.cartao-btn-plain:hover {
    opacity: 0.82;
}

/* Cores por área */
.cartao-btn-plain[data-color="violet"] { --cbtn-c: var(--mantine-color-violet-filled); }
.cartao-btn-plain[data-color="teal"]   { --cbtn-c: var(--mantine-color-teal-filled); }
.cartao-btn-plain[data-color="green"]  { --cbtn-c: var(--mantine-color-green-filled); }
.cartao-btn-plain[data-color="orange"] { --cbtn-c: var(--mantine-color-orange-filled); }