/* =============================================
   EDITAR ORDEN - ACCIONES RÁPIDAS PRO
============================================= */

.x-eo-actions-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.x-eo-action-card {
    position: relative;
    min-height: 66px;
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid rgba(159, 176, 208, .12);
    background:
        radial-gradient(circle at top right, rgba(47, 107, 255, .10), transparent 35%),
        rgba(6, 18, 37, .62);
    color: #F5F7FB;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    cursor: pointer;
    transition: .18s ease;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

.x-eo-action-card:hover {
    transform: translateY(-1px);
    border-color: rgba(96, 165, 250, .28);
    background:
        radial-gradient(circle at top right, rgba(47, 107, 255, .16), transparent 35%),
        rgba(8, 24, 50, .78);
}

.x-eo-action-card__icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(47, 107, 255, .15);
    color: #60A5FA;
    font-size: 15px;
}

.x-eo-action-card__text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.x-eo-action-card__text strong {
    color: #F5F7FB;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.1;
}

.x-eo-action-card__text small {
    color: #9FB0D0;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.x-eo-action-card--full {
    grid-column: 1 / -1;
}

.x-eo-action-card--primary .x-eo-action-card__icon {
    background: rgba(47, 107, 255, .18);
    color: #60A5FA;
}

.x-eo-action-card--blue .x-eo-action-card__icon {
    background: rgba(59, 130, 246, .18);
    color: #60A5FA;
}

.x-eo-action-card--whatsapp .x-eo-action-card__icon {
    background: rgba(34, 197, 94, .16);
    color: #22C55E;
}

.x-eo-action-card--green .x-eo-action-card__icon {
    background: rgba(16, 185, 129, .16);
    color: #10B981;
}

.x-eo-action-card--warning .x-eo-action-card__icon {
    background: rgba(245, 158, 11, .16);
    color: #F59E0B;
}

.x-eo-action-card--slate .x-eo-action-card__icon {
    background: rgba(148, 163, 184, .14);
    color: #CBD5E1;
}

.x-eo-action-card--danger {
    border-color: rgba(239, 68, 68, .20);
    background:
        radial-gradient(circle at top right, rgba(239, 68, 68, .12), transparent 35%),
        rgba(6, 18, 37, .62);
}

.x-eo-action-card--danger .x-eo-action-card__icon {
    background: rgba(239, 68, 68, .16);
    color: #EF4444;
}

@media (max-width: 480px) {
    .x-eo-actions-panel {
        grid-template-columns: 1fr;
    }

    .x-eo-action-card--full {
        grid-column: auto;
    }
}

/* =============================================
   EDITAR ORDEN - CARDS MISMA ALTURA
============================================= */

.x-edit-order-grid {
    align-items: stretch !important;
}

/* Todas las cards principales se estiran igual */
.x-edit-order-grid>.ventas-v3-card {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Las grids internas ocupan el alto disponible sin romper */
.x-edit-order-grid>.ventas-v3-card .x-eo-grid {
    flex: 1 1 auto !important;
}

/* Específico para las 2 primeras cards */
.x-edit-order-grid>.ventas-v3-card:nth-of-type(1),
.x-edit-order-grid>.ventas-v3-card:nth-of-type(2) {
    min-height: 620px !important;
}

/* En desktop grande, si quieres más compacto */
@media (min-width: 1200px) {

    .x-edit-order-grid>.ventas-v3-card:nth-of-type(1),
    .x-edit-order-grid>.ventas-v3-card:nth-of-type(2) {
        min-height: 620px !important;
    }
}

/* En tablet / iPad */
@media (min-width: 768px) and (max-width: 1180px) {

    .x-edit-order-grid>.ventas-v3-card:nth-of-type(1),
    .x-edit-order-grid>.ventas-v3-card:nth-of-type(2) {
        min-height: 560px !important;
    }
}

/* En móvil no fuerces altura */
@media (max-width: 767px) {

    .x-edit-order-grid>.ventas-v3-card:nth-of-type(1),
    .x-edit-order-grid>.ventas-v3-card:nth-of-type(2) {
        min-height: auto !important;
    }
}

/* =============================================
   EDITAR ORDEN - OPTIMIZACIÓN TABLET / IPAD
============================================= */

/* iPad horizontal y tablets grandes */
@media (min-width: 768px) and (max-width: 1180px) {

    .x-edit-order-page {
        max-width: 100% !important;
        width: 100% !important;
    }

    .x-edit-order-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
        align-items: start !important;
    }

    .x-edit-order-grid>.ventas-v3-card {
        width: 100% !important;
        min-width: 0 !important;
    }

    .x-edit-order-span-2,
    .x-edit-order-span-3 {
        grid-column: span 2 !important;
    }

    /* Revisión del dispositivo + Historial pueden ocupar 50/50 */
    .x-edit-order-grid>.ventas-v3-card:has(#editOrdenChecklistWrap) {
        grid-column: span 1 !important;
    }

    .x-edit-order-grid>.ventas-v3-card:has(#editOrdenHistorialWrap) {
        grid-column: span 1 !important;
    }

    .x-eo-check-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .x-eo-check-item,
    .x-eo-check-card {
        min-width: 0 !important;
    }

    .x-order-timeline {
        max-height: 610px;
        overflow: auto;
        padding-right: 4px;
    }
}

