/* ─── Glasu Table Widget ─────────────────────────────────────────────────── */

.potel-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.potel-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    font-family: inherit;
}

/* ─── Cabeçalho ─────────────────────────────────────────────────────────── */
.potel-table-header {
    background-color: #3d4b8c;
    color: #ffffff;
    font-weight: bold;
    font-size: 15px;
    padding: 12px 16px;
    text-align: left;
}

/* ─── Linhas de Dado ─────────────────────────────────────────────────────── */
.potel-table-row td {
    padding: 10px 16px;
    vertical-align: top;
    border-bottom: 1px solid #d5d5e0;
    font-size: 14px;
    line-height: 1.5;
    transition: background-color 0.15s ease;
}

/* ─── Listras (Zebra) ───────────────────────────────────────────────────── */
.potel-table--striped .potel-table-row:nth-child(odd) td {
    background-color: #f0f0f5;
}
.potel-table--striped .potel-table-row:nth-child(even) td {
    background-color: #e8e8f0;
}

/* ─── Hover ─────────────────────────────────────────────────────────────── */
.potel-table-row:hover td {
    filter: brightness(0.96);
}

/* ─── Label (Coluna Esquerda) ───────────────────────────────────────────── */
.potel-table-label {
    color: #555555;
    font-weight: 500;
    width: 25%;
    white-space: normal;
}

/* ─── Valor (Coluna Direita) ────────────────────────────────────────────── */
.potel-table-value {
    color: #333333;
}

/* ─── Linha de Seção (Subtítulo) ────────────────────────────────────────── */
.potel-table-section td {
    background-color: #e8e8f0 !important;
    color: #c58a3f;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 16px;
}

/* ─── Divisor ───────────────────────────────────────────────────────────── */
.potel-table-divider td {
    padding: 0;
    border-bottom: 2px solid #d5d5e0;
    background: transparent !important;
}

/* ─── Responsivo ────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .potel-table-label {
        width: 40%;
        font-size: 12px;
    }
    .potel-table-value {
        font-size: 12px;
    }
    .potel-table-row td {
        padding: 8px 10px;
    }
}