/* ==========================================================================
   CONVECTA BRAND STYLESHEET
   Colores, tipografía y componentes de identidad visual Convecta
   ========================================================================== */

/* ── Google Fonts (fallback mientras no estén los archivos custom) ────────── */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap');

/* ── @font-face — Montreal (títulos) ─────────────────────────────────────── */
/* Coloca los archivos en /fonts/ con estos nombres exactos                   */
@font-face {
    font-family: 'Montreal';
    src: url('/fonts/Montreal-Regular.woff2') format('woff2'),
         url('/fonts/Montreal-Regular.woff')  format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montreal';
    src: url('/fonts/Montreal-Medium.woff2') format('woff2'),
         url('/fonts/Montreal-Medium.woff')  format('woff');
    font-weight: 500 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montreal';
    src: url('/fonts/Montreal-Bold.woff2') format('woff2'),
         url('/fonts/Montreal-Bold.woff')  format('woff');
    font-weight: 700 800;
    font-style: normal;
    font-display: swap;
}

/* ── @font-face — Rovelle Uno (cuerpo) ───────────────────────────────────── */
@font-face {
    font-family: 'Rovelle Uno';
    src: url('/fonts/RovelleUno-Regular.woff2') format('woff2'),
         url('/fonts/RovelleUno-Regular.woff')  format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Rovelle Uno';
    src: url('/fonts/RovelleUno-Medium.woff2') format('woff2'),
         url('/fonts/RovelleUno-Medium.woff')  format('woff');
    font-weight: 500 600;
    font-style: normal;
    font-display: swap;
}

/* ── Design tokens ───────────────────────────────────────────────────────── */
:root {
    /* Primario: degradado azul #9bb5ee → #5586e5 */
    --cv-primary:       #5586e5;
    --cv-primary-light: #9bb5ee;
    --cv-primary-grad:  linear-gradient(135deg, #9bb5ee 0%, #5586e5 100%);
    --cv-primary-hover: linear-gradient(135deg, #8aa8e4 0%, #4070d4 100%);

    /* Secundario: degradado teal → azul #309a9a → #33abe5 */
    --cv-secondary:      #33abe5;
    --cv-secondary-teal: #309a9a;
    --cv-secondary-grad: linear-gradient(135deg, #309a9a 0%, #33abe5 100%);

    /* Neutros */
    --cv-lavender: #bab4d1;
    --cv-gray:     #aeaeb0;
    --cv-slate:    #76748e;

    /* Tipografía */
    --cv-font-title: 'Montreal', 'Montserrat', system-ui, -apple-system, sans-serif;
    --cv-font-body:  'Rovelle Uno', 'Inter', system-ui, -apple-system, sans-serif;

    /* Sidebar */
    --cv-sidebar-bg:      #0f172a;
    --cv-sidebar-text:    rgba(255, 255, 255, .88);
    --cv-sidebar-muted:   rgba(255, 255, 255, .42);
    --cv-sidebar-divider: rgba(255, 255, 255, .10);
    --cv-sidebar-active-bg: rgba(85, 134, 229, .18);
}

/* ── Tipografía global ───────────────────────────────────────────────────── */
body {
    font-family: var(--cv-font-body);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.card-title,
.page-title,
.fw-bold,
.fw-semibold {
    font-family: var(--cv-font-title);
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.navbar-vertical {
    background-color: var(--cv-sidebar-bg) !important;
    border-right: 1px solid rgba(255, 255, 255, .06) !important;
}

.navbar-vertical .navbar-brand,
.navbar-vertical .navbar-nav .nav-link {
    color: var(--cv-sidebar-text) !important;
}

.navbar-vertical .navbar-nav .nav-link:hover,
.navbar-vertical .navbar-nav .nav-link.active {
    color: #fff !important;
    background-color: var(--cv-sidebar-active-bg) !important;
    border-radius: .4rem;
}

.navbar-vertical .nav-link-icon {
    color: var(--cv-sidebar-muted) !important;
}

.navbar-vertical .nav-link.active .nav-link-icon,
.navbar-vertical .nav-link:hover .nav-link-icon {
    color: var(--cv-primary-light) !important;
}

.navbar-vertical .nav-item {
    position: relative;
}

.navbar-vertical .navbar-nav .nav-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: .3rem;
    bottom: .3rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--cv-primary-grad);
}

/* ── Logo pill (sidebar) ─────────────────────────────────────────────────── */
.cv-logo-pill {
    background: #fff;
    border-radius: .5rem;
    padding: .3rem .55rem;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.cv-sidebar-logo {
    height: 30px;
    width: auto;
    display: block;
}

/* ── Botones ─────────────────────────────────────────────────────────────── */
.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled {
    background:   var(--cv-primary-grad) !important;
    border-color: var(--cv-primary) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus-visible {
    background:   var(--cv-primary-hover) !important;
    border-color: #4070d4 !important;
}

.btn-primary:focus,
.btn-primary:focus-visible {
    box-shadow: 0 0 0 .25rem rgba(85, 134, 229, .35) !important;
}

.btn-secondary {
    background:   var(--cv-secondary-grad) !important;
    border-color: var(--cv-secondary) !important;
    color: #fff !important;
}

/* ── Badges ──────────────────────────────────────────────────────────────── */
.badge.bg-primary {
    background: var(--cv-primary-grad) !important;
}

.badge.bg-secondary {
    background: var(--cv-secondary-grad) !important;
}

/* ── Avatares con color de marca ─────────────────────────────────────────── */
.avatar-cv-primary {
    background: var(--cv-primary-grad) !important;
    color: #fff !important;
}

.avatar-cv-secondary {
    background: var(--cv-secondary-grad) !important;
    color: #fff !important;
}

.avatar-cv-user {
    background: var(--cv-primary-grad) !important;
    color: #fff !important;
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card {
    border: none !important;
    box-shadow: 0 1px 10px rgba(85, 134, 229, .08) !important;
}

.card:hover {
    box-shadow: 0 4px 20px rgba(85, 134, 229, .14) !important;
}

/* ── Auth card ───────────────────────────────────────────────────────────── */
.auth-card {
    border: none !important;
    border-radius: .875rem !important;
    box-shadow: 0 8px 40px rgba(85, 134, 229, .14) !important;
}

/* ── Logo en página de auth ──────────────────────────────────────────────── */
.cv-auth-logo {
    height: 56px;
    width: auto;
    display: block;
    margin: 0 auto;
}

/* ── Breadcrumb ──────────────────────────────────────────────────────────── */
.breadcrumb-item.active {
    color: var(--cv-primary) !important;
    font-weight: 600;
}

/* ── Focus ring ──────────────────────────────────────────────────────────── */
.btn:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 .1rem #fff, 0 0 0 .25rem var(--cv-primary-light) !important;
}

/* ── Icono de acento ─────────────────────────────────────────────────────── */
.icon-accent {
    color: var(--cv-secondary) !important;
}

/* ── Utilidades de gradiente ─────────────────────────────────────────────── */
.bg-gradient-primary {
    background: var(--cv-primary-grad) !important;
}

.bg-gradient-secondary {
    background: var(--cv-secondary-grad) !important;
}

.text-cv-primary   { color: var(--cv-primary) !important; }
.text-cv-secondary { color: var(--cv-secondary) !important; }
.text-cv-slate     { color: var(--cv-slate) !important; }
.text-cv-lavender  { color: var(--cv-lavender) !important; }
.text-cv-gray      { color: var(--cv-gray) !important; }