/* ===== Variables de color ===== */
:root {
    --obs-primary: #5DADE2; /* azul claro */
    --obs-primary-2: #2E86C1; /* azul degradado */
    --obs-accent: #F4CD12; /* amarillo hover */
    --obs-text: #2A2A2A;
    --obs-bg: #f5f6fa;
}

/* ===== Reset / Base ===== */
html, body {
    background-color: var(--obs-bg);
    color: #507ec9;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
}

/* ===== Navbar ===== */
.navbar {
    background: linear-gradient(90deg, #4e78c5, var(--obs-primary-2));
    box-shadow: 0 4px 8px rgba(0,0,0,.05);
}

    .navbar .nav-link {
        color: #fff !important;
        font-weight: 500;
        border-radius: 6px;
        margin: 0 .15rem;
        transition: all .2s ease;
    }

        .navbar .nav-link:hover,
        .navbar .nav-link:focus {
            background-color: var(--obs-accent);
            color: #000 !important;
        }

/* ===== Banner superior ===== */
.page-banner {
    background: linear-gradient(90deg, #4e78c5, var(--obs-primary-2));
    color: #fff;
    padding: 16px 20px;
    border-radius: 12px;
    max-width: 1200px;
    margin: 20px auto;
    box-shadow: 0 4px 10px rgba(0,0,0,.08);
}

.btn-info {
    color: #507ec9;
    background-color: white
}
    .page-banner h2 {
        font-size: 1.25rem;
        margin: 0;
    }

    /* ===== Botones globales ===== */
    .btn-primary,
    .btn-outline-secondary,
    .page-banner  {
        transition: all 0.3s ease-in-out;
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
        border-radius: 0.5rem;
    }

        .btn-primary:hover,
        .btn-outline-secondary:hover,
        .page-banner .btn-outline-light:hover {
            background-color: var(--obs-accent) !important;
            color: #2A2A2A !important;
            border-color: var(--obs-accent) !important;
        }