/* ============================================================
   Á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;
}
/* .cw = número de semana (calendar week): info secundaria -> gris tenue,
   no marino oscuro (que se veía pesado/ilegible). */
.datepicker .cw,
.datepicker td.cw,
.datepicker th.cw {
    color: var(--av-inactivo) !important;
    background: transparent !important;
    font-weight: 400 !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ías de OTRO mes (.old anterior / .new siguiente): gris legible, no tenue */
.datepicker table tr td.old,
.datepicker table tr td.new,
.datepicker table tr td span.old,
.datepicker table tr td span.new {
    color: #AEB2BD !important;
    opacity: 1 !important;
}
.datepicker table tr td.old:hover,
.datepicker table tr td.new:hover {
    color: var(--av-marino) !important;
    background: rgba(184,137,61,.12) !important;
}
/* Día normal del mes actual: texto principal bien legible */
.datepicker table tr td.day {
    color: var(--av-texto) !important;
}
/* Día SELECCIONADO / revisado (active): DORADO */
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.active,
.datepicker table tr td.today.active,
.datepicker table tr td.today:hover.active,
.datepicker table tr td span.active,
.datepicker table tr td span.active: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;
    text-shadow: none !important;
}
/* FECHA ACTUAL (today, sin seleccionar): AZUL / marino */
.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.range.today,
.datepicker table tr td.range.today:hover,
.datepicker table tr td.range.today.disabled {
    background-color: var(--av-marino) !important;
    background-image: none !important;
    border-color: var(--av-marino-osc) !important;
    color: #fff !important;
    text-shadow: none !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 16px 30px; overflow-x: hidden; }
/* Neutralizar los márgenes negativos del .row de Bootstrap dentro del
   contenedor para que no genere scroll horizontal (overflow ~9px). */
.av-reports .row { margin-left: 0 !important; margin-right: 0 !important; }
.av-reports .row > [class*="col-"] { padding-left: 12px; padding-right: 12px; }

/* 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 — modo COLAPSADO + EXPAND AL HOVER (nativo de Pages)
   - Sin menu-pin: el sidebar muestra solo la franja de iconos (derecha).
   - Al pasar el mouse se expande mostrando el texto.
   Solo aplicamos colores de marca; el comportamiento lo da Pages.
   ============================================================ */
.page-sidebar { background: var(--av-marino) !important; }

