body { font-family: "aptos", sans-serif; margin: 30px; }
h2 { color: #003366; text-align: center; margin-bottom: 20px; }
.card{border:solid 1px #ccc; box-shadow:2px 2px 8px #ccc; margin:0px; margin-bottom:15px; font-size:0.9em;}
.card h6 { font-weight: bold; font-size:1em; }
table { font-size:0.8em; }
canvas { margin-top: 40px; }
.tabela-container, .grafico-container { width: 100%; background: #fff; padding: 20px; border-radius:5px; box-shadow: 0 0 10px #ffffffff; margin-bottom: 0px; }
   .legenda-protocolo ul {
    list-style: none;
    padding: 0;
    margin: 10px auto;
    display: flex;
    flex-direction: row; /* horizontal */
    justify-content: center; /* centraliza */
    gap: 20px; /* espaço entre os itens */
}

.legenda-protocolo li {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.legenda-protocolo .cor {
    display: inline-block;
    width: 30px;
    height: 15px;
}

.legenda-protocolo .e1 { background: yellow; }
.legenda-protocolo .e2 { background: orange; }
.legenda-protocolo .e3 { background: red; }
.legenda-protocolo .e4 { background: purple;}