/* ======================================================
   TuComandaPro — Global styles
   ====================================================== */

:root {
    --tblr-primary: #f76707; /* Naranja Fuego */
    --tblr-primary-rgb: 247, 103, 7;
}

/* Reusable motion and scrolling utilities for dynamic module content. */
.scrollbar-stable { scrollbar-gutter: stable; }
.ui-enter-soft { animation: ui-enter-soft 0.24s ease-out both; }
@keyframes ui-enter-soft { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .ui-enter-soft { animation: none; } }

/* Notification center */
.notifications-dropdown { width: min(38rem, calc(100vw - 1.5rem)); padding: 0; overflow: hidden; border: 0; border-top: 4px solid var(--brand-btn-bg, #f76707); border-radius: 0.85rem; box-shadow: 0 1rem 2.5rem rgba(24, 36, 51, 0.18); }
.notifications-dropdown .card { background: var(--tblr-bg-surface, var(--tblr-body-bg)); }
.notifications-filters { display: flex; gap: 1.25rem; overflow-x: auto; scrollbar-width: none; }
.notifications-filters::-webkit-scrollbar { display: none; }
.notifications-filters button { position: relative; padding: 0.65rem 0 0.8rem; border: 0; background: transparent; color: var(--tblr-secondary-color); font-size: 0.875rem; font-weight: 600; }
.notifications-filters button::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; content: ''; background: transparent; }
.notifications-filters button.active { color: var(--brand-btn-bg); }
.notifications-filters button.active::after { background: var(--brand-btn-bg); }
.notifications-filters .badge { margin-left: 0.25rem; background: color-mix(in srgb, var(--brand-btn-bg) 10%, transparent); color: var(--brand-btn-bg); font-size: 0.7rem; }
.notifications-platform-filter { display: inline-flex; align-items: center; gap: 0.28rem; white-space: nowrap; }
.notifications-platform-filter .icon { width: 0.95rem; height: 0.95rem; }
.notifications-filters .notifications-platform-filter.active { color: var(--tblr-secondary-color); }
.notifications-filters .notifications-platform-filter.active::after { background: var(--tblr-border-color); }
.notifications-filters .notifications-platform-filter .badge { background: var(--tblr-tertiary-bg); color: var(--tblr-secondary-color); }
.notifications-list { display: flex; flex-direction: column; gap: 0.5rem; max-height: 17rem; overflow-y: auto; }
.notification-item { position: relative; display: flex; gap: 0.9rem; align-items: flex-start; padding: 1rem; border-radius: 0.75rem; color: inherit; text-decoration: none; transition: background-color 0.15s ease, transform 0.15s ease; }
.notification-item:hover { background: var(--tblr-bg-surface-secondary, var(--tblr-tertiary-bg)); color: inherit; transform: translateX(2px); }
.notification-item.notification-critical { background: color-mix(in srgb, var(--tblr-danger) 5%, var(--tblr-bg-surface, var(--tblr-body-bg))); }
.notification-item.notification-platform { border: 1px solid var(--tblr-border-color); background: var(--tblr-bg-surface, var(--tblr-body-bg)); }
.notification-item.notification-platform:hover { background: var(--tblr-bg-surface-secondary, var(--tblr-tertiary-bg)); }
.notification-item.is-read { opacity: 0.65; }
.notification-icon { display: inline-flex; width: 3.25rem; height: 3.25rem; flex: 0 0 3.25rem; align-items: center; justify-content: center; border-radius: 50%; }
.notification-critical .notification-icon { color: var(--tblr-danger); background: var(--tblr-danger-lt); }
.notification-warning .notification-icon { color: var(--tblr-warning); background: var(--tblr-warning-lt); }
.notification-success .notification-icon { color: var(--tblr-success); background: var(--tblr-success-lt); }
.notification-info .notification-icon { color: var(--tblr-info); background: var(--tblr-info-lt); }
.notification-content { display: flex; min-width: 0; flex: 1; flex-direction: column; padding-right: 3rem; }
.notification-title { color: var(--tblr-body-color); font-weight: 700; }
.notification-platform-badge { display: inline-flex; width: max-content; align-items: center; gap: 0.3rem; margin-bottom: 0.4rem; padding: 0.2rem 0.48rem; border: 1px solid var(--tblr-border-color); border-radius: 999px; background: var(--tblr-tertiary-bg); color: var(--tblr-secondary-color); font-size: 0.67rem; font-weight: 800; letter-spacing: 0.015em; }
.notification-platform-badge span { opacity: 0.65; }
.notification-message { margin-top: 0.2rem; color: var(--tblr-secondary-color); font-size: 0.875rem; line-height: 1.35; }
.notification-label { width: max-content; margin-top: 0.55rem; padding: 0.15rem 0.4rem; border-radius: 0.25rem; font-size: 0.7rem; font-weight: 700; }
.notification-critical .notification-label { color: var(--tblr-danger); background: var(--tblr-danger-lt); }
.notification-warning .notification-label { color: var(--tblr-warning); background: var(--tblr-warning-lt); }
.notification-success .notification-label { color: var(--tblr-success); background: var(--tblr-success-lt); }
.notification-info .notification-label { color: var(--tblr-info); background: var(--tblr-info-lt); }
.notification-time { position: absolute; top: 1rem; right: 1.25rem; color: var(--tblr-secondary-color); font-size: 0.75rem; white-space: nowrap; }
.notification-unread-dot { position: absolute; right: 1.35rem; bottom: 1.2rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--tblr-danger); }
.notifications-footer { background: color-mix(in srgb, var(--brand-btn-bg, var(--brand-tint, var(--tblr-primary))) 4%, transparent) !important; border-top: 1px solid rgba(120, 130, 140, 0.1) !important; }
.notifications-footer .btn-link { padding: 0.4rem 0.65rem !important; border-radius: 0.35rem; text-decoration: none; font-size: 0.875rem; font-weight: 600; }
#notifications-trigger { position: relative; }
#notifications-badge:not(.d-none) { position: absolute; top: -0.2rem; right: -0.35rem; display: inline-flex; min-width: 1.35rem; height: 1.35rem; align-items: center; justify-content: center; padding: 0 0.3rem; border: 2px solid var(--tblr-bg-surface, var(--tblr-body-bg)); border-radius: 999px; background: var(--tblr-danger); color: #fff; font-size: 0.7rem; font-weight: 800; line-height: 1; transform: none !important; box-shadow: 0 0.2rem 0.45rem rgba(214, 57, 57, 0.3); }
.notification-badge-pulse { animation: notification-badge-pulse 2.4s ease-out infinite; }
@keyframes notification-badge-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tblr-danger) 45%, transparent); } 70% { box-shadow: 0 0 0 0.6rem transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .notification-badge-pulse { animation: none; } }
.alert-rule-choice { position: relative; display: flex; min-height: 5.8rem; align-items: center; justify-content: center; gap: 0.65rem; padding: 0.85rem; border: 1px solid var(--tblr-border-color-translucent); border-radius: 0.5rem; color: var(--tblr-body-color); text-align: center; cursor: pointer; }
.alert-rule-choice > .icon { width: 1.5rem; height: 1.5rem; flex: 0 0 1.5rem; }
.alert-rule-choice input { position: absolute; top: 0.55rem; right: 0.55rem; width: 1.1rem; height: 1.1rem; accent-color: var(--brand-btn-bg); }
.alert-rule-choice:has(input:checked) { border-color: color-mix(in srgb, var(--brand-btn-bg) 55%, transparent); background: color-mix(in srgb, var(--brand-btn-bg) 4%, transparent); }
.alert-rule-choice span { display: block; font-size: 0.8rem; }
.channel-choice, .alert-rule-choice.is-static, .alert-rule-choice.is-unavailable { justify-content: flex-start; text-align: left; }
.alert-rule-choice strong { display: block; font-size: 0.85rem; }
.alert-rule-choice.is-static { cursor: default; }
.alert-rule-choice.is-unavailable { opacity: 0.55; cursor: not-allowed; }
.alert-rule-check { position: absolute; top: 0.55rem; right: 0.55rem; color: var(--tblr-success); font-weight: 800; }
.alert-rule-summary { background: var(--tblr-tertiary-bg); border: 1px solid var(--tblr-border-color-translucent); }
.alert-rule-summary-note { padding: 0.75rem; border-radius: 0.4rem; background: var(--tblr-bg-surface, var(--tblr-body-bg)); border: 1px solid var(--tblr-border-color-translucent); color: var(--tblr-body-color); }
.alert-rules-table thead th { padding-top: 0.8rem; padding-bottom: 0.8rem; color: var(--tblr-secondary); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.alert-rules-table tbody td { padding-top: 0.9rem; padding-bottom: 0.9rem; }
.alert-rule-name { color: var(--tblr-body-color); font-weight: 700; }
.alert-table-chip { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 1.7rem; padding: 0.2rem 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; line-height: 1.15; }
.alert-table-chip { margin: 0.1rem 0.2rem 0.1rem 0; white-space: nowrap; }
.alert-table-chip .icon { width: 0.9rem; height: 0.9rem; }
.alert-table-chip-recipient { color: var(--tblr-body-color); background: var(--tblr-tertiary-bg); border: 1px solid var(--tblr-border-color-translucent); }
.alert-table-chip-channel { color: var(--brand-btn-bg); background: color-mix(in srgb, var(--brand-btn-bg) 8%, transparent); }
.alert-rule-config { display: block; max-width: 19rem; color: var(--tblr-secondary); font-size: 0.78rem; line-height: 1.35; }

html, body {
    margin: 0;
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
}

.page {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: var(--tblr-body-bg);
    overflow-x: clip;
}

.app-topbar,
.app-nav,
.app-nav .navbar,
.page-wrapper {
    width: 100%;
    max-width: 100%;
}

.app-topbar,
.app-nav,
.app-nav .navbar {
    margin: 0;
    border-radius: 0;
    background: var(--tblr-bg-surface);
    transition: background-color 0.2s ease;
}

/* ── Tarjeta Premium Global ── */
.card-premium {
    background-color: var(--tblr-bg-surface);
    border: 1px solid rgba(120, 130, 140, 0.15) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

/* ── Utilidades de Marca Globales (Brand Kit) ── */
.text-brand {
    /* Iconos y textos sueltos usan la variable semántica de icono */
    color: var(--brand-icon, var(--tblr-primary)) !important;
}

.btn-brand {
    /* El botón base y su texto */
    background-color: var(--brand-btn-bg, var(--tblr-primary)) !important;
    border: 1px solid rgba(120, 130, 140, 0.2) !important; /* Borde sutil salvavidas para blanco puro */
    color: var(--brand-btn-text, #ffffff) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.2s ease;
}

.btn-brand:hover {
    filter: brightness(0.85) !important;
    color: var(--brand-btn-text, #ffffff) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2) !important;
}

.btn-outline-brand {
    color: var(--brand-btn-bg, var(--tblr-primary)) !important;
    border-color: var(--brand-btn-bg, var(--tblr-primary)) !important;
}

.btn-outline-brand:hover {
    color: var(--brand-btn-text, #ffffff) !important;
    background-color: var(--brand-btn-bg, var(--tblr-primary)) !important;
}

/* ── Patrones compartidos de módulos administrativos ── */
.kpi-card-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kpi-card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08) !important;
}

.filter-pill {
    transition: all 0.2s ease;
    border: 1px solid transparent;
    background-color: transparent;
}

.filter-pill:hover {
    background-color: rgba(120, 130, 140, 0.08);
    color: var(--tblr-body-color) !important;
}

.filter-pill.active {
    background-color: color-mix(in srgb, var(--brand-icon, var(--tblr-primary)) 15%, transparent) !important;
    color: var(--brand-icon, var(--tblr-primary)) !important;
    font-weight: 600;
}

.filter-pill.active svg {
    color: var(--brand-icon, var(--tblr-primary)) !important;
}

/* ── Íconos del toggle de tema ── */
.theme-icon-dark { display: none; }
.theme-icon-light { display: inline-block; }

html[data-bs-theme='dark'] .theme-icon-dark { display: inline-block; }
html[data-bs-theme='dark'] .theme-icon-light { display: none; }


/* =========================================
   Tom Select - Integración Global Tabler
   ========================================= */

.ts-wrapper.form-select-lg { padding: 0 !important; border: none !important; }
.ts-control, .ts-dropdown { background-color: var(--tblr-bg-surface) !important; border: 1px solid var(--tblr-border-color) !important; color: var(--tblr-body-color) !important; border-radius: var(--tblr-border-radius); font-family: inherit !important; }

/* Hacer que TomSelect respete estilos seamless (border-0 bg-body) */
.ts-wrapper.border-0 .ts-control { border: none !important; background-color: var(--tblr-body-bg) !important; }
.ts-wrapper.shadow-sm .ts-control { box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important; }

.ts-control input { color: var(--tblr-body-color) !important; font-size: 1rem !important; }
.ts-control input::placeholder { color: var(--tblr-text-muted) !important; }
.ts-control .item { font-family: inherit !important; font-size: 1rem !important; color: var(--tblr-body-color) !important; }
.ts-dropdown .option { padding: 10px 14px !important; font-size: 0.95rem; border-bottom: 1px solid var(--tblr-border-color-translucent); color: var(--tblr-body-color); }
.ts-dropdown .option:last-child { border-bottom: none; }
.ts-dropdown .active, .ts-dropdown .option:hover { background-color: color-mix(in srgb, var(--brand-tint, var(--tblr-primary)) 12%, transparent) !important; color: var(--brand-icon, var(--tblr-primary)) !important; font-weight: 500; }

/* Pulsing Status Dot */
@keyframes pulse-ring {
    0% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(47, 179, 68, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(47, 179, 68, 0); }
    100% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(47, 179, 68, 0); }
}
.status-dot-pulse {
    animation: pulse-ring 2s infinite;
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #2fb344;
}

/* ======================================================
   Componentes Premium Reutilizables
   ====================================================== */

/* ── Fondos de Marca Dinámicos ── */
.bg-brand-lt {
    background-color: color-mix(in srgb, var(--brand-tint, var(--tblr-primary)) 5%, transparent) !important;
}

/* ── Footer Premium ── */
.footer-premium {
    background: color-mix(in srgb, var(--brand-btn-bg, var(--brand-tint, var(--tblr-primary))) 4%, transparent) !important;
    border-top: 1px solid rgba(120, 130, 140, 0.1) !important;
}

/* ── Menú Lateral Vertical ── */
.list-group-item { border: 1px solid transparent !important; background: transparent !important; transition: all .18s ease; }

.list-group-item:hover {
    background: color-mix(in srgb, var(--brand-tint, var(--tblr-primary)) 8%, transparent) !important;
    border-color: color-mix(in srgb, var(--brand-tint, var(--tblr-primary)) 20%, transparent) !important;
}

.nav-item-active,
.list-group-item[data-bs-toggle="tab"].active {
    background: color-mix(in srgb, var(--brand-tint, var(--tblr-primary)) 13%, transparent) !important;
    border-color: color-mix(in srgb, var(--brand-tint, var(--tblr-primary)) 35%, transparent) !important;
    /* La línea indicadora usa la fuerza del color del icono para máxima visibilidad */
    border-right: 4px solid var(--brand-icon, var(--tblr-primary)) !important;
    color: var(--tblr-body-color) !important;
    box-shadow: none !important;
}

/* Animación de los Iconos del Menú */
.list-group-item .tab-icon { background: var(--tblr-bg-surface-secondary) !important; color: var(--tblr-secondary) !important; border-color: var(--tblr-border-color) !important; transition: all .18s ease; }

.nav-item-active .tab-icon,
.list-group-item[data-bs-toggle="tab"].active .tab-icon {
    background: color-mix(in srgb, var(--brand-tint, var(--tblr-primary)) 13%, transparent) !important;
    border-color: color-mix(in srgb, var(--brand-tint, var(--tblr-primary)) 35%, transparent) !important;
    color: var(--brand-icon, var(--tblr-primary)) !important;
}

/* ── Badge Premium Translúcido (Global) ── */
.brand-badge {
    background-color: color-mix(in srgb, var(--brand-tint, var(--tblr-primary)) 12%, transparent) !important;
    color: var(--brand-icon, var(--tblr-primary)) !important;
    border: 1px solid color-mix(in srgb, var(--brand-tint, var(--tblr-primary)) 25%, transparent) !important;
    border-radius: 6px !important;
}

/* ======================================================
   Componentes Globales de Subida de Archivos (Drag & Drop)
   ====================================================== */

.upload-zone {
    border: 2px dashed rgba(120, 130, 140, 0.3) !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out;
}

.upload-zone:hover {
    /* Usamos variables semánticas para garantizar contraste en claro/oscuro */
    border-color: var(--brand-icon, var(--tblr-primary)) !important;
    background-color: color-mix(in srgb, var(--brand-tint, var(--tblr-primary)) 2%, transparent) !important;
}

.preview-box {
    width: 140px !important;
    height: 140px !important;
    min-height: 140px !important;
    border-radius: 30px !important; /* Estilo squircle moderno */
    background-color: rgba(120, 130, 140, 0.08) !important;
    border: 1px solid rgba(120, 130, 140, 0.1) !important;
    margin: 0 auto 1rem auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05) !important;
}

.preview-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 10px;
}


