:root {

    --ag-primary: #6d5df9;
    --ag-primary-hover: #5a4be0;
    --ag-primary-light: rgba(109, 93, 249, 0.08);

    --ag-bg: #ffffff;
    --ag-bg-soft: #f8f9fc;

    --ag-border: #e5e7eb;

    --ag-text: #1e1e2e;
    --ag-text-muted: #6b7280;

    --ag-success: #10b981;
    --ag-danger: #ef4444;
    --ag-warning: #f59e0b;
    --ag-info: #3b82f6;

    --ag-radius: 12px;
    --ag-radius-sm: 8px;

    --ag-shadow:
        0 1px 3px rgba(16, 24, 40, .06),
        0 1px 2px rgba(16, 24, 40, .04);

    --ag-shadow-md:
        0 4px 12px rgba(16, 24, 40, .08),
        0 2px 4px rgba(16, 24, 40, .04);

    --ag-shadow-lg:
        0 12px 32px rgba(16, 24, 40, .12);

    --ag-font:
        'Inter',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        sans-serif;
}

.artigrid-container {

    font-family: var(--ag-font);

    background: var(--ag-bg);

    border: 1px solid var(--ag-border);

    border-radius: var(--ag-radius);

    box-shadow: var(--ag-shadow);

    overflow: hidden;

    transition:
        box-shadow .2s ease,
        border-color .2s ease;
}

.artigrid-container:hover {

    border-color: #dfe2ea;

    box-shadow: var(--ag-shadow-md);
}

.artigrid-container a {
    text-decoration: none;
}

.artigrid-container .card-header {

    background: var(--ag-bg);

    border-bottom: 1px solid var(--ag-border) !important;

    padding: 1.1rem 1.25rem;
}

.artigrid-search,
.artigrid-search-col,
.artigrid-search-col-input {

    border: 1px solid var(--ag-border);

    border-radius: var(--ag-radius-sm);

    color: var(--ag-text);

    font-size: .85rem;

    padding-left: 1rem;

    transition:
        background .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
}

.artigrid-search::placeholder,
.artigrid-search-col-input::placeholder {

    color: #9ca3af;
}

.artigrid-search:hover,
.artigrid-search-col-input:hover {

    border-color: #d1d5db;
}

.artigrid-search:focus,
.artigrid-search-col-input:focus {

    background: var(--ag-bg);

    border-color: var(--ag-primary);

    box-shadow:
        0 0 0 3px var(--ag-primary-light);

    outline: none;
}

.artigrid-table {

    border-collapse: separate;

    border-spacing: 0;

    background: var(--ag-bg);
}

.artigrid-table thead th {

    background: var(--ag-bg-soft);

    font-weight: 600;

    font-size: .72rem;

    letter-spacing: .06em;

    text-transform: uppercase;

    color: var(--ag-text-muted);

    border-bottom: 1px solid var(--ag-border);

    padding: .85rem 1rem;

    white-space: nowrap;
}

.artigrid-table tbody tr {

    background: var(--ag-bg);

    transition:
        background .12s ease;
}

.artigrid-table tbody tr:hover {

    background: var(--ag-bg-soft);

    transform: none;
}

.artigrid-table td {

    font-size: .85rem;

    color: var(--ag-text);

    border-top: 1px solid var(--ag-border);

    padding: .75rem 1rem;

    white-space: nowrap;

    vertical-align: middle;
}

.artigrid-table .btn {

    border-radius: var(--ag-radius-sm);

    font-weight: 500;

    font-size: .78rem;

    padding: .35rem .65rem;

    border: 1px solid currentColor !important;

    box-shadow: none !important;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease,
        transform .15s ease;
}

.artigrid-table .btn-primary {

    color: var(--ag-primary) !important;

    border-color: rgba(109, 93, 249, .45) !important;
}

.artigrid-table .btn-primary:hover {

    background: var(--ag-primary-light) !important;

    color: var(--ag-primary-hover) !important;

    border-color: var(--ag-primary) !important;

    transform: translateY(-1px);
}

