.loteEnvioModalWin > .modal-dialog {
    width: calc(100% - 120px);
    max-width: 1400px;
}

    .loteEnvioModalWin > .modal-dialog > .modal-content {
        max-height: 100%;
    }

.search-container {
    display: inline-flex;
    align-items: center;
    border-radius: 5px;
    padding: 5px 20px 5px 5px;
    background-color: #fff;
    width: 100%;
}

    .search-container input {
        border: none;
        outline: none;
        /* font-size: 12px; */
        color: #1a1a23;
        width: 200px;
    }

        .search-container input::placeholder {
            color: #999;
            opacity: 1;
            font-size: 15px;
        }

    .search-container button {
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        margin-left: 13px;
        display: flex;
        align-items: center;
    }

        .search-container button .glyphicon {
            font-size: 16px;
            transition: color 0.2s;
        }

        .search-container button:hover .glyphicon {
            color: #555;
        }

.lotEnvEnvioItem {
    min-height: 60px;
    border-bottom: solid 1px #d1d1d1;
    padding: 2px 6px;
    cursor: pointer;
}

    .lotEnvEnvioItem:hover {
        /*border: solid 2px #8BC34A;*/
        background-color: #e6f7ff;
    }

.lotEnvEnvioItemName {
    font-size: 14px;
    display: inline-block;
}

.lotEnvEnvioItem.creando {
    background-color: #ebebeb;
}


.lotEnvEnvioItem.enCola {
    background-color: #ebebeb;
    color: #777;
    border-color: #ddd;
    opacity: 0.7;
}

.lotEnvEnvioItem.disabled {
    background-color: #ffcaca;
}

.lotEnvEnvioItem.selected {
    background-color: #bbe8fd;
}


.lotEnvEstadoEnvio {
    display: inline-block;
    padding: 0px 6px;
    /*background-color: #ffddb3;
        border-radius: 8px;
        float: right;*/
    font-weight: bold;
    font-size: 14px;
}

    .lotEnvEstadoEnvio.disabled {
        background-color: #ff5454;
        color: #fff9f1;
    }

.lotEnvDisableEnvio {
    float: right;
    font-size: 10px;
    cursor: pointer;
    color: red;
    padding: 2px;
}

    .lotEnvDisableEnvio:hover {
        color: red;
        color: #fb8100;
    }

.lotEnvLogsEnvio {
    float: right;
    font-size: 24px;
    cursor: pointer;
    color: blue;
    padding: 2px;
}

    .lotEnvLogsEnvio:hover {
        color: #041f4a;
    }

.fillModalWin > .modal-dialog.modal-xxlg {
    width: calc(100vw - 120px);
    max-width: 1400px;
    height: calc(100vh - 80px);
    margin: 30px auto;
}

    .fillModalWin > .modal-dialog.modal-xxlg > .modal-content {
        height: 100%;
        overflow: hidden;
    }



/* --- Reset pequeño --- */
.switch {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    user-select: none;
}

/* --- Texto que refleja el estado --- */
.switch-text::after {
    content: attr(data-off);
    font: 500 14px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Arial;
    color: #3b3b3b;
}

.switch-input:checked ~ .switch-text::after {
    content: attr(data-on);
}

/* --- Pista + pulgar --- */
.switch-track {
    width: 52px;
    height: 28px;
    border-radius: 999px;
    position: relative;
    background: #cfd7df;
    transition: background .2s ease, box-shadow .2s ease;
    box-shadow: inset 0 0 0 1px #b8c2cc;
}

.switch-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.25);
    transition: transform .2s ease;
}

/* --- Estado ON --- */
.switch-input:checked + .switch-track {
    background: #2ecc71;
    box-shadow: inset 0 0 0 1px #25b862;
}

    .switch-input:checked + .switch-track .switch-thumb {
        transform: translateX(24px);
    }