/* ── Migas de Pan Inteligentes ── */
.breadcrumb-item {
    font-size: 0.85rem;
    font-weight: 500;
}

.breadcrumb-item a {
    color: var(--tblr-secondary) !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.breadcrumb-item a:hover {
    color: var(--brand-icon, var(--tblr-primary)) !important;
}

/* El elemento activo (donde estás parado) toma el color de la marca */
.breadcrumb-item.active {
    color: var(--brand-icon, var(--tblr-primary)) !important;
    font-weight: 700;
}

/* ======================================================
   SweetAlert2 Global Fixes
   ====================================================== */

/* Evitar salto de pantalla y barra negra cuando SweetAlert2 oculta el scroll */
body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
    overflow-y: scroll !important;
    padding-right: 0 !important;
}

html[data-bs-theme="dark"] .swal2-popup {
    background: var(--tblr-bg-surface) !important;
    color: var(--tblr-body-color) !important;
}

html[data-bs-theme="dark"] .swal2-title,
html[data-bs-theme="dark"] .swal2-html-container,
html[data-bs-theme="dark"] .swal2-input-label {
    color: var(--tblr-body-color) !important;
}

html[data-bs-theme="dark"] .swal2-textarea,
html[data-bs-theme="dark"] .swal2-input {
    background: var(--tblr-bg-surface-secondary) !important;
    border-color: var(--tblr-border-color) !important;
    color: var(--tblr-body-color) !important;
}

