:root {
    --agua: #5fd3c6;
    --agua-dark: #33b5a7;
    --cielo: #7ec8f8;
    --cielo-dark: #4aaee8;
    --gris-bg: #f5f8fb;
    --gris-texto: #334155;
    --blanco: #ffffff;
    --borde: #dbe4ee;
    --success-soft: #d1fae5;
    --primary-soft: #d7f3f0;
    --warning-soft: #fef3c7;
    --danger-soft: #fee2e2;
}

body {
    background-color: var(--gris-bg);
    color: var(--gris-texto);
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.navbar-brand,
.sidebar-title {
    font-weight: 700;
    letter-spacing: .3px;
}

.bg-agua {
    background: linear-gradient(135deg, var(--agua), var(--cielo));
}

.btn-agua {
    background-color: var(--agua-dark);
    border-color: var(--agua-dark);
    color: #fff;
}

.btn-agua:hover {
    background-color: #289d91;
    border-color: #289d91;
    color: #fff;
}

.card-soft {
    border: 1px solid var(--borde);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.card-kpi {
    border: none;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.kpi-title {
    font-size: 0.9rem;
    color: #64748b;
}

.kpi-value {
    font-size: 1.8rem;
    font-weight: 700;
}

.table thead th {
    background-color: #eef8ff;
    border-bottom: 1px solid var(--borde);
}

.badge-soft-success {
    background-color: var(--success-soft);
    color: #065f46;
}

.badge-soft-primary {
    background-color: var(--primary-soft);
    color: #087f7a;
}

.badge-soft-warning {
    background-color: var(--warning-soft);
    color: #92400e;
}

.badge-soft-danger {
    background-color: var(--danger-soft);
    color: #991b1b;
}

.login-wrapper {
    min-height: 100vh;
}

.login-card {
    border: none;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}

.login-left {
    background: linear-gradient(135deg, var(--agua), var(--cielo));
    color: #fff;
    padding: 40px;
}

.login-right {
    background: #fff;
    padding: 40px;
}

.form-label {
    font-weight: 600;
}

.navbar-custom {
    background: linear-gradient(90deg, var(--agua-dark), var(--cielo-dark));
}

.navbar-custom .nav-link,
.navbar-custom .navbar-brand {
    color: #fff !important;
}

.section-title {
    font-weight: 700;
    margin-bottom: 1rem;
}

.alert-soft {
    background-color: #ecfeff;
    border: 1px solid #bae6fd;
    color: #0f766e;
}

.card-header {
    border-bottom: 1px solid var(--borde);
}

.table td,
.table th {
    vertical-align: middle;
}

a {
    text-decoration: none;
}

.badge {
    padding: 0.45rem 0.65rem;
    border-radius: 999px;
}