/*
==========================
Custom general
==========================
*/
.h-1 {
height: 1rem;
}
.h-2 {
height: 2rem;
}
.h-3 {
height: 3rem;
}
.h-4 {
height: 4rem;
}
.h-5 {
height: 5rem;
}
.w-1 {
width: 1rem;
}
.w-2 {
width: 2rem;
}
.w-3 {
width: 3rem;
}
.w-4 {
width: 4rem;
}
.w-5 {
width: 5rem;
}
.cursor-default {
cursor: default !important;
}
.cursor-pointer {
cursor: pointer !important;
}
.pagination {
overflow: auto !important;
}
.widget.box .widget-header {
padding: 0 10px 0 !important;
}
.row [class*="col-"] .widget .widget-header h4 {
padding: 16px 0 !important;
}
.widget-content-area {
padding: 20px 10px !important;
}
.account-box .widget-content-area {
padding: 20px !important;
}
.widget-content-area.form-area {
border-radius: 8px;
padding: 20px 15px !important;
}
.form-select.form-search {
padding: 0.75rem 1.8rem 0.75rem 1.25rem !important;
}
.form-control:disabled:not(.flatpickr-input),
.form-control[readonly]:not(.flatpickr-input) {
background-color: #1b2e4b !important;
cursor: default !important;
color: #d3d3d3 !important;
}
.form-select:disabled {
color: #d3d3d3 !important;
}
.text-white-grey {
color: #b9b8b8 !important;
}
.text-grey {
color: #888ea8 !important;
}
.info-box-1-button svg {
width: 17px;
height: 17px;
}
.input-group.input-search .input-group-text svg, .input-group.input-search:hover .input-group-text svg {
color: #888ea8 !important;
fill: none !important;
}
.table:not(.dataTable) tbody tr td svg {
color: #ffffff !important;
stroke-width: 2.5 !important;
}
@media (max-width: 991px) {
body .widget.box .widget-header {
padding: 0 !important;
}
body .widget-content-area {
border-radius: 8px;
padding: 20px 0 !important;
}
body .widget-content-area.form-area {
padding: 20px 10px !important;
}
body .page-meta {
margin-top: 5rem !important;
}
}
@media (max-width: 575px) {
body .footer-wrapper {
flex-direction: column;
row-gap: 1rem;
}
body .footer-wrapper .footer-section.f-section-2 {
display: flex !important;
}
.order-8 {
order: 8 !important;
}
}
/*
==========================
Product list
==========================
*/
body .product-list .searchable-container .searchable-items {
padding: 0;
/* overflow-x: inherit; */
}
body .product-list .searchable-container .searchable-items .item-content {
color: #bfc9d4;
font-weight: bold;
}
body .product-list .searchable-container .items {
padding: 0;
cursor: default;
}
body
.product-list
.searchable-container
.searchable-items.list
.items
.item-content,
body
.product-list
.searchable-container
.searchable-items.list
.items
.item-content:hover {
margin-bottom: 0px;
}
body
.product-list
.searchable-container
.searchable-items.list
.items-header-section
.item-content,
body
.product-list
.searchable-container
.searchable-items.list
.items-header-section
.item-content:hover {
background: #060818;
padding: 10px 18px;
border: none;
box-shadow: none;
}
body .product-list .searchable-container .items:hover {
transform: none;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
}
/* body .product-list .searchable-container .searchable-items.list .items .item-content:hover {
background: rgba(3, 3, 5, .122);
} */
body .product-list .no-result {
letter-spacing: normal;
color: #888ea8 !important;
text-align: center;
}
body .product-list .searchable-container .searchable-items.list .items .user-profile img {
width: 44px;
height: 44px;
border-radius: 0;
margin-right: 12px;
margin-left: 10px;
}
body .badge.badge-button {
padding: 1.22px 6px;
}
/*
==========================
Search Box
==========================
*/
.search-box ul {
list-style: none;
padding: 0px;
width: 97.5%;
position: absolute;
margin: 0;
z-index: 99;
max-height: 235px;
background-color: #142238;
border: 1px solid rgba(33, 33, 33, 0.1);
overflow-y: auto;
box-shadow: 0 6px 10px 0 rgb(0 0 0 / 14%), 0 1px 18px 0 rgb(0 0 0 / 12%), 0 3px 5px -1px rgb(0 0 0 / 20%);
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
.search-box ul li {
padding: 1rem;
margin-bottom: 1px;
color: #ffffff;
background-color: #142238;
font-size: 15px;
letter-spacing: 1px;
}
.search-box ul:last-child li {
border-bottom: 1px solid #ffffff05;
}
.search-box ul li:hover {
cursor: pointer;
background-color: #111e31;
}
.search-box ul li .media img:not(.avatar-img) {
border: none;
}
.search-box ul li.no-data {
cursor: default;
background-color: #111e31;
border-bottom: none;
padding: 3rem 1rem;
}
.search-box ul li.no-data:hover {
background-color: #111e31;
}
.blockquote.card-product .media img:not(.avatar-img) {
border: none;
width: 100px;
height: auto;
}
/* ul::-webkit-scrollbar-thumb {
background-color: #80FF72;
height: 7px;
} */
/*
==========================
Dashboard
==========================
*/
.tm-action-btn .btn-icon.inv-number {
font-size: 15px !important;
}
.tm-action-btn .btn-icon.inv-number svg {
height: 18px;
width: 18px;
}
/*
==========================
Roles
==========================
*/
/*=============== Roles Accordion =================*/
.accordion-permission .card {
background-color: #0e1726 !important;
box-shadow: none !important;
}
.accordion-permission .card .card-header {
background-color: #111d30 !important;
border-radius: 6px !important;
-webkit-border-radius: 6px !important;
-moz-border-radius: 6px !important;
-ms-border-radius: 6px !important;
-o-border-radius: 6px !important;
}
.accordion-permission .card .card-header section > div:not(.collapsed) {
color: #888ea8 !important;
font-weight: 500 !important;
}
.accordion-permission .card .card-header section > div.collapsed {
border-bottom: 2px solid #1b2e4b !important;
cursor: default;
}
.form-check-success .form-check-input:checked {
background-color: #00ab55 !important;
border-color: #00ab55 !important;
}
/*
==========================
Aside
==========================
*/
.sidenav {
position: fixed;
display: none;
right: 0px !important;
top: 80px !important;
width: 170px !important;
}
/*
==========================
Stepper
==========================
*/
.bs-stepper-content {
width: 100%;
}
.bs-stepper .step.crossed + .line {
background-color: #4361ee;
}
.step.crossed .step-trigger.disabled .bs-stepper-circle, .step.crossed .step-trigger:disabled .bs-stepper-circle {
background-color: #4361ee;
color: #fff;
}
.bs-stepper .line, body.dark .bs-stepper-line {
background-color: rgba(255, 255, 255, 0.12);
}
.bs-stepper-circle {
background-color: #bfc9d4;
}
.bs-stepper-circle svg {
width: 16px;
height: 16px;
}
.bs-stepper .step-trigger {
color: #bfc9d4;
font-weight: 200;
letter-spacing: 1px;
}
.bs-stepper .step-trigger.disabled, .bs-stepper .step-trigger:disabled {
opacity: 0.45;
}
.bs-stepper .step-trigger.disabled .bs-stepper-circle, .bs-stepper .step-trigger:disabled .bs-stepper-circle {
color: #000;
font-weight: 700;
}
.active .bs-stepper-circle {
background-color: #4361ee;
}
.bs-stepper-label:focus {
color: #4361ee;
}
@media (max-width: 575px) {
.bs-stepper-header {
display: block;
}
.bs-stepper.vertical {
display: block;
}
.bs-stepper .line {
display: none;
}
.bs-stepper-line {
display: none;
}
.bs-stepper .step-trigger {
padding: 8px 0;
}
.bs-stepper-content {
padding: 0;
padding: 20px 0 0;
}
}
/*
==========================
Options Card
==========================
*/
.option-card {
border: 2px solid #e9ecef;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease-in-out;
position: relative;
}
.option-card:hover {
border-color: #0d6efd;
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0,0,0,0.08);
}
.option-card .icon-circle {
width: 48px;
height: 48px;
background: #f8f9fa;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.option-card .check-circle {
width: 24px;
height: 24px;
border: 2px solid #ced4da;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: transparent;
transition: all 0.2s ease-in-out;
}
.option-card.selected {
border-color: #0d6efd;
background: #f0f8ff;
}
.option-card.selected .check-circle {
background: #0d6efd;
border-color: #0d6efd;
color: white;
}

