:root {
    --primary: #176b4d;
    --primary-dark: #10513a;
    --surface: #ffffff;
    --background: #f3f7f5;
    --text: #17352a;
    --muted: #66766f;
}

body {
    min-height: 100vh;
    background:
        radial-gradient(circle at top right, rgba(25, 135, 84, .12), transparent 30rem),
        var(--background);
    color: var(--text);
}

.navbar-brand { font-weight: 700; letter-spacing: -.02em; }
.page-shell { max-width: 1040px; }
.hero-title { font-weight: 750; letter-spacing: -.035em; }
.hero-copy { color: var(--muted); max-width: 650px; }

.form-card, .schedule-card {
    border: 0;
    border-radius: 1.25rem;
    box-shadow: 0 18px 50px rgba(23, 53, 42, .09);
}

.step-number {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    margin-right: .55rem;
    border-radius: 50%;
    background: #dff3e9;
    color: var(--primary-dark);
    font-size: .9rem;
    font-weight: 700;
}

.form-label { font-weight: 650; }
.form-control, .form-select { min-height: 3.1rem; border-radius: .75rem; }
.form-control:focus, .form-select:focus {
    border-color: #4ca37d;
    box-shadow: 0 0 0 .22rem rgba(25, 135, 84, .13);
}
.readonly-field { background: #f6f8f7 !important; color: #465850; }
.btn-success { background: var(--primary); border-color: var(--primary); }
.btn-success:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.table thead th { color: #506159; font-size: .78rem; text-transform: uppercase; letter-spacing: .045em; }
.badge-hour { background: #dff3e9; color: var(--primary-dark); }

@media (max-width: 575.98px) {
    .hero-title { font-size: 1.8rem; }
    .form-card .card-body, .schedule-card .card-body { padding: 1.25rem; }
}
