/* Inovakore.UI · OwnTemplate 01.1
   Acabado compacto inspirado en las capturas del portal anterior.
   CSS propio: se carga después de compatibility.css, antes de Styles de cada vista.
   No modifica tamaños del elemento html: mantiene rem, zoom y utilidades existentes. */
:root {
    --ik-primary: #407995;
    --ik-primary-hover: #32647e;
    --ik-primary-soft: #edf4f8;
    --ik-ink: #495463;
    --ik-muted: #687583;
    --ik-canvas: #f3f4f6;
    --ik-surface: #fff;
    --ik-border: #e7eaee;
    --ik-sidebar: #2c3334;
    --ik-sidebar-ink: #b9c2c9;
    --ik-sidebar-muted: #a2afb8;
    --ik-sidebar-active: #384347;
    --ik-success: #247650;
    --ik-success-soft: #edf7f1;
    --ik-warning: #865f24;
    --ik-warning-soft: #fcf5e8;
    --ik-danger: #b94e5c;
    --ik-danger-soft: #fbf0f1;
    --ik-info: #337c92;
    --ik-info-soft: #edf7fa;
    --ik-radius: .3rem;
    --ik-radius-sm: .25rem;
    --ik-shadow: 0 1px 3px rgb(35 47 62 / 5%);
    --ik-sidebar-width: 15rem;
    --ik-topbar-height: 4.375rem;
    --bs-body-font-size: .875rem;
    --bs-body-font-weight: 400;
    --bs-body-color: var(--ik-ink);
    --bs-body-color-rgb: 73, 84, 99;
    --bs-heading-color: var(--ik-ink);
    --bs-secondary-color: var(--ik-muted);
    --bs-primary: var(--ik-primary);
    --bs-primary-rgb: 64, 121, 149;
    --bs-primary-bg-subtle: var(--ik-primary-soft);
    --bs-primary-border-subtle: #d6e5ee;
    --bs-primary-text-emphasis: #32647e;
    --bs-link-color: var(--ik-primary);
    --bs-link-color-rgb: 64, 121, 149;
    --bs-link-hover-color: var(--ik-primary-hover);
    --bs-link-hover-color-rgb: 50, 100, 126;
    --bs-success-rgb: 36, 118, 80;
    --bs-success-bg-subtle: var(--ik-success-soft);
    --bs-danger-rgb: 185, 78, 92;
    --bs-danger-bg-subtle: var(--ik-danger-soft);
    --bs-warning-rgb: 134, 95, 36;
    --bs-warning-bg-subtle: var(--ik-warning-soft);
    --bs-info-rgb: 51, 124, 146;
    --bs-info-bg-subtle: var(--ik-info-soft);
}