/*
==========================
Order Edit Modals
==========================
*/

/* Modal Edit */
.oe-stepper {
display: flex;
flex-wrap: nowrap; /* prefer single row on wide screens */
align-items: center;
gap: 12px;
}

.oe-step-item {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--bs-secondary);
}

.oe-step-dot {
width: 30px;
height: 30px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(var(--bs-secondary-rgb), .12);
color: var(--bs-secondary);
font-weight: 700;
border: 1px solid rgba(var(--bs-secondary-rgb), .25);
}

.oe-step-item.active .oe-step-dot {
background: var(--bs-primary);
color: #fff;
border-color: var(--bs-primary);
box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.2);
}

.oe-step-label {
font-size: .84rem;
font-weight: 600;
color: #4b5563;
}

.oe-step-line {
width: 20px;
height: 2px;
border-radius: 999px;
background: rgba(var(--bs-secondary-rgb), .25);
}

.oe-content-spacing {
margin-top: 6px;
margin-bottom: 18px;
}

.oe-stock-portal {
position: fixed;
z-index: 3000;
background: #fff;
border: 1px solid rgba(var(--bs-primary-rgb), .25);
border-radius: 8px;
box-shadow: 0 14px 26px rgba(0, 0, 0, 0.12);
overflow: hidden;
}

.oe-stock-selected {
width: 100%;
min-height: 36px;
border: 1px solid rgba(var(--bs-secondary-rgb), .28);
border-radius: 6px;
background: #fff;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 6px 10px;
font-size: .92rem;
}

.oe-stock-selected:focus,
.oe-stock-selected:hover {
border-color: rgba(var(--bs-primary-rgb), .55);
box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), .12);
}

.oe-stock-search {
border: 0;
border-bottom: 1px solid #e8ebf1;
border-radius: 0;
padding: 8px 10px;
font-size: .85rem;
}

.oe-stock-search:focus {
box-shadow: none;
border-bottom-color: rgba(var(--bs-primary-rgb), .55);
}

.oe-stock-list {
max-height: 180px;
overflow-y: auto;
}

.oe-stock-option {
width: 100%;
border: 0;
border-bottom: 1px solid #f1f3f8;
background: #fff;
text-align: left;
padding: 8px 10px;
font-size: .82rem;
}

.oe-stock-option:hover {
background: rgba(var(--bs-primary-rgb), .08);
}

.oe-flow-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}

