/* =============================================================
   MODERNIZACIÓN UI GESTOR — 2026
   Portado de la modernización de ISPBoss IA, adaptado a
   Bootstrap 4.6 + AdminLTE 3.1.
   ============================================================= */

/* --- RadioButtonGroup: borde sutil y prolijo --- */
.my-radiobutton-group {
    gap: 4px !important;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 3px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.04);
    display: inline-flex !important;
}
.my-radiobutton-group .btn {
    cursor: pointer;
    border-radius: 8px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: #64748b !important;
    box-shadow: none !important;
    padding: 5px 10px !important;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
    font-size: .8rem;
}
.my-radiobutton-group .btn:hover {
    background: #ffffff !important;
    color: #334155 !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.08) !important;
}
.my-radiobutton-group .btn.active {
    background: #ffffff !important;
    color: #1e40af !important;
    border-color: #dbeafe !important;
    box-shadow: 0 1px 4px rgba(30,64,175,.12) !important;
    font-weight: 600;
}

/* --- Cards: sombra suave, sin borde lateral azul AdminLTE --- */
.card {
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.07), 0 4px 18px rgba(0,0,0,.06) !important;
    transition: box-shadow .2s;
}
.card:hover {
    box-shadow: 0 2px 6px rgba(0,0,0,.09), 0 6px 24px rgba(0,0,0,.08) !important;
}
.card.card-outline {
    border-top: none !important;
}
/* Respetar shadow-none: contenedores tipo my-tabs-container son cards
   "invisibles" y la sombra forzada les dibujaba un borde fantasma. */
.card.shadow-none,
.card.shadow-none:hover {
    box-shadow: none !important;
}
/* Fondo gris claro de "card neutra" — se aplica solo cuando el header NO tiene
   una clase de fondo propia (bg-info, bg-success, bg-primary, bg-warning,
   bg-danger, bg-dark, bg-secondary). De lo contrario, el header con su color
   propio quedaba "tapado" por este fondo gris debido a la alta especificidad
   del selector con multiples :not(). */
.card:not(.card-primary):not(.card-secondary):not(.card-success):not(.card-danger):not(.card-warning):not(.card-info):not(.card-dark) > .card-header:not(.card-subheader):not(.bg-info):not(.bg-primary):not(.bg-success):not(.bg-warning):not(.bg-danger):not(.bg-dark):not(.bg-secondary):not([class*="bg-gradient-"]) {
    border-radius: 12px 12px 0 0 !important;
    border-bottom: 1px solid #eef2f7 !important;
    background: #fff !important;
    font-weight: 600;
    font-size: .88em;
    color: #334155;
    padding: .75rem 1.1rem;
}
/* Cards outline (ej. card-primary card-outline de las pantallas de edición):
   el header también va blanco — la identidad de color la da el contenido. */
.card.card-outline > .card-header:not(.card-subheader):not(.bg-info):not(.bg-primary):not(.bg-success):not(.bg-warning):not(.bg-danger):not(.bg-dark):not(.bg-secondary):not([class*="bg-gradient-"]) {
    background: #fff !important;
    border-bottom: 1px solid #eef2f7 !important;
    border-radius: 12px 12px 0 0 !important;
    color: #334155;
}

/* Subheaders de sección del Framework (Subdiarios, Parámetros, Detalles...):
   de banda gris pesada a etiqueta de sección moderna. */
