/**
 * Tema de marca SaaSDragon.
 * Se carga DESPUES de bootstrap.css (layout publico) o de template/css/style.css
 * (layout admin CoreUI) para sobreescribir las variables de color primario
 * de cada framework con la misma paleta navy.
 */
:root {
    --sd-navy-900: #0a1428;
    --sd-navy-800: #101d33;
    --sd-navy-700: #14213d;
    --sd-blue-accent: #3b82f6;
    --sd-blue-accent-rgb: 59, 130, 246;
    --sd-gold: #f0b429;

    /* Bootstrap 5.3 (layout publico) */
    --bs-primary: var(--sd-navy-700);
    --bs-primary-rgb: 20, 33, 61;
    --bs-link-color: var(--sd-blue-accent);
    --bs-link-color-rgb: var(--sd-blue-accent-rgb);
    --bs-link-hover-color: var(--sd-navy-700);

    /* CoreUI (layout admin) */
    --cui-primary: var(--sd-navy-700);
    --cui-primary-rgb: 20, 33, 61;
    --cui-link-color: var(--sd-blue-accent);
    --cui-link-color-rgb: var(--sd-blue-accent-rgb);
}

.btn-primary {
    --bs-btn-bg: var(--sd-navy-700);
    --bs-btn-border-color: var(--sd-navy-700);
    --bs-btn-hover-bg: var(--sd-blue-accent);
    --bs-btn-hover-border-color: var(--sd-blue-accent);
    --bs-btn-active-bg: var(--sd-blue-accent);
    --bs-btn-active-border-color: var(--sd-blue-accent);
}

.sidebar-dark {
    --cui-sidebar-bg: var(--sd-navy-900);
    --cui-sidebar-brand-bg: var(--sd-navy-800);
    --cui-sidebar-nav-link-active-color: #fff;
    --cui-sidebar-nav-link-active-bg: var(--sd-blue-accent);
    --cui-sidebar-nav-link-hover-color: #fff;
    --cui-sidebar-nav-link-hover-bg: rgba(var(--sd-blue-accent-rgb), .25);
    --cui-sidebar-nav-link-active-icon-color: #fff;
}

/* Marca SaaSDragon (monograma + wordmark), usada en ambos layouts */
.sd-brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
}

.sd-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: .5rem;
    background: linear-gradient(135deg, var(--sd-blue-accent), var(--sd-navy-700));
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .02em;
    flex-shrink: 0;
}

.sd-brand-word {
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -.01em;
}

.sd-brand-word .sd-brand-word-accent {
    color: var(--sd-blue-accent);
}

.navbar-dark .sd-brand-word,
.sidebar-dark .sd-brand-word {
    color: #fff;
}

/* Hero de la landing publica */
.sd-hero {
    background: linear-gradient(135deg, var(--sd-navy-900), var(--sd-navy-700));
    color: #fff;
}

.sd-hero .text-body-secondary,
.sd-hero p {
    color: rgba(255, 255, 255, .75);
}

/* Mockup visual del panel (sin capturas reales), usado en el hero */
.sd-mockup {
    background: #fff;
    border-radius: .75rem;
    overflow: hidden;
}

.sd-mockup-bar {
    background: #e9ecef;
    padding: .6rem .85rem;
    display: flex;
    gap: .35rem;
}

.sd-mockup-bar span {
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: #ced4da;
}

.sd-mockup-body {
    display: flex;
    min-height: 230px;
}

.sd-mockup-sidebar {
    width: 30%;
    background: var(--sd-navy-900);
    padding: 1rem .6rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.sd-mockup-sidebar-item {
    height: .55rem;
    border-radius: .2rem;
    background: rgba(255, 255, 255, .15);
}

.sd-mockup-sidebar-item.active {
    background: var(--sd-blue-accent);
}

.sd-mockup-content {
    flex: 1;
    padding: 1.1rem;
    background: #f5f7fb;
}

.sd-mockup-stats {
    display: flex;
    gap: .6rem;
    margin-bottom: 1rem;
}

.sd-mockup-stat {
    flex: 1;
    height: 3rem;
    border-radius: .5rem;
    opacity: .92;
}

.sd-mockup-lines span {
    display: block;
    height: .5rem;
    border-radius: .25rem;
    background: #dee2e6;
    margin-bottom: .55rem;
}

.sd-mockup-lines span:nth-child(2) { width: 85%; }
.sd-mockup-lines span:nth-child(3) { width: 60%; }