[data-bs-theme="dark"] {
    --ik-ink: #dce3ec;
    --ik-muted: #9eabba;
    --ik-canvas: #111820;
    --ik-surface: #19222c;
    --ik-border: #2b3743;
    --ik-primary: #69a9c8;
    --ik-primary-hover: #83bad4;
    --ik-primary-soft: #213846;
    --ik-sidebar: #10171d;
    --ik-sidebar-ink: #c2ccd5;
    --ik-sidebar-muted: #8f9ca7;
    --ik-sidebar-active: #26353e;
    --ik-success-soft: #18372b;
    --ik-warning-soft: #3b3020;
    --ik-danger-soft: #40242a;
    --ik-info-soft: #1d3540;
    --ik-shadow: 0 2px 10px rgb(0 0 0 / 18%);
    --bs-body-color: var(--ik-ink);
    --bs-body-color-rgb: 220, 227, 236;
    --bs-body-bg: var(--ik-canvas);
    --bs-secondary-bg: var(--ik-surface);
    --bs-tertiary-bg: #202b36;
    --bs-heading-color: var(--ik-ink);
    --bs-secondary-color: var(--ik-muted);
    --bs-border-color: var(--ik-border);
    --bs-link-color: var(--ik-primary);
    --bs-link-hover-color: var(--ik-primary-hover);
}
[data-bs-theme="dark"] .ik-search-trigger,
[data-bs-theme="dark"] .ik-app .table > thead { background:#202b36; }
[data-bs-theme="dark"] .ik-search-trigger kbd { background:#111820; }
[data-bs-theme="dark"] .ik-task:hover,
[data-bs-theme="dark"] .ik-action:hover { background:#202b36; }
[data-bs-theme="dark"] .ik-notification-badge { border-color:var(--ik-surface); }

/* Los colores de catálogo guardan clases Bootstrap como bg-dark.
   El texto del badge debe conservar contraste independientemente del tema. */
.ik-app .badge.bg-dark {
    color: #fff !important;
}

[data-bs-theme="dark"] .ik-app .badge.bg-dark {
    background-color: #526170 !important;
    border: 1px solid #718191;
    color: #fff !important;
}

[data-bs-theme="dark"] .ik-app .badge.bg-dark-subtle,
[data-bs-theme="dark"] .ik-app .badge.bg-dark-subtle.text-dark {
    background-color: #2d3945 !important;
    color: #e8edf3 !important;
}

/* Jerarquía más discreta, sin hacer pequeño todo el navegador. */
.ik-app { font-size: .875rem; line-height: 1.5; }
.ik-app h1, .ik-app h2, .ik-app h3, .ik-app h4, .ik-app h5, .ik-app h6 {
    font-weight: 600; letter-spacing: 0; line-height: 1.4;
}
.ik-app h1 { font-size: 1.375rem; }
.ik-app h2 { font-size: 1.125rem; }
.ik-app h3 { font-size: 1rem; }
.ik-app small { font-size: .75rem; }
.ik-app :focus-visible { outline-color: #5789a5; outline-width: 2px; }
.ik-app .ik-eyebrow { font-size: .6875rem; letter-spacing: .075em; font-weight: 600; }
.ik-page-heading { margin-bottom: 1.4rem; }
.ik-page-heading p { font-size: .8125rem; }
.ik-main { --ik-page-padding: 1.5rem; padding: var(--ik-page-padding); }
.ik-app .page-title-box { margin-bottom: 1.5rem; }
.ik-app .page-title-box h4 { font-size: .9375rem; font-weight: 600; }
.ik-app .page-title-box p, .ik-app .breadcrumb { font-size: .8125rem; }

/* Banda de título sólo en el encabezado principal de las vistas legacy. */
.ik-main > .row:first-child > .col-12 > .page-title-box {
    margin-top: calc(-1 * var(--ik-page-padding));
    margin-right: calc(-1 * var(--ik-page-padding));
    margin-left: calc(-1 * var(--ik-page-padding));
    padding: .875rem var(--ik-page-padding);
    background: var(--ik-surface);
    border-bottom: 1px solid var(--ik-border);
}

/* Tarjetas neutrales: el estado sigue visible en sus badges y encabezados.
   No se neutraliza .border-danger fuera de .card ni los campos inválidos. */
.ik-app .card { border-color: var(--ik-border); box-shadow: var(--ik-shadow); }
.ik-app .card.border-primary, .ik-app .card.border-info, .ik-app .card.border-danger {
    border-color: var(--ik-border) !important;
}
.ik-app .card-header, .ik-app .card-body { padding: 1rem; }
.ik-app .card-title { font-size: .9375rem; font-weight: 600; }
.ik-app .card-animate:hover { box-shadow: 0 3px 10px rgb(35 47 62 / 6%); }
.ik-app .badge { font-size: .6875rem; font-weight: 600; padding: .25rem .45rem; border-radius: .2rem; }
.ik-app .alert { font-size: .8125rem; }
.ik-app .table { font-size: .8125rem; }
.ik-app .table > thead { background: #f8f9fa; font-size: .75rem; }
.ik-app .table > :not(caption) > * > * { padding: .75rem 1rem; }

/* Controles compactos; alturas táctiles se amplían en pantallas pequeñas. */
.ik-app .btn { font-size: .8125rem; font-weight: 500; min-height: 2.25rem; padding: .4375rem .875rem; }
.ik-app .btn-sm { min-height: 1.875rem; font-size: .75rem; padding: .25rem .55rem; }
.ik-app .btn-primary { --bs-btn-focus-shadow-rgb: 64, 121, 149; }
.ik-app .btn-info {
    --bs-btn-color: #fff; --bs-btn-bg: var(--ik-info); --bs-btn-border-color: var(--ik-info);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #286377; --bs-btn-hover-border-color: #286377;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #286377; --bs-btn-active-border-color: #286377;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--ik-info); --bs-btn-disabled-border-color: var(--ik-info);
    --bs-btn-focus-shadow-rgb: 51, 124, 146;
}
.ik-app .btn-success {
    --bs-btn-bg: var(--ik-success); --bs-btn-border-color: var(--ik-success);
    --bs-btn-hover-bg: #1b6040; --bs-btn-hover-border-color: #1b6040;
    --bs-btn-active-bg: #1b6040; --bs-btn-active-border-color: #1b6040;
    --bs-btn-disabled-bg: var(--ik-success); --bs-btn-disabled-border-color: var(--ik-success);
    --bs-btn-focus-shadow-rgb: 36, 118, 80;
}
.ik-app .btn-danger {
    --bs-btn-bg: var(--ik-danger); --bs-btn-border-color: var(--ik-danger);
    --bs-btn-hover-bg: #9f3f4c; --bs-btn-hover-border-color: #9f3f4c;
    --bs-btn-active-bg: #9f3f4c; --bs-btn-active-border-color: #9f3f4c;
    --bs-btn-disabled-bg: var(--ik-danger); --bs-btn-disabled-border-color: var(--ik-danger);
    --bs-btn-focus-shadow-rgb: 185, 78, 92;
}
.ik-app .btn-outline-primary { --bs-btn-active-border-color: var(--ik-primary); --bs-btn-focus-shadow-rgb: 64, 121, 149; }
.ik-app .btn-soft-primary:hover { background: #e1edf4; }
.ik-app .btn-soft-info { background: var(--ik-info-soft); color: var(--ik-info); }
.ik-app .form-control, .ik-app .form-select {
    min-height: 2.375rem; font-size: .8125rem; border-color: #cfd5dd;
}
.ik-app .form-control:focus, .ik-app .form-select:focus {
    border-color: #81a5ba; box-shadow: 0 0 0 .15rem rgb(64 121 149 / 12%);
}
.ik-app .form-label { font-size: .8125rem; font-weight: 500; margin-bottom: .4rem; }
.ik-app .form-control.is-invalid, .ik-app .form-select.is-invalid,
.ik-app .form-control.input-validation-error, .ik-app .form-select.input-validation-error,
.ik-app .was-validated .form-control:invalid, .ik-app .was-validated .form-select:invalid {
    border-color: var(--ik-danger);
}
.ik-app .form-control.is-invalid:focus, .ik-app .form-select.is-invalid:focus,
.ik-app .form-control.input-validation-error:focus, .ik-app .form-select.input-validation-error:focus,
.ik-app .was-validated .form-control:invalid:focus, .ik-app .was-validated .form-select:invalid:focus {
    box-shadow: 0 0 0 .15rem rgb(185 78 92 / 12%);
}
.ik-app .invalid-feedback, .ik-app .field-validation-error { color: var(--ik-danger); }
.ik-app .dropdown-menu { font-size: .8125rem; box-shadow: 0 4px 18px rgb(35 47 62 / 9%); }
.ik-app .dropdown-item { padding: .55rem 1rem; }
.ik-app .modal-content { border-radius: .4rem; }
.ik-app .modal-header, .ik-app .modal-body, .ik-app .modal-footer { padding: 1rem; }
.ik-app .nav-tabs .nav-link { font-size: .8125rem; font-weight: 500; }

/* Navegación menos pesada; conservar la lógica de collapse y el foco móvil. */
.ik-brand { padding: 1rem 1.25rem; }
.ik-brand-mark { width: 2rem; height: 2rem; font-size: 1.05rem; border-radius: .35rem; }
.ik-brand-name { font-size: 1.2rem; letter-spacing: -.04em; }
.ik-tenant { padding: .65rem .5rem; margin: 0 .85rem .75rem; border: 0; border-radius: .25rem; background: rgb(255 255 255 / 3%); font-size: .75rem; }
.ik-navigation { padding: 0 .65rem .75rem; scrollbar-color: #536064 transparent; }
.ik-nav-link { font-size: .8125rem; font-weight: 400; min-height: 2.5rem; padding: .6rem .65rem; gap: .65rem; border-radius: .25rem; margin: .1rem 0; }
.ik-nav-link > i:first-child { font-size: 1.05rem; }
.ik-nav-link.active { box-shadow: inset 2px 0 #8fb3c6; }
.ik-nav-toggle.active { box-shadow: none; font-weight: 600; }
.ik-submenu { margin: .1rem 0 .4rem 1rem; padding-left: .5rem; border-left-color: #465256; }
.ik-submenu .ik-nav-link { font-size: .8125rem; min-height: 2.125rem; padding: .4rem .5rem; }
.ik-sidebar-footer { padding: .85rem 1.15rem; border-top-color: #424d50; font-size: .6875rem; }
.ik-topbar { padding: .55rem 1.5rem; gap: .7rem; }
.ik-topbar-title { display: none; } /* La vista ya muestra el título principal. */
.ik-icon-button { font-size: 1.15rem; width: 2.5rem; height: 2.5rem; border-radius: .3rem; }
.ik-search-trigger { font-size: .75rem; min-height: 2.25rem; padding: .35rem .65rem; border-radius: .3rem; background: #fafbfc; }
.ik-search-trigger:hover { border-color: #b3c9d6; }
.ik-user-trigger strong { font-size: .8125rem; font-weight: 500; }
.ik-user-trigger small { font-size: .6875rem; }
.ik-user-trigger > .ik-avatar { width: 2.5rem; height: 2.5rem; }
.ik-footer { padding: .85rem 1.5rem; }
.ik-search-item { padding: .7rem .8rem; border-radius: .3rem; }
.ik-search-item strong, .ik-task strong { font-size: .8125rem; font-weight: 500; }
.ik-search-item small, .ik-task small { font-size: .75rem; }

/* Misma densidad para el dashboard nuevo. */
.ik-kpi-grid { gap: 1rem; margin-bottom: 1.5rem; }
.ik-kpi { padding: 1rem; }
.ik-kpi:hover { transform: none; border-color: #bdcfda; }
.ik-kpi-head { font-size: .8125rem; }
.ik-kpi-value { font-size: 1.875rem; font-weight: 600; letter-spacing: -.025em; margin: .65rem 0 .35rem; }
.ik-icon-tile { width: 2.25rem; height: 2.25rem; font-size: 1.1rem; border-radius: .35rem; }
.ik-task { padding: .85rem 1rem; }
.ik-task:hover { background: #f8fafb; }
.ik-count { font-size: .75rem; font-weight: 500; border-radius: .2rem; }
.ik-action { font-size: .8125rem; font-weight: 500; padding: .85rem; border-radius: .3rem; }
.ik-action:hover { border-color: #bdcfda; background: #f8fbfc; }
.ik-detail-row { font-size: .8125rem; }
.ik-toast { border-radius: .35rem; font-size: .8125rem; }

@media (max-width: 991.98px) {
    .ik-main { --ik-page-padding: 1.25rem; }
    .ik-topbar { padding: .55rem 1rem; }
}
@media (max-width: 575.98px) {
    .ik-main { --ik-page-padding: 1rem; }
    .ik-topbar { padding: .5rem .75rem; gap: .4rem; }
    .ik-search-trigger { font-size: 1.1rem; }
    .ik-app .btn, .ik-app .btn-sm { min-height: 2.75rem; }
    .ik-app .form-control, .ik-app .form-select { min-height: 2.75rem; font-size: 1rem; }
    .ik-nav-link, .ik-submenu .ik-nav-link { min-height: 2.75rem; }
    .ik-icon-button { width: 2.75rem; height: 2.75rem; }
    .ik-kpi { padding: .85rem; }
    .ik-kpi-value { font-size: 1.75rem; }
}
@media (pointer: coarse) {
    .ik-app .btn, .ik-app .btn-sm, .ik-app .form-control, .ik-app .form-select,
    .ik-nav-link, .ik-submenu .ik-nav-link { min-height: 2.75rem; }
    .ik-icon-button { width: 2.75rem; height: 2.75rem; }
}
@media print {
    .ik-main { padding: 0; }
    .ik-main > .row:first-child > .col-12 > .page-title-box { margin: 0 0 1rem; padding: 0 0 1rem; }
    .ik-app .card { box-shadow: none; }
}
/* Data Grid 01.0 */
.ik-data-grid thead {
    position: sticky;
    top: 0;
    z-index: 3;
}

.ik-sort-button {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 600;
    gap: .35rem;
    padding: 0;
    white-space: nowrap;
}

.ik-sort-button:hover,
.ik-sort-button:focus-visible {
    color: var(--vz-primary);
}

.ik-sort-icon {
    color: var(--vz-secondary-color);
    font-size: .9rem;
}

.ik-sort-button[aria-sort="ascending"] .ik-sort-icon,
.ik-sort-button[aria-sort="descending"] .ik-sort-icon {
    color: var(--vz-primary);
}

.ik-grid-order {
    background: var(--vz-primary-bg-subtle);
    border-radius: 999px;
    color: var(--vz-primary);
    display: inline-flex;
    font-size: .75rem;
    gap: .3rem;
    padding: .3rem .65rem;
}

[data-bs-theme="dark"] .ik-data-grid .position-sticky.end-0 {
    background-color: var(--vz-card-bg) !important;
}

/* Interactive summaries and accessible grid focus */
.ik-summary-filter {
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.ik-summary-filter:hover {
    border-color: color-mix(in srgb, var(--ik-primary) 50%, var(--ik-border));
}

.ik-summary-filter.is-active {
    border-color: var(--ik-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ik-primary) 18%, transparent);
}

.ik-summary-filter:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ik-primary) 55%, white);
    outline-offset: 3px;
}

[data-bs-theme="dark"] .ik-app .table-hover > tbody > tr:hover > *,
[data-bs-theme="dark"] .ik-app .table-hover > tbody > tr:focus-within > * {
    --bs-table-bg-state: color-mix(in srgb, var(--ik-surface) 82%, white 18%);
    background-color: color-mix(in srgb, var(--ik-surface) 82%, white 18%);
    color: var(--ik-ink);
}

[data-bs-theme="dark"] .ik-app .table-hover > tbody > tr:focus-within {
    outline: 2px solid color-mix(in srgb, var(--ik-primary) 65%, white);
    outline-offset: -2px;
}

/* Ticket category selector */
.ik-app #category-selector > [class*="col-"] { display: flex; }
.ik-app .ticket-category-card {
    align-items: center; background: color-mix(in srgb, var(--ik-surface) 97%, var(--ik-primary) 3%);
    border: 1px solid var(--ik-border); border-radius: .75rem; color: var(--ik-ink); cursor: pointer;
    display: flex; gap: .8rem; min-height: 4.75rem; padding: .85rem 1rem; text-align: left; width: 100%;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ik-app .ticket-category-card:hover { border-color: color-mix(in srgb, var(--ik-primary) 55%, var(--ik-border)); box-shadow: 0 5px 16px rgb(25 40 68 / 8%); transform: translateY(-2px); }
.ik-app .ticket-category-card.selected { background: color-mix(in srgb, var(--ik-surface) 88%, var(--ik-primary) 12%); border-color: var(--ik-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ik-primary) 15%, transparent); }
.ik-app .ticket-category-icon { align-items: center; background: var(--ik-primary-soft); border-radius: .7rem; color: var(--ik-primary); display: inline-flex; flex: 0 0 2.8rem; font-size: 1.4rem; height: 2.8rem; justify-content: center; }
.ik-app #category-selector > div:nth-child(6n + 2) .ticket-category-icon { background: var(--ik-info-soft); color: var(--ik-info); }
.ik-app #category-selector > div:nth-child(6n + 3) .ticket-category-icon { background: var(--ik-success-soft); color: var(--ik-success); }
.ik-app #category-selector > div:nth-child(6n + 4) .ticket-category-icon { background: var(--ik-warning-soft); color: var(--ik-warning); }
.ik-app #category-selector > div:nth-child(6n + 5) .ticket-category-icon { background: var(--ik-danger-soft); color: var(--ik-danger); }
.ik-app .ticket-category-card.selected .ticket-category-icon { background: var(--ik-primary); color: #fff; }
.ik-app .ticket-category-name { font-size: .875rem; font-weight: 600; line-height: 1.3; }
@media (max-width: 575.98px) { .ik-app .ticket-category-card { min-height: 4.25rem; padding: .7rem .8rem; } }