/* ===== TABELA PRETO E BRANCO ===== */

.tabela-container {
    width: 900px;
    max-width: 100%;
    margin: 30px auto;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    background: #fff;
}

/* Cabeçalho */
th {
    background: #000;
    color: #fff;
    padding: 16px 12px;
    text-align: center;
    border: 1px solid #333;
}

/* Células */
td {
    padding: 12px;
    text-align: center;
    color: #000;
    background: #fff;
    border-bottom: 1px solid #ccc;

    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        transform 0.2s ease;
}

/* Linhas alternadas em preto e branco */
tbody tr:nth-child(even) td {
    background: #f2f2f2;
}

/* ===== HOVER COLORIDO ===== */

tbody tr:hover td {
    background: #2c5684;
    color: #fff;
    cursor: pointer;
}

/* ===== RESPONSIVO ===== */

@media (max-width: 900px) {

    .tabela-container {
        width: 95%;
    }

    th,
    td {
        padding: 10px 8px;
        font-size: 14px;
    }
}

@media (max-width: 600px) {

    .tabela-container {
        width: 100%;
        overflow-x: auto;
    }

    table {
        min-width: 700px;
    }

    th,
    td {
        font-size: 13px;
        padding: 10px 8px;
    }
}