/*
 * Tema profesional Nirvana — sobrescribe sb-admin.css y Bootstrap navbar-inverse
 * Paleta: navy oscuro (#1a2535) + azul acento (#3b7dd8) + fondo gris claro
 */

/* ── Variables de color ─────────────────────────────────────────── */
:root {
    --nav-bg:       #1a2535;   /* navy principal - navbar y sidebar  */
    --nav-hover:    #243447;   /* navy hover/active                  */
    --nav-border:   #111c2b;   /* borde/separador                    */
    --nav-text:     #a8bbd0;   /* texto secundario en sidebar        */
    --accent:       #3b7dd8;   /* azul acento (botones, badges)      */
    --accent-hover: #2e6bbf;
    --body-bg:      #f0f2f5;   /* fondo del área de contenido        */
    --panel-head:   #2c3e50;   /* encabezados de panel               */
}

/* ── Tipografía ─────────────────────────────────────────────────── */
body,
input, button, select, textarea,
.panel, .table, .navbar, .dropdown-menu {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.panel-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
    letter-spacing: -.01em;
}

/* ── Body ───────────────────────────────────────────────────────── */
body {
    background-color: var(--body-bg);
}

/* ── Área de logo (brand) ───────────────────────────────────────── */
.nvn-brand-area {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 225px;
    height: 51px;
    background-color: var(--nav-bg);
    border-right: 1px solid var(--nav-border);
    padding: 0 16px;
    box-sizing: border-box;
}

.nvn-brand-area .jowMod {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.nvn-brand-area .jowMod img {
    max-height: 36px;
    width: auto;
    max-width: 100%;
}

/* ── Navbar (Bootstrap navbar-inverse override) ─────────────────── */
.navbar-inverse {
    background-color: var(--nav-bg);
    border-color: var(--nav-border);
    border-radius: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,.35);
}

.navbar-inverse .navbar-brand,
.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
    color: #fff;
}

.navbar-inverse .navbar-nav > li > a {
    color: var(--nav-text);
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
    color: #fff;
    background-color: var(--nav-hover);
}

.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
    color: #fff;
    background-color: var(--nav-hover);
}

.navbar-inverse .navbar-toggle {
    border-color: var(--nav-hover);
}

.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
    background-color: var(--nav-hover);
}

.navbar-inverse .navbar-toggle .icon-bar {
    background-color: var(--nav-text);
}

/* ── Top nav (menú usuario arriba a la derecha) ─────────────────── */
.top-nav > li > a {
    color: var(--nav-text);
}

.top-nav > li > a:hover,
.top-nav > li > a:focus,
.top-nav > .open > a,
.top-nav > .open > a:hover,
.top-nav > .open > a:focus {
    color: #fff;
    background-color: var(--nav-hover);
}

/* ── Sidebar ────────────────────────────────────────────────────── */
@media(min-width:768px) {
    .side-nav {
        background-color: var(--nav-bg);
    }

    .side-nav li a:hover,
    .side-nav li a:focus {
        background-color: var(--nav-hover) !important;
        color: #fff;
    }
}

.side-nav > li > ul > li > a {
    color: var(--nav-text);
}

.side-nav > li > ul > li > a:hover {
    color: #fff;
}

/* ── Links del sidebar ──────────────────────────────────────────── */
.navbar-inverse .navbar-nav.side-nav > li > a {
    color: var(--nav-text);
    border-bottom: 1px solid var(--nav-border);
    padding: 11px 15px;
    font-size: 13px;
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease;
}

.navbar-inverse .navbar-nav.side-nav > li > a:hover,
.navbar-inverse .navbar-nav.side-nav > li > a:focus {
    color: #fff;
    background-color: var(--nav-hover);
}

.navbar-inverse .navbar-nav.side-nav > li > a i {
    color: var(--accent);
    margin-right: 7px;
    width: 14px;
    text-align: center;
}

