/* ============================================================
   Áurea Visión — Tema de marca (overlay) · Sistema de diseño
   Azul corporativo #1E2346 (dominante 70%) · Dorado #B8893D (acento 10-15%)
   Fondo #F7F7F5 · Tarjetas #FFFFFF · Texto #1F2937 / #6B7280
   Estados: éxito #22C55E, info #3B82F6, warn #F59E0B, error #EF4444, inactivo #9CA3AF
   Radio único 16px (10px en botones/inputs) · Espaciado múltiplos de 8.
   Se carga AL FINAL de cada layout para ganar en cascada. Reversible.
   ============================================================ */

:root {
    /* ===== SISTEMA DE DISEÑO ÁUREA VISIÓN ===== */
    /* --- Azul corporativo (principal, dominante ~70%) --- */
    --av-marino:     #1E2346;
    --av-marino-osc: #161B36;  /* derivado más profundo para gradientes */
    /* --- Dorado corporativo (acento ~10-15%) --- */
    --av-oro:        #B8893D;
    --av-oro-claro:  #CBA05A;  /* highlight */
    --av-oro-osc:    #9E742F;  /* sombra */
    /* --- Fondos --- */
    --av-fondo:      #F7F7F5;  /* fondo general del sistema */
    --av-tarjeta:    #FFFFFF;  /* tarjetas / contenedores */
    /* --- Texto --- */
    --av-texto:      #1F2937;  /* texto principal */
    --av-gris:       #6B7280;  /* texto secundario */
    /* --- Bordes / líneas --- */
    --av-linea:      #D1D5DB;  /* borde de inputs/terciario */
    --av-linea-2:    #E5E7EB;  /* líneas suaves */
    --av-crema:      #FFFFFF;  /* (compat) headings -> blanco/tarjeta */
    --av-crema-2:    #F3F4F6;  /* hover de filas/items */
    /* --- Estados --- */
    --av-exito:      #22C55E;
    --av-info:       #3B82F6;
    --av-warning:    #F59E0B;
    --av-error:      #EF4444;
    --av-inactivo:   #9CA3AF;
    /* --- Formas: UN solo radio (16px) + control fino --- */
    --av-radio:      16px;     /* tarjetas, contenedores */
    --av-radio-sm:   10px;     /* botones, inputs */
    --av-radio-pill: 10px;     /* (unificado: ya no cápsula extrema) */
    /* --- Sombra única --- */
    --av-sombra:     0 4px 12px rgba(0,0,0,.08);
    --av-sombra-sm:  0 4px 12px rgba(0,0,0,.08);
    /* --- Espaciado base (múltiplos de 8) --- */
    --sp-xs: 8px; --sp-s: 16px; --sp-m: 24px; --sp-l: 32px; --sp-xl: 48px;
    --av-serif:      Georgia, 'Times New Roman', serif;
    --av-arco:       linear-gradient(90deg, var(--av-oro-osc) 0%, var(--av-oro-claro) 50%, var(--av-oro-osc) 100%);
}

/* Fondo general del sistema */
body, .page-container, .content { background-color: var(--av-fondo) !important; }

/* ---------- Tipografía ---------- */
/* Solo familia/espaciado aquí; el COLOR se define por contexto más abajo
   para no romper el contraste de títulos sobre fondos oscuros. */
h1, h2, h3, .panel-title, .card-title,
.page-title, .header-title {
    font-family: var(--av-serif);
    letter-spacing: .2px;
}
/* Títulos sueltos sobre fondo claro: marino legible */
h1, h2, h3 { color: var(--av-marino); }

a { color: var(--av-oro); }
a:hover, a:focus { color: var(--av-oro-claro); }

/* ---------- Botones: tamaño y radio ÚNICOS (alto 44px, radio 10px) ---------- */
.btn {
    border-radius: var(--av-radio-sm) !important;
    min-height: 44px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    letter-spacing: .2px;
    border-width: 1px;
    transition: all .18s ease;
}
.btn + .btn { margin-left: 12px; }   /* separación entre botones */
.btn-xs, .btn-sm { min-height: 36px; padding: 0 14px; }