.artigrid-table .btn-info {

    border-color: rgba(59, 130, 246, .4) !important;
}

.artigrid-table .btn-info:hover {

    border-color: var(--ag-info) !important;

    transform: translateY(-1px);
}

.artigrid-table .btn-warning {

    border-color: rgba(245, 158, 11, .45) !important;
}

.artigrid-table .btn-warning:hover {

    border-color: var(--ag-warning) !important;

    transform: translateY(-1px);
}

.artigrid-table .btn-danger {

    border-color: rgba(239, 68, 68, .4) !important;
}

.artigrid-table .btn-danger:hover {

    border-color: var(--ag-danger) !important;

    transform: translateY(-1px);
}

.artigrid-table .btn-light {

    border-color: var(--ag-border) !important;
}

.artigrid-table .btn-light:hover {

    border-color: #d1d5db !important;

    background-color: #fff;

    transform: translateY(-1px);
}

.artigrid-table .btn:active {

    transform: translateY(0);
}


.artigrid-add-btn,
.artigrid-container .card-header .btn-primary {

    background: var(--ag-primary) !important;

    border: 1px solid var(--ag-primary) !important;

    color: #fff !important;

    border-radius: var(--ag-radius-sm);

    font-weight: 500;

    font-size: .8rem;

    padding: .4rem .75rem;

    box-shadow: none;

    transition:
        background .15s ease,
        border-color .15s ease,
        transform .15s ease,
        box-shadow .15s ease;
}

.artigrid-add-btn:hover,
.artigrid-container .card-header .btn-primary:hover {

    background: var(--ag-primary-hover) !important;

    border-color: var(--ag-primary-hover) !important;

    color: #fff !important;

    transform: translateY(-1px);

    box-shadow: var(--ag-shadow-md);
}

.artigrid-container .card-header .btn {

    border-radius: var(--ag-radius-sm);

    font-weight: 500;

    font-size: .8rem;

    padding: .4rem .75rem;

    box-shadow: none;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease,
        transform .15s ease;
}

.artigrid-table .artigrid-row:hover td.artigrid-buttons-actions {

    position: sticky;

    right: 0;
}

.artigrid-pagination .page-link {

    border: none;

    margin: 0 .2rem;

    border-radius: var(--ag-radius-sm);

    font-size: .78rem;

    font-weight: 500;

    color: var(--ag-text-muted);

    background: transparent;

    transition:
        background .15s ease,
        color .15s ease;
}

.artigrid-pagination .page-link:hover {

    background: var(--ag-primary-light);

    color: var(--ag-primary);
}

.artigrid-pagination .page-item.active .page-link {

    background: var(--ag-primary);

    color: #fff;

    box-shadow: var(--ag-shadow);
}

.dropdown-custom {

    position: relative;

    display: inline-block;
}

.dropdown-menu-custom {

    display: none;

    right: 0;

    top: calc(100% + 5px);

    background: var(--ag-bg);

    border: 1px solid var(--ag-border);

    border-radius: var(--ag-radius-sm);

    padding: .35rem;

    min-width: 150px;

    box-shadow: var(--ag-shadow-lg);

    list-style: none;

    z-index: 999;

    left: 0px;
}

.dropdown-menu-custom.show {

    display: block;
}

.dropdown-menu-custom li button {

    width: 100%;

    padding: .45rem .7rem;

    text-align: left;

    border: none;

    border-radius: 6px;

    background: transparent;

    color: var(--ag-text);

    cursor: pointer;

    transition:
        background .15s ease,
        color .15s ease;
}

.dropdown-menu-custom li button:hover {

    background: var(--ag-primary-light);

    color: var(--ag-primary);
}

.artigrid-summary-row td {

    background: var(--ag-bg-soft);

    border-top: 1px solid var(--ag-border);

    padding: 8px;

    font-size: .85rem;
}

