/* ==========================================================================
   QueueReport Global CSS — Paleta y estilos base compartidos
   Basado en CoreUI 5 + Bootstrap 5
   Paleta inspirada en Consoltic: navy profundo + indigo/azul eléctrico
   ========================================================================== */

/* --------------------------------------------------------------------------
   Variables de color (paleta Consoltic / QueueReport)
   -------------------------------------------------------------------------- */
:root {
    /* Primario — indigo/violeta que ya se usa en botones */
    --qr-primary:           #4f46e5;
    --qr-primary-dark:      #3730a3;
    --qr-primary-light:     #6366f1;
    --qr-primary-rgb:       79, 70, 229;

    /* Sidebar */
    --qr-sidebar-bg:        #0d1526;   /* navy muy oscuro */
    --qr-sidebar-bg-mid:    #162035;   /* navy medio para degradado */
    --qr-sidebar-accent:    #4f46e5;   /* indigo — ítem activo */
    --qr-sidebar-text:      #c8d6e8;   /* azul claro legible */
    --qr-sidebar-text-hover:#eef2f8;
    --qr-sidebar-text-active:#ffffff;
    --qr-sidebar-title:     #7a90ad;   /* gris azulado para títulos de sección */
    --qr-sidebar-hover-bg:  rgba(255,255,255,0.08);
    --qr-sidebar-active-bg: rgba(79,70,229,0.28);
    --qr-sidebar-border:    rgba(255,255,255,0.09);
    --qr-sidebar-width:     255px;

    /* Header */
    --qr-header-bg:         #ffffff;
    --qr-header-height:     44px;
    --qr-header-border:     #e2e8f0;
    --qr-header-shadow:     0 2px 8px rgba(0,0,0,0.08);

    /* Fondo de contenido */
    --qr-body-bg:           #f1f5f9;

    /* Texto */
    --qr-text:              #0f172a;
    --qr-text-secondary:    #64748b;
    --qr-text-muted:        #94a3b8;

    /* Acciones rápidas */
    --qr-success:           #10b981;
    --qr-warning:           #f59e0b;
    --qr-danger:            #ef4444;
    --qr-info:              #3b82f6;
}

/* --------------------------------------------------------------------------
   Body base
   -------------------------------------------------------------------------- */
body {
    background-color: var(--qr-body-bg);
    color: var(--qr-text);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* --------------------------------------------------------------------------
   Sidebar — override CoreUI 5 variables + estilos propios
   -------------------------------------------------------------------------- */
.sidebar {
    --cui-sidebar-bg:                      var(--qr-sidebar-bg);
    --cui-sidebar-color:                   var(--qr-sidebar-text);
    --cui-sidebar-brand-bg:                transparent;
    --cui-sidebar-brand-color:             #ffffff;
    --cui-sidebar-nav-group-bg:            rgba(0,0,0,0.15);
    --cui-sidebar-nav-group-border-color:  transparent;
    --cui-sidebar-nav-group-indicator-color: var(--qr-sidebar-text);
    --cui-sidebar-nav-group-indicator-hover-color: var(--qr-sidebar-text-hover);
    --cui-sidebar-toggler-bg:              rgba(255,255,255,0.06);
    --cui-sidebar-toggler-color:           var(--qr-sidebar-text);

    background: linear-gradient(180deg, var(--qr-sidebar-bg) 0%, var(--qr-sidebar-bg-mid) 100%);
    border-right: 1px solid var(--qr-sidebar-border) !important;
    width: var(--qr-sidebar-width) !important;
}

/* Header del sidebar — marca */
.sidebar .sidebar-header {
    background: rgba(0,0,0,0.25);
    border-bottom: 1px solid var(--qr-sidebar-border) !important;
    padding: 0 1rem;
    height: var(--qr-header-height);
    display: flex;
    align-items: center;
}

.sidebar .sidebar-brand {
    color: #ffffff !important;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.sidebar .sidebar-brand span {
    color: var(--qr-primary-light);
}

/* Títulos de sección */
.sidebar .nav-title {
    color: var(--qr-sidebar-title) !important;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 1.1rem 1rem 0.3rem !important;
    border-top: 1px solid var(--qr-sidebar-border);
    margin-top: 0.25rem;
}

/* Links de navegación */
.sidebar .nav-link {
    color: var(--qr-sidebar-text) !important;
    border-radius: 6px;
    margin: 1px 8px;
    padding: 0.45rem 0.75rem !important;
    font-size: 0.8rem;
    transition: background 0.15s, color 0.15s;
}

.sidebar .nav-link:hover {
    color: var(--qr-sidebar-text-hover) !important;
    background: var(--qr-sidebar-hover-bg) !important;
}

.sidebar .nav-link.active,
.sidebar .nav-link[aria-current="page"] {
    color: var(--qr-sidebar-text-active) !important;
    background: var(--qr-sidebar-active-bg) !important;
    box-shadow: inset 3px 0 0 var(--qr-primary);
}

/* Ícono del nav-link */
.sidebar .nav-icon {
    color: var(--qr-sidebar-text) !important;
    min-width: 1.6rem !important;
    font-size: 0.85rem;
}

.sidebar .nav-link:hover .nav-icon,
.sidebar .nav-link.active .nav-icon {
    color: var(--qr-primary-light) !important;
}

/* Grupos colapsables */
.sidebar .nav-group-toggle {
    color: var(--qr-sidebar-text) !important;
    border-radius: 6px;
    margin: 1px 8px;
    padding: 0.45rem 0.75rem !important;
    font-size: 0.8rem;
}

.sidebar .nav-group-toggle:hover {
    color: var(--qr-sidebar-text-hover) !important;
    background: var(--qr-sidebar-hover-bg) !important;
}

.sidebar .nav-group.show > .nav-group-toggle {
    color: var(--qr-sidebar-text-active) !important;
    background: rgba(79,70,229,0.12) !important;
}

.sidebar .nav-group-items {
    background: rgba(0,0,0,0.14) !important;
    border-radius: 0 0 6px 6px;
    margin: 0 8px 4px;
    padding: 4px 0 !important;
}

.sidebar .nav-group-items .nav-link {
    margin: 1px 0 !important;
    border-radius: 4px;
    font-size: 0.78rem;
    /* CoreUI 5 agrega padding-inline-start extra para sub-ítems — lo reseteamos */
    padding-inline-start: 0.75rem !important;
}

/* CoreUI 5 aplica margin-inline-start negativo en sub-ítems que saca el ícono del flujo */
.sidebar .nav-group-items .nav-icon {
    margin-inline-start: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem !important;
    font-size: 0.82rem;
    flex-shrink: 0;
}

/* Margen inferior del nav para que no llegue hasta el borde del footer */
.sidebar .sidebar-nav {
    padding-bottom: 0.5rem !important;
}

/* Footer del sidebar — versión */
.qr-sidebar-footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--qr-sidebar-border);
    font-size: 0.72rem;
    color: var(--qr-sidebar-title);
    letter-spacing: 0.03em;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    background: rgba(0,0,0,0.18);
}