/* PRIMARIO: marino */
.btn-primary,
button.btn-primary,
.btn.btn-cons.btn-primary {
    background: var(--av-marino) !important;
    border-color: var(--av-marino) !important;
    color: #fff !important;
    box-shadow: none;
}
.btn-primary:hover, .btn-primary:focus,
button.btn-primary:hover {
    background: var(--av-marino-osc) !important;
    border-color: var(--av-marino-osc) !important;
    color: #fff !important;
}
/* SECUNDARIO / destacado: oro */
.btn-success, .btn-warning,
.btn.btn-cons.btn-success {
    background: var(--av-oro) !important;
    border-color: var(--av-oro) !important;
    color: #fff !important;
}
.btn-success:hover, .btn-warning:hover {
    background: var(--av-oro-osc) !important;
    border-color: var(--av-oro-osc) !important;
    color: #fff !important;
}
/* TERCIARIO: blanco con borde */
.btn-default {
    border: 1px solid var(--av-linea) !important;
    color: var(--av-marino) !important;
    background: #fff !important;
}
.btn-default:hover, .btn-default:focus {
    background: var(--av-crema-2) !important;
    border-color: var(--av-oro) !important;
    color: var(--av-marino) !important;
}
.btn-info, .btn-secondary {
    background: var(--av-marino) !important;
    border-color: var(--av-marino) !important;
    color: #fff !important;
}
.btn-info:hover, .btn-secondary:hover {
    background: var(--av-marino-osc) !important;
    border-color: var(--av-marino-osc) !important;
}
/* Acción "Responder" (pendiente) destacada en oro */
.btn.btn-danger,
button.btn-danger {
    background: var(--av-oro) !important;
    border-color: var(--av-oro) !important;
    color: #fff !important;
}
.btn.btn-danger:hover,
button.btn-danger:hover {
    background: var(--av-oro-osc) !important;
    border-color: var(--av-oro-osc) !important;
}

/* ---------- Tarjetas / paneles ---------- */
.card, .panel, .widget, .tile {
    border-radius: var(--av-radio);
    border: 1px solid var(--av-linea);
    box-shadow: var(--av-sombra);
    background: #fff;
}
.panel-heading, .card-header {
    border-top-left-radius: var(--av-radio);
    border-top-right-radius: var(--av-radio);
    background: var(--av-crema);
    border-bottom: 1px solid var(--av-linea);
    color: var(--av-marino);
    font-family: var(--av-serif);
}
/* Igualar especificidad de desktop.css (.panel .panel-heading ...) para
   garantizar fondo claro + título marino legible y SIN opacidad reducida. */
.panel .panel-heading,
.panel > .panel-heading {
    background: var(--av-crema) !important;
    border-bottom: 1px solid var(--av-linea) !important;
}
.panel .panel-heading .panel-title,
.panel .panel-heading .panel-title > a,
.panel-heading .panel-title,
.card-header .card-title {
    color: var(--av-marino) !important;
    font-family: var(--av-serif) !important;
    filter: none !important;       /* desktop.css aplicaba opacity=40 */
    opacity: 1 !important;
    text-transform: none !important;
    font-size: 15px !important;
}
/* Si el heading SÍ es de color oscuro (variantes con fondo), texto blanco */
.panel-primary > .panel-heading,
.panel-inverse > .panel-heading,
.panel-heading.bg-primary,
.panel-heading.bg-dark,
.panel-heading[class*="bg-master"] {
    background: var(--av-marino) !important;
    color: #fff !important;
}
.panel-primary > .panel-heading .panel-title,
.panel-inverse > .panel-heading .panel-title,
.panel-heading.bg-primary .panel-title,
.panel-heading.bg-dark .panel-title,
.panel-heading[class*="bg-master"] .panel-title {
    color: #fff !important;
}

/* ---------- Tablas ---------- */
table.table,
.table {
    border-radius: var(--av-radio-sm);
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
}
.table > thead > tr > th,
table thead th {
    background: var(--av-marino) !important;
    color: #fff !important;
    font-family: var(--av-serif);
    font-weight: 600;
    border-bottom: none;
    vertical-align: middle;
    height: 52px;
}
.table > tbody > tr > td,
table tbody td {
    border-top: 1px solid var(--av-linea-2);
    color: var(--av-texto);
    vertical-align: middle;
    height: 48px;
}
.table-striped > tbody > tr:nth-of-type(odd),
table.table-striped tbody tr:nth-child(odd) {
    background-color: #FAFAFA;
}
.table-hover > tbody > tr:hover,
table.table-hover tbody tr:hover {
    background-color: #F3F4F6;
}
.table-bordered,
.table-bordered > tbody > tr > td,
.table-bordered > thead > tr > th {
    border-color: var(--av-linea);
}