.oe-flow-card {
width: 100%;
min-height: 64px;
border: 1px solid rgba(var(--bs-primary-rgb), .25);
border-radius: 10px;
background: #1b2e4b;
padding: 10px;
text-align: left;
transition: all .2s ease;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.oe-flow-card:hover {
border-color: rgba(var(--bs-primary-rgb), .55);
box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
background: #233b5f;
}

.oe-flow-card.active {
border-color: var(--bs-primary);
background: #233b5f;
box-shadow: 0 0 0 1px rgba(var(--bs-primary-rgb), .45) inset, 0 0 0 3px rgba(var(--bs-primary-rgb), .2);
}

.oe-flow-head {
display: flex;
align-items: center;
gap: 8px;
}

.oe-flow-icon {
width: 22px;
height: 22px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
border: 1px solid transparent;
}

.oe-flow-card .oe-flow-icon {
background: rgba(var(--bs-primary-rgb), .14);
color: var(--bs-primary);
border-color: rgba(var(--bs-primary-rgb), .40);
}

.oe-flow-card.active .oe-flow-icon {
background: var(--bs-primary);
color: #fff;
border-color: var(--bs-primary);
}

.oe-flow-title {
margin: 0;
font-size: .9rem;
font-weight: 700;
color: #fff;
}

.oe-flow-subtitle {
margin: 2px 0 0;
font-size: .75rem;
color: rgba(255, 255, 255, 0.82);
line-height: 1.2;
}

.oe-stock-ts.ts-wrapper.single .ts-control {
background: #1b2e4b !important;
color: #80ff72 !important;
border: 1px solid #1b2e4b !important;
min-height: 38px;
border-radius: 6px;
box-shadow: none !important;
}

.oe-stock-ts.ts-wrapper.single .ts-control input {
color: #80ff72 !important;
background: transparent !important;
}

.oe-stock-ts.ts-wrapper.single .ts-control .item {
color: #80ff72 !important;
}

.oe-stock-ts.ts-wrapper.single .ts-control input::placeholder {
color: #888ea8 !important;
}

.ts-dropdown.oe-stock-ts,
.ts-dropdown.oe-stock-ts .option {
background: #0e1726 !important;
color: #e0e6ed !important;
}

.ts-dropdown.oe-stock-ts .option,
.ts-dropdown.oe-stock-ts .no-results,
.ts-dropdown.oe-stock-ts .create {
color: #e0e6ed !important;
}

.ts-dropdown.oe-stock-ts {
z-index: 1066 !important;
border: 1px solid rgba(224, 230, 237, 0.2) !important;
}

.ts-dropdown.oe-stock-ts .active {
background: rgba(var(--bs-primary-rgb), .14) !important;
color: #e0e6ed !important;
}

.oe-stock-ts.ts-wrapper.oe-empty-query .ts-dropdown .option,
.ts-dropdown.oe-stock-ts.oe-empty-query .option {
display: none !important;
}

.oe-stock-ts.ts-wrapper.oe-empty-query .ts-dropdown .ts-dropdown-content::before,
.ts-dropdown.oe-stock-ts.oe-empty-query .ts-dropdown-content::before {
content: 'Escribe para buscar producto';
display: block;
padding: 8px 10px;
color: rgba(224, 230, 237, 0.75);
font-size: .82rem;
}

.oe-stock-ts.ts-wrapper.focus .ts-control {
border-color: #3b3f5c !important;
box-shadow: none !important;
}

.oe-stock-ts.ts-wrapper.single.input-active .ts-control {
border-color: #3b3f5c !important;
box-shadow: none !important;
}

.oe-compare-card {
border: 1px solid #1b2e4b;
background: #0e1726;
border-radius: 8px;
padding: 12px;
height: 100%;
}

.oe-compare-title {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
color: #e0e6ed;
font-weight: 700;
font-size: .9rem;
}

.oe-compare-kpi {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}

.oe-compare-kpi-full {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.oe-compare-actions {
display: flex;
justify-content: flex-end;
}

.modal-1 .btn {
font-family: inherit;
}

.oe-compare-section {
margin-top: 12px;
}

.oe-compare-table-wrap {
border: 1px solid #1b2e4b;
border-radius: 8px;
overflow: hidden;
background: #0e1726;
}

.oe-compare-table-wrap .table {
margin-bottom: 0;
}

.oe-compare-table-wrap .table thead th {
color: #bfc9d4;
background: #1b2e4b;
border-color: #1b2e4b;
font-size: .78rem;
}

.oe-compare-table-wrap .table tbody td {
border-color: #1b2e4b;
color: #e0e6ed;
font-size: .79rem;
}

.oe-compare-kpi-item {
border: 1px solid #1b2e4b;
border-radius: 6px;
padding: 8px;
background: #1b2e4b;
}

.oe-compare-kpi-label {
color: #888ea8;
font-size: .72rem;
line-height: 1.1;
margin-bottom: 4px;
}

.oe-compare-kpi-value {
color: #80ff72;
font-size: .86rem;
font-weight: 700;
line-height: 1.15;
word-break: break-word;
}

.oe-row-changed {
background: rgba(var(--bs-warning-rgb), .08);
}

.oe-row-unchanged {
background: transparent;
}

@media (max-width: 767.98px) {
.oe-compare-kpi-full {
grid-template-columns: 1fr;
}

.oe-flow-grid {
grid-template-columns: 1fr;
}

.oe-flow-card {
min-height: 58px;
padding: 9px;
}

	.oe-stepper {
	gap: 8px;
	flex-wrap: wrap; /* allow wrap on small screens */
}

.oe-step-line {
width: 10px;
}

.oe-content-spacing {
margin-top: 4px;
margin-bottom: 8px;
}
}

/* Modal Annul */
.oa-stepper {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}

.oa-step-item {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--bs-secondary);
}

.oa-step-dot {
width: 30px;
height: 30px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(var(--bs-secondary-rgb), .12);
color: var(--bs-secondary);
font-weight: 700;
border: 1px solid rgba(var(--bs-secondary-rgb), .25);
}

.oa-step-item.active .oa-step-dot {
background: var(--bs-primary);
color: #fff;
border-color: var(--bs-primary);
box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.2);
}

.oa-step-label {
font-size: .84rem;
font-weight: 600;
color: #e0e6ed;
}

.oa-step-line {
width: 20px;
height: 2px;
border-radius: 999px;
background: rgba(var(--bs-secondary-rgb), .25);
}

.oa-pane {
border: 1px solid rgba(var(--bs-secondary-rgb), .2);
border-radius: 12px;
padding: 14px;
background: #1b2e4b;
margin-bottom: 14px;
}

.oa-period {
background: #0e1726;
border: 1px solid rgba(var(--bs-primary-rgb), .25);
border-radius: 10px;
padding: 12px;
}

.oa-kv {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 4px 0;
font-size: .85rem;
}

.oa-kv {
color: #d3d8e4;
}

.oa-kv strong {
color: #ffffff;
}

.oa-muted {
color: #a7b0c3;
font-size: .82rem;
}

.oa-pane .form-control,
.oa-pane .input-group-text {
background: #0e1726;
color: #e0e6ed;
border-color: rgba(var(--bs-primary-rgb), .35);
}

.oa-pane .form-control::placeholder {
color: #7f8aa3;
}

.oa-alert {
border: 1px solid rgba(var(--bs-danger-rgb), .4);
background: rgba(var(--bs-danger-rgb), .08);
color: #ffb4b4;
border-radius: 10px;
padding: 12px;
}

.oa-panel-title {
color: #ffffff;
font-size: .92rem;
font-weight: 700;
margin-bottom: 6px;
}

@media (max-width: 992px) {
.oa-action-grid {
grid-template-columns: 1fr;
}
}

/* Modal Uninstall */
.ou-panel {
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(38, 70, 117, 0.45);
border-radius: 12px;
padding: 14px;
}

.ou-card {
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(7, 20, 44, 0.7);
border-radius: 10px;
padding: 14px;
height: 100%;
}