.qr-sidebar-footer .bi {
    opacity: 0.6;
}

/* Scrollbar del sidebar */
.sidebar .sidebar-nav::-webkit-scrollbar {
    width: 4px;
}
.sidebar .sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar .sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Header — override CoreUI 5 + estilos propios
   -------------------------------------------------------------------------- */
.qr-header {
    --cui-header-bg:          var(--qr-header-bg);
    --cui-header-border-color: var(--qr-header-border);
    background: var(--qr-header-bg) !important;
    /* sombra inferior que separa el header del contenido */
    box-shadow: 0 2px 10px rgba(0,0,0,0.07), 0 1px 0 var(--qr-header-border);
    border-bottom: none !important;
}

.qr-header-top {
    height: var(--qr-header-height);
    min-height: var(--qr-header-height);
    /* Separador entre la barra principal y el breadcrumb — borde completo sin padding */
    border-bottom: 1px solid var(--qr-header-border);
}

/* Botón hamburguesa */
.qr-sidebar-toggler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--qr-text-secondary);
    font-size: 1.3rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.qr-sidebar-toggler:hover {
    background: #f1f5f9;
    color: var(--qr-primary);
}

/* Breadcrumb dentro del header */
.qr-breadcrumb-bar {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    /* sin border-top propio — la separación la hace el border-bottom de .qr-header-top */
}

.qr-breadcrumb-bar .breadcrumb {
    margin-bottom: 0;
    font-size: 0.8rem;
}

.qr-breadcrumb-bar .breadcrumb-item a {
    color: var(--qr-primary);
    text-decoration: none;
}

.qr-breadcrumb-bar .breadcrumb-item.active {
    color: var(--qr-text-secondary);
}

/* Menú de usuario (derecha del header) */
.qr-user-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--qr-text-secondary) !important;
    text-decoration: none !important;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0.3rem 0.6rem;
    font-size: 0.85rem;
    transition: background 0.15s, border-color 0.15s;
}

.qr-user-btn::after {
    /* quita la flecha por defecto del dropdown-toggle */
    display: none !important;
}

.qr-user-btn:hover,
.qr-user-btn.show {
    background: #f1f5f9 !important;
    border-color: var(--qr-header-border) !important;
    color: var(--qr-text) !important;
}

.qr-user-btn .bi-person-circle {
    font-size: 1.1rem;
    color: var(--qr-primary);
}

/* Dropdown del usuario */
.qr-user-dropdown {
    min-width: 200px;
    border: 1px solid var(--qr-header-border) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10) !important;
    padding: 0.35rem 0 !important;
    margin-top: 6px !important;
}

.qr-user-dropdown .dropdown-item {
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
    color: var(--qr-text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 6px;
    margin: 1px 4px;
    transition: background 0.12s;
}

.qr-user-dropdown .dropdown-item:hover {
    background: #f1f5f9;
    color: var(--qr-primary);
}

.qr-user-dropdown .dropdown-item .bi {
    font-size: 0.9rem;
    color: var(--qr-text-muted);
    flex-shrink: 0;
}

.qr-user-dropdown .dropdown-item:hover .bi {
    color: var(--qr-primary);
}

.qr-user-dropdown .dropdown-item.text-danger,
.qr-user-dropdown .dropdown-item.text-danger:hover {
    color: var(--qr-danger) !important;
}

.qr-user-dropdown .dropdown-item.text-danger .bi,
.qr-user-dropdown .dropdown-item.text-danger:hover .bi {
    color: var(--qr-danger) !important;
}

.qr-user-dropdown .dropdown-divider {
    margin: 0.3rem 0;
    border-color: var(--qr-header-border);
}

/* --------------------------------------------------------------------------
   Área de contenido
   -------------------------------------------------------------------------- */
.qr-content-area {
    background: var(--qr-body-bg);
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 1.25rem;
    padding-bottom: 1.5rem;
}

/* --------------------------------------------------------------------------
   Focus rings — override Bootstrap 5 para reducir la invasividad visual
   El azul violáceo de Bootstrap por defecto es muy llamativo; usamos uno
   mucho más sutil: borde gris tenue + sombra casi transparente.
   -------------------------------------------------------------------------- */
:root {
    --bs-focus-ring-color: rgba(100, 116, 139, 0.18);
    --bs-focus-ring-width: 2px;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.btn:focus-visible,
.btn-close:focus {
    border-color: #a0aec0 !important;
    box-shadow: 0 0 0 2px rgba(100, 116, 139, 0.15) !important;
    outline: none !important;
}

/* Inputs de búsqueda, textarea, etc. */
textarea:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="email"]:focus {
    border-color: #a0aec0 !important;
    box-shadow: 0 0 0 2px rgba(100, 116, 139, 0.12) !important;
    outline: none !important;
}

/* Navegación y links al hacer focus con teclado (accesibilidad) */
a:focus-visible {
    outline: 2px solid rgba(79, 70, 229, 0.35);
    outline-offset: 2px;
    border-radius: 3px;
}

/* --------------------------------------------------------------------------
   Form controls — densidad de dashboard
   Los defaults de Bootstrap 5 tienen demasiado padding, font grande y bordes
   muy redondeados para un panel de administración. Reducimos a una escala más
   compacta y prolija. Aplica a las 3 medidas (base / -sm / -lg) y mantiene
   coherencia con form-select e input-group-text.
   -------------------------------------------------------------------------- */
:root {
    --qr-input-radius: 4px;
}

.form-control,
.form-select {
    font-size: 0.85rem;
    padding: 0.4rem 0.7rem;
    line-height: 1.4;
    border-radius: var(--qr-input-radius);
    border-color: #d9dee3;
}

.form-control-sm,
.form-select-sm,
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text {
    font-size: 0.8rem;
    padding: 0.25rem 0.55rem;
    border-radius: 3px;
}

.form-control-lg,
.form-select-lg,
.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text {
    font-size: 0.95rem;
    padding: 0.55rem 0.9rem;
    border-radius: 6px;
}

/* textarea: misma escala pero algo más de respiro vertical */
textarea.form-control {
    padding: 0.5rem 0.7rem;
}

/* input-group-text alineado a la misma densidad y radio */
.input-group-text {
    font-size: 0.85rem;
    padding: 0.4rem 0.7rem;
    border-color: #d9dee3;
    background-color: #f8f9fc;
    border-radius: var(--qr-input-radius);
}

/* Etiquetas un poco más discretas, acordes a la densidad del input */
.form-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 0.3rem;
}