/* DataTables: controles y paginación */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--av-oro);
    border-color: var(--av-oro);
    color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--av-crema);
    border-color: var(--av-linea);
    color: var(--av-marino) !important;
}

/* ---------- Formularios ---------- */
.form-control {
    border-radius: var(--av-radio-sm);
    border: 1px solid var(--av-linea);
    color: var(--av-marino);
}
/* Foco de marca (oro) en TODOS los campos, no solo .form-control.
   Elimina el halo/outline azul nativo del navegador y de Bootstrap. */
.form-control:focus,
input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus,
.select2-container--focus .select2-selection,
.note-editable:focus {
    border-color: var(--av-oro) !important;
    box-shadow: 0 0 0 .15rem rgba(184,137,61,.25) !important;
    outline: none !important;
}
/* Outline accesible (foco por teclado) también en oro, nunca azul */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--av-oro) !important;
    outline-offset: 1px;
}
/* Color de "caret" (cursor de texto) en marino */
input, textarea { caret-color: var(--av-marino); }

/* ---------- Badges / labels / estados ---------- */
.label-primary, .badge-primary { background-color: var(--av-marino); }
.label-success, .badge-success { background-color: var(--av-exito); }
.label-info,    .badge-info    { background-color: var(--av-info); }
.label-warning, .badge-warning { background-color: var(--av-warning); }
.label-danger,  .badge-danger  { background-color: var(--av-error); }
.label-default, .badge-default { background-color: var(--av-inactivo); }
.text-success { color: var(--av-exito) !important; }
.text-info    { color: var(--av-info) !important; }
.text-warning { color: var(--av-warning) !important; }
.text-danger  { color: var(--av-error) !important; }
.text-muted   { color: var(--av-gris) !important; }

/* ---------- Navegación / sidebar acentos ---------- */
.sidebar-menu .active > a,
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover {
    background-color: var(--av-marino);
    color: #fff;
    border-radius: var(--av-radio-sm);
}
.page-sidebar .menu-items > li.active > a:before,
.nav > li.active > a {
    border-left-color: var(--av-oro);
}

/* ---------- Encabezados de página / acentos finos ---------- */
.text-primary { color: var(--av-oro) !important; }
.bg-primary   { background-color: var(--av-marino) !important; color:#fff; }
hr { border-top: 1px solid var(--av-linea); }

/* Barra superior / progress de marca */
.progress-bar,
.progress-bar-primary { background-color: var(--av-oro); }

/* ============================================================
   REFINAMIENTOS BASADOS EN EL LOGOTIPO
   (arco dorado, iconos oro, sidebar marino exacto)
   ============================================================ */

/* Sidebar: marino exacto del logo */
.page-sidebar, .sidebar, .menu-pin .page-sidebar,
.page-container .page-sidebar {
    background: var(--av-marino) !important;
}

/* Iconos del menú principal (dashboard home) en ORO de acento.
   En el portal estos iconos eran azules; el remapeo los puso marino
   (poco visibles sobre blanco). Los llevamos a oro = vistosos y de marca. */
.tile-menu-item i,
.tile-menu-item .fa,
.menus-home a i, .menus-home i,
.jumbotron i.fa, .home-icon i,
a[href] > i.fa-3x, a[href] > i.fa-4x,
.tile i.fa, .dashboard-tile i {
    color: var(--av-oro) !important;
}
/* Hover del tile: realce dorado */
.tile-menu-item:hover i,
.tile-menu-item:hover .fa { color: var(--av-oro-claro) !important; }

/* Detalle "arco" dorado: línea superior degradada en headings de panel,
   evocando el arco del logotipo. */
.panel .panel-heading,
.panel > .panel-heading {
    position: relative;
}
.panel .panel-heading::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: var(--av-arco);
    opacity: .9;
}

/* Título de página: serif marino (elegante) */
.page-title {
    font-family: var(--av-serif);
    color: var(--av-marino);
}
/* Breadcrumb: sans-serif limpio (navegación, NO serif).
   Sobreescribe la Georgia que aplicaba antes y la Montserrat de Pages. */