/* ── Badge de campaña en sidebar ────────────────────────────────── */
.nvn-campaign-badge {
    width: 100%;
    background: linear-gradient(135deg, #1d3557 0%, #243447 100%);
    border-bottom: 1px solid var(--nav-border);
    border-left: 3px solid var(--accent);
}

.nvn-campaign-badge > div {
    color: #fff;
    padding: 9px 12px;
    font-size: 12px;
    line-height: 1.5;
}

.nvn-campaign-badge b {
    font-weight: 600;
    font-size: 13px;
    display: block;
    margin-top: 2px;
}

.nvn-campaign-badge small {
    color: var(--nav-text);
    font-size: 11px;
}

.nvn-campaign-badge .fa-building {
    color: var(--accent);
    margin-right: 5px;
}

/* ── Área de contenido ──────────────────────────────────────────── */
#page-wrapper {
    background-color: #fff;
    border-left: 1px solid #dde2e8;
    min-height: calc(100vh - 51px);
}

/* ── Paneles ────────────────────────────────────────────────────── */
.panel {
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    border: 1px solid #dde2e8;
}

.panel-default > .panel-heading {
    background-color: var(--panel-head);
    border-color: var(--panel-head);
    color: #fff;
    border-radius: 5px 5px 0 0;
    font-weight: 600;
    letter-spacing: .02em;
    padding: 10px 15px;
}

.panel-default > .panel-heading .panel-title {
    color: #fff;
    font-size: 14px;
}

/* ── Tablas ─────────────────────────────────────────────────────── */
.table > thead > tr > th {
    background-color: #f7f9fb;
    border-bottom: 2px solid #dde2e8;
    color: #4a5568;
    font-weight: 600;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f9fbfc;
}

.table > tbody > tr:hover {
    background-color: #eef2f7;
}

.table > tbody > tr > td {
    vertical-align: middle;
    font-size: 13px;
}

/* ── Botones ─────────────────────────────────────────────────────── */
.btn {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 13px;
    border-radius: 5px;
    transition: background-color .15s ease, box-shadow .15s ease;
}

.btn-primary {
    background-color: var(--accent);
    border-color: var(--accent);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    box-shadow: 0 2px 6px rgba(59,125,216,.35);
}

/* ── Inputs ─────────────────────────────────────────────────────── */
.form-control {
    border-radius: 5px;
    border-color: #ced4da;
    font-size: 13px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(59,125,216,.15);
    outline: none;
}

/* ── Badges y labels ─────────────────────────────────────────────── */
.badge {
    background-color: var(--accent);
    font-weight: 500;
}

.label-primary {
    background-color: var(--accent);
}

/* ── Spinner de carga (reemplaza el GIF) ────────────────────────── */
.nvn-loading-overlay {
    position: fixed;
    z-index: 9999;
    inset: 0;
    background-color: rgba(255,255,255,.82);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.nvn-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(59,125,216,.15);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: nvn-spin .75s linear infinite;
}

@keyframes nvn-spin {
    to { transform: rotate(360deg); }
}

/* ── Scrollbar sidebar (webkit) ─────────────────────────────────── */
.side-nav::-webkit-scrollbar {
    width: 4px;
}
.side-nav::-webkit-scrollbar-track {
    background: var(--nav-bg);
}
.side-nav::-webkit-scrollbar-thumb {
    background: var(--nav-hover);
    border-radius: 2px;
}

/* ── Dropdown menus ─────────────────────────────────────────────── */
.dropdown-menu {
    border-radius: 6px;
    border: 1px solid #dde2e8;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    padding: 4px 0;
    font-size: 13px;
}

.dropdown-menu > li > a {
    padding: 7px 16px;
    color: #2d3748;
    transition: background-color .1s ease;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: #f0f4ff;
    color: var(--accent);
}

.dropdown-menu > li > a > i {
    width: 16px;
    margin-right: 6px;
    color: var(--accent);
}