/* Paleta de tu portafolio aplicada a Bulma */
:root {
    --primary: #483D8B;
    --dark: #1C2526;
    --light: #F5F5DC;
    --accent: #CD853F;
}

body {
    background: linear-gradient(135deg, #F8F1E9, #EDE4D9);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, sans-serif;
}

/* Hero morado */
.hero.is-primary {
    background: var(--primary) !important;
    border-bottom: 3px solid var(--dark);
    box-shadow: 0 4px 12px rgba(72, 61, 139, 0.4);
}

.hero.is-primary .title,
.hero.is-primary .subtitle {
    color: var(--light) !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Navbar negro */
.navbar.is-dark {
    background: var(--dark) !important;
    border-bottom: 2px solid var(--dark);
}

.navbar-item {
    color: var(--light) !important;
    font-weight: 500;
}

.navbar-item:hover {
    background: rgba(205, 133, 63, 0.2) !important;
    color: var(--accent) !important;
}

/* Box con bordes */
.box {
    background: var(--light) !important;
    border: 2px solid var(--dark) !important;
    border-left: 5px solid var(--dark) !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 20px rgba(28, 37, 38, 0.15) !important;
}

.box:hover {
    border-left-color: var(--primary) !important;
    transform: translateX(5px);
    transition: all 0.3s;
}

/* Cards */
.card {
    background: var(--light) !important;
    border: 2px solid var(--dark) !important;
    border-left: 5px solid var(--primary) !important;
    border-radius: 12px !important;
}

.card:hover {
    transform: translateY(-5px);
    transition: all 0.3s;
}

/* Titles */
.title {
    color: var(--dark) !important;
    border-bottom: 3px solid var(--primary);
    padding-bottom: 0.5rem;
}

/* Notification personalizada */
.notification.is-primary {
    background: rgba(72, 61, 139, 0.15) !important;
    color: var(--dark) !important;
    border-left: 4px solid var(--primary);
}

/* Tags personalizados */
.tag.is-success {
    background: var(--primary) !important;
    color: white !important;
}

.tag.is-info {
    background: var(--accent) !important;
    color: white !important;
}

/* Botones */
.button.is-light {
    background: var(--light) !important;
    color: var(--dark) !important;
    border: 2px solid var(--dark) !important;
    font-weight: 600;
}

.button.is-light:hover {
    background: var(--accent) !important;
    color: var(--light) !important;
}

.button.is-info {
    background: var(--primary) !important;
    color: var(--light) !important;
}

/* Footer */
.footer.has-background-dark {
    background: var(--dark) !important;
    border-top: 3px solid var(--primary);
}