.breadcrumb,
.header .breadcrumb,
.breadcrumb .breadcrumb-item,
.breadcrumb .breadcrumb-item > a {
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-weight: 500;
    letter-spacing: .3px;
}
/* Item actual del breadcrumb en marino; los previos (enlaces) en gris */
.breadcrumb .breadcrumb-item > a { color: var(--av-gris) !important; }
.breadcrumb .breadcrumb-item.active { color: var(--av-marino) !important; }

/* Bordes/realces redondeados coherentes (elegante sutil) */
.panel, .card, .widget, .tile,
.modal-content, .dropdown-menu, .well {
    border-radius: var(--av-radio) !important;
    border-color: var(--av-linea);
}
.modal-header {
    background: var(--av-crema);
    border-bottom: 1px solid var(--av-linea);
    border-top-left-radius: var(--av-radio);
    border-top-right-radius: var(--av-radio);
}
.modal-header .modal-title {
    color: var(--av-marino) !important;
    font-family: var(--av-serif) !important;
}

/* Selección de texto en oro tenue */
::selection { background: rgba(184,137,61,.25); color: var(--av-marino); }

/* Scrollbar fino con tono de marca (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--av-oro-osc); border-radius: 20px; }
::-webkit-scrollbar-track { background: var(--av-crema-2); }

/* ============================================================
   DATEPICKER (bootstrap-datepicker)
   Esquinas redondeadas + colores de marca (azul -> marino/oro)
   ============================================================ */
.datepicker.dropdown-menu,
.datepicker {
    border-radius: var(--av-radio) !important;
    border: 1px solid var(--av-linea) !important;
    box-shadow: var(--av-sombra) !important;
    padding: 8px !important;
    overflow: hidden;
}
.datepicker table { border-radius: var(--av-radio-sm); overflow: hidden; }
/* Encabezado mes (switch) y días de semana: limpio, sin bloques oscuros */
.datepicker table tr th.datepicker-switch {
    font-family: var(--av-serif);
    color: var(--av-marino) !important;
    background: transparent !important;
}
.datepicker table tr th.dow {
    color: var(--av-gris) !important;
    background: transparent !important;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
}
.datepicker table tr th.prev,
.datepicker table tr th.next {
    color: var(--av-marino) !important;
    background: transparent !important;
}
/* Solo las CELDAS de día (td) son redondeadas, no los th de encabezado */
.datepicker table tr td,
.datepicker table tr td span { border-radius: 8px !important; }
/* Día seleccionado / activo: marino (era azul #428bca) */
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.active,
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover {
    background-color: var(--av-marino) !important;
    background-image: none !important;
    border-color: var(--av-marino-osc) !important;
    color: #fff !important;
    text-shadow: none !important;
}
/* Hoy / rango: oro suave */
.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.range-end,
.datepicker table tr td.range-start {
    background-color: var(--av-oro) !important;
    background-image: none !important;
    border-color: var(--av-oro-osc) !important;
    color: #fff !important;
}
.datepicker table tr td.range {
    background-color: var(--av-crema-2) !important;
    color: var(--av-marino) !important;
}
.datepicker table tr td:hover,
.datepicker table tr td span:hover {
    background: rgba(184,137,61,.15) !important;
    color: var(--av-marino) !important;
}
.datepicker .datepicker-switch:hover,
.datepicker .prev:hover, .datepicker .next:hover {
    background: var(--av-crema-2) !important;
    color: var(--av-oro) !important;
    border-radius: 8px;
}

/* ============================================================
   DROPDOWNS (bootstrap-select / .dropdown-menu)
   Borde coherente + esquinas alineadas con el botón
   ============================================================ */
.bootstrap-select .dropdown-toggle,
.bootstrap-select > .btn {
    border: 1px solid var(--av-linea) !important;
    border-radius: var(--av-radio-sm) !important;
    color: var(--av-marino) !important;
}
.bootstrap-select .dropdown-menu,
.dropdown-menu {
    border: 1px solid var(--av-linea) !important;
    border-radius: var(--av-radio-sm) !important;
    box-shadow: var(--av-sombra) !important;
    overflow: hidden;
    padding: 4px 0;
}
.bootstrap-select .dropdown-menu li a,
.dropdown-menu > li > a {
    color: var(--av-marino);
    padding: 7px 16px;
}
.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu li.selected a,
.dropdown-menu > li > a:hover,
.dropdown-menu > .active > a {
    background: var(--av-crema-2) !important;
    color: var(--av-marino) !important;
}
.bootstrap-select .dropdown-menu li.selected a {
    border-left: 3px solid var(--av-oro);
}
/* nice-select (otro plugin de select del portal) */
.nice-select { border: 1px solid var(--av-linea) !important; border-radius: var(--av-radio-sm) !important; }
.nice-select .list { border-radius: var(--av-radio-sm) !important; border: 1px solid var(--av-linea) !important; box-shadow: var(--av-sombra) !important; }
.nice-select .option:hover, .nice-select .option.selected { background: var(--av-crema-2) !important; }