.ou-kv {
display: flex;
justify-content: space-between;
padding: 4px 0;
gap: 10px;
}

.ou-kv span {
color: #c2cde3;
}

.ou-kv strong {
color: #ffffff;
text-align: right;
}

.ou-alert {
border: 1px solid rgba(255, 96, 96, 0.45);
background: rgba(100, 23, 23, 0.35);
color: #ffd2d2;
border-radius: 10px;
padding: 12px;
}

/* Nuevos Stylos  */
        .camera-container {
            position: relative;
            width: 100%;
            max-width: 480px;
            margin: auto;
            border-radius: 15px;
            overflow: hidden;
            background-color: #000;
            aspect-ratio: 3/4;
            min-height: 400px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #my_camera {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .camera-mask {
            position: absolute;
            top: 10%;
            left: 10%;
            width: 80%;
            height: 80%;
            box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
            border-radius: 50% / 40%;
            box-sizing: border-box;
            pointer-events: none;
            z-index: 5;
        }

        /* Prevenir desbordamiento de nombres y textos largos */
        .info-box-5 p, .info-box-5 span {
            word-wrap: break-word;
            word-break: break-word;
        }
        .info-box-5 .inv-detail div > p:nth-child(2),
        .info-box-5 .info-detail p:nth-child(2) {
            max-width: 65%;
            text-align: right;
        }

        /* Ajustes base para la imagen de info-box-3 (Escritorio) */
        .info-box-3 .info-box-image {
            margin-left: 20px;
            margin-right: 25px;
        }
        .info-box-3 .info-box-image img {
            border-radius: 8px;
        }

        body.dark .alert-light-success-neon {
            color: rgba(68, 248, 20, 1);
            background-color: rgba(68, 248, 20, 0.2);
            border-color: rgba(68, 248, 20, 1);
            width: 50%;
            margin: auto;
        }
        /* Ajustes responsive para widgets e info-box-5 en móviles y tablets */
        @media (max-width: 991.98px) {
            .info-box-5 {
                padding: 15px !important;
                margin: 10px 0 !important;
            }
            .info-box-5 h5, .info-box-5 .info-box-5-title {
                font-size: 1.15rem !important;
            }
            .info-box-5 p, .info-box-5 .info-detail p {
                font-size: 0.9rem !important;
                margin-bottom: 0.4rem !important;
            }
            .info-box-5 .acc-amount {
                font-size: 1.5rem !important;
            }
            .info-box-5 .info-box-5-icon svg {
                width: 75px !important;
                height: 75px !important;
            }

            /* Ajustes responsive para la vista de Factura (Paso 6) */
            .invoice-container .content-section {
                padding: 20px 15px !important;
            }
            .invoice-container .inv--customer-detail-section .mt-5 {
                margin-top: 20px !important;
            }
            .invoice-container .inv--customer-detail-section .text-sm-end {
                text-align: left !important;
            }
            .inv--product-table-section th,
            .inv--product-table-section td {
                padding: 10px 5px !important;
                font-size: 0.85rem !important;
            }
            .inv--total-amounts .grand-total-title h4,
            .inv--total-amounts .grand-total-amount h4 {
                font-size: 1.15rem !important;
            }
            .invoice-actions-btn {
                margin-top: 20px !important;
            }

            /* Adaptar el widget de la cuenta al área completa en tablets/móviles */
            .widget-account-invoice-one {
                padding: 15px !important;
                width: 100% !important;
            }
            .widget-account-invoice-one .widget-content {
                padding: 0 !important;
            }

            /* Ajustes responsive para Información de Pagos (info-box-3) */
            .info-box-3 {
                flex-direction: column !important;
                align-items: center !important;
                text-align: center;
                padding: 20px 15px !important;
            }
            .info-box-3 .info-box-image {
                margin: 0 auto 20px auto !important;
                max-width: 250px !important;
            }
            .info-box-3 .info-box-image img {
                display: block;
                width: 100% !important;
                height: auto !important;
                border-radius: 8px;
                margin: 0 auto 10px auto;
            }
            .info-box-3 .info-box-image b {
                display: block;
                font-size: 1rem;
                line-height: 1.3;
            }
            .info-box-3 .info-box-3-content-wrapper {
                width: 100% !important;
                margin-left: 0 !important;
                padding-left: 0 !important;
                padding: 0;
                text-align: center;
            }
            .info-box-3 .info-box-3-title {
                text-align: center;
            }
            .info-box-3 .info-box-3-content {
                max-width: 280px;
                margin: 0 auto 8px auto;
                text-align: left; /* Mantiene la alineación de montos de las cuotas */
            }
        }

        @media (max-width: 767.98px) {
            /* Ajustes responsive para el encabezado del producto en el Paso 4 */
            .step-four .media {
                flex-direction: column;
                text-align: center;
            }
            .step-four .media .usr-img {
                /* margin-right: 0 !important;
                margin-bottom: 15px; */
                display: flex;
                justify-content: center;
                margin: auto;
            }
            .step-four .media .usr-img img {
                width: 140px !important;
                height: auto !important;
            }
            .step-four blockquote .text-end {
                text-align: center !important;
            }
            .step-four blockquote h2.text-end {
                font-size: 1.3rem !important;
            }
            .step-four blockquote h5.text-end {
                font-size: 1.3rem !important;
            }
        }

        @media (max-width: 575px) {
            body.dark .info-box-3-content-wrapper {
                padding: 0;
            }

            body.dark .alert-light-success-neon .alert-icon {

                margin: auto;
            }

            body.dark .custom-alert-1 .alert-icon {

                margin: auto;
            }

            body.dark .alert-light-success-neon {
                color: rgba(68, 248, 20, 1);
                background-color: rgba(68, 248, 20, 0.2);
                border-color: rgba(68, 248, 20, 1);
                width: 100%;
                margin: auto;
            }
        }

        /* Animación suave para la previsualización de la foto */
        @keyframes fadeInScale {
            0% { opacity: 0; transform: scale(0.9); }
            100% { opacity: 1; transform: scale(1); }
        }
        .preview-anim {
            animation: fadeInScale 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
        }

        .spinner_qM83{animation:spinner_8HQG 1.05s infinite}.spinner_oXPr{animation-delay:.1s}.spinner_ZTLf{animation-delay:.2s}@keyframes spinner_8HQG{0%,57.14%{animation-timing-function:cubic-bezier(0.33,.66,.66,1);transform:translate(0)}28.57%{animation-timing-function:cubic-bezier(0.33,0,.66,.33);transform:translateY(-6px)}100%{transform:translate(0)}}

        /* Prevenir salto del layout o corrimiento de izquierda a derecha al abrir modales en móvil */
        body.modal-open {
            padding-right: 0 !important;
        }
        .modal {
            padding-right: 0 !important;
        }
        .step-four {
            overflow-x: hidden;
        }
        .qr-container svg {
            width: 100% !important;
            height: auto !important;
            max-width: 350px;
        }

        /* Estilos universales para la caja de búsqueda y autocompletado */
        .search-box {
            position: relative;
        }
        .search-box ul {
            list-style: none;
            padding: 0px;
            width: 100%;
            position: absolute;
            margin: 0;
            z-index: 99;
            max-height: 226px;
            background-color: #1b2e4b;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            overflow-y: auto;
            box-shadow: 0 6px 10px 0 rgb(0 0 0 / 14%), 0 1px 18px 0 rgb(0 0 0 / 12%), 0 3px 5px -1px rgb(0 0 0 / 20%);
        }
        .search-box ul li {
            padding: 12px 15px;
            margin-bottom: 1px;
            color: #fafafa;
            background-color: #1b2e4b;
            font-size: 14px;
            letter-spacing: 0.5px;
            transition: background-color 0.2s ease;
        }
        .search-box ul li:hover {
            cursor: pointer;
            background-color: #253c5e !important;
        }
        .bg-light-dark {
            background-color: rgba(255, 255, 255, 0.05);
        }
        .border-dashed {
            border-style: dashed !important;
        }
        .gap-2 {
            gap: 0.5rem !important;
        }
        .gap-3 {
            gap: 1rem !important;
        }

        /* Estilos de módulos generales y arqueos */