/* iPad vertical */
@media (min-width: 768px) and (max-width: 920px) {

    .x-edit-order-grid {
        grid-template-columns: 1fr !important;
    }

    .x-edit-order-span-2,
    .x-edit-order-span-3,
    .x-edit-order-grid>.ventas-v3-card:has(#editOrdenChecklistWrap),
    .x-edit-order-grid>.ventas-v3-card:has(#editOrdenHistorialWrap) {
        grid-column: span 1 !important;
    }

    .x-eo-check-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* =========================================
   ESTADO ACTUAL + GARANTÍA
========================================= */

.x-estado-actual-box {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .9fr);
    gap: 14px;
    align-items: stretch;
}

.x-estado-actual-main {
    border: 1px solid rgba(159, 176, 208, .10);
    border-radius: 18px;
    padding: 16px;
    background: linear-gradient(180deg, rgba(14, 28, 58, .88), rgba(8, 19, 42, .92));
    min-height: 100%;
}

.x-status-chip-wrap {
    margin-bottom: 14px;
}

.x-estado-actual-grid {
    display: grid;
    gap: 10px;
}

.x-estado-actual-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 4px 0;
}

.x-estado-actual-label {
    color: #9FB0D0;
    font-size: 14px;
    font-weight: 600;
}

.x-estado-actual-value {
    color: #F5F7FB;
    font-size: 15px;
    font-weight: 800;
    text-align: right;
}

/* Garantía */
.x-garantia-card {
    border-radius: 18px;
    padding: 16px;
    min-height: 100%;
    border: 1px solid rgba(159, 176, 208, .12);
    background: linear-gradient(180deg, rgba(13, 25, 56, .96), rgba(5, 13, 33, .98));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

.x-garantia-card__top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.x-garantia-card__icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.x-garantia-card__head small {
    display: block;
    color: #9FB0D0;
    font-size: 12px;
    margin-bottom: 2px;
}

.x-garantia-card__head strong {
    color: #fff;
    font-size: 18px;
    line-height: 1.1;
}

.x-garantia-card__body {
    display: grid;
    gap: 10px;
}

.x-garantia-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(159, 176, 208, .08);
}

.x-garantia-card__row span {
    color: #9FB0D0;
    font-size: 13px;
}

.x-garantia-card__row strong {
    color: #F5F7FB;
    font-size: 13px;
    font-weight: 800;
    text-align: right;
}

/* variantes */
.x-garantia-card--ok {
    border-color: rgba(34, 197, 94, .20);
    background:
        radial-gradient(circle at top right, rgba(34, 197, 94, .10), transparent 40%),
        linear-gradient(180deg, rgba(10, 31, 28, .94), rgba(7, 23, 25, .98));
}

.x-garantia-card--ok .x-garantia-card__icon {
    background: rgba(34, 197, 94, .14);
    color: #22C55E;
}

.x-garantia-card--bad {
    border-color: rgba(239, 68, 68, .20);
    background:
        radial-gradient(circle at top right, rgba(239, 68, 68, .11), transparent 40%),
        linear-gradient(180deg, rgba(36, 17, 23, .95), rgba(27, 12, 18, .98));
}

.x-garantia-card--bad .x-garantia-card__icon {
    background: rgba(239, 68, 68, .14);
    color: #EF4444;
}

.x-garantia-card--neutral .x-garantia-card__icon {
    background: rgba(148, 163, 184, .12);
    color: #CBD5E1;
}

/* =============================================
   GARANTÍA - ACCIONES DE GESTIÓN
============================================= */

.x-garantia-acciones {
    margin-top: 16px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(96, 165, 250, .16);
    background:
        radial-gradient(circle at top right, rgba(47, 107, 255, .10), transparent 34%),
        linear-gradient(180deg, rgba(8, 22, 48, .92), rgba(5, 14, 32, .96));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .035),
        0 14px 34px rgba(0, 0, 0, .18);
}

.x-garantia-actions-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.btnCambiarEstadoGarantia {
    position: relative;
    min-height: 72px;
    padding: 12px 10px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(159, 176, 208, .13) !important;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, .06), transparent 38%),
        rgba(7, 19, 43, .82) !important;
    color: #F5F7FB !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1.1;
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
    transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.btnCambiarEstadoGarantia i {
    width: 32px;
    height: 32px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    font-size: 14px;
    background: rgba(96, 165, 250, .14);
    color: #60A5FA;
}

.btnCambiarEstadoGarantia:hover {
    transform: translateY(-2px);
    border-color: rgba(96, 165, 250, .34) !important;
    background:
        radial-gradient(circle at top right, rgba(47, 107, 255, .14), transparent 38%),
        rgba(10, 29, 64, .94) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .045),
        0 14px 30px rgba(0, 0, 0, .22);
}

