:root {
    --qg-admin-primary: #430064;
    --qg-admin-primary-strong: #5d0b8c;
    --qg-admin-primary-soft: rgb(93 11 140 / 16%);
    --qg-admin-primary-contrast: #fff;
    --qg-admin-primary-shadow: rgb(67 9 100 / 16%);
    --qg-admin-primary-shadow-strong: rgb(67 9 100 / 24%);
    --qg-admin-danger: #b42318;
    --qg-admin-success: #087f5b;
    --qg-admin-surface: #fff;
    --qg-admin-surface-muted: #f7f8fb;
    --qg-admin-text: #263238;
    --qg-admin-border: #e2e6ed;
    --qg-admin-shadow: 0 12px 30px rgb(37 43 55 / 10%);
    /* Fondo de página atenuado, para dar contraste a lo que queda en primer plano (modo escritura del editor). */
    --qg-admin-backdrop: #d7dce7;
    --qg-admin-control-height: 44px;
}

#toolbar .admin-page-header {
    display: flex;
    align-items: center;
    min-width: 0;
    padding-left: 2.5rem;
}

#toolbar .admin-page-title-group {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-left: 1.15rem;
}

#toolbar .admin-page-title-group::before {
    position: absolute;
    top: .2rem;
    bottom: .2rem;
    left: 0;
    width: .3rem;
    content: "";
    border-radius: 1rem;
    background: linear-gradient(180deg, var(--qg-admin-primary-strong), var(--qg-admin-primary));
}

#toolbar .admin-page-kicker {
    margin-bottom: .15rem;
    overflow: hidden;
    color: var(--qg-admin-primary-strong);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .11em;
    line-height: 1.2;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

#toolbar .admin-page-title {
    margin: 0;
    overflow: hidden;
    color: var(--qg-admin-text);
    font-size: clamp(1.8rem, 1vw + 1.2rem, 2.35rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.015em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#toolbar .admin-page-description {
    margin: .25rem 0 0;
    overflow: hidden;
    color: #667085;
    font-size: .82rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    #toolbar .admin-page-header {
        padding-left: 1rem;
    }

    #toolbar .admin-page-kicker {
        display: none;
    }

    #toolbar .admin-page-title-group {
        padding-left: .85rem;
    }
}

.admin-header-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-right: 1rem;
}

.admin-header-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    min-height: 2.5rem;
    border-radius: .75rem;
    box-shadow: 0 6px 14px var(--qg-admin-primary-shadow);
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.admin-header-actions .btn:hover,
.admin-header-actions .btn:focus {
    box-shadow: 0 10px 20px var(--qg-admin-primary-shadow-strong);
    transform: translateY(-1px);
}

.admin-header-create-button {
    gap: .5rem;
    padding: 0 .95rem !important;
    color: var(--qg-admin-primary-contrast) !important;
    font-size: 1.1rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--qg-admin-primary-strong), var(--qg-admin-primary)) !important;
}

.admin-header-create-button:hover,
.admin-header-create-button:focus {
    color: var(--qg-admin-primary-contrast) !important;
}

.admin-header-create-button i,
.admin-header-actions-menu__toggle i {
    color: currentColor !important;
}

.admin-header-actions-menu {
    position: relative;
}

.admin-header-actions-menu__toggle {
    gap: .45rem;
    padding: 0 .95rem !important;
    color: var(--qg-admin-primary-contrast) !important;
    font-size: 1.05rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--qg-admin-primary-strong), var(--qg-admin-primary)) !important;
}

.admin-header-secondary-button {
    gap: .5rem;
    padding: 0 .95rem !important;
    color: var(--qg-admin-primary-strong) !important;
    font-size: 1.05rem;
    font-weight: 700;
    background: var(--qg-admin-surface-muted) !important;
    box-shadow: none !important;
}

.admin-header-secondary-button:hover,
.admin-header-secondary-button:focus {
    color: var(--qg-admin-primary-strong) !important;
    background: var(--qg-admin-primary-soft) !important;
}

.admin-header-actions-menu__items {
    min-width: 12rem;
    padding: .5rem;
    border: 0;
    border-radius: .75rem;
    box-shadow: 0 12px 26px rgb(15 23 42 / 20%);
}

.admin-header-actions-menu__item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 2.4rem;
    margin: .15rem 0;
    border: 0;
    border-radius: .5rem;
    color: var(--qg-admin-text) !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left;
    text-decoration: none;
}

.admin-header-actions-menu__item:hover,
.admin-header-actions-menu__item:focus {
    color: var(--qg-admin-primary-strong) !important;
    background: var(--qg-admin-primary-soft) !important;
    transform: translateX(2px);
    text-decoration: none;
}

.admin-header-actions-menu__item i {
    margin-right: .55rem;
}

