@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

.arq-tabela-wrap {
    font-family: 'Roboto', sans-serif;
    max-width: 1440px;
    margin: 0 auto;
    padding: 40px 0;
    color: #21272A;
    box-sizing: border-box;
}

.arq-tabela-wrap *,
.arq-tabela-wrap *::before,
.arq-tabela-wrap *::after { box-sizing: border-box; }

/* topo com a busca (mesma da página de arquitetos) */
.arq-tabela__top {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 24px;
}

/* scroll horizontal em telas médias antes de virar cards */
.arq-tabela__scroll { overflow-x: auto; }

/* ── TABELA ── */
.arq-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    color: #21272A;
}

.arq-tabela__th {
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: #21272A;
    background: #f2f4f8;
    padding: 14px 16px;
    border-bottom: 1px solid #dde1e6;
    white-space: nowrap;
}

.arq-tabela td {
    padding: 14px 16px;
    border-bottom: 1px solid #e4e7eb;
    vertical-align: top;
    line-height: 1.4;
}

.arq-tabela tbody tr:hover { background: #f8f9fb; }

.arq-tabela__num { color: #697077; }

.arq-tabela__name {
    color: #21272A;
    font-weight: 500;
    text-decoration: none;
}
.arq-tabela__name:hover { text-decoration: underline; }

/* ── BOTÃO "VER PERFIL" ──
   !important nas propriedades-chave para que nenhum estilo de <a>/botão
   do tema ou Elementor consiga sobrescrever. */
.arq-tabela__acao { white-space: nowrap; text-align: right; }

.arq-tabela__btn {
    display: inline-flex !important;
    align-items: center;
    gap: 16px;
    padding: 8px 14px !important;
    font-family: inherit;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: #21272A !important;
    text-decoration: none !important;
    background: #fff !important;
    border: 1px solid #c1c7cd !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    white-space: nowrap;
    transition: border-color .15s, background .15s;
}

.arq-tabela__btn:hover,
.arq-tabela__btn:focus {
    color: #21272A !important;
    background: #f2f4f8 !important;
    border-color: #21272A !important;
}

.arq-tabela__btn-arrow { font-size: 15px !important; line-height: 1; }

/* ── ORDENAÇÃO ── */
.arq-tabela__sort {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    font: inherit;
    font-weight: 600;
    color: inherit;
    cursor: pointer;
}

.arq-tabela__arrow {
    font-size: 12px;
    color: #a2a9b0;
    line-height: 1;
}

.arq-tabela__arrow::before { content: '\2195'; } /* ↕ */
.arq-tabela__th[aria-sort="ascending"]  .arq-tabela__arrow::before { content: '\2191'; } /* ↑ */
.arq-tabela__th[aria-sort="descending"] .arq-tabela__arrow::before { content: '\2193'; } /* ↓ */

.arq-tabela__th[aria-sort="ascending"],
.arq-tabela__th[aria-sort="descending"] { background: #e9edf2; }

.arq-tabela__th[aria-sort="ascending"]  .arq-tabela__arrow,
.arq-tabela__th[aria-sort="descending"] .arq-tabela__arrow { color: #21272A; }

/* ── MOBILE: vira cards ── */
@media (max-width: 768px) {
    .arq-tabela-wrap { padding: 32px 20px; }

    .arq-tabela__scroll { overflow: visible; }

    .arq-tabela thead { display: none; }

    .arq-tabela,
    .arq-tabela tbody,
    .arq-tabela tr,
    .arq-tabela td { display: block; width: 100%; }

    .arq-tabela tr {
        border: 1px solid #dde1e6;
        border-radius: 6px;
        padding: 4px 14px;
        margin-bottom: 14px;
    }

    .arq-tabela td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        padding: 9px 0;
        border-bottom: 1px solid #eef1f4;
        text-align: right;
    }

    .arq-tabela tr td:last-child { border-bottom: none; }

    .arq-tabela td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: 12px;
        font-weight: 600;
        color: #697077;
        text-align: left;
    }

    .arq-tabela__name { text-align: right; }

    /* botão "Ver perfil" ocupa a largura do card */
    .arq-tabela__acao { padding-top: 12px; }
    .arq-tabela__acao::before { display: none; }
    .arq-tabela__btn { width: 100%; justify-content: center; }
}