/* En revisión */
.btnCambiarEstadoGarantia[data-estado="EN_REVISION"] i {
    background: rgba(168, 85, 247, .15);
    color: #C084FC;
}

/* Aprobada */
.btnCambiarEstadoGarantia[data-estado="APROBADA"] i {
    background: rgba(34, 197, 94, .15);
    color: #22C55E;
}

/* Rechazada */
.btnCambiarEstadoGarantia[data-estado="RECHAZADA"] i {
    background: rgba(239, 68, 68, .15);
    color: #EF4444;
}

/* Resuelta */
.btnCambiarEstadoGarantia[data-estado="RESUELTA"] i {
    background: rgba(59, 130, 246, .16);
    color: #60A5FA;
}

/* Entregada */
.btnCambiarEstadoGarantia[data-estado="ENTREGADA"] i {
    background: rgba(16, 185, 129, .15);
    color: #10B981;
}

.btnCambiarEstadoGarantia[data-estado="EN_REVISION"]:hover {
    border-color: rgba(192, 132, 252, .36) !important;
}

.btnCambiarEstadoGarantia[data-estado="APROBADA"]:hover {
    border-color: rgba(34, 197, 94, .36) !important;
}

.btnCambiarEstadoGarantia[data-estado="RECHAZADA"]:hover {
    border-color: rgba(239, 68, 68, .36) !important;
}

.btnCambiarEstadoGarantia[data-estado="RESUELTA"]:hover {
    border-color: rgba(96, 165, 250, .38) !important;
}

.btnCambiarEstadoGarantia[data-estado="ENTREGADA"]:hover {
    border-color: rgba(16, 185, 129, .36) !important;
}

/* Estado cargando */
.btnCambiarEstadoGarantia.is-loading {
    opacity: .72;
    pointer-events: none;
    transform: none;
}

.btnCambiarEstadoGarantia.is-loading i {
    animation: xGarantiaSpin .75s linear infinite;
}

@keyframes xGarantiaSpin {
    from {
        transform: rotate(0deg);
    }

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

/* Responsive */
@media (max-width: 991px) {
    .x-garantia-actions-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .btnCambiarEstadoGarantia {
        min-height: 64px;
    }
}

@media (max-width: 480px) {
    .x-garantia-actions-grid {
        grid-template-columns: 1fr;
    }

    .btnCambiarEstadoGarantia {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
        padding: 12px 14px !important;
    }
}

@media (max-width: 991px) {
    .x-estado-actual-box {
        grid-template-columns: 1fr;
    }
}

.x-estado-actual-box {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(250px, .85fr);
    gap: 14px;
    align-items: stretch;
}

.x-estado-actual-main {
    border: 1px solid rgba(159, 176, 208, .10);
    border-radius: 18px;
    padding: 16px;
    background: linear-gradient(180deg, rgba(14, 28, 58, .88), rgba(8, 19, 42, .92));
}

.x-status-chip-wrap {
    margin-bottom: 14px;
}

.x-estado-actual-grid {
    display: grid;
    gap: 10px;
}

.x-estado-actual-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.x-estado-actual-label {
    color: #9FB0D0;
    font-size: 14px;
    font-weight: 650;
}

.x-estado-actual-value {
    color: #F5F7FB;
    font-size: 15px;
    font-weight: 850;
    text-align: right;
}

.x-garantia-card {
    border-radius: 18px;
    padding: 16px;
    border: 1px solid rgba(159, 176, 208, .12);
    background: linear-gradient(180deg, rgba(13, 25, 56, .96), rgba(5, 13, 33, .98));
}

.x-garantia-card__top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.x-garantia-card__icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(148, 163, 184, .12);
    color: #CBD5E1;
}

.x-garantia-card__head small {
    display: block;
    color: #9FB0D0;
    font-size: 12px;
}

.x-garantia-card__head strong {
    color: #fff;
    font-size: 18px;
}

.x-garantia-card__body {
    display: grid;
    gap: 9px;
}

.x-garantia-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(159, 176, 208, .08);
}

.x-garantia-card__row span {
    color: #9FB0D0;
    font-size: 13px;
}

.x-garantia-card__row strong {
    color: #F5F7FB;
    font-size: 13px;
    font-weight: 850;
}

.x-garantia-card--ok {
    border-color: rgba(34, 197, 94, .22);
    background:
        radial-gradient(circle at top right, rgba(34, 197, 94, .12), transparent 40%),
        linear-gradient(180deg, rgba(10, 31, 28, .94), rgba(7, 23, 25, .98));
}

.x-garantia-card--ok .x-garantia-card__icon {
    background: rgba(34, 197, 94, .16);
    color: #22C55E;
}

.x-garantia-card--bad {
    border-color: rgba(239, 68, 68, .22);
    background:
        radial-gradient(circle at top right, rgba(239, 68, 68, .12), transparent 40%),
        linear-gradient(180deg, rgba(36, 17, 23, .95), rgba(27, 12, 18, .98));
}