@media (min-width: 768px) {
    #toolbar {
        position: relative;
    }

    #toolbar .admin-header-actions {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 2;
        padding-right: 0;
        transform: translate(-50%, -50%);
    }
}

.admin-panel-form .form-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 1.05rem;
}

.admin-panel-form .form-group > .col-form-label,
.admin-panel-form .form-group > .col-form-label-multiselect {
    display: flex;
    align-items: flex-start;
    min-height: 1.75rem;
    margin-bottom: .45rem;
    padding: 0;
    color: #46515e;
    font-size: 12px;
    font-weight: 700;
}

.admin-panel-form .form-control {
    width: 100% !important;
    min-height: var(--qg-admin-control-height);
    padding: 10px 15px !important;
    border: 1px solid #ccd4df !important;
    border-radius: .65rem;
    color: var(--qg-admin-text);
    background: var(--qg-admin-surface);
    box-shadow: inset 0 1px 2px rgb(37 43 55 / 3%);
    transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
    line-height: normal;
}

.admin-panel-form .form-control:hover {
    border-color: #aeb9c8 !important;
}

.admin-panel-form .form-control:focus {
    border-color: var(--qg-admin-primary-strong) !important;
    outline: 0;
    background: #fff;
    box-shadow: 0 0 0 .2rem var(--qg-admin-primary-soft);
}

.admin-form .form-control,
.modal .form-control {
    min-height: 2.65rem;
    border: 1px solid var(--qg-admin-border);
    border-radius: .65rem;
    box-shadow: none;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.admin-form .form-control:focus,
.modal .form-control:focus {
    border-color: var(--qg-admin-primary-strong);
    box-shadow: 0 0 0 .2rem var(--qg-admin-primary-soft);
}

.admin-form .form-group,
.modal .form-group {
    margin-bottom: 1.25rem;
}

.admin-form label,
.modal label {
    color: var(--qg-admin-text);
    font-weight: 600;
}

.admin-kendo-grid {
    overflow: visible;
    background: var(--qg-admin-surface);
    border: 1px solid var(--qg-admin-border);
    border-radius: 1rem;
    box-shadow: var(--qg-admin-shadow);
}

.admin-kendo-grid .k-grid-header,
.admin-kendo-grid .k-grid-header-wrap,
.admin-kendo-grid .k-header {
    background: var(--qg-admin-surface-muted);
}

.admin-kendo-grid .k-header {
    border-color: var(--qg-admin-border);
    color: var(--qg-admin-text);
    font-weight: 700;
}

.admin-kendo-grid tr {
    transition: background-color 160ms ease, transform 160ms ease;
}

.admin-kendo-grid tbody tr:hover {
    background-color: var(--qg-admin-primary-soft);
}

.admin-kendo-grid .k-grid-header-wrap {
    padding-right: 0 !important;
}

.admin-kendo-grid .k-grid-content {
    overflow-x: auto;
    overflow-y: auto;
}

.admin-kendo-grid .k-pager-wrap {
    padding: .75rem 1rem;
    background: var(--qg-admin-surface);
    border-color: var(--qg-admin-border);
}

.admin-kendo-grid .k-filtercell .k-textbox,
.admin-kendo-grid .k-filter-menu .k-textbox {
    border-radius: .5rem;
}

.admin-loading-overlay {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 2500;
    background: rgb(17 24 39 / 56%);
    cursor: wait;
}

.admin-loading-overlay.is-visible {
    display: block;
}

.admin-loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3.75rem;
    height: 3.75rem;
    border: 5px solid rgb(255 255 255 / 35%);
    border-top-color: var(--qg-admin-primary-strong);
    border-radius: 50%;
    box-shadow: 0 0 0 .6rem rgb(255 255 255 / 8%);
    transform: translate(-50%, -50%);
    animation: admin-layout-spin 800ms linear infinite;
}

/* Controles reutilizables de formularios y modales del panel. */
.admin-form .form-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 1rem;
}

.admin-form .form-group > label:not(.admin-toggle),
.admin-form .form-group > .col-form-label {
    display: block !important;
    position: static !important;
    order: -1;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 0 7px !important;
    padding: 0 !important;
    color: #46515e;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 19px !important;
    transform: none !important;
}

.admin-form .form-control {
    width: 100% !important;
    min-height: var(--qg-admin-control-height) !important;
    padding: 10px 14px !important;
    border: 1px solid #ccd4df !important;
    border-radius: .65rem;
    color: var(--qg-admin-text);
    background: var(--qg-admin-surface);
    box-shadow: inset 0 1px 2px rgb(37 43 55 / 3%);
    font-size: 15px !important;
    line-height: 20px !important;
    transition: none !important;
}