/* Texto del item (visible al expandir) */
.page-sidebar .menu-items > li > a,
.page-sidebar .sidebar-menu .menu-items > li > a {
    color: #D8DCE6 !important;
    font-weight: 500;
}
.page-sidebar .menu-items > li > a .title { color: #D8DCE6 !important; }

/* Icono (.icon-thumbnail): SIEMPRE visible a la derecha (franja colapsada).
   Mantiene el float:right nativo; solo color de marca, fondo transparente. */
.page-sidebar .menu-items > li > a > .icon-thumbnail,
.page-sidebar .sidebar-menu .menu-items > li > .icon-thumbnail,
.page-sidebar .menu-items > li > .icon-thumbnail {
    background: transparent !important;
    color: #C9CCDB !important;
}
.page-sidebar .menu-items > li > a > .icon-thumbnail i,
.page-sidebar .menu-items > li .icon-thumbnail i { color: #C9CCDB !important; }

/* Hover de item (cuando el sidebar está expandido) */
.page-sidebar .menu-items > li:hover > a,
.page-sidebar .menu-items > li:hover > a .title { color: #fff !important; }
.page-sidebar .menu-items > li:hover > a > .icon-thumbnail,
.page-sidebar .menu-items > li:hover .icon-thumbnail,
.page-sidebar .menu-items > li:hover .icon-thumbnail i { color: #fff !important; }

/* Item ACTIVO: acento dorado (texto + icono) */
.page-sidebar .menu-items > li.active > a,
.page-sidebar .menu-items > li.active > a .title,
.page-sidebar .menu-items > li.active > a > .icon-thumbnail,
.page-sidebar .menu-items > li.active .icon-thumbnail,
.page-sidebar .menu-items > li.active .icon-thumbnail i {
    color: var(--av-oro-claro) !important;
}
/* Marca/logo del sidebar sobre marino */
.page-sidebar .sidebar-header,
.page-sidebar .brand { background: var(--av-marino) !important; }

/* ============================================================
   ENCABEZADO DE PÁGINA (jumbotron) — usado por ~56 pantallas
   Lo unificamos al look del header de Reportes/Admin/Inicio:
   título serif marino + breadcrumb gris, sobre el fondo del sistema.
   ============================================================ */
.jumbotron {
    background: transparent !important;
    padding: 8px 0 0 !important;
    margin-bottom: var(--sp-s) !important;
    min-height: 0 !important;
}
.jumbotron .inner { padding: 0 !important; }
/* El breadcrumb dentro del jumbotron: título de página */
.jumbotron .breadcrumb {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    font-size: 22px;
    font-family: var(--av-serif) !important;
    font-weight: 700;
}
.jumbotron .breadcrumb .breadcrumb-item > a {
    color: var(--av-marino) !important;
    font-family: var(--av-serif) !important;
    font-size: 22px;
}
.jumbotron .breadcrumb .breadcrumb-item > a i { color: var(--av-oro) !important; margin-right: 6px; }
/* El subtítulo (item activo) en gris, tamaño menor, debajo si cabe */
.jumbotron .breadcrumb .breadcrumb-item.active {
    color: var(--av-gris) !important;
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-weight: 500;
    font-size: 14px;
}
/* Separador entre breadcrumb items más sutil */
.jumbotron .breadcrumb > .breadcrumb-item + .breadcrumb-item:before {
    color: var(--av-gris) !important;
}

/* ============================================================
   Botones de DataTables (Copiar / Exportar) → estilo del sistema
   ============================================================ */
.dt-button, .dt-buttons .btn,
button.dt-button, div.dt-button {
    background: var(--av-marino) !important;
    background-image: none !important;
    border: 1px solid var(--av-marino) !important;
    color: #fff !important;
    border-radius: var(--av-radio-sm) !important;
    min-height: 40px;
    padding: 0 16px !important;
    font-weight: 600;
    box-shadow: none !important;
}
.dt-button:hover, button.dt-button:hover, div.dt-button:hover {
    background: var(--av-marino-osc) !important;
    border-color: var(--av-marino-osc) !important;
    color: #fff !important;
}
/* Iconos de acción dentro de tablas (ver/registrar) en marino, no azul brillante */
table td a > i.fa,
table td button > i.fa { color: var(--av-marino); }
table td a:hover > i.fa { color: var(--av-oro); }

/* ============================================================
   CARGA SUAVE (evita el destello/parpadeo "de toda la página")
   El loader se oculta por JS a los ~500ms; suavizamos su salida
   y la aparición del contenido para que no "salte" de golpe.
   ============================================================ */
.loading-container {
    transition: opacity .35s ease !important;
}
/* Cuando el JS le pone display:none, ya no se ve; mientras tanto,
   el contenido principal entra con un fade muy breve y único. */
.page-content-wrapper .content {
    animation: avFadeInContent .4s ease-out both;
}
@keyframes avFadeInContent {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Pista de clic en métricas: pulso MUY sutil (antes escalaba 1->1.2,
   se percibía como parpadeo). Lo suavizamos a una opacidad leve. */
.metric-click-hint i {
    animation: avHintPulse 2.4s ease-in-out infinite !important;
}
@keyframes avHintPulse {
    0%, 100% { opacity: .55; transform: none; }
    50%      { opacity: 1;   transform: none; }
}

/* ============================================================
   Parar animaciones del loader cuando está oculto.
   Los 9 .sk-cube tienen animación infinita; aunque el contenedor
   esté display:none, el navegador la sigue evaluando y genera
   repaints/stutter (parpadeo percibido). Las detenemos del todo.
   ============================================================ */
.loading-container[style*="none"] .sk-cube,
.loading-container[style*="none"] .loading-ring,
.loading-container[style*="none"] .loading-ring span {
    animation: none !important;
    -webkit-animation: none !important;
}

/* ============================================================
   PORTAL — Tarjetas KPI: número del color de cada tarjeta
   (el icono y la línea ya usan --card-color en portal.css).
   ============================================================ */
.metric-card .metric-value {
    color: var(--card-color) !important;
}
/* Tarjeta 4 (Departamentos): número gris más oscuro que la línea (spec) */
.metric-card[style*="#64748B"] .metric-value {
    color: #475569 !important;
}

/* ============================================================
   PORTAL — Encabezado azul corporativo (gradiente marino->azul)
   ============================================================ */
.modern-portal .opticabg,
.department-header {
    background: linear-gradient(135deg, #1E2346 0%, #244A73 100%) !important;
}
.department-header:hover {
    background: linear-gradient(135deg, #244A73 0%, #1E2346 100%) !important;
}
/* Buscador del portal: borde gris + foco dorado */
.search-input,
#advanced-search {
    border: 1px solid #D1D5DB !important;
    border-radius: var(--av-radio-sm) !important;
}
.search-input:focus,
#advanced-search:focus {
    border-color: #B8893D !important;
    box-shadow: 0 0 0 .15rem rgba(184,137,61,.18) !important;
    outline: none !important;
}

/* ============================================================
   Compensar escalado del SO en equipos no-Apple (~12% menos).
   La clase la añade un script en los layouts (av-noapple-init).
   ============================================================ */
body.av-noapple { zoom: 0.88; }

/* ============================================================
   DataTables: filas compactas (padding + line-height + contenido)
   ============================================================ */
table.dataTable tbody td,
table.datatable tbody td {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    line-height: 1.25 !important;
    font-size: 13px !important;
    vertical-align: middle !important;
}
table.dataTable thead th,
table.datatable thead th {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    line-height: 1.1 !important;
    font-size: 12px !important;
    vertical-align: middle !important;
    height: 34px !important;          /* limita la altura del encabezado */
    white-space: normal !important;
}
/* Quitar cualquier altura mínima heredada del thead/tr del header */
table.dataTable thead tr,
.dataTables_scrollHead table.dataTable thead tr { height: 34px !important; }
/* Reducir el espacio reservado para el icono de ordenamiento (sorting),
   que añade altura/relleno extra al encabezado. */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    background-position: center right 8px !important;
    padding-right: 22px !important;
}
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after { bottom: auto !important; top: 50% !important; margin-top: -8px; }
/* El header del scroll (scrollX) y sus celdas: sin altura extra */
.dataTables_scrollHead table.dataTable thead th,
.dataTables_scrollHead .dataTables_scrollHeadInner table thead th {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
.dataTables_scrollHead, .dataTables_scrollHeadInner { height: auto !important; }

/* IMPORTANTE: con scrollX/scrollY DataTables deja un header "fantasma"
   dentro del cuerpo de scroll. DataTables ya lo oculta (height:0) y lo usa
   para MEDIR los anchos de columna, así que NO debemos tocar su padding,
   font-size ni ancho (eso desalinea las columnas). Solo aseguramos que no
   reciba la altura que pusimos en el header real. */
.dataTables_scrollBody table.dataTable thead th,
.dataTables_scrollBody table.dataTable thead td {
    height: 0 !important;
    line-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    /* font-size se MANTIENE igual al header real (12px) para que el ancho de
       columna que DataTables mide coincida y NO se desalineen las columnas. */
    font-size: 12px !important;
    border: 0 !important;
}
.dataTables_scrollBody table.dataTable thead tr { height: 0 !important; }
.dataTables_scrollBody thead .sorting:after,
.dataTables_scrollBody thead .sorting_asc:after,
.dataTables_scrollBody thead .sorting_desc:after { display: none !important; }

table.dataTable tbody tr { height: auto !important; }
/* Compactar contenido multilínea dentro de las celdas (p.ej. historial),
   que es lo que más estira la altura de la fila. */
table.dataTable tbody td div,
table.dataTable tbody td span,
table.dataTable tbody td p {
    line-height: 1.2 !important;
    margin: 0 !important;
}
table.dataTable tbody td div[style*="font-size: 11px"] span { padding: 0 !important; }