.x-garantia-card--bad .x-garantia-card__icon {
    background: rgba(239, 68, 68, .16);
    color: #EF4444;
}

@media (max-width: 991px) {
    .x-estado-actual-box {
        grid-template-columns: 1fr;
    }
}

/* =============================================
   GARANTÍA - UPLOAD EVIDENCIAS
============================================= */

.x-garantia-upload-box {
    border: 1px dashed rgba(96, 165, 250, .28);
    background:
        radial-gradient(circle at top left, rgba(47, 107, 255, .10), transparent 32%),
        rgba(6, 18, 37, .56);
    border-radius: 18px;
    padding: 14px;
}

.x-garantia-upload-label {
    min-height: 108px;
    border-radius: 16px;
    border: 1px solid rgba(159, 176, 208, .10);
    background: rgba(255, 255, 255, .035);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
    transition: .18s ease;
    text-align: center;
    margin-bottom: 10px;
}

.x-garantia-upload-label:hover {
    border-color: rgba(96, 165, 250, .42);
    background: rgba(47, 107, 255, .10);
    transform: translateY(-1px);
}

.x-garantia-upload-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #60A5FA;
    background: rgba(47, 107, 255, .16);
    font-size: 17px;
}

.x-garantia-upload-text {
    color: #F5F7FB;
    font-size: 14px;
    font-weight: 850;
}

.x-garantia-upload-sub {
    color: #9FB0D0;
    font-size: 12px;
    font-weight: 650;
}

.x-garantia-upload-counter {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(159, 176, 208, .12);
    color: #9FB0D0;
    font-size: 11px;
    font-weight: 800;
    margin-bottom: 10px;
}

.x-garantia-preview-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.x-garantia-preview-item {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(159, 176, 208, .14);
    background: rgba(15, 23, 42, .72);
}

.x-garantia-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.x-garantia-preview-remove {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 999px;
    background: rgba(239, 68, 68, .92);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    cursor: pointer;
}

@media (max-width: 768px) {
    .x-garantia-preview-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* =============================================
   EDITAR ORDEN - TABS DE EVIDENCIAS
============================================= */

.x-evid-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.x-evid-tab {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(159, 176, 208, .14);
    background: rgba(255, 255, 255, .04);
    color: #9FB0D0;
    font-size: 12px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    transition: .18s ease;
}

.x-evid-tab:hover {
    color: #F5F7FB;
    border-color: rgba(47, 107, 255, .34);
    background: rgba(47, 107, 255, .10);
}

.x-evid-tab span {
    min-width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(47, 107, 255, .16);
    color: #DCE7FF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.x-evid-tab.is-active {
    color: #F5F7FB;
    border-color: rgba(47, 107, 255, .42);
    background: rgba(47, 107, 255, .14);
}

.x-evid-upload-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.x-evid-upload-btn {
    min-height: 36px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid rgba(47, 107, 255, .26);
    background: rgba(47, 107, 255, .12);
    color: #DCE7FF;
    font-size: 12px;
    font-weight: 850;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: .18s ease;
}

.x-evid-upload-btn:hover {
    background: rgba(47, 107, 255, .20);
    color: #fff;
    transform: translateY(-1px);
}

/* =============================================
   GARANTÍA - TIMELINE HISTORIAL
============================================= */

.x-garantia-historial {
    margin-top: 16px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(159, 176, 208, .12);
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, .08), transparent 34%),
        linear-gradient(180deg, rgba(8, 22, 48, .90), rgba(5, 14, 32, .96));
}

.x-garantia-timeline {
    position: relative;
    display: grid;
    gap: 12px;
    margin-top: 12px;
}

.x-garantia-timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
}