/* ============================================================
   HEADER PRINCIPAL
   Más alto (90px) para que el logotipo (80px) quepa con holgura.
   ============================================================ */
.header {
    height: 90px !important;
    background: #fff !important;
    border-bottom: 1px solid var(--av-linea) !important;
    box-shadow: 0 2px 12px -8px rgba(27,35,61,.25);
}
.header .header-inner { height: 90px !important; }
/* La marca: centrar verticalmente el logo dentro del header alto */
.header .brand,
.header .brand.inline {
    height: 90px !important;
    display: -webkit-flex !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center;
}
.header .brand > img,
.header .brand.inline > img {
    max-height: 78px !important;   /* cabe holgado dentro de 90px */
    height: auto !important;
    width: auto !important;
    object-fit: contain;
}
/* Empujar el contenido y el sidebar para compensar el header más alto
   (la plantilla los posiciona asumiendo 60px). */
.page-container .page-content-wrapper .content {
    padding-top: 90px !important;
}
.page-sidebar {
    padding-top: 90px !important;
}
/* Breadcrumb/sub-header: alinear bajo el header nuevo */
.header .sm-action-bar,
.secondary-header { top: 90px !important; }

/* ============================================================
   PANTALLA DE REPORTES (rediseño según design.jpeg)
   ============================================================ */
.av-reports { padding: 10px 6px 30px; }

/* Encabezado */
.av-rep-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    flex-wrap: wrap; gap: 16px; margin-bottom: 26px;
}
.av-rep-title {
    font-family: var(--av-serif); color: var(--av-marino);
    font-size: 34px; margin: 0; font-weight: 700;
}
.av-rep-sub { color: var(--av-gris); margin: 4px 0 0; font-size: 15px; }
.av-rep-search { position: relative; min-width: 280px; }
.av-rep-search input {
    width: 100%; height: 44px; padding: 0 42px 0 18px;
    border: 1px solid var(--av-linea); border-radius: var(--av-radio-sm);
    background: #fff; color: var(--av-texto); font-size: 14px; outline: none;
}
.av-rep-search input:focus { border-color: var(--av-oro); box-shadow: 0 0 0 .15rem rgba(184,137,61,.18); }
.av-rep-search i { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--av-oro); }

/* KPI / Stat-cards: alto 120, padding 24, radio 16, sombra spec */
.av-stats { margin-bottom: var(--sp-m); }
.av-stat-card {
    display: flex; align-items: center; gap: var(--sp-s);
    background: var(--av-tarjeta); border: 1px solid var(--av-linea-2);
    border-radius: var(--av-radio); padding: var(--sp-m);
    box-shadow: var(--av-sombra); margin-bottom: var(--sp-m); height: 120px;
}
.av-stat-icon {
    width: 56px; height: 56px; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 22px; flex: 0 0 56px;
}
.av-icon-marino { background: var(--av-marino); }
.av-icon-verde  { background: var(--av-exito); }
.av-icon-oro    { background: var(--av-oro); }
.av-icon-azul   { background: var(--av-info); }
.av-stat-num { font-family: var(--av-serif); font-size: 26px; font-weight: 700; color: var(--av-marino); line-height: 1.1; }
.av-stat-label { color: var(--av-gris); font-size: 13px; }

/* Título de sección */
.av-cat-title {
    font-family: var(--av-serif); color: var(--av-marino);
    font-size: 20px; margin: 18px 0 16px; font-weight: 700;
}

