body {
    font-family: 'Inter', sans-serif;
}

/* Classe para esconder elementos visualmente, mas mantê-los para leitores de tela */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Controle de visibilidade das "telas" da aplicação */
.view {
    display: none;
}
.active-view {
    display: block;
}

/* Controle de visibilidade das abas do painel admin */
.admin-tab-content {
    display: none;
}
.admin-tab-content.active {
    display: block;
}

/* Estilos do Modal (pop-up) */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 50;
}
.modal-overlay.active {
    display: flex;
}

/* Estilo dos Cards - Equivalente em Tailwind: bg-white rounded-xl shadow-lg p-6 mb-6 */
.card {
    background-color: white;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Estilos da Tabela - Muitas dessas podem ser classes Tailwind nos elementos <th> e <td> */
.table-auto th, .table-auto td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e5e7eb;
}
.table-auto th {
    text-align: left;
    font-weight: 600;
    color: #4b5563;
}

/* Status de Pagamento */
.status-paid {
    color: #16a34a;
    background-color: #dcfce7;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
}
.status-pending {
    color: #d97706;
    background-color: #fef3c7;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Botões das Abas */
.tab-button {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}
.tab-button.active {
    background-color: #3b82f6;
    color: white;
}
.tab-button:not(.active) {
    background-color: #e5e7eb;
    color: #4b5563;
}