.x-garantia-timeline-dot {
    width: 34px;
    height: 34px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(96, 165, 250, .14);
    color: #60A5FA;
    border: 1px solid rgba(96, 165, 250, .20);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.x-garantia-timeline-card {
    padding: 12px 13px;
    border-radius: 16px;
    border: 1px solid rgba(159, 176, 208, .10);
    background: rgba(7, 19, 43, .78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

.x-garantia-timeline-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 8px;
}

.x-garantia-timeline-top strong {
    color: #F5F7FB;
    font-size: 13px;
    font-weight: 900;
}

.x-garantia-timeline-top span {
    color: #9FB0D0;
    font-size: 12px;
    font-weight: 650;
}

.x-garantia-timeline-flow {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #9FB0D0;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 8px;
}

.x-garantia-timeline-flow b {
    color: #F5F7FB;
}

.x-garantia-timeline-flow i {
    color: #60A5FA;
    font-size: 10px;
}

.x-garantia-timeline-note {
    padding: 9px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(159, 176, 208, .08);
    color: #D8E3F8;
    font-size: 12px;
    line-height: 1.45;
    margin-bottom: 8px;
}

.x-garantia-timeline-user {
    color: #9FB0D0;
    font-size: 12px;
    font-weight: 650;
}

.x-garantia-timeline-user i {
    color: #60A5FA;
    margin-right: 5px;
}

/* Colores por estado */
.x-garantia-timeline-item[data-estado="RECIBIDA_GARANTIA"] .x-garantia-timeline-dot {
    background: rgba(96, 165, 250, .14);
    color: #60A5FA;
}

.x-garantia-timeline-item[data-estado="EN_REVISION"] .x-garantia-timeline-dot {
    background: rgba(168, 85, 247, .15);
    color: #C084FC;
}

.x-garantia-timeline-item[data-estado="APROBADA"] .x-garantia-timeline-dot {
    background: rgba(34, 197, 94, .15);
    color: #22C55E;
}

.x-garantia-timeline-item[data-estado="RECHAZADA"] .x-garantia-timeline-dot {
    background: rgba(239, 68, 68, .15);
    color: #EF4444;
}

.x-garantia-timeline-item[data-estado="RESUELTA"] .x-garantia-timeline-dot {
    background: rgba(59, 130, 246, .16);
    color: #60A5FA;
}

.x-garantia-timeline-item[data-estado="ENTREGADA"] .x-garantia-timeline-dot {
    background: rgba(16, 185, 129, .15);
    color: #10B981;
}

@media (max-width: 480px) {
    .x-garantia-timeline-top {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .x-garantia-timeline-item {
        grid-template-columns: 32px minmax(0, 1fr);
    }

    .x-garantia-timeline-dot {
        width: 30px;
        height: 30px;
        border-radius: 12px;
    }
}

/* =============================================
   GARANTÍA - MODAL DOS COLUMNAS
============================================= */

#modalGarantiaOrden .modal-xl {
    max-width: 1180px;
}

#modalGarantiaOrden .modal-body {
    max-height: calc(100vh - 150px);
    overflow: auto;
}

.x-garantia-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, .85fr);
    gap: 16px;
    align-items: start;
}

.x-garantia-layout__left,
.x-garantia-layout__right {
    min-width: 0;
}

.x-garantia-layout__right {
    position: sticky;
    top: 0;
    display: grid;
    gap: 14px;
    max-height: calc(100vh - 190px);
    overflow: auto;
    padding-right: 3px;
}

.x-garantia-side-card {
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(159, 176, 208, .12);
    background:
        radial-gradient(circle at top right, rgba(47, 107, 255, .09), transparent 34%),
        linear-gradient(180deg, rgba(8, 22, 48, .92), rgba(5, 14, 32, .97));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .035),
        0 14px 34px rgba(0, 0, 0, .16);
}

.x-garantia-side-card__title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #F5F7FB;
    font-size: 14px;
    font-weight: 900;
    margin-bottom: 12px;
}

.x-garantia-side-card__title i {
    color: #60A5FA;
}

.x-garantia-actions-grid--side {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.x-garantia-actions-grid--side .btnCambiarEstadoGarantia {
    min-height: 68px;
}

/* Timeline más compacto en la columna derecha */
.x-garantia-layout__right .x-garantia-timeline {
    max-height: 520px;
    overflow: auto;
    padding-right: 3px;
}

.x-garantia-layout__right .x-garantia-timeline-card {
    padding: 10px 11px;
}

.x-garantia-layout__right .x-garantia-timeline-top strong {
    font-size: 12px;
}

.x-garantia-layout__right .x-garantia-timeline-top span {
    font-size: 11px;
}

.x-garantia-layout__right .x-garantia-timeline-note {
    font-size: 11px;
}

/* Evidencias más compactas */
#modalGarantiaOrden .x-garantia-preview-grid {
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
}

#modalGarantiaOrden .x-garantia-preview-item {
    min-height: 92px;
}

/* Responsive */
@media (max-width: 1100px) {
    .x-garantia-layout {
        grid-template-columns: 1fr;
    }

    .x-garantia-layout__right {
        position: static;
        max-height: none;
        overflow: visible;
    }

    .x-garantia-layout__right .x-garantia-timeline {
        max-height: none;
    }
}

@media (max-width: 575px) {
    #modalGarantiaOrden .modal-xl {
        max-width: 96%;
    }

    .x-garantia-actions-grid--side {
        grid-template-columns: 1fr;
    }
}

/* =============================================
   GARANTÍA - COBRO
============================================= */

.x-garantia-cobro-grid {
    display: grid;
    gap: 10px;
}

.x-garantia-cobro-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(159, 176, 208, .09);
}

.x-garantia-cobro-item span {
    color: #9FB0D0;
    font-size: 12px;
    font-weight: 750;
}

.x-garantia-cobro-item strong {
    color: #F5F7FB;
    font-size: 14px;
    font-weight: 900;
}

.x-garantia-cobro-item--pending {
    border-color: rgba(245, 158, 11, .22);
    background: rgba(245, 158, 11, .08);
}

.x-garantia-cobro-item--pending strong {
    color: #FBBF24;
}

