:root {
    --bb-bg: #f3f8ff;
    --bb-panel: #ffffff;
    --bb-card: #ffffff;
    --bb-text: #102033;
    --bb-muted: #5f6f85;
    --bb-primary: #0074d9;
    --bb-accent: #17c964;
}

html,
body,
button,
input,
select,
textarea {
    font-family: "Roboto", Arial, sans-serif;
}

body.bb-body {
    background:
        radial-gradient(circle at 5% 5%, rgba(0, 116, 217, 0.12), transparent 30%),
        radial-gradient(circle at 95% 10%, rgba(23, 201, 100, 0.12), transparent 35%),
        linear-gradient(180deg, #f8fbff 0%, #edf4ff 100%);
    color: var(--bb-text);
    font-family: "Roboto", Arial, sans-serif;
    min-height: 100vh;
}

.bb-nav {
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid rgba(0, 116, 217, 0.2);
    backdrop-filter: blur(8px);
}

.navbar-dark .navbar-brand,
.navbar-dark .navbar-nav .nav-link {
    color: #123253;
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: #0a66c2;
}

.bb-brand,
.bb-title,
h1,
h2,
h3,
.h1,
.h2,
.h3 {
    font-family: "Roboto", Arial, sans-serif;
    letter-spacing: 0.03em;
}

.font-orbitron,
.font-poppins {
    font-family: "Roboto", Arial, sans-serif !important;
}

.bb-card {
    background: linear-gradient(160deg, #ffffff, #f8fbff);
    border: 1px solid rgba(0, 116, 217, 0.15);
    color: var(--bb-text);
    box-shadow: 0 10px 26px rgba(18, 50, 83, 0.08);
}

.bb-hero {
    background:
        linear-gradient(120deg, rgba(0, 116, 217, 0.1), rgba(23, 201, 100, 0.08)),
        #ffffff;
    border: 1px solid rgba(0, 116, 217, 0.18);
}

.bb-list-card {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.bb-list-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 26px rgba(0, 116, 217, 0.12);
}

.badge.bb-accent {
    background: var(--bb-accent);
    color: #05220f;
}

.hero-banner {
    min-height: 44vh;
    border-radius: 1rem;
    padding: 2.5rem;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

.hero-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.2));
}

.hero-content {
    position: relative;
    z-index: 1;
}

.template-oscuro {
    background: #eaf1ff;
}

.template-minimalista .bb-card {
    border-radius: 0;
    border-color: rgba(16, 32, 51, 0.16);
}

.template-moderno .bb-card {
    border-radius: 1rem;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

.gallery-grid img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 0.8rem;
}

.text-secondary {
    color: var(--bb-muted) !important;
}

/* Slightly tighter default content rhythm for the new Tailwind-based views */
main > section:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .hero-banner {
        min-height: 32vh;
        padding: 1.5rem;
    }
}