/* Evitar salto de pantalla al abrir modales de Bootstrap */
body.modal-open {
    overflow-y: scroll !important;
    padding-right: 0 !important;
}

/* ======================================================
   DataTables Global Premium Styles
   ====================================================== */

.dataTables_wrapper { padding: 0; }

.dataTables_length label, .dataTables_filter label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0;
    font-weight: 500;
    color: var(--tblr-muted);
}

.dataTables_filter input {
    border: 1px solid var(--tblr-border-color);
    border-radius: 8px;
    background-color: var(--tblr-bg-surface);
    color: var(--tblr-body-color);
    padding: 0.5rem 1rem;
    width: 250px;
    transition: all 0.2s ease;
}

.dataTables_filter input:focus {
    border-color: var(--brand-btn-bg, var(--brand-color, #f97316));
    outline: none;
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--brand-btn-bg, var(--brand-color, #f97316)) 25%, transparent);
    width: 300px; /* Expansión animada */
}

.dataTables_length select {
    border: 1px solid var(--tblr-border-color);
    border-radius: 6px;
    background-color: var(--tblr-bg-surface);
    color: var(--tblr-body-color);
    padding: 0.35rem 2.25rem 0.35rem 0.75rem;
    width: auto;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    transition: all 0.2s ease;
}

.dataTables_length select:focus {
    border-color: var(--brand-btn-bg, var(--brand-color, #f97316)) !important;
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--brand-btn-bg, var(--brand-color, #f97316)) 25%, transparent) !important;
    outline: none;
}

.page-item.active .page-link {
    background-color: var(--brand-btn-bg, var(--brand-color, #f97316));
    border-color: var(--brand-btn-bg, var(--brand-color, #f97316));
    color: white;
    border-radius: 6px;
}
.page-link { border-radius: 6px; margin: 0 2px; }

/* Global Focus Styles para todos los inputs de la app (excepto los border-0) */
.form-control:focus:not(.border-0), .form-select:focus:not(.border-0), .form-check-input:focus {
    border-color: var(--brand-btn-bg, var(--brand-color, #f97316)) !important;
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--brand-btn-bg, var(--brand-color, #f97316)) 25%, transparent) !important;
}

/* Quitar anillo de focus a los inputs que intencionalmente no tienen borde */
.form-control.border-0:focus, .form-select.border-0:focus {
    box-shadow: none !important;
    border-color: transparent !important;
}

/* Excepción solicitada: El buscador de Google Maps siempre debe iluminarse */
#autocomplete-search:focus {
    border: 1px solid var(--brand-btn-bg, var(--brand-color, #f97316)) !important;
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--brand-btn-bg, var(--brand-color, #f97316)) 25%, transparent) !important;
}

.form-switch-brand .form-check-input:checked {
    background-color: var(--brand-color, var(--brand-btn-bg, var(--tblr-primary))) !important;
    border-color: var(--brand-color, var(--brand-btn-bg, var(--tblr-primary))) !important;
}

.border-brand { border-color: var(--brand-icon, var(--brand-btn-bg, var(--tblr-primary))) !important; }

/* Eliminar destellos, bordes nativos y sombras al hacer click en TODOS los TomSelect globalmente */
.ts-wrapper, .ts-control, .ts-control > input {
    box-shadow: none !important;
    outline: none !important;
    transition: none !important;
}
.ts-wrapper.focus .ts-control, .ts-wrapper.input-active .ts-control {
    border-color: var(--tblr-border-color) !important;
}

/* Soporte global para íconos (input-icon) dentro de TomSelect */
.input-icon .ts-wrapper .ts-control {
    padding-left: 2.5rem !important;
}
.input-icon .input-icon-addon {
    z-index: 4; /* Por encima del ts-wrapper que tiene z-index 1 o 2 */
}
.ts-wrapper:not(.has-items) .ts-control[data-empty-placeholder]::before {
    content: attr(data-empty-placeholder);
    color: var(--tblr-secondary-color);
    opacity: 0.75;
    font-size: 1rem;
    font-weight: 400;
}

.global-search { position: relative; min-width: 260px; }
.global-search-panel { position: absolute; z-index: 1080; top: calc(100% + .45rem); right: 0; width: min(28rem, calc(100vw - 2rem)); max-height: min(32rem, calc(100vh - 8rem)); overflow-y: auto; border: 1px solid var(--tblr-border-color); border-radius: .8rem; background: var(--tblr-bg-surface); box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .16); }
.global-search-panel section { padding: .45rem; border-bottom: 1px solid var(--tblr-border-color); }
.global-search-panel section:last-child { border-bottom: 0; }
.global-search-group { padding: .4rem .55rem; color: var(--tblr-secondary-color); font-size: .67rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.global-search-result { display: flex; align-items: center; gap: .65rem; padding: .6rem; border-radius: .55rem; color: var(--tblr-body-color); text-decoration: none; }
.global-search-result:hover { color: var(--brand-btn-bg); background: var(--brand-lt); }
.global-search-result strong, .global-search-result small { display: block; }
.global-search-result strong { font-size: .84rem; }
.global-search-result small { margin-top: .08rem; color: var(--tblr-secondary-color); font-size: .72rem; }
.global-search-empty { display: grid; place-items: center; gap: .45rem; min-height: 9rem; color: var(--tblr-secondary-color); font-size: .82rem; }
.global-search-empty .icon { width: 1.6rem; height: 1.6rem; }
@media (max-width: 767.98px) { .global-search { width: 100%; min-width: 0; } .global-search-panel { left: 0; right: auto; width: 100%; } }