.btnRegistrarCobroGarantia {
    width: 100%;
    min-height: 46px;
    margin-top: 12px;
    border: 1px solid rgba(34, 197, 94, .24);
    border-radius: 15px;
    background:
        radial-gradient(circle at top right, rgba(34, 197, 94, .16), transparent 35%),
        rgba(7, 19, 43, .88);
    color: #F5F7FB;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    cursor: pointer;
    transition: .16s ease;
}

.btnRegistrarCobroGarantia i {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(34, 197, 94, .16);
    color: #22C55E;
}

.btnRegistrarCobroGarantia:hover {
    transform: translateY(-1px);
    border-color: rgba(34, 197, 94, .38);
    background:
        radial-gradient(circle at top right, rgba(34, 197, 94, .22), transparent 35%),
        rgba(10, 29, 64, .94);
}

/* =============================================
   MODAL REFACCIONES - FOOTER SIEMPRE VISIBLE
============================================= */

#modalRefaccionOrden .modal-content {
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#modalRefaccionOrden .x-eo-viewer-top {
    flex: 0 0 auto;
}

#modalRefaccionOrden .modal-content>.p-3 {
    flex: 1 1 auto;
    overflow-y: auto;
}

#modalRefaccionOrden .x-ref-modal-footer {
    flex: 0 0 auto;
    position: sticky;
    bottom: 0;
    z-index: 20;
    background: rgba(6, 18, 37, 0.98);
    border-top: 1px solid rgba(159, 176, 208, 0.16);
    padding: 14px 16px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* =============================================
   MODAL AGREGAR REFACCIÓN - FIX PRO
============================================= */

#modalRefaccionOrden {
    z-index: 1065 !important;
}

#modalRefaccionOrden .modal-dialog {
    width: calc(100vw - 32px) !important;
    max-width: 1360px !important;
    height: calc(100vh - 32px) !important;
    margin: 16px auto !important;
}

#modalRefaccionOrden .modal-content {
    height: 100% !important;
    max-height: calc(100vh - 32px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 18px !important;
}

/* Header fijo */
#modalRefaccionOrden .x-eo-viewer-top {
    flex: 0 0 auto !important;
    min-height: 66px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(159, 176, 208, .12);
}

/* Body scrolleable */
#modalRefaccionOrden .x-ref-modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 16px !important;
}

/* Grid interno */
#modalRefaccionOrden .x-ref-modal-grid {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(390px, .8fr);
    gap: 16px;
}

/* Columnas internas con scroll propio */
#modalRefaccionOrden .x-ref-left,
#modalRefaccionOrden .x-ref-right {
    min-height: 0;
    overflow: hidden;
}

#modalRefaccionOrden .x-ref-left .ventas-v3-card,
#modalRefaccionOrden .x-ref-right .ventas-v3-card {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Resultados con scroll */
#modalRefaccionOrden #refResultadosWrap {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important;
    overflow-y: auto !important;
    padding-right: 6px;
}

/* Carrito con scroll */
#modalRefaccionOrden #refCarritoWrap {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important;
    overflow-y: auto !important;
    padding-right: 6px;
}

/* Footer fijo */
#modalRefaccionOrden .x-ref-modal-footer {
    flex: 0 0 auto !important;
    position: sticky;
    bottom: 0;
    z-index: 30;
    background: rgba(6, 18, 37, .98);
    border-top: 1px solid rgba(159, 176, 208, .14);
    padding: 14px 18px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

/* Scrollbar */
/* #modalRefaccionOrden #refResultadosWrap::-webkit-scrollbar,
  #modalRefaccionOrden #refCarritoWrap::-webkit-scrollbar {
    width: 7px;
  } */

#modalRefaccionOrden #refResultadosWrap::-webkit-scrollbar-thumb,
#modalRefaccionOrden #refCarritoWrap::-webkit-scrollbar-thumb {
    background: rgba(47, 107, 255, .7);
    border-radius: 999px;
}

#modalRefaccionOrden #refResultadosWrap::-webkit-scrollbar-track,
#modalRefaccionOrden #refCarritoWrap::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, .8);
}

/* Responsive */
@media (max-width: 991px) {
    #modalRefaccionOrden .modal-dialog {
        width: calc(100vw - 18px) !important;
        height: calc(100vh - 18px) !important;
        margin: 9px auto !important;
    }

    #modalRefaccionOrden .x-ref-modal-grid {
        grid-template-columns: 1fr;
        overflow-y: auto;
    }

    #modalRefaccionOrden .x-ref-left,
    #modalRefaccionOrden .x-ref-right {
        overflow: visible;
    }

    #modalRefaccionOrden .x-ref-left .ventas-v3-card,
    #modalRefaccionOrden .x-ref-right .ventas-v3-card {
        height: auto;
        min-height: 420px;
    }

    #modalRefaccionOrden #refResultadosWrap,
    #modalRefaccionOrden #refCarritoWrap {
        max-height: 420px !important;
    }
}

/* Quitar solo el fondo del toast, sin cambiar el diseño del Swal */
.swal2-container.x-toast-sin-fondo {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none !important;
}