.admin-form .form-control:focus {
    border-color: #ccd4df !important;
    outline: 0;
    box-shadow: inset 0 1px 2px rgb(37 43 55 / 3%) !important;
}

.admin-form textarea.form-control,
.admin-panel-form textarea.form-control,
.modal textarea.form-control {
    height: auto !important;
    min-height: 6.5rem !important;
    padding: 10px 14px !important;
    border-radius: .65rem !important;
    line-height: 22px !important;
    resize: vertical;
}

.admin-form .form-group > input.form-control,
.admin-form .form-group > select.form-control,
.admin-panel-form .form-group > input.form-control,
.admin-panel-form .form-group > select.form-control,
.modal .form-group > input.form-control,
.modal .form-group > select.form-control {
    height: var(--qg-admin-control-height) !important;
    min-height: var(--qg-admin-control-height) !important;
}

.admin-form select.form-control {
    height: var(--qg-admin-control-height) !important;
    padding: 0 40px 0 14px !important;
}

/*
 * Bootstrap-select convierte el select original en un contenedor que también
 * recibe la clase form-control. Ese contenedor no es un campo: el campo real
 * es su botón interno. Evitamos que herede el padding de inputs y textareas.
 */
.admin-form .bootstrap-select.form-control,
.admin-panel-form .bootstrap-select.form-control,
.modal .bootstrap-select.form-control {
    height: var(--qg-admin-control-height) !important;
    min-height: var(--qg-admin-control-height) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.admin-form .bootstrap-select.form-control > .dropdown-toggle,
.admin-panel-form .bootstrap-select.form-control > .dropdown-toggle,
.modal .bootstrap-select.form-control > .dropdown-toggle {
    width: 100%;
    height: var(--qg-admin-control-height) !important;
    min-height: var(--qg-admin-control-height) !important;
    padding: 0 40px 0 14px !important;
    border: 1px solid #ccd4df !important;
    border-radius: .65rem;
    color: var(--qg-admin-text);
    background: var(--qg-admin-surface);
    box-shadow: inset 0 1px 2px rgb(37 43 55 / 3%);
    font-size: 15px !important;
    line-height: 20px !important;
}

.admin-form .field-validation-error {
    margin-top: .35rem;
    color: var(--qg-admin-danger);
    font-size: .875rem;
}

.admin-form-toggle {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    margin: 0;
    padding: 5px 20px;
}

.admin-form-toggle__input {
    position: relative;
    width: 25px;
    height: 14px;
    margin: 0;
    border: 0;
    border-radius: 2rem;
    outline: 0;
    appearance: none;
    background: #b7c0ca;
    cursor: pointer;
    opacity: 1 !important;
    transition: background-color 180ms ease;
}

.admin-form-toggle__input::after {
    position: absolute;
    top: .18rem;
    left: .18rem;
    width: .94rem;
    height: .94rem;
    content: "";
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgb(37 43 55 / 25%);
    transition: transform 180ms ease;
}

.admin-form-toggle__input:checked {
    background: var(--qg-admin-primary-strong);
}

.admin-form-toggle__input:checked::after {
    transform: translateX(1.05rem);
}

.admin-form-toggle__input:focus {
    box-shadow: 0 0 0 .2rem var(--qg-admin-primary-soft);
}

.admin-form-toggle__label {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 0 .55rem !important;
    color: #5e6976 !important;
    font-size: inherit !important;
    font-weight: 600 !important;
    cursor: pointer;
}

.admin-form-toggle:hover .admin-form-toggle__label {
    color: var(--qg-admin-primary-strong) !important;
}

.admin-form-toggle__indicator {
    display: none;
}

/* Modal base compartido: mantiene cabecera, jerarquía y espaciado uniformes en todo el panel. */
.admin-panel-modal .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 1rem;
    box-shadow: var(--qg-admin-shadow);
}

.admin-panel-modal .modal-header,
.admin-panel-modal .modal-footer {
    padding: 1.2rem 1.35rem;
    border-color: var(--qg-admin-border);
}

.admin-panel-modal .modal-body {
    padding: 1.35rem;
}

.admin-panel-modal .modal-footer {
    gap: .6rem;
}

.admin-panel-modal__eyebrow {
    display: block;
    margin: 0 0 .3rem;
    color: var(--qg-admin-primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.admin-panel-modal .modal-title,
.admin-panel-modal__section-title {
    margin: 0;
    color: var(--qg-admin-text);
    font-weight: 750;
}

.admin-panel-modal .modal-title {
    font-size: 20px;
}

.admin-panel-modal__section + .admin-panel-modal__section {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--qg-admin-border);
}

.admin-panel-modal__section-title {
    margin-bottom: 1rem;
    font-size: 16px;
}