.artigrid-summary-row .summary-label {

    color: var(--ag-text-muted);
}

.artigrid-summary-row .summary-op {

    display: inline-block;

    white-space: nowrap;
}


.artigrid-cards-wrapper .card,
.artigrid-table tr {

    border-radius: var(--ag-radius) !important;
}


.artigrid-add-form .form-control,
.artigrid-edit-form .form-control,
.artigrid-add-form .form-select,
.artigrid-edit-form .form-select {

    border-radius: var(--ag-radius-sm);

    border: 1px solid var(--ag-border);

    font-size: .85rem;

    padding: .55rem .8rem;

    color: var(--ag-text);

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.artigrid-add-form .form-control:focus,
.artigrid-edit-form .form-control:focus,
.artigrid-add-form .form-select:focus,
.artigrid-edit-form .form-select:focus {

    border-color: var(--ag-primary);

    box-shadow:
        0 0 0 3px var(--ag-primary-light);

    outline: none;
}

.artigrid-add-form .form-label,
.artigrid-edit-form .form-label {

    font-size: .78rem;

    font-weight: 600;

    color: var(--ag-text-muted);

    margin-bottom: .35rem;
}

.form-control-sm {

    max-width: 100%;

    min-width: 200px;
}


.modal-content {

    border-radius: var(--ag-radius) !important;

    border: none !important;

    box-shadow: var(--ag-shadow-lg) !important;
}

.modal-header {

    border-bottom: 1px solid var(--ag-border) !important;

    padding: 1.25rem !important;
}


body > .modal + .modal {

    z-index: 1090 !important;
}

body > .modal-backdrop + .modal-backdrop {

    z-index: 1080 !important;
}

.artigrid-spinner-overlay {

    position: fixed;

    inset: 0;

    background: rgba(255, 255, 255, .72);

    backdrop-filter: blur(4px);

    -webkit-backdrop-filter: blur(4px);

    z-index: 9999;

    display: flex;

    justify-content: center;

    align-items: center;
}

.artigrid-spinner {

    width: 40px;

    height: 40px;

    background: none;

    border: 3px solid var(--ag-primary-light);

    border-top-color: var(--ag-primary);

    border-radius: 50%;

    animation: ag-spin .7s linear infinite;
}

@keyframes ag-spin {

    to {
        transform: rotate(360deg);
    }
}


@media (max-width: 768px) {


    .artigrid-container {

        border-radius: 10px;

        box-shadow: var(--ag-shadow);
    }

    .artigrid-container .card-header {

        padding: .9rem;
    }

    .artigrid-container .card-header
    .d-flex.flex-column.flex-md-row.justify-content-between {

        flex-wrap: wrap;
    }


    .artigrid-container .card-header .artigrid-search,
    .artigrid-container .card-header .artigrid-search-col {

        max-width: 100% !important;

        width: 100% !important;

        flex: 1 1 100%;
    }

    .artigrid-container .card-header > div > div:first-child {

        width: 100%;
    }

    .artigrid-container .card-header
    .d-flex.justify-content-end {

        width: 100%;

        justify-content: stretch !important;

        flex-wrap: wrap;

        gap: .5rem;
    }

    .artigrid-container .card-header
    .d-flex.justify-content-end > * {

        flex: 1 1 0;

        min-width: 44px;
    }

    .artigrid-container .card-header
    .artigrid-add-btn,
    .artigrid-container .card-header
    .d-flex.justify-content-end .btn {

        width: auto;

        white-space: nowrap;

        text-align: center;
    }

    .artigrid-container .table-responsive {

        overflow-x: visible;
    }

    .artigrid-table {

        width: 100%;
    }


    .artigrid-table thead {

        display: none;
    }


    .artigrid-table,
    .artigrid-table tbody,
    .artigrid-table tr,
    .artigrid-table td {

        display: block;

        width: 100%;
    }


    .artigrid-table tr {

        background: var(--ag-bg);

        border: 1px solid var(--ag-border);

        border-radius: var(--ag-radius) !important;

        margin: 0 .65rem .75rem;

        padding: .75rem 1rem;

        box-shadow: var(--ag-shadow);

        transition:
            border-color .15s ease,
            box-shadow .15s ease;
    }

    .artigrid-table tr:hover {

        background: var(--ag-bg);

        border-color: #d9dcef;

        box-shadow: var(--ag-shadow-md);

        transform: none;
    }


    .artigrid-table td {

        display: flex;

        align-items: center;

        width: 100%;

        min-height: 36px;

        border-top: none;

        border-bottom: 1px solid rgba(229, 231, 235, .7);

        padding: .45rem 0;

        white-space: normal;

        text-align: right !important;

        font-size: .83rem;

        color: var(--ag-text);
    }

    .artigrid-table td:last-child {

        border-bottom: none;
    }

    .artigrid-table td[data-label]::before {

        content: attr(data-label);

        display: block;

        flex: 0 0 38%;

        margin-right: .75rem;

        font-size: .68rem;

        font-weight: 600;

        letter-spacing: .04em;

        text-transform: uppercase;

        color: var(--ag-text-muted);

        text-align: left;
    }

    .artigrid-table
    td:first-child:has(input[type="checkbox"]) {

        justify-content: flex-end;

        padding-bottom: .25rem;

        border-bottom: none;
    }

    .artigrid-table
    td.artigrid-buttons-actions {

        position: static !important;

        display: flex !important;

        flex-direction: row;

        flex-wrap: wrap;

        justify-content: center;

        align-items: center;

        gap: .4rem;

        margin-top: .5rem;

        padding-top: .65rem;

        border-top: 1px solid var(--ag-border);

        border-bottom: none;

        box-shadow: none;
    }

    .artigrid-table
    td.artigrid-buttons-actions::before {

        content: none;
    }

    .artigrid-table
    td.artigrid-buttons-actions .btn {

        flex: 0 0 auto;

        box-shadow: none !important;
    }

    .artigrid-container .table {

        font-size: 13px;
    }

    .artigrid-container th,
    .artigrid-container td {

        white-space: normal;
    }
}




/* En artigrid.css */

/* Estilos para wizard */
.wizard-navigation .step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    cursor: default;
}

