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

body {
    background: #ADD8E6;
    font-family: "Saira", sans-serif;
    margin: 0;
}

.page-title {
    font-family: "Saira", sans-serif;
    font-size: 26px;
    font-weight: 700;
    text-align: center;
    color: #012c57; /* azul principal */
    margin: 25px 0 10px;
    padding-bottom: 10px;
    border-bottom: 3px solid #003366; /* azul claro */
}

/* LAYOUT */
.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 25px;
    gap: 25px;
}

/* CARD */
.card {
    background: #ffffff;
    padding: 25px;
    border-radius: 14px;
    color: #222;
    box-shadow: 0 3px 10px rgba(0,0,0,0.12);
    animation: fadeIn 0.4s ease;
    transition: 0.2s;
}

.card h2 {
    text-align: center;
    margin-top: 0;
    font-size: 22px;
    letter-spacing: .5px;
    color: #012c57;
}

/* LISTAGEM GRANDE */
.listagem {
    grid-row: span 2;
}

/* TABELAS */
table {
    width: 100%;
    margin-top: 10px;
    border-collapse: collapse;
    font-family: "Saira";
}

th {
    background: #012c57;
    color: white;
    padding: 10px;
    border-bottom: 2px solid #0d3f6b;
    font-weight: 600;
}

td {
    padding: 8px;
    border-bottom: 1px solid #ccc;
}

/* QUANTIDADES */
.quantidade table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.quantidade td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    font-size: 16px;
}

.quantidade td:nth-child(1) {
    font-weight: bold;
    color: #012c57;
}

/* GRÁFICO */
#graficoAssinatura {
    width: 100%;
    height: 320px;
}

/* TABELA DE ASSINATURAS */
#tabelaAssinaturas {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
  font-family: "Saira";
}

#tabelaAssinaturas th,
#tabelaAssinaturas td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}

#tabelaAssinaturas th {
  background: #012c57;
  color: #fff;
  font-weight: bold;
}

#tabelaAssinaturas tr:nth-child(even) {
  background: #f9f9f9;
}

/* Animação */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* RESPONSIVIDADE */
@media (max-width: 800px) {
    .container {
        grid-template-columns: 1fr;
    }
}