.esic-rel-wrap {
max-width: 860px;
margin: 0 auto;
font-family: inherit;
} .esic-rel-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 28px;
flex-wrap: wrap;
gap: 12px;
}
.esic-rel-header h2 {
margin: 0 0 4px;
color: #1a4d8f;
font-size: 22px;
}
.esic-rel-header p {
margin: 0;
color: #6b7280;
font-size: 14px;
}
.esic-rel-atualizado {
font-size: 12px;
color: #9ca3af;
margin-top: 4px;
white-space: nowrap;
} .esic-rel-cards {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
margin-bottom: 20px;
}
@media (max-width: 700px) {
.esic-rel-cards { grid-template-columns: repeat(2, 1fr); }
.esic-rel-cards .esic-rel-card:first-child { grid-column: 1 / -1; }
}
.esic-rel-card {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 18px 14px;
text-align: center;
border-top: 4px solid #e5e7eb;
transition: box-shadow .15s;
}
.esic-rel-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.07); }
.esic-rel-card--total     { border-top-color: #1a4d8f; }
.esic-rel-card--recebido  { border-top-color: #2563eb; }
.esic-rel-card--respondido{ border-top-color: #16a34a; }
.esic-rel-card--prorrogado{ border-top-color: #ea580c; }
.esic-rel-card--indeferido{ border-top-color: #dc2626; }
.esic-rel-card__num {
display: block;
font-size: 32px;
font-weight: 700;
color: #111827;
line-height: 1.1;
}
.esic-rel-card--total .esic-rel-card__num { color: #1a4d8f; }
.esic-rel-card__label {
display: block;
font-size: 12px;
color: #6b7280;
margin-top: 6px;
text-transform: uppercase;
letter-spacing: .5px;
} .esic-rel-metricas {
display: flex;
align-items: center;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 24px 32px;
margin-bottom: 20px;
gap: 0;
flex-wrap: wrap;
}
@media (max-width: 600px) {
.esic-rel-metricas { flex-direction: column; padding: 20px; }
.esic-rel-metrica__divider { width: 100%; height: 1px; margin: 16px 0; }
}
.esic-rel-metrica {
display: flex;
align-items: center;
gap: 20px;
flex: 1;
}
.esic-rel-metrica__divider {
width: 1px;
height: 60px;
background: #e5e7eb;
margin: 0 32px;
flex-shrink: 0;
}
.esic-rel-metrica__valor {
display: flex;
align-items: baseline;
gap: 4px;
flex-shrink: 0;
}
.esic-rel-metrica__num {
font-size: 42px;
font-weight: 800;
line-height: 1;
}
.esic-rel-metrica__num.verde    { color: #16a34a; }
.esic-rel-metrica__num.amarelo  { color: #ca8a04; }
.esic-rel-metrica__num.vermelho { color: #dc2626; }
.esic-rel-metrica__num.azul     { color: #1a4d8f; }
.esic-rel-metrica__num.cinza    { color: #9ca3af; }
.esic-rel-metrica__unidade {
font-size: 16px;
color: #6b7280;
font-weight: 500;
}
.esic-rel-metrica__desc strong {
display: block;
font-size: 15px;
color: #111827;
margin-bottom: 4px;
}
.esic-rel-metrica__desc small {
font-size: 12px;
color: #9ca3af;
line-height: 1.4;
} .esic-rel-grafico-wrap {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 24px;
margin-bottom: 20px;
}
.esic-rel-grafico-titulo {
margin: 0 0 20px;
font-size: 16px;
color: #111827;
}
.esic-rel-grafico-titulo span {
font-size: 13px;
color: #9ca3af;
font-weight: 400;
}
.esic-rel-grafico-container {
position: relative;
width: 100%;
} .esic-rel-pizza-wrap {}
.esic-rel-pizza-container {
display: flex;
align-items: center;
gap: 32px;
flex-wrap: wrap;
}
.esic-rel-pizza-container canvas {
max-width: 220px;
flex-shrink: 0;
}
.esic-rel-legenda {
flex: 1;
min-width: 180px;
}
.esic-rel-legenda-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid #f3f4f6;
}
.esic-rel-legenda-item:last-child { border-bottom: none; }
.esic-rel-legenda-cor {
width: 12px;
height: 12px;
border-radius: 3px;
flex-shrink: 0;
}
.esic-rel-legenda-texto {
font-size: 14px;
color: #374151;
display: flex;
gap: 6px;
align-items: baseline;
flex-wrap: wrap;
}
.esic-rel-legenda-texto strong { color: #111827; }
.esic-rel-legenda-texto small  { color: #9ca3af; } .esic-rel-rodape {
font-size: 12px;
color: #9ca3af;
text-align: center;
border-top: 1px solid #f3f4f6;
padding-top: 16px;
line-height: 1.6;
}