/* ========================================================
   MODULOS: GENERALES Y ARQUEOS (Dashboard, TomSelect, etc)
   ======================================================== */

/* ═══ TomSelect: Modulos Generales (.cxp-store-ts) y Arqueos (.arching-store-ts) ═══ */
.cxp-store-ts.ts-wrapper,
.arching-store-ts.ts-wrapper {
    width: 100%;
}

.cxp-store-ts.ts-wrapper.form-control,
.cxp-store-ts.ts-wrapper.form-control-sm,
.arching-store-ts.ts-wrapper.form-control,
.arching-store-ts.ts-wrapper.form-control-sm {
    padding: 0;
}

.cxp-store-ts.ts-wrapper.single .ts-control,
.arching-store-ts.ts-wrapper.single .ts-control {
    min-height: 36px;
    height: 36px;
    border: 1px solid #23314c;
    border-radius: .35rem;
    background: #1B2E4B;
    box-shadow: none;
    font-size: .875rem;
    color: #80FF72;
    display: flex;
    align-items: center;
}

.cxp-store-ts.ts-wrapper.single .ts-control .item,
.cxp-store-ts.ts-wrapper.single .ts-control input,
.arching-store-ts.ts-wrapper.single .ts-control .item,
.arching-store-ts.ts-wrapper.single .ts-control input {
    color: #80FF72;
    font-size: .875rem;
    background: transparent;
}

.cxp-store-ts.ts-wrapper.disabled .ts-control .item,
.cxp-store-ts.ts-wrapper.disabled .ts-control input,
.arching-store-ts.ts-wrapper.disabled .ts-control .item,
.arching-store-ts.ts-wrapper.disabled .ts-control input {
    color: #FFFFFF !important;
}

.cxp-store-ts.ts-wrapper.single .ts-control input::placeholder,
.arching-store-ts.ts-wrapper.single .ts-control input::placeholder {
    color: #80FF72;
    opacity: 0.7;
}

.cxp-store-ts.ts-wrapper.focus .ts-control,
.arching-store-ts.ts-wrapper.focus .ts-control {
    border-color: #3b82f6;
    box-shadow: 0 0 0 0.15rem rgba(59, 130, 246, 0.12);
}

.cxp-store-ts.ts-wrapper .ts-dropdown,
.arching-store-ts.ts-wrapper .ts-dropdown {
    border: 1px solid #23314c;
    border-radius: .45rem;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28);
    background: #0b1424;
    margin-top: .25rem;
    z-index: 1050;
}

.cxp-store-ts.ts-wrapper .ts-dropdown .option,
.arching-store-ts.ts-wrapper .ts-dropdown .option {
    color: #dbe9ff;
    padding: .5rem .75rem;
    font-size: .875rem;
    border-bottom: 1px solid #1b2740;
}

.cxp-store-ts.ts-wrapper .ts-dropdown .option:last-child,
.arching-store-ts.ts-wrapper .ts-dropdown .option:last-child {
    border-bottom: 0;
}

.cxp-store-ts.ts-wrapper .ts-dropdown .option.active,
.cxp-store-ts.ts-wrapper .ts-dropdown .option:hover,
.arching-store-ts.ts-wrapper .ts-dropdown .option.active,
.arching-store-ts.ts-wrapper .ts-dropdown .option:hover {
    background: #1a3259;
    color: #ffffff;
}

.cxp-store-ts.ts-wrapper .ts-dropdown .ts-dropdown-content::-webkit-scrollbar,
.arching-store-ts.ts-wrapper .ts-dropdown .ts-dropdown-content::-webkit-scrollbar {
    width: 8px;
}

.cxp-store-ts.ts-wrapper .ts-dropdown .ts-dropdown-content::-webkit-scrollbar-thumb,
.arching-store-ts.ts-wrapper .ts-dropdown .ts-dropdown-content::-webkit-scrollbar-thumb {
    background: #3c547d;
    border-radius: 6px;
}

.cxp-store-ts.ts-wrapper .clear-button,
.arching-store-ts.ts-wrapper .clear-button {
    color: #97accf !important;
    right: 10px !important;
}

/* ═══ Filtros Avanzados (Responsive) ═══ */
#filtrosAvanzados .form-control-sm,
#filtrosAvanzados .form-select-sm,
#filtrosAvanzados .input-group-sm .input-group-text,
#filtrosAvanzados .input-group-sm .form-control,
#filtrosAvanzados .btn-sm {
    height: 36px !important;
    min-height: 36px !important;
    display: flex;
    align-items: center;
}