.wizard-navigation .step-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e9ecef;
    color: #6c757d;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
}

.wizard-navigation .step-indicator.active .step-circle {
    background: #0d6efd;
    color: #fff;
    transform: scale(1.1);
}

.wizard-navigation .step-indicator.completed .step-circle {
    background: #198754;
    color: #fff;
}

.wizard-navigation .step-label {
    font-size: 12px;
    margin-top: 4px;
    color: #6c757d;
    text-align: center;
}

.wizard-navigation .step-indicator.active .step-label {
    color: #0d6efd;
    font-weight: 600;
}

/* Step buttons */
.step-buttons .btn {
    min-width: 100px;
}

/* Tabs verticales */
.nav.flex-column .nav-link {
    text-align: left;
    border-radius: 0.375rem;
    margin-bottom: 4px;
}

.nav.flex-column .nav-link.active {
    background-color: #0d6efd;
    color: #fff;
}

.nav.flex-column .nav-link .badge {
    float: right;
}

/* Animación de transición entre pasos */
.tab-pane {
    animation: fadeInStep 0.3s ease;
}

@keyframes fadeInStep {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* En artigrid.css */

.dynamic-select-wrapper .btn {
    flex-shrink: 0;
    height: 38px;
}

.dynamic-select-wrapper .btn .fa-plus {
    font-size: 12px;
}

.dynamic-select-wrapper .dynamic-select-result {
    min-height: 20px;
}

.dynamic-select-wrapper .dynamic-select-result .text-success {
    animation: fadeInResult 0.3s ease;
}

@keyframes fadeInResult {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}