/* =========================================================
   BLOQUE SUBIDA ARCHIVOS (imagen clicable)
========================================================= */

.ecoi-job-preview{
    width:100%;
}

.ecoi-job-preview__upload{
    display:block;
    width:100%;
    transition:.2s ease;
}

.ecoi-job-preview__upload:hover{
    transform:translateY(-2px);
    opacity:.96;
}

.ecoi-job-preview__upload img{
    width:90%;
    height:auto;
    display:block;
    border-radius:28px;
}

/* =========================================================
   BOTÓN SUBIR ARCHIVOS
========================================================= */

.ecoi-upload-btn{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    gap:8px;

    padding:12px 22px !important;

    border:none !important;
    border-radius:6px !important;

    background:#4f86d9 !important;
    color:#fff !important;

    font-size:14px !important;
    font-weight:700;

    line-height:1;
    transition:.2s ease;
}

.ecoi-upload-btn:hover{
    transform:translateY(-1px);
    opacity:.95;
}

.ecoi-upload-btn span{
    line-height:1;
    white-space:nowrap;
}

.ecoi-job-upload{
    text-align:center;
}

.ecoi-job-upload img{
    margin-right:10px !important;
}

/* =========================================================
   LISTADO PEDIDOS
========================================================= */

.ecoi-orders{
    width:100%;
    max-width:100%;
}

.ecoi-orders-head,
.ecoi-order-row{
    display:grid;

    grid-template-columns:
        110px
        minmax(160px,1.6fr)
        minmax(180px,1.2fr)
        110px
        90px;

    gap:18px;
    align-items:center;

    width:100%;
    box-sizing:border-box;
}

.ecoi-orders-head{
    padding:0 0 14px;
    border-bottom:1px solid #e5e5e5;

    font-size:13px;
    font-weight:700;
    color:#222;
}

.ecoi-orders-head > p{
    display:none !important;
}

.ecoi-order-row{
    padding:18px 0;
    border-bottom:1px solid #ececec;
}

.ecoi-order-col,
.ecoi-order-main,
.ecoi-order-pack,
.ecoi-order-status-progress,
.ecoi-order-payment,
.ecoi-order-total{
    min-width:0;
}

.ecoi-order-main{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.ecoi-order-link{
    color:#2f6bff;
    font-weight:700;
    text-decoration:none;
    font-size:16px;
    line-height:1.1;
}

.ecoi-order-link:hover{
    color:#2f6bff;
}

.ecoi-order-date{
    color:#777;
    font-size:13px;
    line-height:1.2;
}

.ecoi-order-pack-sub{
    font-size:14px;
    color:#444;
    line-height:1.3;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* =========================================================
   BARRA ESTADO
========================================================= */

.ecoi-order-status-progress{
    display:flex;
    flex-direction:column;
    gap:8px;

    min-width:0;
}

.ecoi-progress{
    width:100%;
    height:14px;

    background:#d9d9d9;

    border-radius:999px;
    overflow:hidden;
    position:relative;
}

.ecoi-progress-bar{
    height:100%;
    border-radius:999px;
}

/* Colores estados */

.ecoi-progress--gray{
    background:#bbb;
}

.ecoi-progress--red-light{
    background:#ff5a5a;
}

.ecoi-progress--red{
    background:#ff2e2e;
}

.ecoi-progress--orange{
    background:#ff8a00;
}

.ecoi-progress--green{
    background:#52d600;
}

.ecoi-progress--blue{
    background:#2f6bff;
}

.ecoi-progress-text{
    font-size:12px;
    color:#666;
    line-height:1.2;
}

.ecoi-progress-tracking{
    font-size:11px;
    color:#888;
    line-height:1.2;
}

/* =========================================================
   ESTADO PAGO
========================================================= */

.ecoi-order-payment{
    display:flex;
    justify-content:center;
    align-items:center;
}

.ecoi-pay-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    background:#ff4747;
    color:#fff;

    border-radius:10px;

    padding:10px 18px;

    text-decoration:none;

    font-size:13px;
    font-weight:700;

    min-width:160px;
    height:42px;

    transition:.2s;
}

.ecoi-pay-btn:hover{
    opacity:.92;
    color:#fff;
}

.ecoi-paid-label{
    color:#777;
    font-size:14px;
    font-weight:500;
}

/* =========================================================
   TOTAL
========================================================= */

.ecoi-order-total{
    justify-self:end;
}

.ecoi-order-amount{
    font-size:16px;
    font-weight:700;
    color:#444;

    white-space:nowrap;
}

.woocommerce-account .ecoi-order-row{
    display:grid !important;

    grid-template-columns:
        140px
        minmax(160px,1.6fr)
        minmax(180px,1.2fr)
        110px
        90px !important;

    align-items:center !important;

    column-gap:18px !important;

    width:100% !important;
    box-sizing:border-box !important;

    padding:18px 0 !important;

    border-bottom:1px solid #e9e9e9 !important;
}