.card-subheader {
    background: #f8fafc !important;
    color: #475569 !important;
    font-weight: 600 !important;
    font-size: .78rem !important;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-top: 1px solid #eef2f7 !important;
    border-bottom: 1px solid #eef2f7 !important;
    padding: .55rem 1.1rem !important;
}
.card-subheader i { color: #94a3b8 !important; margin-right: 4px; }

/* Headers con clase bg-* / bg-gradient-*: de bloque saturado a "pastel suave"
   con texto oscuro del mismo tono — el color semantico se conserva pero el
   panel queda liviano y moderno. */
.card-header[class*="bg-gradient-info"],    .card-header.bg-info    { background: linear-gradient(160deg,#ecfeff,#cffafe) !important; color:#155e75 !important; }
.card-header[class*="bg-gradient-primary"], .card-header.bg-primary { background: linear-gradient(160deg,#eef2ff,#e0e7ff) !important; color:#3730a3 !important; }
.card-header[class*="bg-gradient-success"], .card-header.bg-success { background: linear-gradient(160deg,#ecfdf5,#d1fae5) !important; color:#065f46 !important; }
.card-header[class*="bg-gradient-danger"],  .card-header.bg-danger  { background: linear-gradient(160deg,#fef2f2,#fee2e2) !important; color:#991b1b !important; }
.card-header[class*="bg-gradient-warning"], .card-header.bg-warning { background: linear-gradient(160deg,#fffbeb,#fef3c7) !important; color:#92400e !important; }
.card-header[class*="bg-gradient-dark"],    .card-header.bg-dark    { background: linear-gradient(160deg,#f1f5f9,#e2e8f0) !important; color:#1e293b !important; }
.card-header[class*="bg-gradient-secondary"], .card-header.bg-secondary { background: linear-gradient(160deg,#f8fafc,#f1f5f9) !important; color:#334155 !important; }
.card-header.bg-info, .card-header.bg-primary, .card-header.bg-success,
.card-header.bg-warning, .card-header.bg-danger, .card-header.bg-dark,
.card-header.bg-secondary { font-weight: 600; padding: .55rem 1rem; }
/* Iconos y small heredan el tono oscuro del header pastel */
.card-header.bg-info i, .card-header.bg-primary i, .card-header.bg-success i,
.card-header.bg-warning i, .card-header.bg-danger i, .card-header.bg-dark i,
.card-header.bg-secondary i { color: inherit !important; opacity: .8; }
.card-header.bg-info small, .card-header.bg-primary small, .card-header.bg-success small,
.card-header.bg-warning small, .card-header.bg-danger small, .card-header.bg-dark small,
.card-header.bg-secondary small { color: inherit !important; opacity: .7; }

/* Cards con color de tipo solido (card-primary, card-info, etc. sin card-outline):
   header blanco con titulo oscuro; la identidad de color queda en una linea
   de acento superior y en el icono del titulo. */
.card.card-primary:not(.card-outline) > .card-header,
.card.card-info:not(.card-outline) > .card-header,
.card.card-success:not(.card-outline) > .card-header,
.card.card-danger:not(.card-outline) > .card-header,
.card.card-warning:not(.card-outline) > .card-header,
.card.card-secondary:not(.card-outline) > .card-header,
.card.card-dark:not(.card-outline) > .card-header {
    background: #fff !important;
    color: #334155 !important;
    border-bottom: 1px solid #eef2f7 !important;
    border-radius: 10px 10px 0 0 !important;
    font-weight: 600;
}
.card.card-primary:not(.card-outline) > .card-header .card-title,
.card.card-info:not(.card-outline) > .card-header .card-title,
.card.card-success:not(.card-outline) > .card-header .card-title,
.card.card-danger:not(.card-outline) > .card-header .card-title,
.card.card-warning:not(.card-outline) > .card-header .card-title,
.card.card-secondary:not(.card-outline) > .card-header .card-title,
.card.card-dark:not(.card-outline) > .card-header .card-title { color: #334155 !important; font-weight: 600; }
.card.card-primary:not(.card-outline)   { border-top: 3px solid #6366f1 !important; }
.card.card-info:not(.card-outline)      { border-top: 3px solid #06b6d4 !important; }
.card.card-success:not(.card-outline)   { border-top: 3px solid #10b981 !important; }
.card.card-danger:not(.card-outline)    { border-top: 3px solid #ef4444 !important; }
.card.card-warning:not(.card-outline)   { border-top: 3px solid #f59e0b !important; }
.card.card-secondary:not(.card-outline) { border-top: 3px solid #64748b !important; }
.card.card-dark:not(.card-outline)      { border-top: 3px solid #334155 !important; }
.card.card-primary:not(.card-outline) > .card-header .card-title i   { color: #6366f1 !important; }
.card.card-info:not(.card-outline) > .card-header .card-title i      { color: #06b6d4 !important; }
.card.card-success:not(.card-outline) > .card-header .card-title i   { color: #10b981 !important; }
.card.card-danger:not(.card-outline) > .card-header .card-title i    { color: #ef4444 !important; }
.card.card-warning:not(.card-outline) > .card-header .card-title i   { color: #f59e0b !important; }
.card.card-secondary:not(.card-outline) > .card-header .card-title i { color: #64748b !important; }
.card.card-dark:not(.card-outline) > .card-header .card-title i      { color: #334155 !important; }
.card.card-primary:not(.card-outline) > .card-header .btn-tool,
.card.card-info:not(.card-outline) > .card-header .btn-tool,
.card.card-success:not(.card-outline) > .card-header .btn-tool,
.card.card-danger:not(.card-outline) > .card-header .btn-tool,
.card.card-warning:not(.card-outline) > .card-header .btn-tool,
.card.card-secondary:not(.card-outline) > .card-header .btn-tool,
.card.card-dark:not(.card-outline) > .card-header .btn-tool { color: #94a3b8 !important; }

/* Cajas de totales (CajaVariacion y cards bg-* en dashboards): de bloque
   solido saturado a tarjeta pastel con cifra en tono oscuro. */
.card.bg-primary:not([class*="card-"]), .card.bg-gradient-primary { background: linear-gradient(160deg,#eef2ff,#e0e7ff) !important; color:#3730a3 !important; border:1px solid #e0e7ff !important; }
.card.bg-info:not([class*="card-"]),    .card.bg-gradient-info    { background: linear-gradient(160deg,#ecfeff,#cffafe) !important; color:#155e75 !important; border:1px solid #cffafe !important; }
.card.bg-success:not([class*="card-"]), .card.bg-gradient-success { background: linear-gradient(160deg,#ecfdf5,#d1fae5) !important; color:#065f46 !important; border:1px solid #d1fae5 !important; }
.card.bg-danger:not([class*="card-"]),  .card.bg-gradient-danger  { background: linear-gradient(160deg,#fef2f2,#fee2e2) !important; color:#991b1b !important; border:1px solid #fee2e2 !important; }
.card.bg-warning:not([class*="card-"]), .card.bg-gradient-warning { background: linear-gradient(160deg,#fffbeb,#fef3c7) !important; color:#92400e !important; border:1px solid #fef3c7 !important; }
.card.bg-secondary:not([class*="card-"]), .card.bg-gradient-secondary, .card.bg-gray { background: linear-gradient(160deg,#f8fafc,#f1f5f9) !important; color:#334155 !important; border:1px solid #e2e8f0 !important; }
.card.bg-dark:not([class*="card-"]),    .card.bg-gradient-dark    { background: linear-gradient(160deg,#f1f5f9,#e2e8f0) !important; color:#1e293b !important; border:1px solid #e2e8f0 !important; }
.card.bg-teal, .card.bg-gradient-teal { background: linear-gradient(160deg,#f0fdfa,#ccfbf1) !important; color:#115e59 !important; border:1px solid #ccfbf1 !important; }
/* La cifra grande y el titulo heredan el tono oscuro del pastel */
.card[class*="bg-"] .card-body h1, .card[class*="bg-"] .card-body h4 { color: inherit; }
.card[class*="bg-"] .card-body .text-muted { color: inherit !important; opacity: .65; }

/* --- Tabla / GridView --- */
.table { border-collapse: separate !important; border-spacing: 0 !important; }
.table thead th {
    background: #f1f5f9 !important; color: #334155 !important;
    font-size: .85em !important; font-weight: 700 !important;
    text-transform: uppercase !important; letter-spacing: .04em !important;
    border-bottom: 2px solid #e2e8f0 !important; border-top: none !important;
    padding: .55rem .85rem !important; white-space: nowrap;
}
.table tbody tr { transition: background .1s; }
.table tbody tr:hover > td { background: #f0f7ff !important; }
.table tbody td {
    vertical-align: middle !important; border-top: 1px solid #f1f5f9 !important;
    color: #374151; font-size: .9em;
}
.table tbody td:not(.p-0):not(.p-1):not(.p-2) { padding: .5rem .85rem !important; }
.table-striped tbody tr:nth-of-type(odd) { background-color: #fafbfc !important; }

/* --- Badges --- */
.badge { border-radius: 6px !important; font-weight: 500 !important; font-size: .72em !important; letter-spacing: .02em; padding: .28em .6em !important; }
.badge.badge-success, .badge.bg-success, .badge.bg-green  { background: rgba(34,197,94,.13)  !important; color: #15803d !important; }
.badge.badge-danger,  .badge.bg-danger,  .badge.bg-red    { background: rgba(239,68,68,.11)   !important; color: #b91c1c !important; }
.badge.badge-warning, .badge.bg-warning                   { background: rgba(245,158,11,.13)  !important; color: #92400e !important; }
.badge.badge-info,    .badge.bg-info                      { background: rgba(59,130,246,.12)  !important; color: #1d4ed8 !important; }
.badge.badge-primary, .badge.bg-primary                   { background: rgba(99,102,241,.12)  !important; color: #4338ca !important; }
.badge.badge-secondary,.badge.bg-secondary                 { background: rgba(100,116,139,.11) !important; color: #475569 !important; }
/* badge en div: mantener inline-block */
div.badge { display: inline-block !important; }

/* --- Badges dentro de un card-header de color (paneles de detalle) ---
   El estilo "soft" de arriba (fondo translucido + texto oscuro) esta pensado
   para fondos blancos (grillas / listados). Dentro de un card-header de color
   ese fondo translucido se pierde y el texto oscuro casi no se lee. Aca los
   pasamos a pastilla blanca solida: el color semantico (verde/rojo/ambar) se
   conserva en el texto, heredado de las reglas .badge.bg-* de arriba. */
.card-header.bg-primary   .badge, .card-header[class*="bg-gradient-primary"]   .badge,
.card-header.bg-secondary .badge, .card-header[class*="bg-gradient-secondary"] .badge,
.card-header.bg-success   .badge, .card-header[class*="bg-gradient-success"]   .badge,
.card-header.bg-danger    .badge, .card-header[class*="bg-gradient-danger"]    .badge,
.card-header.bg-warning   .badge, .card-header[class*="bg-gradient-warning"]   .badge,
.card-header.bg-info      .badge, .card-header[class*="bg-gradient-info"]      .badge,
.card-header.bg-dark      .badge {
    background: #fff !important;
    font-size: .8em !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.18);
}

/* --- Botones --- */
.btn { border-radius: 8px !important; font-size: .82em !important; font-weight: 500; transition: all .15s !important; letter-spacing: .01em; }
.btn-primary  { background: #2563eb !important; border-color: #2563eb !important; }
.btn-primary:hover  { background: #1d4ed8 !important; border-color: #1d4ed8 !important; }
.btn-secondary { background: #64748b !important; border-color: #64748b !important; color: #fff !important; }
.btn-secondary:hover { background: #475569 !important; border-color: #475569 !important; color: #fff !important; }
.btn-info     { background: #0ea5e9 !important; border-color: #0ea5e9 !important; color: #fff !important; }
.btn-info:hover     { background: #0284c7 !important; border-color: #0284c7 !important; }
.btn-success  { background: #16a34a !important; border-color: #16a34a !important; }
.btn-success:hover  { background: #15803d !important; border-color: #15803d !important; }
.btn-danger   { background: #dc2626 !important; border-color: #dc2626 !important; }
.btn-danger:hover   { background: #b91c1c !important; border-color: #b91c1c !important; }
.btn-warning  { background: #d97706 !important; border-color: #d97706 !important; color: #fff !important; }
.btn-warning:hover  { background: #b45309 !important; border-color: #b45309 !important; }

/* --- Inputs --- */
.form-control, .custom-select {
    border-radius: 8px !important; border-color: #e2e8f0 !important;
    transition: border-color .15s, box-shadow .15s !important;
}
.form-control:focus, .custom-select:focus {
    border-color: #2563eb !important; box-shadow: 0 0 0 3px rgba(37,99,235,.12) !important;
}
/* Input-group: alinear alturas y border-radius */
.input-group .form-control,
.input-group .custom-select { font-size: inherit !important; }
.input-group > .form-control:not(:last-child),
.input-group > .custom-select:not(:last-child) { border-radius: 8px 0 0 8px !important; }
.input-group > .input-group-append > .btn { border-radius: 0 8px 8px 0 !important; }
.input-group > .input-group-append > .btn,
.input-group > .form-control { height: auto !important; min-height: calc(1.5em + .75rem + 2px); }

/* --- Grillas anidadas: forzar la tabla interna a ocupar todo el ancho --- */
td.p-0 > table,
td.p-0 > .gridview-wrapper > table,
td.p-0 > div > table { width: 100% !important; }
.table > tbody > tr > td.p-0 { width: auto !important; }

/* --- Empty state en grilla --- */
.table > thead + tbody tr:only-child td[colspan],
.table > thead ~ tbody tr:only-child td[colspan] {
    text-align: center; padding: 2.5rem 1rem !important; color: #94a3b8; font-size: .88em;
}

/* --- Select2 --- */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1.5px solid #e2e8f0 !important; border-radius: 8px !important;
    min-height: calc(1.5em + .65rem + 2px) !important;
    background: #fff !important; transition: border-color .15s, box-shadow .15s !important;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: #2563eb !important; box-shadow: 0 0 0 3px rgba(37,99,235,.12) !important; outline: none !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    color: #374151 !important; font-size: .84em !important; padding: 0 1.4rem 0 .75rem !important; line-height: 1.5 !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container--default .select2-selection--multiple .select2-selection__placeholder { color: #94a3b8 !important; }
.select2-dropdown {
    border: 1.5px solid #e2e8f0 !important; border-radius: 10px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.1) !important; overflow: hidden !important; margin-top: 3px !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1.5px solid #e2e8f0 !important; border-radius: 6px !important;
    padding: 5px 10px !important; font-size: .82em !important; outline: none !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: #2563eb !important; box-shadow: 0 0 0 3px rgba(37,99,235,.1) !important;
}
.select2-results__option {
    font-size: .83em !important; padding: .42rem .75rem !important;
    color: #374151 !important; border-radius: 0 !important; transition: background .1s !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: #eff6ff !important; color: #1d4ed8 !important; }
.select2-container--default .select2-results__option[aria-selected=true] { background: #dbeafe !important; color: #1d4ed8 !important; }
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: #eff6ff !important; border: 1px solid #bfdbfe !important; border-radius: 6px !important;
    color: #1d4ed8 !important; font-size: .82em !important; padding: 3px 8px !important; margin: 3px 3px 0 0 !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: #93c5fd !important; margin-right: 4px !important; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: #1d4ed8 !important; }

/* ===================================================================
   GESTOR — Navbar moderno
   (aplica cuando la Master renderiza las clases gestor-navbar / gestor-*)
   =================================================================== */
.gestor-navbar {
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
    min-height: 44px;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}
.gestor-navbar .nav-link { padding-top: .35rem; padding-bottom: .35rem; }
.gestor-navbar-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: linear-gradient(135deg, #1e40af 0%, #4f46e5 100%);
    color: #fff; font-size: .62rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; letter-spacing: .03em;
}
.gestor-navbar-avatar-lg { width: 46px; height: 46px; font-size: 1rem; }
.gestor-navbar-user { display: flex !important; align-items: center; gap: 8px; padding: 4px 10px !important; border-radius: 8px; transition: background .15s; }
.gestor-navbar-user:hover { background: #f1f5f9; }
.gestor-navbar-username { font-size: .8rem; font-weight: 500; color: #374151; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gestor-user-dropdown { min-width: 230px !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; box-shadow: 0 8px 24px rgba(0,0,0,.12) !important; padding: 0 !important; overflow: hidden; }
.gestor-dropdown-user-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: #f8fafc; border-bottom: 1px solid #f1f5f9; }
.gestor-user-dropdown .dropdown-item { padding: 9px 16px; font-size: .85rem; color: #374151; transition: background .12s; }
.gestor-user-dropdown .dropdown-item:hover { background: #f1f5f9; color: #111827; }
.gestor-navbar-empresa-logo { max-height: 28px; max-width: 100px; opacity: .65; object-fit: contain; }
/* Logo de empresa a la izquierda de la barra superior (fondo blanco) */
.gestor-navbar-logo { align-items: center; height: 100%; margin-left: .25rem; margin-right: .5rem; padding: 0 .35rem; }
.gestor-navbar-logo img { max-height: 30px; max-width: 200px; object-fit: contain; display: block; }

/* ===================================================================
   GESTOR — Sidebar moderno
   =================================================================== */
.gestor-sidebar { background: #0f172a !important; }
.gestor-sidebar .sidebar { background: transparent !important; overflow-x: hidden; }
.gestor-brand-link { background: #0f172a !important; border-bottom: 1px solid #1e293b !important; padding: 8px 16px !important; display: flex !important; align-items: center; min-height: 44px; }
.gestor-brand-link:hover { background: #1e293b !important; }
/* Brand mini (colapsado) */
.gestor-logo-mini {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    width: 100%; gap: 4px;
}
.gestor-mini-icon { font-size: 1.2rem; color: #818cf8; line-height: 1; }
.gestor-mini-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #6366f1;
    animation: gestor-dot-pulse 2.4s ease-in-out infinite;
    box-shadow: 0 0 6px rgba(99,102,241,.8);
}
@keyframes gestor-dot-pulse {
    0%, 100% { opacity: .4; transform: scale(.8); box-shadow: 0 0 4px rgba(99,102,241,.4); }
    50%       { opacity: 1;  transform: scale(1.2); box-shadow: 0 0 10px rgba(99,102,241,.9), 0 0 20px rgba(99,102,241,.4); }
}

/* Brand full (expandido) */
.gestor-logo-full { display: flex; align-items: center; justify-content: center; width: 100%; }
.gestor-brand-block {
    display: flex; flex-direction: row;
    align-items: baseline; justify-content: center;
    gap: 7px; width: 100%;
}
.gestor-brand-name {
    font-size: 1.35rem; font-weight: 800; color: #f1f5f9;
    letter-spacing: .5px; line-height: 1;
    text-shadow: 0 0 20px rgba(129,140,248,.3);
    white-space: nowrap;
}

/* Buscador de menú */
.gestor-sidebar-search { position: relative; padding: 10px 12px 8px; background: #0f172a; }
.gestor-search-icon { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); color: #475569; font-size: .75rem; pointer-events: none; }
#sidebarMenuSearch { width: 100%; background: #1e293b; border: 1px solid #334155; border-radius: 20px; color: #cbd5e1; font-size: .78rem; padding: 6px 30px 6px 32px; outline: none; transition: border-color .15s, background .15s; }
#sidebarMenuSearch::placeholder { color: #475569; }
#sidebarMenuSearch:focus { border-color: #4f46e5; background: #1e2d40; color: #f1f5f9; }
.gestor-search-clear { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); color: #475569; font-size: .72rem; cursor: pointer; transition: color .12s; }
.gestor-search-clear:hover { color: #94a3b8; }
.sidebar-no-results { display: none; text-align: center; color: #475569; font-size: .78rem; padding: 18px 0; }

/* Nav items */
.gestor-sidebar .nav-sidebar > .nav-item { margin: 1px 8px; }
.gestor-sidebar .nav-sidebar .nav-link { color: #cbd5e1 !important; border-radius: 8px !important; padding: 7px 12px !important; font-size: .825rem; transition: background .15s, color .15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gestor-sidebar .nav-sidebar .nav-link:hover { background: #1e293b !important; color: #e2e8f0 !important; }
/* El gradiente queda reservado para el item ACTIVO real */
.gestor-sidebar .nav-sidebar .nav-link.active { background: linear-gradient(135deg, #1e40af 0%, #3730a3 100%) !important; color: #ffffff !important; box-shadow: 0 2px 6px rgba(79,70,229,.35); }
/* Grupo expandido (menu-open): resaltado sutil, sin gradiente */
.gestor-sidebar .nav-sidebar .nav-item.menu-open > .nav-link:not(.active) {
    background: rgba(255,255,255,.06) !important;
    color: #f1f5f9 !important;
    box-shadow: none !important;
}
.gestor-sidebar .nav-sidebar .nav-item.menu-open > .nav-link:not(.active) .nav-icon { color: #818cf8 !important; }
.gestor-sidebar .nav-sidebar .nav-link .nav-icon { color: #64748b !important; transition: color .15s; width: 1.2rem; font-size: .9rem; }
.gestor-sidebar .nav-sidebar .nav-link:hover .nav-icon,
.gestor-sidebar .nav-sidebar .nav-link.active .nav-icon { color: #818cf8 !important; }
.gestor-sidebar .nav-sidebar .nav-link p .right,
.gestor-sidebar .nav-sidebar .nav-link p .float-right { color: #475569 !important; transition: transform .2s; }
/* Submenú con línea guía */
.gestor-sidebar .nav-treeview {
    margin: 2px 0 6px 22px;
    padding-left: 6px;
    border-left: 1px solid #273449;
}
.gestor-sidebar .nav-treeview > .nav-item { margin: 1px 4px 1px 0; }
.gestor-sidebar .nav-treeview > .nav-item > .nav-link { padding-left: 10px !important; font-size: .785rem; color: #94a3b8 !important; }
.gestor-sidebar .nav-treeview > .nav-item > .nav-link .nav-icon { font-size: .5rem !important; width: 1rem; }
.gestor-sidebar .nav-treeview > .nav-item > .nav-link:hover { background: #1e293b !important; color: #cbd5e1 !important; }
.gestor-sidebar .nav-treeview > .nav-item > .nav-link.active { background: #1e3a5f !important; color: #93c5fd !important; box-shadow: none; }

/* ── Sidebar colapsado: solo íconos, sin "..." ni buscador aplastado ── */
.sidebar-mini.sidebar-collapse .gestor-sidebar:not(:hover) .gestor-sidebar-search,
.sidebar-mini.sidebar-collapse .gestor-sidebar:not(:hover) .sidebar-no-results { display: none; }
.sidebar-mini.sidebar-collapse .gestor-sidebar:not(:hover) .nav-sidebar .nav-link { text-overflow: clip; }
.sidebar-mini.sidebar-collapse .gestor-sidebar:not(:hover) .nav-treeview {
    margin-left: 0; padding-left: 0; border-left: none;
}
/* Badges en el menú del sidebar */
.gestor-sidebar .nav-sidebar .badge,
.gestor-sidebar .nav-sidebar .right.badge {
    background: rgba(99,102,241,.18) !important;
    color: #e0e7ff !important;
    border: 1px solid rgba(99,102,241,.45) !important;
    font-size: .68rem !important;
    font-weight: 700 !important;
    padding: .2em .55em !important;
    border-radius: 20px !important;
    letter-spacing: .02em;
    min-width: 1.6em;
    text-align: center;
}
.gestor-sidebar .nav-sidebar .nav-link.active .badge,
.gestor-sidebar .nav-sidebar .nav-item.menu-open > .nav-link .badge {
    background: rgba(255,255,255,.22) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.4) !important;
}

.gestor-sidebar .sidebar::-webkit-scrollbar { width: 4px; }
.gestor-sidebar .sidebar::-webkit-scrollbar-track { background: transparent; }
.gestor-sidebar .sidebar::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 4px; }
.gestor-sidebar-empresa { padding: 10px 12px; border-top: 1px solid #1e293b; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.gestor-sidebar-empresa-logo { max-height: 22px; max-width: 60px; opacity: .35; object-fit: contain; display: block; }
.gestor-sidebar-empresa-logo-xl { max-height: 22px; max-width: 110px; opacity: .35; object-fit: contain; display: none; }
body:not(.sidebar-mini) .gestor-sidebar-empresa-logo { display: none; }
body:not(.sidebar-mini) .gestor-sidebar-empresa-logo-xl { display: block; }

/* ===== Buscador global del navbar ===== */
.gestor-global-search { position: relative; width: 100%; }
.gestor-gsearch-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: .78rem; pointer-events: none; z-index: 2; }
.gestor-gsearch-input {
    width: 100%; padding: 7px 14px 7px 34px; border: 1px solid #e2e8f0;
    border-radius: 20px; background: #f8fafc; font-size: .82rem; color: #334155;
    outline: none; transition: border-color .2s, box-shadow .2s, background .2s; line-height: 1.4;
}
.gestor-gsearch-input:focus { border-color: #6366f1; background: #fff; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.gestor-gsearch-input::placeholder { color: #94a3b8; }
.gestor-gsearch-results {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15,23,42,.12); z-index: 9999;
    overflow: hidden; max-height: 320px; overflow-y: auto;
}
.gestor-gsearch-item { display: flex; align-items: center; gap: 10px; padding: 9px 14px; text-decoration: none; color: #1e293b; border-bottom: 1px solid #f1f5f9; transition: background .15s; font-size: .82rem; }
.gestor-gsearch-item:last-child { border-bottom: none; }
.gestor-gsearch-item:hover { background: #f1f5f9; color: #1e293b; text-decoration: none; }
.gestor-gsearch-item-icon { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, #1e40af, #4f46e5); display: flex; align-items: center; justify-content: center; color: #fff; font-size: .7rem; flex-shrink: 0; }
.gestor-gsearch-item-body { flex: 1; min-width: 0; }
.gestor-gsearch-item-text { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gestor-gsearch-item-sub { font-size: .73rem; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gestor-gsearch-empty { padding: 14px; text-align: center; font-size: .8rem; color: #94a3b8; }
.gestor-gsearch-spinner { padding: 14px; text-align: center; font-size: .78rem; color: #94a3b8; }

/* ===== Content header (barra de título de página) =====
   Barra blanca integrada bajo el navbar: título centrado verticalmente
   a la izquierda y breadcrumb a la derecha. Evita el "recuadro gris"
   flotando sobre el fondo del content-wrapper. */
.content-header {
    background: #fff !important;
    border-bottom: 1px solid #e9ecef;
    padding: 6px 16px !important;
    margin-bottom: 0;
}
.content-header > .row,
.content-header .row {
    align-items: center !important;
}
.content-header h1,
.content-header .h1 {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    color: #1e293b !important;
    display: flex;
    align-items: center;
}
.content-header h1 > i,
.content-header .h1 > i {
    color: #6366f1;
    margin-right: 8px;
    font-size: .95rem;
}
.content-header h1 small,
.content-header .h1 small {
    font-size: .72rem !important;
    color: #94a3b8 !important;
    font-weight: 400 !important;
    margin-left: 8px !important;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.content-header .breadcrumb {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    font-size: .75rem !important;
    align-items: center;
}
.content-header .breadcrumb a { color: #64748b; }
.content-header .breadcrumb a:hover { color: #4338ca; }
.content-header .breadcrumb .breadcrumb-item.active { color: #94a3b8; }

/* Contenido más pegado a la barra de título */
.my-container { padding-top: 6px !important; }

/* ===================================================================
   Tabs unificados — subrayado moderno para todos los nav-tabs
   del área de contenido (no afecta al sidebar).
   =================================================================== */
.content-wrapper .nav-tabs {
    border-bottom: 1px solid #e2e8f0 !important;
    background: transparent;
}
.content-wrapper .nav-tabs .nav-link {
    border: none !important;
    border-bottom: 2.5px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #64748b !important;
    font-weight: 500;
    font-size: .85rem;
    padding: .55rem 1rem;
    transition: color .15s, border-color .15s;
}
.content-wrapper .nav-tabs .nav-link:hover {
    color: #1e293b !important;
    border-bottom-color: #cbd5e1 !important;
}
.content-wrapper .nav-tabs .nav-link.active {
    color: #4338ca !important;
    border-bottom-color: #6366f1 !important;
    background: transparent !important;
    font-weight: 600;
}
.content-wrapper .nav-tabs .nav-link .badge { margin-left: 4px; }

/* Pills de navegación del contenido (ej. solapas de la ficha de cliente) */
.content-wrapper .nav-pills .nav-link {
    color: #475569;
    border-radius: 8px;
    font-weight: 500;
    font-size: .85rem;
    transition: background .15s, color .15s;
}
.content-wrapper .nav-pills .nav-link:hover:not(.active) { background: #f1f5f9; color: #1e293b; }
.content-wrapper .nav-pills .nav-link.active,
.content-wrapper .nav-pills .show > .nav-link {
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
    box-shadow: 0 2px 8px rgba(79,70,229,.3);
    color: #fff !important;
}
.content-wrapper .nav-pills .nav-link.active i,
.content-wrapper .nav-pills .nav-link.active span,
.content-wrapper .nav-pills .show > .nav-link i,
.content-wrapper .nav-pills .show > .nav-link span { color: #fff !important; }

/* ===================================================================
   Ficha moderna (FichaCliente / FichaProveedor)
   =================================================================== */
.gficha-header {
    background: linear-gradient(135deg, #1e40af 0%, #4f46e5 100%);
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 2px 8px rgba(79,70,229,.25);
}
.gficha-avatar {
    width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 1.05rem;
    user-select: none; flex-shrink: 0;
    background: rgba(255,255,255,.18);
    border: 2px solid rgba(255,255,255,.35);
    letter-spacing: .02em;
}
.gficha-header-info { flex: 1; min-width: 0; }
.gficha-header-nombre {
    font-size: .88rem; font-weight: 700; color: #f8fafc;
    line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gficha-header-nombre a { color: #f8fafc !important; text-decoration: none !important; }
.gficha-header-nombre a:hover { color: #bfdbfe !important; text-decoration: underline !important; }
.gficha-header-sub {
    font-size: .72rem; color: #c7d2fe; margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gficha-header .badge { background: #fff !important; box-shadow: 0 1px 3px rgba(0,0,0,.2); flex-shrink: 0; }
/* Variante proveedor: gradiente verde */
.gficha-header.gficha-header-prov {
    background: linear-gradient(135deg, #15803d 0%, #16a34a 100%);
    box-shadow: 0 2px 8px rgba(22,163,74,.25);
}
.gficha-header-prov .gficha-header-sub { color: #bbf7d0; }

/* Filas de datos */
.gficha-lista .list-group-item {
    border-color: #f1f5f9 !important;
    font-size: .82rem;
    color: #475569;
}
.gficha-lista .list-group-item > span:first-child { color: #64748b; }
.gficha-lista .list-group-item > span:first-child i {
    width: 16px; text-align: center; color: #94a3b8; margin-right: 6px; font-size: .78rem;
}
.gficha-lista .list-group-item .font-weight-bold { color: #1e293b; }

/* Botones de acceso rápido */
.gficha-actions .btn {
    border: 1.5px solid #e2e8f0 !important;
    background: #fff !important;
    color: #64748b !important;
    transition: background .15s, border-color .15s, color .15s, transform .12s !important;
}
.gficha-actions .btn:hover {
    background: #eef2ff !important;
    border-color: #6366f1 !important;
    color: #4338ca !important;
    transform: translateY(-1px);
}
.gficha-actions .btn .small { font-size: .68rem; font-weight: 600; letter-spacing: .03em; }

/* ===================================================================
   Ficha — barra de título con gradiente y avatar (estilo ISPBoss)
   =================================================================== */
.gficha-layout.expanded .my-sidebar-layout-toggle {
    background: linear-gradient(135deg, #1e40af 0%, #4f46e5 100%) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(79,70,229,.25);
}
.gficha-layout-prov.expanded .my-sidebar-layout-toggle {
    background: linear-gradient(135deg, #15803d 0%, #16a34a 100%) !important;
    box-shadow: 0 2px 8px rgba(22,163,74,.25);
}
/* En expandido el avatar reemplaza al ícono por defecto del toggle */
.gficha-layout.expanded .my-sidebar-layout-toggle > i { display: none; }
/* Chevron de colapso en blanco */
.gficha-layout.expanded .my-sidebar-layout-toggle .my-sidebar-layout-toggle-header > i { color: rgba(255,255,255,.85); }

.gficha-title { display: flex; align-items: center; gap: 11px; padding: 9px 0 9px 14px; min-width: 0; flex: 1; }
.gficha-title-avatar {
    width: 42px; height: 42px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: .9rem; letter-spacing: .02em;
    border: 2px solid rgba(255,255,255,.35);
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
    flex-shrink: 0; user-select: none;
}
.gficha-title-info { min-width: 0; }
.gficha-title-nombre {
    margin: 0; font-size: 1.05rem; font-weight: 700; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 250px;
    line-height: 1.3; text-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.gficha-title-nombre, .gficha-title-nombre span { color: #fff !important; }
.gficha-title-sub {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
    color: rgba(255,255,255,.92); font-weight: 600; line-height: 1.3;
    text-shadow: 0 1px 2px rgba(0,0,0,.2);
}

/* Panel flotante tipo card (solo en layout de escritorio, donde el
   Framework posiciona toggle/content como relativos) */
@media (min-width: 1200px) {
    .gficha-layout.expanded > aside {
        padding: 14px 0 14px 14px;
        background: transparent;
    }
    .gficha-layout.expanded .my-sidebar-layout-toggle {
        border-radius: 12px 12px 0 0;
    }
    .gficha-layout.expanded .my-sidebar-layout-content {
        border-radius: 0 0 12px 12px;
        border: none !important;
        box-shadow: 0 6px 20px rgba(0,0,0,.08);
        height: auto !important;
    }
}

/* ===================================================================
   Ficha colapsada — tira lateral funcional (estilo ISPBoss)
   La ficha (cc:SidebarLayout con clase gficha-layout) al colapsar
   muestra una tira con el avatar, el link al registro y los accesos
   rápidos, en lugar de solo el botón de expandir.
   =================================================================== */
.gficha-layout.collapsed > aside {
    width: 64px !important;
    background: linear-gradient(180deg, #eef2ff 0%, #f0f7ff 60%, #f8faff 100%);
    box-shadow: inset -1px 0 0 #c7d7f5;
}
.gficha-layout.collapsed .my-sidebar-layout-toggle {
    position: relative !important;
    width: 100% !important;
    justify-content: center;
    background: transparent !important;
    border: none !important;
}
.gficha-layout.collapsed .my-sidebar-layout-toggle > i { margin: .75rem .25rem; }
.gficha-layout.collapsed .gficha-strip { display: flex; }
/* Con tira presente, el toggle sobra: el avatar (con su globito) es el expansor */
.gficha-layout.gficha-has-strip.collapsed .my-sidebar-layout-toggle { display: none !important; }

.gficha-strip {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 14px 0 12px;
    flex: 1;
}
.gficha-strip-avatar {
    position: relative;
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: .95rem;
    cursor: pointer; user-select: none; letter-spacing: .02em;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    transition: transform .15s, box-shadow .15s;
}
.gficha-strip-avatar:hover { transform: scale(1.08); box-shadow: 0 4px 14px rgba(0,0,0,.25); }
/* Globito indicador de expandir (como la ficha de ISPBoss) */
.gficha-strip-expand {
    position: absolute; bottom: -3px; right: -3px;
    width: 18px; height: 18px; background: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,.18);
    font-size: 8px; color: #374151;
    pointer-events: none;
}
.gficha-strip-nav {
    width: 30px; height: 30px; border-radius: 8px; border: 1.5px dashed #b4c6ef;
    display: flex !important; align-items: center; justify-content: center;
    color: #94a3b8; font-size: 11px; text-decoration: none !important;
    transition: background .15s, border-color .15s, color .15s;
    margin-top: 2px;
}
.gficha-strip-nav:hover { background: #eff6ff; border-color: #6366f1; border-style: solid; color: #6366f1 !important; text-decoration: none !important; }
.gficha-strip-sep {
    width: 32px; height: 1px;
    background: linear-gradient(to right, transparent, #c7d7f5, transparent);
    margin: 2px 0;
}
.gficha-strip-btn {
    width: 36px; height: 36px; border-radius: 50%;
    border: 1.5px solid #e2e8f0; background: #fff;
    display: flex !important; align-items: center; justify-content: center;
    color: #64748b; font-size: 13px; text-decoration: none !important;
    transition: background .15s, border-color .15s, color .15s, transform .15s;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.gficha-strip-btn:hover {
    background: #eff6ff; border-color: #2563eb; color: #2563eb;
    transform: scale(1.12); box-shadow: 0 3px 8px rgba(37,99,235,.2); text-decoration: none !important;
}

/* ── Mobile: prevenir overflow horizontal global ─────────────────── */
/* En AdminLTE sidebar-mini el content-wrapper puede desbordar en mobile */
@media (max-width: 991px) {
    .wrapper, .content-wrapper, .content { overflow-x: hidden; }
}

/* ===================================================================
   Tipografia Inter (self-hosted, latin) — reemplaza Source Sans Pro
   OJO: rutas relativas al css (../fonts). Si algun dia se bundlea en
   release hay que usar CssRewriteUrlTransform o rutas absolutas.
   =================================================================== */
@font-face { font-family: 'Inter'; src: url('/includes/fonts/inter-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/includes/fonts/inter-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/includes/fonts/inter-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/includes/fonts/inter-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
body, .btn, input, select, textarea, .form-control, .dropdown-menu, .popover, .tooltip, .modal, .select2-container {
    font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* ===================================================================
   Empty state amigable en grillas (clase gv-emptyrow del Framework)
   =================================================================== */
.gv-emptyrow td {
    text-align: center !important;
    padding: 2rem 1rem !important;
    color: #94a3b8 !important;
    font-size: .88rem !important;
    background: #fff !important;
    border: none !important;
}
.gv-emptyrow td::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f49e'; /* box-open */
    display: block;
    font-size: 1.7rem;
    color: #d7dee8;
    margin-bottom: .45rem;
}

/* ===================================================================
   Toolbar de consultas: botones "ghost" blancos + toggle segmentado
   =================================================================== */
/* Botones secundarios de la toolbar (exportar, buscar, etc.): de gris
   solido a blanco con borde — el primario (+Nuevo) mantiene su color */
.content-wrapper .btn.my-btn.btn-secondary {
    background: #fff !important;
    border: 1px solid #dbe1ea !important;
    color: #475569 !important;
}
.content-wrapper .btn.my-btn.btn-secondary:hover {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #1e293b !important;
}
/* Toggle de vista (grilla/agrupado/mapa) como control segmentado */
.content-wrapper .my-radiobutton-group.btn-group-toggle {
    background: #fff;
    border: 1px solid #dbe1ea;
    border-radius: 8px;
    padding: 2px;
    box-shadow: none;
}
.content-wrapper .my-radiobutton-group.btn-group-toggle .btn {
    background: transparent !important;
    border: none !important;
    color: #64748b !important;
    border-radius: 6px !important;
    padding: .3rem .65rem;
    box-shadow: none !important;
}
.content-wrapper .my-radiobutton-group.btn-group-toggle .btn.active {
    background: #eef2ff !important;
    color: #4338ca !important;
}

/* NOTA: position:sticky (botones de edicion / thead de grillas) NO funciona
   en este layout: my-container / my-content / my-content-wrapper del
   Framework tienen overflow auto/hidden que lo anulan. Si algun dia se
   revisa el modelo de overflow del Framework, retomar la idea. */


/* ===================================================================
   Escritorio de Inicio (Default.aspx)
   =================================================================== */
.home-dash { max-width: 1500px; }
.home-saludo { color: #1e293b; font-size: 1.35rem; }
.home-fecha { color: #94a3b8; font-size: .85rem; }
.home-tip {
    color: #6366f1; font-size: .78rem; font-weight: 500;
    background: #eef2ff; border: 1px solid #e0e7ff;
    border-radius: 20px; padding: 5px 14px;
}
.home-kpi-titulo { font-size: .82rem; font-weight: 600; opacity: .85; }
.home-kpi-valor { font-size: 1.65rem; font-weight: 700; }
.home-sec-title {
    color: #64748b; font-weight: 700; font-size: .72rem;
    text-transform: uppercase; letter-spacing: .08em;
    margin: 2px 0 8px 2px;
}
.home-quick-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 7px; padding: 16px 6px; margin-bottom: 14px;
    color: #475569 !important; text-decoration: none !important;
    border: 1px solid #eef2f7 !important;
    transition: transform .15s, box-shadow .15s, border-color .15s, color .15s;
}
.home-quick-card i { font-size: 1.35rem; color: #6366f1; }
.home-quick-card span { font-size: .78rem; font-weight: 600; }
.home-quick-card:hover {
    transform: translateY(-3px);
    border-color: #c7d2fe !important;
    color: #4338ca !important;
    box-shadow: 0 8px 22px rgba(99,102,241,.16) !important;
}
.home-empty {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 2.2rem 1rem; color: #94a3b8; font-size: .88rem;
}
.home-empty i { font-size: 1.7rem; color: #d7dee8; }

/* Tarjetas KPI del escritorio: tile blanco compacto con punto de color junto
   al título, valor tabular protagonista y variación como píldora.
   OJO: el control renderiza .card-body con .text-center (utility !important
   de Bootstrap) — la alineación se pisa acá con !important. */
.home-dash .home-kpi {
    background: #fff !important;
    border: 1px solid #e8edf4 !important;
    border-radius: 12px;
    color: #0f172a !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.04) !important;
    margin-bottom: 10px !important;
    height: calc(100% - 10px); /* alturas parejas dentro de la fila */
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.home-dash a.d-block { height: 100%; }
.home-dash a:hover > .home-kpi {
    transform: translateY(-2px);
    border-color: #c7d2fe !important;
    box-shadow: 0 8px 22px rgba(99,102,241,.14) !important;
}
.home-dash .home-kpi .card-body {
    text-align: left !important;
    padding: 13px 16px !important;
    display: flex; flex-direction: column; justify-content: center; gap: 3px;
}
.home-dash .home-kpi .h4 {
    display: block;
    font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
    color: #64748b;
    margin: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.home-dash .home-kpi .h4::before {
    content: ""; display: inline-block;
    width: 8px; height: 8px; border-radius: 2.5px;
    background: var(--kpi, #6366f1);
    margin-right: 7px;
}
.home-dash .home-kpi h1 {
    margin: 0;
    font-size: 1.5rem; font-weight: 700;
    letter-spacing: -.02em; line-height: 1.2;
    color: #0f172a; font-variant-numeric: tabular-nums;
    /* los importes nunca se parten al medio del número: a lo sumo bajan de línea en el espacio del $ */
    word-break: keep-all; overflow-wrap: normal;
}
/* subtítulo opcional (ej. "153 facturas vencidas") */
.home-dash .home-kpi .card-body > .small { font-size: .72rem; color: #94a3b8 !important; }
.home-dash .home-kpi .card-body > .small:empty { display: none; }
/* línea de variación: % como píldora suave + referencia del período en gris */
.home-dash .home-kpi .card-body > div {
    display: flex; align-items: center; gap: 6px;
    font-size: .7rem; color: #94a3b8;
    margin-top: 2px; min-width: 0;
}
.home-dash .home-kpi .card-body > div > .text-success,
.home-dash .home-kpi .card-body > div > .text-danger,
.home-dash .home-kpi .card-body > div > .text-secondary {
    flex: 0 0 auto;
    font-size: .66rem; font-weight: 700;
    padding: 1px 8px; border-radius: 999px;
}
.home-dash .home-kpi .card-body > div > .text-success   { background: #ecfdf5; color: #059669 !important; }
.home-dash .home-kpi .card-body > div > .text-danger    { background: #fef2f2; color: #dc2626 !important; }
.home-dash .home-kpi .card-body > div > .text-secondary { background: #f1f5f9; color: #64748b !important; }
.home-dash .home-kpi .card-body > div > .text-muted {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.home-kpi-indigo { --kpi: #6366f1; }
.home-kpi-green  { --kpi: #10b981; }
.home-kpi-cyan   { --kpi: #06b6d4; }
.home-kpi-blue   { --kpi: #3b82f6; }
.home-kpi-teal   { --kpi: #14b8a6; }
.home-kpi-amber  { --kpi: #f59e0b; }
.home-kpi-red    { --kpi: #ef4444; }
.home-kpi-slate  { --kpi: #94a3b8; }

/* Tablas del escritorio: el identificador de cada fila linkea al registro */
.home-dash .card .table a.home-link {
    color: #4338ca; font-weight: 600; text-decoration: none;
}
.home-dash .card .table a.home-link:hover {
    color: #3730a3; text-decoration: underline;
}
/* link secundario (ej. el cliente de la fila): discreto, se revela al pasar */
.home-dash .card .table a.home-link-soft { color: inherit; text-decoration: none; }
.home-dash .card .table a.home-link-soft:hover { color: #4338ca; text-decoration: underline; }
.home-dash .card .table tbody tr:hover td { background: #f8fafd; }

/* Pipeline de pedidos (etapas conectadas, mismo concepto que el Centro de Pedidos) */
.home-pipe { display: flex; gap: 6px; align-items: stretch; flex-wrap: wrap; }
.home-stage {
    flex: 1 1 0; min-width: 120px;
    background: #fff; border: 1px solid #e8edf4;
    border-top: 3px solid var(--stage, #64748b);
    border-radius: 8px; padding: 10px 12px 8px;
    color: inherit !important; text-decoration: none !important;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.home-stage:hover {
    transform: translateY(-2px);
    border-color: #c7d2fe;
    box-shadow: 0 6px 18px rgba(99,102,241,.14);
}
.home-stage-label {
    font-size: .66rem; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase;
    color: #64748b; white-space: nowrap;
}
.home-stage-count { font-size: 1.35rem; font-weight: 700; color: #0f172a; line-height: 1.2; }
.home-stage-amount { font-size: .72rem; color: #64748b; white-space: nowrap; }
.home-stage-track { height: 5px; background: #eef2f7; border-radius: 3px; margin-top: 7px; overflow: hidden; }
.home-stage-fill { height: 5px; border-radius: 3px; background: var(--stage, #64748b); }
.home-pipe-arrow { align-self: center; color: #cbd5e1; flex: 0 0 auto; font-size: .8rem; }
@media (max-width: 992px) {
    .home-pipe-arrow { display: none; }
    .home-stage { min-width: 44%; }
}

/* ===================================================================
   UX de formularios de edicion (comprobantes y altas en general)
   =================================================================== */
/* Jerarquia label -> valor: label liviano y gris, el valor manda */
.content-wrapper .form-group > label {
    font-weight: 500;
    font-size: .74rem;
    color: #64748b;
    margin-bottom: .18rem;
    letter-spacing: .01em;
}
/* Fechas/horas alineadas a la izquierda como el resto de los campos */
.content-wrapper input.my-datepicker,
.content-wrapper input.my-timepicker,
.content-wrapper .my-datetime-picker input {
    text-align: left !important;
}
/* Botones de accion de seccion (Agregar / Buscar en los subheaders):
   de celeste solido ilegible a ghost con texto azul; el color fuerte
   queda reservado para la accion primaria (Guardar) */
.card-subheader .btn.btn-info {
    background: #fff !important;
    border: 1px solid #bfdbfe !important;
    color: #2563eb !important;
    font-size: .74rem !important;
    font-weight: 600;
    padding: .22rem .65rem !important;
    box-shadow: none !important;
}
.card-subheader .btn.btn-info:hover {
    background: #eff6ff !important;
    border-color: #93c5fd !important;
    color: #1d4ed8 !important;
}
/* Secciones del formulario diferenciadas: banda gris + acento indigo,
   recuperando el padding que el pl-0 del markup anula */
.content-wrapper .card-subheader {
    background: #f4f6fa !important;
    border-left: 3px solid #c7d2fe !important;
    padding: .5rem .9rem !important;
    border-top: 1px solid #e8edf4 !important;
    border-bottom: 1px solid #e8edf4 !important;
}
.content-wrapper .card-subheader .card-title {
    color: #334155 !important;
    font-weight: 700 !important;
}
/* aire entre secciones colapsables consecutivas */
.content-wrapper .my-collapsable-box { margin-bottom: 3px !important; }

/* ===================================================================
   Modales modernos (incluye confirmaciones del Framework .modal-confirm)
   =================================================================== */
.modal-content {
    border: none !important;
    border-radius: 14px !important;
    box-shadow: 0 24px 70px rgba(15,23,42,.28) !important;
    overflow: hidden;
}
.modal-header {
    background: #fff !important;
    border-bottom: 1px solid #eef2f7 !important;
    padding: .9rem 1.25rem;
    align-items: center;
}
.modal-header .modal-title { font-weight: 700; color: #1e293b; font-size: .95rem; }
.modal-header .close {
    color: #94a3b8; opacity: 1; text-shadow: none;
    transition: color .12s; outline: none;
}
.modal-header .close:hover { color: #475569; }
.modal-footer {
    border-top: 1px solid #eef2f7 !important;
    background: #fafbfd;
    padding: .7rem 1.25rem;
}
.modal-backdrop {
    background-color: rgba(15,23,42,.55) !important;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.modal-confirm .modal-body { font-size: .92rem; color: #334155; padding: 1.1rem 1.25rem; }

/* ===================================================================
   Toasts (toastr): de bloque solido 2015 a tarjeta blanca con acento
   =================================================================== */
#toast-container > div {
    background-color: #fff !important;
    background-image: none !important;
    color: #1e293b !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 30px rgba(15,23,42,.18) !important;
    opacity: 1 !important;
    padding: 13px 34px 13px 48px !important;
    border-left: 4px solid #94a3b8 !important;
    position: relative;
}
#toast-container > div::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    left: 16px; top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
}
#toast-container > .toast-success { border-left-color: #10b981 !important; }
#toast-container > .toast-success::before { content: '\f058'; color: #10b981; }
#toast-container > .toast-error { border-left-color: #ef4444 !important; }
#toast-container > .toast-error::before { content: '\f06a'; color: #ef4444; }
#toast-container > .toast-warning { border-left-color: #f59e0b !important; }
#toast-container > .toast-warning::before { content: '\f071'; color: #f59e0b; }
#toast-container > .toast-info { border-left-color: #3b82f6 !important; }
#toast-container > .toast-info::before { content: '\f05a'; color: #3b82f6; }
#toast-container .toast-title { font-weight: 700; color: #0f172a; font-size: .88rem; }
#toast-container .toast-message { font-size: .84rem; color: #475569; }
#toast-container .toast-close-button {
    color: #94a3b8 !important; text-shadow: none !important; opacity: 1 !important;
    top: 4px; right: 6px;
}
#toast-container .toast-progress { background: #c7d2fe !important; opacity: 1 !important; height: 3px; }

/* ===================================================================
   Anillo de foco para navegacion por teclado (no aparece con el mouse)
   =================================================================== */
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible, .btn:focus-visible {
    outline: 2px solid rgba(99,102,241,.6) !important;
    outline-offset: 1px;
}

/* ===================================================================
   Separadores de seccion dentro de un modulo del menu
   (li.nav-header que emite GetMenu para las funciones con Codigo="S")
   =================================================================== */
/* color unico para todos los titulos de seccion (si una Funcion "S" trae
   .Color, el inline lo pisa); el padding-left 12px alinea el titulo con
   los iconos de los items (los nav-link llevan padding 7px 12px) */
.gestor-sidebar .nav-sidebar .nav-treeview .nav-header {
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #22d3ee;
    padding: .7rem 12px .2rem 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}