/* --- Accesibilidad (teclado / foco) --- */
.switch-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

    .switch-input:focus-visible + .switch-track {
        outline: 3px solid #5b9dd9;
        outline-offset: 2px;
    }

    /* --- Estado deshabilitado (opcional) --- */
    .switch-input:disabled + .switch-track {
        background: #e6e9ed;
        box-shadow: inset 0 0 0 1px #d4d9de;
    }

        .switch-input:disabled + .switch-track .switch-thumb {
            box-shadow: none;
        }

    .switch-input:disabled ~ .switch-text {
        color: #9aa3ad;
    }

    .switch-input:disabled,
    .switch-input:disabled ~ .switch-text,
    .switch-input:disabled + .switch-track {
        cursor: not-allowed;
    }




.loading-stripes {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s linear;
    contain: paint;
}

    .loading-stripes.is-active {
        opacity: 1;
    }

    .loading-stripes::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -50%;
        width: 70%;
        background: linear-gradient(90deg, rgba(0,0,0,0), #f3f3f3 45%, rgba(0,0,0,0) 90%);
        transform: translateX(0);
        animation: shimmer-move 1000ms linear infinite;
        will-change: transform;
    }

@keyframes shimmer-move {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(200%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .loading-stripes::before {
        animation: none;
    }
}


/* PANEL FLOTANTE */
.inner-panel-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 1040;
}

.inner-panel {
    position: absolute;
    top: 10%;
    left: 15%;
    width: 70%;
    height: 80%;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    z-index: 1050;
    display: flex;
    flex-direction: column;
}