.swal2-container.x-toast-sin-fondo .swal2-popup {
    pointer-events: auto !important;
}

#modalRefaccionOrden .modal-dialog {
    width: calc(100vw - 32px) !important;
    max-width: 1360px !important;
    height: calc(100vh - 32px) !important;
    margin: 16px auto !important;
}

#modalRefaccionOrden .modal-content {
    height: 100% !important;
    max-height: calc(100vh - 32px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Header fijo y sin texto cortado */
#modalRefaccionOrden .x-eo-viewer-top {
    flex: 0 0 auto !important;
    min-height: 76px !important;
    height: auto !important;
    padding: 22px 24px !important;
    display: flex !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(159, 176, 208, .12);
}

#modalRefaccionOrden .x-eo-viewer-top__title {
    line-height: 1.25 !important;
    margin: 0 !important;
}

/* Solo el cuerpo hace scroll */
#modalRefaccionOrden .x-ref-modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 16px !important;
}

/* Footer fijo, sin scroll */
#modalRefaccionOrden .x-ref-modal-footer {
    flex: 0 0 auto !important;
    height: 72px !important;
    padding: 14px 24px !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 10px !important;
    background: rgba(6, 18, 37, .98) !important;
    border-top: 1px solid rgba(159, 176, 208, .14) !important;
    z-index: 20;
}

/* Grid dentro del body */
#modalRefaccionOrden .x-ref-modal-grid {
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.25fr) minmax(390px, .8fr) !important;
    gap: 16px !important;
}

/* Scroll interno por columna */
#modalRefaccionOrden .x-ref-left,
#modalRefaccionOrden .x-ref-right {
    min-height: 0 !important;
    overflow: hidden !important;
}

#modalRefaccionOrden .x-ref-left .ventas-v3-card,
#modalRefaccionOrden .x-ref-right .ventas-v3-card {
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

#modalRefaccionOrden #refResultadosWrap,
#modalRefaccionOrden #refCarritoWrap {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding-right: 6px !important;
}

/* =============================================
   FIX RESPONSIVE EDITAR ORDEN - TABLET / PANTALLAS PEQUEÑAS
============================================= */

/* Evita desbordes generales */
.x-edit-order-page,
.x-edit-order-page * {
    box-sizing: border-box;
    min-width: 0;
}

/* =============================================
   DESKTOP PEQUEÑO / TABLET HORIZONTAL
============================================= */

@media (max-width: 1400px) {
    .x-edit-order-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 18px !important;
        align-items: start !important;
    }

    .x-edit-tab-panel,
    .x-side-summary-card,
    .x-side-status-card,
    .ventas-v3-card {
        width: 100% !important;
        max-width: 100% !important;
        grid-column: 1 / -1 !important;
    }

    .x-edit-tab-panel.is-active {
        display: block !important;
    }

    .x-edit-tab-panel:not(.is-active) {
        display: none !important;
    }
}

/* =============================================
   RESUMEN ECONÓMICO
============================================= */

@media (max-width: 1100px) {
    .x-resumen-economico-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .x-resumen-economico-item {
        min-width: 0 !important;
        width: 100% !important;
    }

    .x-resumen-economico-item__left {
        min-width: 0 !important;
    }

    .x-resumen-economico-item__left span {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        line-height: 1.2 !important;
    }

    .x-resumen-economico-item__right,
    .x-resumen-economico-item__value,
    #viewTotalFinal {
        white-space: nowrap !important;
        text-align: right !important;
    }
}

@media (max-width: 620px) {
    .x-resumen-economico-grid {
        grid-template-columns: 1fr !important;
    }

    .x-resumen-economico-item {
        min-height: auto !important;
        padding: 14px !important;
    }

    .x-resumen-total-final {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        text-align: left !important;
    }

    .x-resumen-total-final strong,
    #viewSaldoPendiente {
        font-size: 28px !important;
        text-align: left !important;
    }
}

/* =============================================
   HISTORIAL - EVITAR QUE SE MONTE
============================================= */

@media (max-width: 1100px) {

    #editOrdenHistorialResumen,
    #editOrdenHistorialWrap {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .x-order-history,
    .x-order-timeline,
    .x-eo-timeline,
    .x-historial-timeline,
    .x-timeline {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .x-historial-resumen,
    .x-history-summary,
    .x-timeline-summary {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
}

/* Bloque superior del historial: porcentaje + estados */
@media (max-width: 900px) {
    #editOrdenHistorialResumen>* {
        width: 100% !important;
        max-width: 100% !important;
    }

    #editOrdenHistorialResumen .x-history-overview,
    #editOrdenHistorialResumen .x-historial-overview,
    #editOrdenHistorialResumen .x-timeline-overview {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    #editOrdenHistorialResumen svg,
    #editOrdenHistorialResumen canvas {
        max-width: 100% !important;
    }
}