/* --------------------------------------------------------------------------
   Utilidades globales de color
   -------------------------------------------------------------------------- */
.text-qr-primary   { color: var(--qr-primary) !important; }
.bg-qr-primary     { background-color: var(--qr-primary) !important; }
.btn-qr-primary {
    background-color: var(--qr-primary);
    border-color: var(--qr-primary);
    color: #fff;
}
.btn-qr-primary:hover {
    background-color: var(--qr-primary-dark);
    border-color: var(--qr-primary-dark);
    color: #fff;
}

/* --------------------------------------------------------------------------
   Helpers de color (escala tipo Tailwind) — bg-*, text-*, border-*
   Familias: slate, gray, red, orange, amber, yellow, green, emerald, teal, cyan, blue, indigo, violet, purple, pink
   Uso: <div class="bg-red-100 text-red-700 border-red-200">
   -------------------------------------------------------------------------- */
.bg-slate-50{background-color:#f8fafc!important;}.text-slate-50{color:#f8fafc!important;}.border-slate-50{border-color:#f8fafc!important;}
.bg-slate-100{background-color:#f1f5f9!important;}.text-slate-100{color:#f1f5f9!important;}.border-slate-100{border-color:#f1f5f9!important;}
.bg-slate-200{background-color:#e2e8f0!important;}.text-slate-200{color:#e2e8f0!important;}.border-slate-200{border-color:#e2e8f0!important;}
.bg-slate-300{background-color:#cbd5e1!important;}.text-slate-300{color:#cbd5e1!important;}.border-slate-300{border-color:#cbd5e1!important;}
.bg-slate-400{background-color:#94a3b8!important;}.text-slate-400{color:#94a3b8!important;}.border-slate-400{border-color:#94a3b8!important;}
.bg-slate-500{background-color:#64748b!important;}.text-slate-500{color:#64748b!important;}.border-slate-500{border-color:#64748b!important;}
.bg-slate-600{background-color:#475569!important;}.text-slate-600{color:#475569!important;}.border-slate-600{border-color:#475569!important;}
.bg-slate-700{background-color:#334155!important;}.text-slate-700{color:#334155!important;}.border-slate-700{border-color:#334155!important;}
.bg-slate-800{background-color:#1e293b!important;}.text-slate-800{color:#1e293b!important;}.border-slate-800{border-color:#1e293b!important;}
.bg-slate-900{background-color:#0f172a!important;}.text-slate-900{color:#0f172a!important;}.border-slate-900{border-color:#0f172a!important;}
.bg-gray-50{background-color:#f9fafb!important;}.text-gray-50{color:#f9fafb!important;}.border-gray-50{border-color:#f9fafb!important;}
.bg-gray-100{background-color:#f3f4f6!important;}.text-gray-100{color:#f3f4f6!important;}.border-gray-100{border-color:#f3f4f6!important;}
.bg-gray-200{background-color:#e5e7eb!important;}.text-gray-200{color:#e5e7eb!important;}.border-gray-200{border-color:#e5e7eb!important;}
.bg-gray-300{background-color:#d1d5db!important;}.text-gray-300{color:#d1d5db!important;}.border-gray-300{border-color:#d1d5db!important;}
.bg-gray-400{background-color:#9ca3af!important;}.text-gray-400{color:#9ca3af!important;}.border-gray-400{border-color:#9ca3af!important;}
.bg-gray-500{background-color:#6b7280!important;}.text-gray-500{color:#6b7280!important;}.border-gray-500{border-color:#6b7280!important;}
.bg-gray-600{background-color:#4b5563!important;}.text-gray-600{color:#4b5563!important;}.border-gray-600{border-color:#4b5563!important;}
.bg-gray-700{background-color:#374151!important;}.text-gray-700{color:#374151!important;}.border-gray-700{border-color:#374151!important;}
.bg-gray-800{background-color:#1f2937!important;}.text-gray-800{color:#1f2937!important;}.border-gray-800{border-color:#1f2937!important;}
.bg-gray-900{background-color:#111827!important;}.text-gray-900{color:#111827!important;}.border-gray-900{border-color:#111827!important;}
.bg-red-50{background-color:#fef2f2!important;}.text-red-50{color:#fef2f2!important;}.border-red-50{border-color:#fef2f2!important;}
.bg-red-100{background-color:#fee2e2!important;}.text-red-100{color:#fee2e2!important;}.border-red-100{border-color:#fee2e2!important;}
.bg-red-200{background-color:#fecaca!important;}.text-red-200{color:#fecaca!important;}.border-red-200{border-color:#fecaca!important;}
.bg-red-300{background-color:#fca5a5!important;}.text-red-300{color:#fca5a5!important;}.border-red-300{border-color:#fca5a5!important;}
.bg-red-400{background-color:#f87171!important;}.text-red-400{color:#f87171!important;}.border-red-400{border-color:#f87171!important;}
.bg-red-500{background-color:#ef4444!important;}.text-red-500{color:#ef4444!important;}.border-red-500{border-color:#ef4444!important;}
.bg-red-600{background-color:#dc2626!important;}.text-red-600{color:#dc2626!important;}.border-red-600{border-color:#dc2626!important;}
.bg-red-700{background-color:#b91c1c!important;}.text-red-700{color:#b91c1c!important;}.border-red-700{border-color:#b91c1c!important;}
.bg-red-800{background-color:#991b1b!important;}.text-red-800{color:#991b1b!important;}.border-red-800{border-color:#991b1b!important;}
.bg-red-900{background-color:#7f1d1d!important;}.text-red-900{color:#7f1d1d!important;}.border-red-900{border-color:#7f1d1d!important;}
.bg-orange-50{background-color:#fff7ed!important;}.text-orange-50{color:#fff7ed!important;}.border-orange-50{border-color:#fff7ed!important;}
.bg-orange-100{background-color:#ffedd5!important;}.text-orange-100{color:#ffedd5!important;}.border-orange-100{border-color:#ffedd5!important;}
.bg-orange-200{background-color:#fed7aa!important;}.text-orange-200{color:#fed7aa!important;}.border-orange-200{border-color:#fed7aa!important;}
.bg-orange-300{background-color:#fdba74!important;}.text-orange-300{color:#fdba74!important;}.border-orange-300{border-color:#fdba74!important;}
.bg-orange-400{background-color:#fb923c!important;}.text-orange-400{color:#fb923c!important;}.border-orange-400{border-color:#fb923c!important;}
.bg-orange-500{background-color:#f97316!important;}.text-orange-500{color:#f97316!important;}.border-orange-500{border-color:#f97316!important;}
.bg-orange-600{background-color:#ea580c!important;}.text-orange-600{color:#ea580c!important;}.border-orange-600{border-color:#ea580c!important;}
.bg-orange-700{background-color:#c2410c!important;}.text-orange-700{color:#c2410c!important;}.border-orange-700{border-color:#c2410c!important;}
.bg-orange-800{background-color:#9a3412!important;}.text-orange-800{color:#9a3412!important;}.border-orange-800{border-color:#9a3412!important;}
.bg-orange-900{background-color:#7c2d12!important;}.text-orange-900{color:#7c2d12!important;}.border-orange-900{border-color:#7c2d12!important;}
.bg-amber-50{background-color:#fffbeb!important;}.text-amber-50{color:#fffbeb!important;}.border-amber-50{border-color:#fffbeb!important;}
.bg-amber-100{background-color:#fef3c7!important;}.text-amber-100{color:#fef3c7!important;}.border-amber-100{border-color:#fef3c7!important;}
.bg-amber-200{background-color:#fde68a!important;}.text-amber-200{color:#fde68a!important;}.border-amber-200{border-color:#fde68a!important;}
.bg-amber-300{background-color:#fcd34d!important;}.text-amber-300{color:#fcd34d!important;}.border-amber-300{border-color:#fcd34d!important;}
.bg-amber-400{background-color:#fbbf24!important;}.text-amber-400{color:#fbbf24!important;}.border-amber-400{border-color:#fbbf24!important;}
.bg-amber-500{background-color:#f59e0b!important;}.text-amber-500{color:#f59e0b!important;}.border-amber-500{border-color:#f59e0b!important;}
.bg-amber-600{background-color:#d97706!important;}.text-amber-600{color:#d97706!important;}.border-amber-600{border-color:#d97706!important;}
.bg-amber-700{background-color:#b45309!important;}.text-amber-700{color:#b45309!important;}.border-amber-700{border-color:#b45309!important;}
.bg-amber-800{background-color:#92400e!important;}.text-amber-800{color:#92400e!important;}.border-amber-800{border-color:#92400e!important;}
.bg-amber-900{background-color:#78350f!important;}.text-amber-900{color:#78350f!important;}.border-amber-900{border-color:#78350f!important;}
.bg-yellow-50{background-color:#fefce8!important;}.text-yellow-50{color:#fefce8!important;}.border-yellow-50{border-color:#fefce8!important;}
.bg-yellow-100{background-color:#fef9c3!important;}.text-yellow-100{color:#fef9c3!important;}.border-yellow-100{border-color:#fef9c3!important;}
.bg-yellow-200{background-color:#fef08a!important;}.text-yellow-200{color:#fef08a!important;}.border-yellow-200{border-color:#fef08a!important;}
.bg-yellow-300{background-color:#fde047!important;}.text-yellow-300{color:#fde047!important;}.border-yellow-300{border-color:#fde047!important;}
.bg-yellow-400{background-color:#facc15!important;}.text-yellow-400{color:#facc15!important;}.border-yellow-400{border-color:#facc15!important;}
.bg-yellow-500{background-color:#eab308!important;}.text-yellow-500{color:#eab308!important;}.border-yellow-500{border-color:#eab308!important;}
.bg-yellow-600{background-color:#ca8a04!important;}.text-yellow-600{color:#ca8a04!important;}.border-yellow-600{border-color:#ca8a04!important;}
.bg-yellow-700{background-color:#a16207!important;}.text-yellow-700{color:#a16207!important;}.border-yellow-700{border-color:#a16207!important;}
.bg-yellow-800{background-color:#854d0e!important;}.text-yellow-800{color:#854d0e!important;}.border-yellow-800{border-color:#854d0e!important;}
.bg-yellow-900{background-color:#713f12!important;}.text-yellow-900{color:#713f12!important;}.border-yellow-900{border-color:#713f12!important;}
.bg-green-50{background-color:#f0fdf4!important;}.text-green-50{color:#f0fdf4!important;}.border-green-50{border-color:#f0fdf4!important;}
.bg-green-100{background-color:#dcfce7!important;}.text-green-100{color:#dcfce7!important;}.border-green-100{border-color:#dcfce7!important;}
.bg-green-200{background-color:#bbf7d0!important;}.text-green-200{color:#bbf7d0!important;}.border-green-200{border-color:#bbf7d0!important;}
.bg-green-300{background-color:#86efac!important;}.text-green-300{color:#86efac!important;}.border-green-300{border-color:#86efac!important;}
.bg-green-400{background-color:#4ade80!important;}.text-green-400{color:#4ade80!important;}.border-green-400{border-color:#4ade80!important;}
.bg-green-500{background-color:#22c55e!important;}.text-green-500{color:#22c55e!important;}.border-green-500{border-color:#22c55e!important;}
.bg-green-600{background-color:#16a34a!important;}.text-green-600{color:#16a34a!important;}.border-green-600{border-color:#16a34a!important;}
.bg-green-700{background-color:#15803d!important;}.text-green-700{color:#15803d!important;}.border-green-700{border-color:#15803d!important;}
.bg-green-800{background-color:#166534!important;}.text-green-800{color:#166534!important;}.border-green-800{border-color:#166534!important;}
.bg-green-900{background-color:#14532d!important;}.text-green-900{color:#14532d!important;}.border-green-900{border-color:#14532d!important;}
.bg-emerald-50{background-color:#ecfdf5!important;}.text-emerald-50{color:#ecfdf5!important;}.border-emerald-50{border-color:#ecfdf5!important;}
.bg-emerald-100{background-color:#d1fae5!important;}.text-emerald-100{color:#d1fae5!important;}.border-emerald-100{border-color:#d1fae5!important;}
.bg-emerald-200{background-color:#a7f3d0!important;}.text-emerald-200{color:#a7f3d0!important;}.border-emerald-200{border-color:#a7f3d0!important;}
.bg-emerald-300{background-color:#6ee7b7!important;}.text-emerald-300{color:#6ee7b7!important;}.border-emerald-300{border-color:#6ee7b7!important;}
.bg-emerald-400{background-color:#34d399!important;}.text-emerald-400{color:#34d399!important;}.border-emerald-400{border-color:#34d399!important;}
.bg-emerald-500{background-color:#10b981!important;}.text-emerald-500{color:#10b981!important;}.border-emerald-500{border-color:#10b981!important;}
.bg-emerald-600{background-color:#059669!important;}.text-emerald-600{color:#059669!important;}.border-emerald-600{border-color:#059669!important;}
.bg-emerald-700{background-color:#047857!important;}.text-emerald-700{color:#047857!important;}.border-emerald-700{border-color:#047857!important;}
.bg-emerald-800{background-color:#065f46!important;}.text-emerald-800{color:#065f46!important;}.border-emerald-800{border-color:#065f46!important;}
.bg-emerald-900{background-color:#064e3b!important;}.text-emerald-900{color:#064e3b!important;}.border-emerald-900{border-color:#064e3b!important;}
.bg-teal-50{background-color:#f0fdfa!important;}.text-teal-50{color:#f0fdfa!important;}.border-teal-50{border-color:#f0fdfa!important;}
.bg-teal-100{background-color:#ccfbf1!important;}.text-teal-100{color:#ccfbf1!important;}.border-teal-100{border-color:#ccfbf1!important;}
.bg-teal-200{background-color:#99f6e4!important;}.text-teal-200{color:#99f6e4!important;}.border-teal-200{border-color:#99f6e4!important;}
.bg-teal-300{background-color:#5eead4!important;}.text-teal-300{color:#5eead4!important;}.border-teal-300{border-color:#5eead4!important;}
.bg-teal-400{background-color:#2dd4bf!important;}.text-teal-400{color:#2dd4bf!important;}.border-teal-400{border-color:#2dd4bf!important;}
.bg-teal-500{background-color:#14b8a6!important;}.text-teal-500{color:#14b8a6!important;}.border-teal-500{border-color:#14b8a6!important;}
.bg-teal-600{background-color:#0d9488!important;}.text-teal-600{color:#0d9488!important;}.border-teal-600{border-color:#0d9488!important;}
.bg-teal-700{background-color:#0f766e!important;}.text-teal-700{color:#0f766e!important;}.border-teal-700{border-color:#0f766e!important;}
.bg-teal-800{background-color:#115e59!important;}.text-teal-800{color:#115e59!important;}.border-teal-800{border-color:#115e59!important;}
.bg-teal-900{background-color:#134e4a!important;}.text-teal-900{color:#134e4a!important;}.border-teal-900{border-color:#134e4a!important;}
.bg-cyan-50{background-color:#ecfeff!important;}.text-cyan-50{color:#ecfeff!important;}.border-cyan-50{border-color:#ecfeff!important;}
.bg-cyan-100{background-color:#cffafe!important;}.text-cyan-100{color:#cffafe!important;}.border-cyan-100{border-color:#cffafe!important;}
.bg-cyan-200{background-color:#a5f3fc!important;}.text-cyan-200{color:#a5f3fc!important;}.border-cyan-200{border-color:#a5f3fc!important;}
.bg-cyan-300{background-color:#67e8f9!important;}.text-cyan-300{color:#67e8f9!important;}.border-cyan-300{border-color:#67e8f9!important;}
.bg-cyan-400{background-color:#22d3ee!important;}.text-cyan-400{color:#22d3ee!important;}.border-cyan-400{border-color:#22d3ee!important;}
.bg-cyan-500{background-color:#06b6d4!important;}.text-cyan-500{color:#06b6d4!important;}.border-cyan-500{border-color:#06b6d4!important;}
.bg-cyan-600{background-color:#0891b2!important;}.text-cyan-600{color:#0891b2!important;}.border-cyan-600{border-color:#0891b2!important;}
.bg-cyan-700{background-color:#0e7490!important;}.text-cyan-700{color:#0e7490!important;}.border-cyan-700{border-color:#0e7490!important;}
.bg-cyan-800{background-color:#155e75!important;}.text-cyan-800{color:#155e75!important;}.border-cyan-800{border-color:#155e75!important;}
.bg-cyan-900{background-color:#164e63!important;}.text-cyan-900{color:#164e63!important;}.border-cyan-900{border-color:#164e63!important;}
.bg-blue-50{background-color:#eff6ff!important;}.text-blue-50{color:#eff6ff!important;}.border-blue-50{border-color:#eff6ff!important;}
.bg-blue-100{background-color:#dbeafe!important;}.text-blue-100{color:#dbeafe!important;}.border-blue-100{border-color:#dbeafe!important;}
.bg-blue-200{background-color:#bfdbfe!important;}.text-blue-200{color:#bfdbfe!important;}.border-blue-200{border-color:#bfdbfe!important;}
.bg-blue-300{background-color:#93c5fd!important;}.text-blue-300{color:#93c5fd!important;}.border-blue-300{border-color:#93c5fd!important;}
.bg-blue-400{background-color:#60a5fa!important;}.text-blue-400{color:#60a5fa!important;}.border-blue-400{border-color:#60a5fa!important;}
.bg-blue-500{background-color:#3b82f6!important;}.text-blue-500{color:#3b82f6!important;}.border-blue-500{border-color:#3b82f6!important;}
.bg-blue-600{background-color:#2563eb!important;}.text-blue-600{color:#2563eb!important;}.border-blue-600{border-color:#2563eb!important;}
.bg-blue-700{background-color:#1d4ed8!important;}.text-blue-700{color:#1d4ed8!important;}.border-blue-700{border-color:#1d4ed8!important;}
.bg-blue-800{background-color:#1e40af!important;}.text-blue-800{color:#1e40af!important;}.border-blue-800{border-color:#1e40af!important;}
.bg-blue-900{background-color:#1e3a8a!important;}.text-blue-900{color:#1e3a8a!important;}.border-blue-900{border-color:#1e3a8a!important;}
.bg-indigo-50{background-color:#eef2ff!important;}.text-indigo-50{color:#eef2ff!important;}.border-indigo-50{border-color:#eef2ff!important;}
.bg-indigo-100{background-color:#e0e7ff!important;}.text-indigo-100{color:#e0e7ff!important;}.border-indigo-100{border-color:#e0e7ff!important;}
.bg-indigo-200{background-color:#c7d2fe!important;}.text-indigo-200{color:#c7d2fe!important;}.border-indigo-200{border-color:#c7d2fe!important;}
.bg-indigo-300{background-color:#a5b4fc!important;}.text-indigo-300{color:#a5b4fc!important;}.border-indigo-300{border-color:#a5b4fc!important;}
.bg-indigo-400{background-color:#818cf8!important;}.text-indigo-400{color:#818cf8!important;}.border-indigo-400{border-color:#818cf8!important;}
.bg-indigo-500{background-color:#6366f1!important;}.text-indigo-500{color:#6366f1!important;}.border-indigo-500{border-color:#6366f1!important;}
.bg-indigo-600{background-color:#4f46e5!important;}.text-indigo-600{color:#4f46e5!important;}.border-indigo-600{border-color:#4f46e5!important;}
.bg-indigo-700{background-color:#4338ca!important;}.text-indigo-700{color:#4338ca!important;}.border-indigo-700{border-color:#4338ca!important;}
.bg-indigo-800{background-color:#3730a3!important;}.text-indigo-800{color:#3730a3!important;}.border-indigo-800{border-color:#3730a3!important;}
.bg-indigo-900{background-color:#312e81!important;}.text-indigo-900{color:#312e81!important;}.border-indigo-900{border-color:#312e81!important;}
.bg-violet-50{background-color:#f5f3ff!important;}.text-violet-50{color:#f5f3ff!important;}.border-violet-50{border-color:#f5f3ff!important;}
.bg-violet-100{background-color:#ede9fe!important;}.text-violet-100{color:#ede9fe!important;}.border-violet-100{border-color:#ede9fe!important;}
.bg-violet-200{background-color:#ddd6fe!important;}.text-violet-200{color:#ddd6fe!important;}.border-violet-200{border-color:#ddd6fe!important;}
.bg-violet-300{background-color:#c4b5fd!important;}.text-violet-300{color:#c4b5fd!important;}.border-violet-300{border-color:#c4b5fd!important;}
.bg-violet-400{background-color:#a78bfa!important;}.text-violet-400{color:#a78bfa!important;}.border-violet-400{border-color:#a78bfa!important;}
.bg-violet-500{background-color:#8b5cf6!important;}.text-violet-500{color:#8b5cf6!important;}.border-violet-500{border-color:#8b5cf6!important;}
.bg-violet-600{background-color:#7c3aed!important;}.text-violet-600{color:#7c3aed!important;}.border-violet-600{border-color:#7c3aed!important;}
.bg-violet-700{background-color:#6d28d9!important;}.text-violet-700{color:#6d28d9!important;}.border-violet-700{border-color:#6d28d9!important;}
.bg-violet-800{background-color:#5b21b6!important;}.text-violet-800{color:#5b21b6!important;}.border-violet-800{border-color:#5b21b6!important;}
.bg-violet-900{background-color:#4c1d95!important;}.text-violet-900{color:#4c1d95!important;}.border-violet-900{border-color:#4c1d95!important;}
.bg-purple-50{background-color:#faf5ff!important;}.text-purple-50{color:#faf5ff!important;}.border-purple-50{border-color:#faf5ff!important;}
.bg-purple-100{background-color:#f3e8ff!important;}.text-purple-100{color:#f3e8ff!important;}.border-purple-100{border-color:#f3e8ff!important;}
.bg-purple-200{background-color:#e9d5ff!important;}.text-purple-200{color:#e9d5ff!important;}.border-purple-200{border-color:#e9d5ff!important;}
.bg-purple-300{background-color:#d8b4fe!important;}.text-purple-300{color:#d8b4fe!important;}.border-purple-300{border-color:#d8b4fe!important;}
.bg-purple-400{background-color:#c084fc!important;}.text-purple-400{color:#c084fc!important;}.border-purple-400{border-color:#c084fc!important;}
.bg-purple-500{background-color:#a855f7!important;}.text-purple-500{color:#a855f7!important;}.border-purple-500{border-color:#a855f7!important;}
.bg-purple-600{background-color:#9333ea!important;}.text-purple-600{color:#9333ea!important;}.border-purple-600{border-color:#9333ea!important;}
.bg-purple-700{background-color:#7e22ce!important;}.text-purple-700{color:#7e22ce!important;}.border-purple-700{border-color:#7e22ce!important;}
.bg-purple-800{background-color:#6b21a8!important;}.text-purple-800{color:#6b21a8!important;}.border-purple-800{border-color:#6b21a8!important;}
.bg-purple-900{background-color:#581c87!important;}.text-purple-900{color:#581c87!important;}.border-purple-900{border-color:#581c87!important;}
.bg-pink-50{background-color:#fdf2f8!important;}.text-pink-50{color:#fdf2f8!important;}.border-pink-50{border-color:#fdf2f8!important;}
.bg-pink-100{background-color:#fce7f3!important;}.text-pink-100{color:#fce7f3!important;}.border-pink-100{border-color:#fce7f3!important;}
.bg-pink-200{background-color:#fbcfe8!important;}.text-pink-200{color:#fbcfe8!important;}.border-pink-200{border-color:#fbcfe8!important;}
.bg-pink-300{background-color:#f9a8d4!important;}.text-pink-300{color:#f9a8d4!important;}.border-pink-300{border-color:#f9a8d4!important;}
.bg-pink-400{background-color:#f472b6!important;}.text-pink-400{color:#f472b6!important;}.border-pink-400{border-color:#f472b6!important;}
.bg-pink-500{background-color:#ec4899!important;}.text-pink-500{color:#ec4899!important;}.border-pink-500{border-color:#ec4899!important;}
.bg-pink-600{background-color:#db2777!important;}.text-pink-600{color:#db2777!important;}.border-pink-600{border-color:#db2777!important;}
.bg-pink-700{background-color:#be185d!important;}.text-pink-700{color:#be185d!important;}.border-pink-700{border-color:#be185d!important;}
.bg-pink-800{background-color:#9d174d!important;}.text-pink-800{color:#9d174d!important;}.border-pink-800{border-color:#9d174d!important;}
.bg-pink-900{background-color:#831843!important;}.text-pink-900{color:#831843!important;}.border-pink-900{border-color:#831843!important;}

/* --------------------------------------------------------------------------
   Tablas de listados de datos — estándar QueueReport
   Uso: <table class="table table-hover qr-table"> ... </table>
   Estandariza alto de fila, padding, tipografía y header en todos los listados.
   -------------------------------------------------------------------------- */
.qr-table {
    font-size: 0.85rem;
    margin-bottom: 0;
}

/* Header. Los títulos van centrados por defecto; usar `text-start`/`text-end`
   en el <th> para alinear distinto. */
.qr-table > thead > tr > th {
    background-color: #f8f9fc;
    color: var(--qr-text-secondary);
    font-weight: 600;
    font-size: 0.78rem;
    padding: 0.6rem 0.75rem;
    text-align: center;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: middle;
    white-space: nowrap;
}

/* Celdas del cuerpo: alto cómodo y consistente.
   Por defecto el contenido va centrado; para alinear a la izquierda/derecha
   usar las utilidades de Bootstrap `text-start` / `text-end` en el <td>. */
.qr-table > tbody > tr > td {
    padding: 0.6rem 0.75rem;
    vertical-align: middle;
    text-align: center;
    border-top: 1px solid #f1f3f5;
}

.qr-table > tbody > tr {
    height: 48px;
}

.qr-table > tbody > tr:hover {
    background-color: #f8f9fc;
}

/* =========================================================================
   Acciones de fila estándar (qr-actions)
   Grupo de iconos de acción (ver/editar/eliminar/…). Centrado y compacto.
   Los botones no llevan padding/margin propios para no alterar el alto de
   la fila; el espaciado lo da el `gap`. El tamaño del icono es fijo, así que
   NO hace falta poner `fs-6` ni tamaños inline en cada <i>.
   Markup: <div class="qr-actions"> <button class="btn btn-xs">…</button> </div>
   ========================================================================= */
.qr-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.qr-actions .btn {
    padding: 0;
    margin: 0;
    border: 0;
    line-height: 1;
    background: none;
    box-shadow: none;
}
.qr-actions .btn > i,
.qr-actions .btn > .bi {
    font-size: 1rem;
    line-height: 1;
    vertical-align: middle;
}

/* =========================================================================
   Tabs estándar (qr-tabs)
   Pestañas de secciones en páginas de edición. Basado en .nav-underline.
   Uso: <ul class="nav nav-underline qr-tabs"> ... </ul>
   El contenido de cada pestaña se envuelve en .qr-tab-pane para la animación.
   ========================================================================= */
.qr-tabs {
    --qr-tab-color: var(--cui-primary, #5856d6);
    flex-wrap: nowrap;
    gap: 0.25rem;
    border-bottom: 0;
    overflow-x: auto;          /* si no entran, scrollean en horizontal */
    overflow-y: hidden;
    scrollbar-width: thin;
}

/* Sub-tabs (segundo nivel) — estilo pill compacto, también con scroll */
.qr-subtabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.35rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    margin: 0;
    padding: 0;
    list-style: none;
}
.qr-subtabs .nav-link {
    color: #6c757d;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.3rem 0.7rem;
    border: 1px solid transparent;
    border-radius: 5px;
    background: none;
    white-space: nowrap;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.qr-subtabs .nav-link:hover {
    background: #eef0f4;
    color: #4338ca;
}
.qr-subtabs .nav-link.active {
    background: #e0e7ff;
    color: #4338ca;
    border-color: #c7d2fe;
}
.qr-tabs .nav-link {
    color: #6c757d;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.65rem 0.9rem;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.qr-tabs .nav-link:hover {
    color: var(--qr-tab-color);
    background-color: #f8f9fc;
}
.qr-tabs .nav-link.active {
    color: var(--qr-tab-color);
    border-bottom-color: var(--qr-tab-color);
    background: none;
}
.qr-tabs .nav-link .bi {
    opacity: 0.85;
}

/* Animación de entrada al cambiar de tab: fade + leve slide hacia arriba */
.qr-tab-pane {
    animation: qrTabFade 0.22s ease;
}
@keyframes qrTabFade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .qr-tab-pane {
        animation: none;
    }
}

/* =========================================================================
   Botones — densidad y forma alineadas a los inputs
   Mismo radio (--qr-input-radius) y escala de tamaño que `form-control`,
   para que botones e inputs combinen en el dashboard.
   ========================================================================= */
.btn {
    border-radius: var(--qr-input-radius);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.4rem 0.7rem;
}
.btn-sm {
    font-size: 0.8rem;
    padding: 0.25rem 0.55rem;
    border-radius: 3px;
}
.btn-lg {
    font-size: 0.95rem;
    padding: 0.55rem 0.9rem;
    border-radius: 6px;
}
/* btn-xs: botón compacto para acciones de fila / toolbars densos.
   (No existe en Bootstrap; lo definimos acá.) */
.btn-xs {
    font-size: 0.78rem;
    padding: 0.15rem 0.45rem;
    border-radius: 3px;
    line-height: 1.2;
}

/* -------------------------------------------------------------------------
   Variantes de color sólidas — tonos suaves de nuestra paleta + texto claro.
   Un fondo de color fuerte (verde/azul/rojo…) SIEMPRE lleva texto blanco;
   solo `warning` (ámbar claro) usa texto oscuro por contraste.
   Escala: 500 base · 600 hover · 700 active.
   ------------------------------------------------------------------------- */
.btn-primary {
    background-color: #6366f1; border-color: #6366f1; color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: #4f46e5; border-color: #4f46e5; color: #fff;
}
.btn-primary:active, .btn-primary.active, .btn-check:checked + .btn-primary {
    background-color: #4338ca; border-color: #4338ca; color: #fff;
}

.btn-secondary {
    background-color: #64748b; border-color: #64748b; color: #fff;
}
.btn-secondary:hover, .btn-secondary:focus {
    background-color: #475569; border-color: #475569; color: #fff;
}
.btn-secondary:active, .btn-secondary.active {
    background-color: #334155; border-color: #334155; color: #fff;
}

.btn-success {
    background-color: #10b981; border-color: #10b981; color: #fff;
}
.btn-success:hover, .btn-success:focus {
    background-color: #059669; border-color: #059669; color: #fff;
}
.btn-success:active, .btn-success.active {
    background-color: #047857; border-color: #047857; color: #fff;
}

.btn-danger {
    background-color: #ef4444; border-color: #ef4444; color: #fff;
}
.btn-danger:hover, .btn-danger:focus {
    background-color: #dc2626; border-color: #dc2626; color: #fff;
}
.btn-danger:active, .btn-danger.active {
    background-color: #b91c1c; border-color: #b91c1c; color: #fff;
}

.btn-info {
    background-color: #06b6d4; border-color: #06b6d4; color: #fff;
}
.btn-info:hover, .btn-info:focus {
    background-color: #0891b2; border-color: #0891b2; color: #fff;
}
.btn-info:active, .btn-info.active {
    background-color: #0e7490; border-color: #0e7490; color: #fff;
}

.btn-warning {
    background-color: #fbbf24; border-color: #fbbf24; color: #1f2937;
}
.btn-warning:hover, .btn-warning:focus {
    background-color: #f59e0b; border-color: #f59e0b; color: #1f2937;
}
.btn-warning:active, .btn-warning.active {
    background-color: #d97706; border-color: #d97706; color: #1f2937;
}

/* -------------------------------------------------------------------------
   Variantes outline — borde + texto en tono legible (600) sobre fondo claro;
   al hacer hover/active se rellena con el color y el texto pasa a claro,
   igual que las variantes sólidas. (warning usa texto oscuro al rellenar.)
   ------------------------------------------------------------------------- */
.btn-outline-primary {
    color: #4f46e5; border-color: #4f46e5; background-color: transparent;
}
.btn-outline-primary:hover, .btn-outline-primary:focus,
.btn-outline-primary:active, .btn-outline-primary.active,
.btn-check:checked + .btn-outline-primary {
    background-color: #4f46e5; border-color: #4f46e5; color: #fff;
}

.btn-outline-secondary {
    color: #475569; border-color: #94a3b8; background-color: transparent;
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus,
.btn-outline-secondary:active, .btn-outline-secondary.active {
    background-color: #475569; border-color: #475569; color: #fff;
}

.btn-outline-success {
    color: #059669; border-color: #059669; background-color: transparent;
}
.btn-outline-success:hover, .btn-outline-success:focus,
.btn-outline-success:active, .btn-outline-success.active {
    background-color: #059669; border-color: #059669; color: #fff;
}

.btn-outline-danger {
    color: #dc2626; border-color: #dc2626; background-color: transparent;
}
.btn-outline-danger:hover, .btn-outline-danger:focus,
.btn-outline-danger:active, .btn-outline-danger.active {
    background-color: #dc2626; border-color: #dc2626; color: #fff;
}

.btn-outline-info {
    color: #0891b2; border-color: #0891b2; background-color: transparent;
}
.btn-outline-info:hover, .btn-outline-info:focus,
.btn-outline-info:active, .btn-outline-info.active {
    background-color: #0891b2; border-color: #0891b2; color: #fff;
}

.btn-outline-warning {
    color: #b45309; border-color: #d97706; background-color: transparent;
}
.btn-outline-warning:hover, .btn-outline-warning:focus,
.btn-outline-warning:active, .btn-outline-warning.active {
    background-color: #fbbf24; border-color: #fbbf24; color: #1f2937;
}

/* =========================================================================
   svelte-select estandarizado (.qr-multiselect)
   Envolver el <Select> en <div class="qr-multiselect"> para que tome el alto
   y la fuente de un input `sm` y los chips usen la paleta primaria.
   ========================================================================= */
.qr-multiselect {
    --height: 31px;
    --min-height: 31px;
    --font-size: 0.8rem;
    --border: 1px solid #d9dee3;
    --border-hover: 1px solid #a0aec0;
    --border-focused: 1px solid #a0aec0;
    --border-radius: 4px;
    --padding: 0 0.5rem;
    --internal-padding: 0;
    --input-padding: 0 0.25rem;
    --value-container-padding: 0;
    --placeholder-color: #9aa0a6;

    --multi-item-height: 21px;
    --multi-item-margin: 0;
    --multi-item-padding: 0 0.4rem;
    --multi-item-gap: 0.25rem;
    --multi-item-border-radius: 4px;
    --multi-item-bg: #e0e7ff;
    --multi-item-color: #4338ca;
    --multi-item-clear-icon-color: #4338ca;
    --multi-select-input-margin: 0;
    --multi-select-padding: 0 0.4rem;

    --clear-select-height: 20px;
    --clear-select-width: 24px;
    --chevron-height: 20px;

    --item-height: 32px;
    --item-padding: 0.25rem 0.6rem;
    --item-line-height: 1.3;
    --list-max-height: 240px;
}
.qr-multiselect .svelte-select {
    min-height: 31px;
    font-size: 0.8rem;
}
.qr-multiselect .svelte-select .value-container {
    padding: 1px 2px;
    gap: 0.25rem;
}
.qr-multiselect .svelte-select input {
    margin: 0;
}

/* ──────────────────────────────────────────────────────────────────────────
   Wizard stepper (pasos visuales)
   Usado por los wizards de creación multipaso (campañas, grupos de atención…).
   Markup esperado: ver "Wizards multipaso" en CLAUDE.md (raíz).
   ────────────────────────────────────────────────────────────────────────── */
.qr-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
}
.qr-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: 0;
    padding: 0 0.25rem;
    min-width: 84px;
    color: #9aa0a6;
    cursor: pointer;
}
.qr-step:disabled { cursor: default; }
.qr-step-bullet {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef0f4;
    color: #9aa0a6;
    font-size: 1rem;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}
.qr-step-label { font-size: 0.74rem; font-weight: 600; white-space: nowrap; }
.qr-step.active .qr-step-bullet {
    background: #6366f1;
    color: #fff;
    border-color: #c7d2fe;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
}
.qr-step.active .qr-step-label { color: #4338ca; }
.qr-step.done .qr-step-bullet { background: #e0e7ff; color: #4338ca; }
.qr-step.done .qr-step-label { color: #4b5563; }
.qr-step.has-error .qr-step-bullet {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fecaca;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.12);
}
.qr-step.has-error .qr-step-label { color: #dc2626; }
.qr-step-line {
    flex: 1 1 auto;
    height: 2px;
    min-width: 16px;
    background: #e5e7eb;
    transition: background 0.2s ease;
}
.qr-step-line.done { background: #a5b4fc; }
.qr-step-viewport { position: relative; overflow: hidden; }
.qr-step-pane { min-height: 220px; }