.inner-panel-header {
    padding: 0px 12px;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .inner-panel-header .close {
        background: none;
        border: none;
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
    }

.inner-panel-body {
    padding: 12px;
    overflow: auto;
    flex: 1;
}

/* Estilos del icono */
.icon-mail-ok {
    width: 32px; /* cambia tamaño aquí */
    height: 32px;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

    /* Colores (puedes sobrescribir estas variables) */
    .icon-mail-ok .mail {
        stroke: var(--icon-color, #3a4a5a);
    }

    .icon-mail-ok .ok {
        stroke: var(--accent-color, green);
    }


.icon-mail-alert {
    width: 32px;
    height: 32px;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

    .icon-mail-alert .mail {
        stroke: #3a4a5a;
    }

    .icon-mail-alert .alert {
        stroke: #e67e22;
    }
/* naranja para la exclamación */




.icon-mail-error {
    width: 32px;
    height: 32px;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

    .icon-mail-error .mail {
        stroke: #3a4a5a;
    }
    /* gris para el sobre */
    .icon-mail-error .error {
        stroke: #e74c3c;
    }
/* rojo para la X */




.gear-spin {
    display: inline-block;
    animation: spin 2s linear infinite;
    color: #3a4a5a;
}

@keyframes spin {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.spinnerLogsPanel {
    position: absolute;
    inset: 0;
    background: rgba(200,200,200,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

    .spinnerLogsPanel img {
        width: 40px;
        height: 40px;
    }


.spinnerShipment {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(128, 128, 128, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    margin: 2px;
}

    .spinnerShipment img {
        width: 40px;
        height: 40px;
    }


/* --- Ajustes del contenedor del nuevo Modal --- */
.lote-modal-body {
    padding: 30px;
    background-color: #fff;
}

@media (min-width: 768px) {
    .lote-form-align {
        display: flex;
        align-items: center;
    }

    .text-right-sm {
        text-align: right;
    }
}

/* --- Inputs tipo Línea (Efecto Material de tus capturas) --- */
.lote-input {
    width: 100%;
    height: 34px;
    border: none;
    border-bottom: 1px solid #d1d1d1;
    border-radius: 0;
    color: #1a1a23;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size: 14px;
    background: transparent;
    box-shadow: none;
    transition: border-color 0.15s ease-in-out;
    padding: 0 4px;
}

    .lote-input:focus {
        outline: none;
        border-bottom-color: #3a4a5a;
        box-shadow: none;
    }

/* --- BASE UNIFICADA DE BOTONES (Mismo tamaño, misma tipografía, misma sombra) --- */
.btn-lote-pregenerar,
.btn-lote-submit,
.btn-lote-cancel,
.btn-lote-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px; /* Altura idéntica para todos, clavada con tu datepicker/select */
    padding: 0 16px;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase; /* Fuerza las mayúsculas como en tus capturas */
    letter-spacing: 0.5px;
    border-radius: 4px; /* Esquinas sutiles de tus imágenes */
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); /* Sombra suave idéntica */
    transition: all 0.2s ease-in-out;
    white-space: nowrap;
}

/* 1. BOTÓN AZUL CELESTE (Ej: "Pregenerar Lote Envíos") */
.btn-lote-pregenerar {
    background-color: #009ee0;
    border: 1px solid #009ee0;
    color: #ffffff;
}

    .btn-lote-pregenerar:hover {
        background-color: #0086c2;
        border-color: #0086c2;
    }

/* 2. BOTÓN OSCURO PIZARRA (Ej: "OK") */
.btn-lote-submit {
    background-color: #3a4a5a; /* Tu color corporativo oscuro */
    border: 1px solid #3a4a5a;
    color: #ffffff;
}

    .btn-lote-submit:hover {
        background-color: #2c3845;
        border-color: #2c3845;
    }

/* 3. BOTÓN BLANCO/GRIS (Ej: "VOLVER") */
.btn-lote-cancel {
    background-color: #ffffff;
    border: 1px solid #cccccc;
    color: #555555;
}

    .btn-lote-cancel:hover {
        background-color: #f5f5f5;
        border-color: #b3b3b3;
    }

/* 4. BOTÓN SELECCIÓN (Blanco con borde azulado/gris) */
.btn-lote-action {
    background-color: #ffffff;
    border: 1px solid #a0b0c0;
    color: #3a4a5a;
    gap: 6px; /* Espacio para el icono si lleva */
}

    .btn-lote-action:hover {
        background-color: #f4f7f9;
    }

/* --- Contenedores de Alineación --- */
/* Fuerza a que el círculo, el texto y el botón se alineen perfectamente al centro del eje horizontal */
.lote-radio-inline-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px; /* Separación uniforme */
    vertical-align: middle;
}

/* --- Contenedor general (el que ya tienes) --- */
.lote-destinatarios-box {
    background-color: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    padding: 12px;
    min-height: 48px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* Hace que si hay varias filas, no se peguen entre ellas */
}

/* --- La "píldora" envolvente para cada destinatario --- */
.lote-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px; /* Espacio exacto entre el icono del ticket y el texto */
    background-color: #f0f4f8; /* Un gris-azul muy suave y limpio */
    border: 1px solid #d1d9e0; /* Borde sutil */
    color: #3a4a5a; /* Tu color de texto principal */
    padding: 4px 14px;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    border-radius: 50px; /* Bordes completamente redondeados estilo píldora */
    transition: all 0.15s ease-in-out;
    user-select: none;
}

    /* Efecto hover opcional por si en el futuro quieres que se puedan borrar o clicar */
    .lote-tag:hover {
        background-color: #e6f7ff;
        border-color: #bbe8fd;
        color: #041f4a;
    }

    /* Ajuste para el icono dentro del tag (por si se queda desalineado) */
    .lote-tag .glyphicon,
    .lote-tag .fa {
        font-size: 12px;
        color: #708090; /* Un tono grisáceo para que el icono no sature */
    }

.lote-modal-footer {
    background-color: #fff;
    border-top: 1px solid #e5e5e5;
    padding: 20px 30px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}


/* --- Distribución y separación de columnas --- */
@media (min-width: 992px) {
    .lote-split-container {
        display: flex;
        align-items: stretch;
    }

    .lote-col-separador {
        border-right: 1px solid #eef2f5;
        padding-right: 30px;
    }
}

/* --- Envoltorio de la Vista Previa --- */
.lote-preview-wrapper {
    padding-left: 10px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.preview-title {
    margin: 0 0 4px 0;
    font-size: 14px;
    color: #3a4a5a;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.preview-subtitle {
    margin: 0 0 15px 0;
    font-size: 12px;
    color: #7f8c8d;
}

/* --- Contenedor del listado con Scroll --- */
.preview-list-container {
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    background-color: #fafbfc;
    max-height: calc(100vh - 420px);
    min-height: 350px;
    overflow-y: auto;
}
/* --- Filas individuales (Items con Checkbox) --- */
.preview-item {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid #edf1f2;
    margin-bottom: 0; /* Resetea el margen nativo de Bootstrap para labels */
    cursor: pointer;
    transition: background-color 0.15s ease;
}

    .preview-item:last-child {
        border-bottom: none;
    }

    .preview-item:hover {
        background-color: #f1f4f7;
    }

/* Alineación de columnas internas del item */
.preview-checkbox-col {
    margin-right: 12px;
    display: flex;
    align-items: center;
}

.preview-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #009ee0; /* El check se vuelve de tu color azul celeste */
}

.preview-info-col {
    display: flex;
    flex-direction: column;
}

.preview-recipient-name {
    font-size: 13px;
    font-weight: 600;
    color: #2c3e50;
}

.preview-item-subtext {
    font-size: 11px;
    color: #7f8c8d;
    margin-top: 1px;
}

/* --- Estado Vacío --- */
.preview-empty-state {
    padding: 40px 20px;
    text-align: center;
    color: #95a5a6;
}

    .preview-empty-state i {
        font-size: 24px;
        margin-bottom: 8px;
        color: #bdc3c7;
    }

    .preview-empty-state p {
        font-size: 12px;
        margin: 0;
    }




.tarjeta-lote {
    background: #fdfdfd;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 12px;
    transition: all 0.2s ease;
}

    .tarjeta-lote.lote-abierto {
        border-color: #3182ce; /* Cambia a azul suave al expandirse */
        box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    }

.lote-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.lote-info-left {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.lote-destinatario {
    margin: 0 0 4px 0;
    font-size: 15px;
    font-weight: 700;
    color: #1a202c;
}

.btn-link-desplegar {
    background: none;
    border: none;
    color: #4a5568;
    font-size: 13px;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    display: flex;
    align-items: center;
    gap: 5px;
}

    .btn-link-desplegar:hover {
        color: #3182ce;
    }

.badge-articulos-count {
    background-color: #edf2f7;
    color: #4a5568;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

/* Estilos de la lista desplegada */
.lote-body-articulos {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #e2e8f0;
    max-height: 250px; /* Evita que un lote gigante rompa el scroll principal */
    overflow-y: auto;
}

.lista-titulares-clean {
    list-style: none;
    padding: 0;
    margin: 0;
}

.titular-item {
    font-size: 13px;
    color: #4a5568;
    padding: 6px 0;
    line-height: 1.4;
    border-bottom: 1px solid #f7fafc;
}

    .titular-item:last-child {
        border-bottom: none;
    }



.pregeneration-view {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    height: 100%;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
}

.pregeneration-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
    background-color: #fff;
}

.pregeneration-form-row {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.pregeneration-form-row-top {
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
}

.pregeneration-label-col {
    text-align: left;
    padding-left: 15px;
}

.pregeneration-label-col-top {
    text-align: left;
    padding-left: 15px;
    padding-top: 5px;
}

.pregeneration-label {
    margin: 0;
    font-weight: bold;
    color: #555;
}

.pregeneration-input {
    max-width: 500px;
    width: 100%;
}

.pregeneration-receivers-box {
    border: 1px solid #ddd;
    padding: 8px;
    border-radius: 4px;
    background: #fafafa;
    min-height: 44px;
    max-height: 120px;
    overflow-y: auto;
    max-width: 500px;
    width: 100%;
}

.pregeneration-receiver-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 2px;
    padding: 5px 10px;
    font-size: 12px;
    color: white;
    background-color: #009EE0;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    line-height: 1.2;
}

.pregeneration-receiver-tag-icon {
    color: #64748b;
    font-size: 10px;
}

.pregeneration-section-header {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}

.pregeneration-header-left {
    display: flex;
    align-items: center;
}

.pregeneration-header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
}

.pregeneration-action-button {
    height: 34px;
    padding: 0 14px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pregeneration-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}



.pregeneration-title {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pregeneration-search-box {
    display: flex;
    align-items: center;
    width: 300px;
    max-width: 100%;
    height: 34px;
}

.pregeneration-search-icon {
    flex: 0 0 auto;
    margin-left: 8px;
    margin-right: 8px;
    color: #999;
    font-size: 14px;
    pointer-events: none;
}

.pregeneration-search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 32px;
    border: none;
    outline: none;
    box-shadow: none;
    background: transparent;
    font-size: 13px;
    color: #333;
    padding: 0;
}

    .pregeneration-search-input:focus {
        outline: none;
        box-shadow: none;
    }


.pregeneration-preview-list {
    width: 100%;
    max-height: 600px;
    overflow-y: auto;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    background-color: #fafbfc;
    padding: 10px;
}

.pregeneration-preview-item {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 10px;
}

    .pregeneration-preview-item:last-child {
        margin-bottom: 0;
    }

.pregeneration-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.pregeneration-preview-left {
    display: flex;
    gap: 10px;
    align-items: center;
    min-width: 0;
}

.pregeneration-checkbox {
    width: 15px;
    height: 15px;
    cursor: pointer;
    flex: 0 0 auto;
}

.pregeneration-recipient-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pregeneration-recipient-name {
    font-weight: bold;
    font-size: 14px;
    color: #333;
    word-break: break-word;
}

.pregeneration-toggle-articles {
    background: none;
    border: none;
    padding: 0;
    color: #337ab7;
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
}

.pregeneration-articles-body {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #ddd;
    max-height: 150px;
    overflow-y: auto;
}

.pregeneration-articles-list {
    list-style: none;
    padding-left: 5px;
    margin: 0;
}

.pregeneration-article-item {
    font-size: 13px;
    color: #555;
    padding: 5px 0;
    border-bottom: 1px solid #f9f9f9;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pregeneration-empty {
    text-align: center;
    padding: 20px;
    color: #999;
}

.pregeneration-footer {
    flex: 0 0 auto;
    background: #fff;
    border-top: 1px solid #e5e5e5;
    margin: 0;
    padding: 15px;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px;
    width: 100%;
}

/* --- Ajustes finales: acciones, progreso y loading de vista previa --- */
.acciones-envio {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}


.pregeneration-preview-list {
    width: 100%;
    max-height: 600px;
    min-height: 170px;
    overflow-y: auto;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    background-color: #fafbfc;
    padding: 10px;
    position: relative;
}

    .pregeneration-preview-list.is-loading {
        overflow: hidden;
    }

.pregeneration-preview-content {
    min-height: 180px;
}

.pregeneration-empty {
    min-height: 180px;
    padding: 0;
    text-align: center;
    color: #95a5a6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .pregeneration-empty i {
        font-size: 20px;
        margin-bottom: 8px;
        color: #bdc3c7;
    }

    .pregeneration-empty p {
        font-size: 12px;
        margin: 0;
    }

.pregeneration-preview-spinner-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafbfc;
}

.pregenerationPreviewSpinner {
    position: static !important;
    inset: auto !important;
    width: 32px;
    height: 32px;
    margin: 0;
    background: transparent !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .pregenerationPreviewSpinner img {
        width: 28px !important;
        height: 28px !important;
    }




.loading-stripes {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s linear;
    contain: paint;
}

    .loading-stripes.is-active {
        opacity: 1;
    }

    .loading-stripes::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -50%;
        width: 70%;
        background: linear-gradient(90deg, rgba(0,0,0,0), #f3f3f3 45%, rgba(0,0,0,0) 90%);
        transform: translateX(0);
        animation: shimmer-move 1000ms linear infinite;
        will-change: transform;
    }

@keyframes shimmer-move {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(200%);
    }
}

/* Activa el overlay cuando el progreso es 0% */
.loading-stripes.is-zero {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .loading-stripes::before {
        animation: none;
    }
}