/* Estados del historial: que bajen en vertical */
@media (max-width: 900px) {

    .x-history-steps,
    .x-historial-steps,
    .x-timeline-steps,
    .x-order-status-flow {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        overflow: visible !important;
    }

    .x-history-step,
    .x-historial-step,
    .x-timeline-step,
    .x-order-status-step {
        width: 100% !important;
        max-width: 100% !important;
        text-align: left !important;
    }
}

/* Tarjeta del historial */
@media (max-width: 768px) {

    #editOrdenHistorialWrap .x-history-item,
    #editOrdenHistorialWrap .x-timeline-item,
    #editOrdenHistorialWrap .x-order-timeline-item {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        padding: 16px !important;
    }

    #editOrdenHistorialWrap * {
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }
}

/* =============================================
   TABS SUPERIORES
============================================= */

@media (max-width: 900px) {
    .x-edit-tabs-v2 {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 8px !important;
        padding-bottom: 8px !important;
        -webkit-overflow-scrolling: touch;
    }

    .x-edit-tab-v2 {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        min-width: max-content !important;
    }

    .x-edit-tabs-v2::-webkit-scrollbar {
        height: 6px;
    }

    .x-edit-tabs-v2::-webkit-scrollbar-thumb {
        background: rgba(96, 165, 250, .55);
        border-radius: 999px;
    }
}

/* =============================================
   DATOS DE ORDEN / FORMULARIOS
============================================= */

@media (max-width: 768px) {

    .x-eo-grid,
    .x-eo-grid--2 {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .x-eo-field,
    .x-eo-field--full {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    .x-input-group {
        width: 100% !important;
    }

    .x-input-group .form-control,
    .x-input-group select,
    .x-input-group textarea {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* =============================================
   ESTADO ACTUAL + GARANTÍA
============================================= */

@media (max-width: 1100px) {
    .x-estado-actual-box {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .x-estado-actual-row,
    .x-garantia-card__row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 4px !important;
        text-align: left !important;
    }

    .x-estado-actual-value,
    .x-garantia-card__row strong {
        text-align: left !important;
    }
}

/* =============================================
   CARDS COMPACTAS EN MÓVIL
============================================= */

@media (max-width: 620px) {
    .x-edit-order-page {
        padding: 10px !important;
    }

    .x-compras-head,
    .ventas-v3-card,
    .x-side-summary-card,
    .x-side-status-card {
        border-radius: 18px !important;
        padding: 14px !important;
    }

    .ventas-v3-card__title {
        font-size: 16px !important;
        line-height: 1.25 !important;
    }

    .x-compras-head {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .x-compras-head__actions {
        width: 100% !important;
    }

    .x-eo-action-card--danger {
        width: 100% !important;
    }
}

/* =============================================
   FIX FUERTE HISTORIAL EDITAR ORDEN
============================================= */

@media (max-width: 1200px) {

    #editOrdenHistorialResumen .x-historial-progress-card,
    #editOrdenHistorialResumen .x-history-progress-card,
    #editOrdenHistorialResumen .x-order-progress-card {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    #editOrdenHistorialResumen .x-historial-estados,
    #editOrdenHistorialResumen .x-history-statuses,
    #editOrdenHistorialResumen .x-order-history-statuses {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }
}

@media (max-width: 650px) {

    #editOrdenHistorialResumen .x-historial-estados,
    #editOrdenHistorialResumen .x-history-statuses,
    #editOrdenHistorialResumen .x-order-history-statuses {
        grid-template-columns: 1fr !important;
    }
}

/* =============================================
   EDITAR ORDEN - PRIORIDAD DE PANEL ACTIVO
============================================= */

/* .x-edit-order-grid--tabs {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px) !important;
    gap: 18px !important;
    align-items: start !important;
  }



  /* Tablet / iPad */
@media (min-width: 768px) and (max-width: 1180px) {
    .x-edit-order-grid--tabs {
        grid-template-columns: 1fr !important;
    }

    .x-edit-tab-panel.is-active {
        grid-column: 1 / -1 !important;
        order: 1 !important;
    }

    .x-side-status-card {
        grid-column: 1 / -1 !important;
        order: 2 !important;
    }

    .x-side-summary-card {
        grid-column: 1 / -1 !important;
        order: 3 !important;
    }
}

/* Móvil */
@media (max-width: 767px) {
    .x-edit-order-grid--tabs {
        grid-template-columns: 1fr !important;
    }

    .x-edit-tab-panel.is-active,
    .x-side-status-card,
    .x-side-summary-card {
        grid-column: 1 / -1 !important;
    }

    .x-edit-tab-panel.is-active {
        order: 1 !important;
    }

    .x-side-status-card {
        order: 2 !important;
    }

    .x-side-summary-card {
        order: 3 !important;
    }
}

/* =============================================
   EDITAR ORDEN - CHECKLIST 3 COLUMNAS EN TABLET
============================================= */

@media (min-width: 768px) and (max-width: 1180px) {

    #editOrdenChecklistWrap,
    .x-eo-check-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .x-eo-check-tile {
        min-width: 0 !important;
        width: 100% !important;
    }

    .x-eo-check-tile__name {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}