/* Tarjetas de catálogo */
.av-cards .av-card {
    display: block; position: relative;
    background: #fff; border: 1px solid var(--av-linea);
    border-radius: var(--av-radio); padding: 28px 24px 46px;
    text-align: center; text-decoration: none;
    box-shadow: var(--av-sombra-sm); margin-bottom: 24px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    min-height: 200px;
}
.av-cards .av-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--av-sombra);
    border-color: var(--av-oro);
}
.av-card-icon {
    width: 70px; height: 70px; border-radius: 50%;
    background: var(--av-crema-2);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 28px; color: var(--av-oro); margin-bottom: 16px;
    -webkit-text-fill-color: var(--av-oro);
}
.av-card-title {
    font-family: var(--av-serif); color: var(--av-marino);
    font-size: 18px; margin: 0 0 8px; font-weight: 700;
}
.av-card-desc { color: var(--av-gris); font-size: 13.5px; line-height: 1.5; margin: 0; }
.av-card-arrow {
    position: absolute; left: 50%; transform: translateX(-50%);
    bottom: 18px; color: var(--av-oro); font-size: 15px;
    transition: transform .18s ease;
}
.av-cards .av-card:hover .av-card-arrow { transform: translateX(-50%) translateX(4px); }

/* ============================================================
   MENÚ LATERAL EXPANDIDO (según design.jpeg)
   Fondo marino, item activo dorado, textos legibles.
   ============================================================ */
body.menu-pin .page-sidebar,
.page-sidebar { background: var(--av-marino) !important; }
/* Ancho del sidebar: 260px (spec).
   La plantilla Pages desplaza el contenido con padding-left en .content
   (no en .page-container). Solo ajustamos ESE valor a 260px para que
   coincida con el ancho del sidebar — sin duplicar el margen. */
body.menu-pin .page-sidebar { width: 260px !important; }
body.menu-pin .page-container { padding-left: 0 !important; }
body.menu-pin .page-container .page-content-wrapper .content {
    padding-left: 260px !important;
}
body.menu-pin .page-container .page-content-wrapper .footer { left: 260px !important; }

/* Lista compacta */
.page-sidebar .menu-items { padding-top: 6px; }

/* CADA ITEM = una sola fila compacta.
   El markup es: <li> <a>Texto</a> <span.icon-thumbnail><i/></span> </li>
   (texto e icono son hermanos). Convertimos el <li> en la "fila" con flex,
   ponemos el icono primero (order) y el texto después. */
.page-sidebar .menu-items > li {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 2px 12px !important;
    padding: 0 14px 0 22px !important;   /* más separación del borde izquierdo */
    border-radius: var(--av-radio-sm) !important;
    overflow: hidden;
    transition: background .15s ease;
}
/* Texto del item */
.page-sidebar .menu-items > li > a {
    order: 2;
    flex: 0 1 auto;
    color: #D8DCE6 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 44px !important;
    line-height: 44px !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    font-weight: 500;
    font-size: 14px;
    white-space: nowrap;
}
/* Icono a la IZQUIERDA: ancho ajustado + separación del texto */
.page-sidebar .menu-items > li > .icon-thumbnail {
    order: 1;
    position: static !important;
    width: 20px !important;
    height: 44px !important;
    min-width: 20px !important;
    margin: 0 12px 0 0 !important;   /* gap 12px (spec) icono-texto */
    padding: 0 !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: normal !important;
    color: #C9CCDB !important;
    font-size: 16px;
}
.page-sidebar .menu-items > li > .icon-thumbnail i { color: #C9CCDB !important; }

/* Hover de toda la fila */
.page-sidebar .menu-items > li:hover { background: rgba(255,255,255,.06) !important; }
.page-sidebar .menu-items > li:hover > a { color: #fff !important; }
.page-sidebar .menu-items > li:hover > .icon-thumbnail,
.page-sidebar .menu-items > li:hover > .icon-thumbnail i { color: #fff !important; }

/* Item ACTIVO: fondo dorado, texto e iconos oscuros (como el diseño) */
.page-sidebar .menu-items > li.active,
.page-sidebar .menu-items > li.active:hover {
    background: linear-gradient(135deg, var(--av-oro) 0%, var(--av-oro-claro) 100%) !important;
}
.page-sidebar .menu-items > li.active > a,
.page-sidebar .menu-items > li.active > .icon-thumbnail,
.page-sidebar .menu-items > li.active > .icon-thumbnail i {
    color: var(--av-marino-osc) !important;
}

/* Marca/logo del sidebar centrado sobre marino */
.page-sidebar .sidebar-header,
.page-sidebar .brand { background: var(--av-marino) !important; }