/* Reset e Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f5f5f5;
    color: #333;
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Header */
.header {
    background: #2c3e50;
    color: white;
    padding: 1rem 0;
    margin-bottom: 2rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.header h1 {
    text-align: center;
    margin: 0;
}

.nav {
    background: #34495e;
    padding: 0.5rem 0;
}

.nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 0;
    padding: 0;
}

.nav a {
    color: white;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: background 0.3s;
}

.nav a:hover {
    background: #2c3e50;
}

/* Cards */
.card {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Formulários */
.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.form-control {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}

.form-control:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
}

/* Botões */
.btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    font-size: 1rem;
    transition: background 0.3s;
}

.btn-primary {
    background: #3498db;
    color: white;
}

.btn-primary:hover {
    background: #2980b9;
}

.btn-success {
    background: #27ae60;
    color: white;
}

.btn-success:hover {
    background: #219a52;
}

.btn-danger {
    background: #e74c3c;
    color: white;
}

.btn-danger:hover {
    background: #c0392b;
}

.btn-secondary {
    background: #ecf0f1;
    color: #2c3e50;
}

.btn-secondary:hover {
    background: #dde4e8;
}

/* Tabelas */
.table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.table th,
.table td {
    padding: 0.75rem;
    border-bottom: 1px solid #ddd;
    text-align: left;
}

.table th {
    background: #f8f9fa;
    font-weight: bold;
}

.table tbody tr:hover {
    background: #f8f9fa;
}

/* Alertas */
.alert {
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.alert-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-danger {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.alert-info {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

/* Login */
.login-container {
    max-width: 400px;
    margin: 100px auto;
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.login-header {
    text-align: center;
    margin-bottom: 2rem;
    color: #2c3e50;
}

/* Responsivo */
@media (max-width: 768px) {
    .container {
        padding: 10px;
    }
    
    .nav ul {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .table {
        font-size: 0.9rem;
    }
}

/* Filtros de Licença */
.filtro-licenca-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    text-align: center;
}

.filtro-card {
    padding: 0.75rem;
    border-radius: 6px;
    border: 1px solid #ddd;
    text-decoration: none;
    transition: all 0.3s ease;
    display: block;
}

.filtro-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    text-decoration: none;
}

.filtro-card.vencidas {
    background: #fee;
    border-color: #fcc;
}

.filtro-card.vencendo {
    background: #fff3cd;
    border-color: #ffeaa7;
}

.filtro-card.vigentes {
    background: #d1f2eb;
    border-color: #c3e6cb;
}

.filtro-card.sem-data {
    background: #f8f9fa;
    border-color: #dee2e6;
}

.filtro-numero {
    font-size: 1.4rem;
    font-weight: bold;
    display: block;
    margin-bottom: 0.25rem;
}

.filtro-label {
    font-size: 0.85rem;
    color: #666;
}

/* Status de Licença na Tabela */
.licenca-status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.9rem;
    font-weight: 500;
}

/* Formulário de Filtros */
.form-filtros {
    display: grid;
    grid-template-columns: 2fr 1fr auto auto;
    gap: 1rem;
    align-items: end;
}

@media (max-width: 768px) {
    .form-filtros {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .filtro-licenca-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
}

/* Grid de Pagamentos */
.payments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.payment-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 0.9rem 0.95rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    position: relative;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    transition: box-shadow .25s, transform .25s;
}

.payment-card:hover { 
    box-shadow: 0 6px 18px rgba(0,0,0,0.12); 
    transform: translateY(-2px); 
}

.payment-card__top { 
    display:flex; 
    align-items:flex-start; 
    gap:.6rem; 
}

.payment-card__index { 
    background:#3498db; 
    color:#fff; 
    font-weight:bold; 
    padding:.35rem .55rem; 
    border-radius:6px; 
    font-size:.75rem; 
}

.payment-card__title { 
    flex:1; 
    min-width:0; 
}

.payment-card__company { 
    font-weight:600; 
    font-size:.95rem; 
    color:#2c3e50; 
    text-decoration:none; 
    display:inline-block; 
}

.payment-card__company:hover { 
    text-decoration:underline; 
}

.payment-card__cnpj { 
    font-size:.7rem; 
    color:#777; 
    margin-top:2px; 
}

.payment-card__body { 
    display:flex; 
    flex-direction:column; 
    gap:.35rem; 
}

.payment-card__row { 
    display:flex; 
    justify-content:space-between; 
    font-size:.8rem; 
}

.payment-card__row .label { 
    color:#555; 
}

.payment-card__row .value { 
    color:#111; 
    font-weight:500; 
}

.payment-card__row .value.strong { 
    font-size:.9rem; 
    color:#1a5d8f; 
}

.payment-card__row.notes {
    align-items: flex-start;
    gap: .5rem;
}

.payment-card__actions { 
    display:flex; 
    justify-content:flex-end; 
    gap:.5rem; 
    margin-top:.3rem; 
}

.inline-form { 
    margin:0; 
}

.status-badge { 
    padding:.30rem .55rem; 
    border-radius:30px; 
    font-size:.65rem; 
    font-weight:600; 
    letter-spacing:.5px; 
    text-transform:uppercase; 
}

.status-pago { 
    background:#eafaf1; 
    color:#2e7d32; 
    border:1px solid #c8e6c9; 
}

.status-devedor { 
    background:#fdecea; 
    color:#c62828; 
    border:1px solid #f5c6cb; 
}

.status-cancelado { 
    background:#eceff1; 
    color:#455a64; 
    border:1px solid #cfd8dc; 
}

@media (max-width:600px){ 
    .payment-card { 
        padding:.8rem; 
    } 
    .payment-card__row { 
        font-size:.75rem; 
    } 
}