/* ═══ Dashboard KPI Styles ═══ */
.custom-dashboard-card {
    border: none;
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.custom-dashboard-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
}
.custom-dashboard-chart-card {
    border: 1px solid rgba(67, 97, 238, 0.3);
    border-radius: 12px;
    background: linear-gradient(180deg, #1b2e4b 0%, #0e1726 100%) !important;
    box-shadow: 0 0 15px rgba(67, 97, 238, 0.1) !important;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.custom-dashboard-chart-card:hover {
    border-color: rgba(67, 97, 238, 0.6);
    box-shadow: 0 0 25px rgba(67, 97, 238, 0.25) !important;
}
.tracking-wide {
    letter-spacing: 0.5px;
}
.kpi-value-container {
    width: 100%;
    overflow: hidden;
}
.kpi-value-text {
    font-size: clamp(1.4rem, 6vw, 2.2rem);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (min-width: 768px) {
    .kpi-value-text {
        font-size: clamp(1.4rem, 2.5vw, 2.2rem);
    }
}
.dashboard-loading-overlay {
    position: absolute;
    top: 0; left: -15px; right: -15px; bottom: 0;
    background: rgba(14, 23, 38, 0.7);
    z-index: 50;
    border-radius: 12px;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(2px);
}
.chart-min-height {
    min-height: 120px;
}
.filter-reset-btn {
    height: 36px;
    border: 1px solid #23314c !important;
    background: #1B2E4B !important;
    color: #80FF72 !important;
    transition: all 0.2s ease;
}
.filter-reset-btn:hover {
    background: #23314c !important;
    border-color: #3b82f6 !important;
    color: #fff !important;
}

@media (min-width: 768px) {
    .filter-reset-btn {
        width: auto !important;
        max-width: 120px;
    }
}
.mobile-kpi-scroll::-webkit-scrollbar {
    height: 4px;
}
.mobile-kpi-scroll::-webkit-scrollbar-thumb {
    background: #3b3f5c;
    border-radius: 4px;
}

@media (max-width: 991px) {
    .mobile-kpi-scroll {
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
    }
    .mobile-kpi-scroll > div {
        min-width: 290px;
    }
    .mobile-kpi-scroll > .col-11 {
        min-width: 500px;
    }
    .chart-min-height {
        min-height: 200px;
    }
    .kpi-value-text {
        font-size: clamp(1.6rem, 7vw, 2.2rem);
    }
}

/* ═══ Paginador Móvil ─ Tono Dark (adaptado al paginador dark del sistema) ═══ */
.mobile-paginator-sm .pagination,
.mobile-paginator-sm .page-link {
    background-color: #1b2e4b;
    border-color: rgba(255, 255, 255, 0.12);
    color: #bfc9d4;
}
.mobile-paginator-sm .page-link:hover {
    background-color: #25396a;
    border-color: #4361ee;
    color: #ffffff;
}
.mobile-paginator-sm .page-item.active .page-link {
    background: linear-gradient(135deg, #4361ee, #3b4cb8);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
}
.mobile-paginator-sm .page-item.disabled .page-link,
.mobile-paginator-sm .page-item.disabled .page-link:hover {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
    color: #6c757d;
    cursor: not-allowed;
}
@media (max-width: 767px) {
    .mobile-paginator-sm .pagination {
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 10px;
        font-size: 0.8rem;
        margin-bottom: 0;
    }
    .mobile-paginator-sm .page-link {
        padding: 0.3rem 0.5rem;
        font-size: 0.8rem;
    }
}

/* ═══ KPI Gradient Colors ═══ */
.bg-success { background: linear-gradient(135deg, #00ab55 0%, #00d68f 100%) !important; }
.bg-primary { background: linear-gradient(135deg, #4361ee 0%, #6c85f7 100%) !important; }
.bg-info { background: linear-gradient(135deg, #2196f3 0%, #64b5f6 100%) !important; }
.bg-danger { background: linear-gradient(135deg, #e7515a 0%, #ff767d 100%) !important; }
.bg-warning { background: linear-gradient(135deg, #e2a03f 0%, #f7b959 100%) !important; }

/* ═══ Scroll interno para modales ═══ */
.modal-internal-scroll {
    max-height: 250px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #3b3f5c transparent;
}
.modal-internal-scroll::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.modal-internal-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.modal-internal-scroll::-webkit-scrollbar-thumb {
    background-color: #3b3f5c;
    border-radius: 10px;
}
.modal-internal-scroll::-webkit-scrollbar-thumb:hover {
    background-color: #4361ee;
}/*
==========================
CXP General Module
==========================
*/
.cxp-general-kpi-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: none;
    border-radius: 12px;
}
.cxp-general-kpi-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2) !important;
}
.cxp-general-kpi-value-container {
    width: 100%;
    overflow: hidden;
}
.cxp-general-kpi-text {
    font-size: clamp(1.4rem, 6vw, 2.2rem);
    line-height: 1;
    letter-spacing: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (min-width: 768px) {
    .cxp-general-kpi-text {
        font-size: clamp(1.4rem, 2.5vw, 2.2rem);
    }
}
.cxp-general-chart-min-height {
    min-height: 120px;
}

.cxp-general-bg-success { background: linear-gradient(135deg, #00ab55 0%, #00d68f 100%) !important; color: white !important; }
.cxp-general-bg-primary { background: linear-gradient(135deg, #4361ee 0%, #6c85f7 100%) !important; color: white !important; }
.cxp-general-bg-info { background: linear-gradient(135deg, #2196f3 0%, #64b5f6 100%) !important; color: white !important; }

.cxp-general-mobile-scroll::-webkit-scrollbar {
    height: 4px;
}
.cxp-general-mobile-scroll::-webkit-scrollbar-thumb {
    background: #3b3f5c;
    border-radius: 4px;
}

@media (max-width: 991px) {
    .cxp-general-mobile-scroll {
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
    }
    .cxp-general-mobile-scroll > div {
        min-width: 290px;
    }
    .cxp-general-mobile-scroll > .col-11 {
        min-width: 500px;
    }
    .cxp-general-chart-min-height {
        min-height: 250px;
    }
}

.cxp-general-modal-scroll {
    max-height: 250px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #3b3f5c transparent;
}
.cxp-general-modal-scroll::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.cxp-general-modal-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.cxp-general-modal-scroll::-webkit-scrollbar-thumb {
    background-color: #3b3f5c;
    border-radius: 10px;
}
.cxp-general-modal-scroll::-webkit-scrollbar-thumb:hover {
    background-color: #4361ee;
}

.cxp-general-loading-overlay {
    position: absolute;
    top: 0; left: -15px; right: -15px; bottom: 0;
    background: rgba(14, 23, 38, 0.7);
    z-index: 10;
    border-radius: 12px;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(2px);
}

/* ═══ Paginador Móvil general ─ Tono Dark (adaptado al paginador dark del sistema) ═══ */
.cxp-general-mobile-paginator .pagination,
.cxp-general-mobile-paginator .page-link {
    background-color: #1b2e4b;
    border-color: rgba(255, 255, 255, 0.12);
    color: #bfc9d4;
}
.cxp-general-mobile-paginator .page-link:hover {
    background-color: #25396a;
    border-color: #4361ee;
    color: #ffffff;
}
.cxp-general-mobile-paginator .page-item.active .page-link {
    background: linear-gradient(135deg, #4361ee, #3b4cb8);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
}
.cxp-general-mobile-paginator .page-item.disabled .page-link,
.cxp-general-mobile-paginator .page-item.disabled .page-link:hover {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
    color: #6c757d;
    cursor: not-allowed;
}
@media (max-width: 767px) {
    .cxp-general-mobile-paginator .pagination {
        font-size: 0.8rem;
        margin-bottom: 0;
    }
    .cxp-general-mobile-paginator .page-link {
        padding: 0.3rem 0.5rem;
    }
}

/* ═══ TomSelect Dark Theme Styles ═══ */
.cxp-general-ts.ts-wrapper {
    width: 100%;
}

.cxp-general-ts.ts-wrapper.form-control,
.cxp-general-ts.ts-wrapper.form-control-sm {
    padding: 0;
}

.cxp-general-ts.ts-wrapper.single .ts-control {
    min-height: 36px;
    height: 36px;
    border: 1px solid #23314c;
    border-radius: .35rem;
    background: #1B2E4B;
    box-shadow: none;
    font-size: .875rem;
    color: #80FF72;
    display: flex;
    align-items: center;
}

.cxp-general-ts.ts-wrapper.single .ts-control .item,
.cxp-general-ts.ts-wrapper.single .ts-control input {
    color: #80FF72;
    font-size: .875rem;
    background: transparent;
}

.cxp-general-ts.ts-wrapper.single .ts-control input::placeholder {
    color: #80FF72;
    opacity: 1;
}

.cxp-general-ts.ts-wrapper.focus .ts-control {
    border-color: #3b82f6;
    box-shadow: 0 0 0 0.15rem rgba(59, 130, 246, 0.12);
}

.cxp-general-ts.ts-wrapper .ts-dropdown {
    border: 1px solid #23314c;
    border-radius: .45rem;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28);
    background: #0b1424;
    margin-top: .25rem;
}

.cxp-general-ts.ts-wrapper .ts-dropdown .option {
    color: #dbe9ff;
    padding: .5rem .75rem;
    font-size: .875rem;
    border-bottom: 1px solid #1b2740;
}

.cxp-general-ts.ts-wrapper .ts-dropdown .option:last-child {
    border-bottom: 0;
}

.cxp-general-ts.ts-wrapper .ts-dropdown .option.active,
.cxp-general-ts.ts-wrapper .ts-dropdown .option:hover {
    background: #1a3259;
    color: #ffffff;
}

.cxp-general-ts.ts-wrapper .ts-dropdown .ts-dropdown-content::-webkit-scrollbar {
    width: 8px;
}

.cxp-general-ts.ts-wrapper .ts-dropdown .ts-dropdown-content::-webkit-scrollbar-thumb {
    background: #3c547d;
    border-radius: 6px;
}

.cxp-general-ts.ts-wrapper .clear-button {
    color: #97accf !important;
    right: 10px !important;
}
.cxp-general-bg-danger { background: linear-gradient(135deg, #e7515a 0%, #ff6b74 100%) !important; color: white !important; }
.cxp-general-chart-card {
    border: 1px solid rgba(67, 97, 238, 0.3);
    border-radius: 12px;
    background: linear-gradient(180deg, #1b2e4b 0%, #0e1726 100%) !important;
    box-shadow: 0 0 15px rgba(67, 97, 238, 0.1) !important;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.cxp-general-chart-card:hover {
    border-color: rgba(67, 97, 238, 0.6);
    box-shadow: 0 0 25px rgba(67, 97, 238, 0.25) !important;
}
.cxp-general-tracking-wide {
    letter-spacing: 0.5px;
}
/* ---------------------------------------------------
    BOTONES FLOTANTES CHAT
--------------------------------------------------- */
.chat-btn {
    position: fixed;
    border: none;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    border-radius: 100%;
    background-color: #0012C6;
    box-shadow: 0 4px 14px rgba(0,0,0,.28);
    transition: transform .25s ease, opacity .25s ease;
    z-index: 9999;
    overflow: hidden;
}
.big-btn {
    width: 60px;
    height: 60px;
    right: 24px;
    bottom: 24px;
}
.small-btn {
    width: 42px;
    height: 42px;
    right: 31px;
    visibility: visible;
    transition: opacity .2s ease;
}
.small-btn.animate {
    visibility: visible;
    animation: springPop .38s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.woot-widget-bubble,
.woot-widget-holder {
    z-index: 10001 !important;
}
#btn-whatsapp { bottom: 98px; background-color: #25D366; }
#btn-change   { bottom: 154px; }
.chat-btn svg {
    position: absolute;
    transition: opacity .22s ease, transform .22s ease;
}
@media (max-width: 767px) {
    .big-btn {
        width: 54px;
        height: 54px;
        right: 14px;
        bottom: 14px;
    }
    .small-btn {
        right: 31px;
    }
    #btn-whatsapp { bottom: 98px; }
    #btn-change   { bottom: 154px; }
}
/* Ícono oculto */
.hide-icon {
    opacity: 0;
    transform: scale(.4) rotate(90deg);
}
/* Ícono visible */
.show-icon {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}
.selected-advisor #advisor-box {
    bottom: 205px !important;
}
#advisor-box {
    position: fixed;
    right: 32px;
    bottom: 95px;
    width: 260px;
    z-index: 10000;
    opacity: 0;
    transform: translateY(12px);
    animation: chatFloat .25s ease forwards;
}
#advisor-box .box-inner {
    background: white;
    padding: 15px;
    border-radius: 14px;
    box-shadow: 0 10px 25px rgba(0,0,0,.25);
    border: 1px solid #ececec;
    max-height: 310px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #bfc4ff #f1f1f1;
}
#advisor-box .box-inner::-webkit-scrollbar {
    width: 6px;
}
#advisor-box .box-inner::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}
#advisor-box .box-inner::-webkit-scrollbar-thumb {
    background: #bfc4ff;
    border-radius: 10px;
}
#advisor-box .title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #262626;
}
.advisor-initials {
    position: absolute;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: .5px;
    line-height: 1;
    color: white;
    transition: opacity .22s ease, transform .22s ease;
}
.advisor-item {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    background: transparent;
    border: none;
    margin-bottom: 6px;
    cursor: pointer;
    text-align: left;
    font-size: 14px;
    color: #1e1e1e;
    transition: background .2s, transform .2s;
    display: flex;
    align-items: end;
    gap: 8px;
}
.advisor-item:last-child {
    margin-bottom: 0;
}
.advisor-item svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}
.advisor-name {
    font-size: 14px;
    font-weight: 500;
    color: #1e1e1e;
    line-height: 1;
}
.advisor-item.active {
    background: #e2e5ff;
    transform: translateY(-2px);
}
.advisor-item:hover {
    background: #e2e5ff;
    transform: translateY(-2px);
}
.advisor-list {
    max-height: 223px;
    padding-right: 4px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #bfc4ff #f1f1f1;
}
.advisor-search-wrapper {
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
    padding-top: 2px;
    padding-bottom: 6px;
}
.advisor-search {
    width: 100%;
    padding: 8px 34px 8px 10px; /* espacio para la X */
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 14px;
}
.advisor-search:focus {
    outline: none;
    border-color: #0012C6;
    box-shadow: 0 0 0 2px rgba(0, 18, 198, .15);
}
.clear-search {
    position: absolute;
    right: 10px;
    top: 40%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 22px;
    color: #777;
    transition: color .2s ease, transform .2s ease;
    user-select: none;
}
.clear-search:hover {
    color: #000;
    transform: translateY(-50%) scale(1.15);
}
/* ---------------------------------------------------
    ANIMACIONES
--------------------------------------------------- */
.fade-in-up {
    animation: fadeUp .25s ease forwards;
}
@keyframes fadeUp {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
@keyframes chatFloat {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes springPop {
    0% {
        transform: translateY(20px) scale(0.6);
        opacity: 0;
    }
    60% {
        transform: translateY(-4px) scale(1.05);
        opacity: 1;
    }
    80% {
        transform: translateY(2px) scale(0.97);
    }
    100% {
        transform: translateY(0) scale(1);
    }
}

/* --- TomSelect multiple: Roles de Novedades (.announcement-roles-ts) --- */
.announcement-roles-ts.ts-wrapper {
    z-index: 1;
}
.announcement-roles-ts.ts-wrapper .ts-control {
    background: #0e1726 !important;
    color: #e0e6ed !important;
    border: 1px solid rgba(224, 230, 237, 0.18) !important;
    border-radius: 6px;
    min-height: 44px;
    padding: 6px 10px;
    box-shadow: none !important;
    cursor: pointer;
}
.announcement-roles-ts.ts-wrapper.focus .ts-control {
    border-color: rgba(99, 102, 241, 0.55) !important;
    box-shadow: none !important;
}
.announcement-roles-ts.ts-wrapper .ts-control input {
    color: #e0e6ed !important;
    background: transparent !important;
}
.announcement-roles-ts.ts-wrapper .ts-control input::placeholder {
    color: #888ea8 !important;
}
.announcement-roles-ts.ts-wrapper.multi .ts-control > div {
    background: rgba(99, 102, 241, 0.16) !important;
    border: 1px solid rgba(99, 102, 241, 0.35) !important;
    color: #c7d2fe !important;
    border-radius: 5px;
    padding: 3px 8px;
    margin: 2px;
}
.announcement-roles-ts.ts-wrapper.multi .ts-control > div.active {
    background: rgba(99, 102, 241, 0.28) !important;
    border-color: rgba(99, 102, 241, 0.5) !important;
}
.announcement-roles-ts.ts-wrapper.multi .ts-control > div .remove {
    color: #94a3b8 !important;
    font-weight: 700;
    font-size: 0.9rem;
}
.announcement-roles-ts.ts-wrapper.disabled .ts-control {
    opacity: 0.6;
    cursor: not-allowed;
    background: #111827 !important;
}
.announcement-roles-ts.ts-dropdown {
    z-index: 1070 !important;
    background: #0e1726 !important;
    border: 1px solid rgba(224, 230, 237, 0.2) !important;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
    overflow: hidden;
}
.announcement-roles-ts.ts-dropdown .ts-dropdown-content {
    max-height: 220px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
}
.announcement-roles-ts.ts-dropdown .option,
.announcement-roles-ts.ts-dropdown .no-results,
.announcement-roles-ts.ts-dropdown .create {
    color: #e0e6ed !important;
    padding: 8px 12px;
    font-size: 0.85rem;
}
.announcement-roles-ts.ts-dropdown .option.active,
.announcement-roles-ts.ts-dropdown .option:hover {
    background: rgba(99, 102, 241, 0.14) !important;
    color: #e0e6ed !important;
}

/* ============================================================
   PAGINACIÓN — DARK MODE
   La app se usa en modo oscuro (body.dark); se sobrescribe la
   base clara de Bootstrap para que la paginación sea coherente.
   ============================================================ */
body.dark .pagination .page-link {
    background-color: #1b2e4b;
    border-color: rgba(255, 255, 255, 0.12);
    color: #bfc9d4;
    transition: all 0.2s ease;
}
body.dark .pagination .page-link:hover {
    background-color: #25396a;
    border-color: #4361ee;
    color: #ffffff;
}
body.dark .pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #4361ee, #3b4cb8);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
}
body.dark .pagination .page-item.disabled .page-link {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
    color: #6c757d;
    cursor: not-allowed;
}
body.dark .pagination .page-item.disabled .page-link:hover {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
    color: #6c757d;
}