/* =========================================================
   QIUTRACK V2
   PORTAL DE CLIENTES
========================================================= */

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:0;
}


/* =========================
   AUTH
========================= */

.portal-auth-body{
    min-height:100vh;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:32px 20px;

    background:#f1f5f9;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color:#0f172a;
}

.portal-auth-wrapper{
    width:100%;
    max-width:430px;
}


/* =========================
   CARD
========================= */

.portal-auth-card{
    width:100%;

    padding:34px 34px 30px;

    background:#ffffff;

    border:1px solid #e2e8f0;
    border-radius:16px;

    box-shadow:
        0 12px 35px rgba(15,23,42,.08);
}


/* =========================
   LOGO
========================= */

.portal-auth-logo{
    display:flex;
    justify-content:center;

    margin-bottom:25px;
}

.portal-auth-logo img{
    display:block;

    width:auto;
    max-width:250px;
    max-height:80px;

    object-fit:contain;
}


/* =========================
   HEADER
========================= */

.portal-auth-header{
    text-align:center;

    margin-bottom:27px;
}

.portal-auth-header h1{
    margin:0 0 8px;

    color:#0f172a;

    font-size:23px;
    font-weight:700;
}

.portal-auth-header p{
    max-width:330px;

    margin:0 auto;

    color:#64748b;

    font-size:13px;
    line-height:1.55;
}


/* =========================
   FORM
========================= */

.portal-auth-form{
    width:100%;
}

.portal-field{
    margin-bottom:18px;
}

.portal-field label{
    display:block;

    margin-bottom:7px;

    color:#334155;

    font-size:13px;
    font-weight:600;
}

.portal-field-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
}

.portal-field-header a{
    margin-bottom:7px;

    color:#475569;

    font-size:12px;
    font-weight:600;

    text-decoration:none;
}

.portal-field-header a:hover{
    color:#0f172a;
}


/* =========================
   INPUT
========================= */

.portal-input-wrap{
    position:relative;

    display:flex;
    align-items:center;
}

.portal-input-wrap > i{
    position:absolute;
    left:14px;

    color:#94a3b8;

    font-size:14px;

    pointer-events:none;
}

.portal-input-wrap input{
    width:100%;
    height:44px;

    padding:
        0 42px
        0 40px;

    background:#fff;

    border:1px solid #cbd5e1;
    border-radius:9px;

    color:#0f172a;

    font-size:14px;

    outline:none;

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

.portal-input-wrap input::placeholder{
    color:#94a3b8;
}

.portal-input-wrap input:focus{
    border-color:#64748b;

    box-shadow:
        0 0 0 3px rgba(100,116,139,.10);
}


/* =========================
   VER PASSWORD
========================= */

.portal-password-toggle{
    position:absolute;
    right:7px;

    width:32px;
    height:32px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0;

    background:transparent;
    color:#94a3b8;

    border:0;
    border-radius:7px;

    cursor:pointer;
}

.portal-password-toggle:hover{
    background:#f1f5f9;
    color:#475569;
}


/* =========================
   BOTÓN
========================= */

.portal-btn-primary{
    width:100%;
    height:43px;

    margin-top:2px;

    background:#0b2e59;
    color:#fff;

    border:0;
    border-radius:9px;

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

    cursor:pointer;

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

.portal-btn-primary:hover{
    background:#092648;
}

.portal-btn-primary:active{
    transform:translateY(1px);
}


/* =========================
   ACTIVACIÓN
========================= */

.portal-activation{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;

    margin-top:23px;
    padding-top:20px;

    border-top:1px solid #e2e8f0;

    font-size:13px;
}

.portal-activation span{
    color:#64748b;
}

.portal-activation a{
    color:#0b2e59;

    font-weight:700;

    text-decoration:none;
}

.portal-activation a:hover{
    text-decoration:underline;
}


/* =========================
   ALERTAS
========================= */

.portal-alert{
    display:flex;
    align-items:flex-start;
    gap:9px;

    padding:11px 12px;

    margin-bottom:20px;

    border-radius:8px;

    font-size:13px;
    line-height:1.4;
}

.portal-alert-error{
    background:#fef2f2;
    color:#991b1b;

    border:1px solid #fecaca;
}

.portal-alert-success{
    background:#f0fdf4;
    color:#166534;

    border:1px solid #bbf7d0;
}

.portal-alert i{
    margin-top:2px;
}


/* =========================
   FOOTER
========================= */

.portal-auth-footer{
    margin-top:18px;

    text-align:center;

    color:#94a3b8;

    font-size:11px;
}

.portal-qiutrack-link{
    color:#64748b;
    font-weight:700;
    text-decoration:none;
    transition:color .15s ease;
}

.portal-qiutrack-link:hover{
    color:#0b2e59;
    text-decoration:underline;
}

/* =========================
   PASSWORD HELP
========================= */

.portal-password-help{
    display:flex;
    align-items:center;
    gap:7px;

    margin-top:-5px;
    margin-bottom:18px;

    color:#64748b;

    font-size:12px;
}

.portal-password-help i{
    font-size:11px;
}


/* =========================
   BOTÓN COMO LINK
========================= */

.portal-btn-link{
    display:flex;
    align-items:center;
    justify-content:center;

    text-decoration:none;
}


/* =========================
   RESPONSIVE
========================= */

@media(max-width:520px){

    .portal-auth-body{
        padding:18px 14px;
        background:#fff;
    }

    .portal-auth-card{
        padding:25px 20px;

        border:0;
        border-radius:0;

        box-shadow:none;
    }

    .portal-auth-logo img{
        max-width:220px;
    }

}

/* =========================================================
   PORTAL - ÁREA PRIVADA
========================================================= */

.portal-body{
    min-height:100vh;
    margin:0;

    background:#f1f5f9;
    color:#0f172a;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


/* =========================
   HEADER
========================= */

.portal-header{
    background:#fff;
    border-bottom:1px solid #e2e8f0;
}

.portal-header-inner{
    width:100%;
    max-width:1180px;

    min-height:74px;

    margin:0 auto;
    padding:0 24px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
}

.portal-brand img{
    display:block;

    max-width:190px;
    max-height:55px;

    object-fit:contain;
}

.portal-user{
    display:flex;
    align-items:center;
    gap:14px;
}

.portal-user-info{
    display:flex;
    flex-direction:column;

    text-align:right;
}

.portal-user-info strong{
    color:#0f172a;

    font-size:14px;
    font-weight:700;
}

.portal-user-info span{
    margin-top:3px;

    color:#64748b;

    font-size:12px;
}

.portal-logout{
    width:38px;
    height:38px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#f8fafc;
    color:#475569;

    border:1px solid #e2e8f0;
    border-radius:9px;

    text-decoration:none;

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

.portal-logout:hover{
    background:#f1f5f9;
    color:#0f172a;
    border-color:#cbd5e1;
}


/* =========================
   MAIN
========================= */

.portal-main{
    width:100%;
    max-width:1180px;

    margin:0 auto;
    padding:34px 24px 50px;
}


/* =========================
   BIENVENIDA
========================= */

.portal-welcome{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;

    margin-bottom:28px;
}

.portal-eyebrow{
    display:block;

    margin-bottom:7px;

    color:#64748b;

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

    text-transform:uppercase;
    letter-spacing:.05em;
}

.portal-welcome h1{
    margin:0 0 7px;

    color:#0f172a;

    font-size:27px;
    font-weight:700;
}

.portal-welcome p{
    margin:0;

    color:#64748b;

    font-size:14px;
}

.portal-casillero{
    min-width:190px;

    padding:15px 18px;

    background:#fff;

    border:1px solid #e2e8f0;
    border-radius:11px;

    text-align:right;
}

.portal-casillero span{
    display:block;

    margin-bottom:5px;

    color:#64748b;

    font-size:11px;
    font-weight:600;
}

.portal-casillero strong{
    color:#0b2e59;

    font-size:20px;
    font-weight:700;
}


/* =========================
   STATS
========================= */

.portal-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;

    margin-bottom:32px;
}

.portal-stat-card{
    min-height:95px;

    display:flex;
    align-items:center;
    gap:15px;

    padding:19px;

    background:#fff;

    border:1px solid #e2e8f0;
    border-radius:12px;
}

.portal-stat-icon{
    width:43px;
    height:43px;

    flex:0 0 43px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#f1f5f9;
    color:#475569;

    border-radius:10px;

    font-size:17px;
}

.portal-stat-card span{
    display:block;

    margin-bottom:4px;

    color:#64748b;

    font-size:12px;
}

.portal-stat-card strong{
    color:#0f172a;

    font-size:21px;
    font-weight:700;
}


/* =========================
   SECCIONES
========================= */

.portal-section{
    margin-top:10px;
}

.portal-section-header{
    margin-bottom:15px;
}

.portal-section-header h2{
    margin:0 0 4px;

    color:#0f172a;

    font-size:17px;
}

.portal-section-header p{
    margin:0;

    color:#64748b;

    font-size:12px;
}


/* =========================
   ACCIONES
========================= */

.portal-actions-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
}

@media (max-width:1100px){

    .portal-actions-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}

@media (max-width:650px){

    .portal-actions-grid{
        grid-template-columns:1fr;
    }

}
.portal-action-card{
    min-height:105px;

    display:grid;
    grid-template-columns:42px 1fr auto;
    align-items:center;
    gap:13px;

    padding:18px;

    background:#fff;
    color:#0f172a;

    border:1px solid #e2e8f0;
    border-radius:12px;

    text-decoration:none;

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

.portal-action-card:hover{
    transform:translateY(-2px);

    border-color:#cbd5e1;

    box-shadow:
        0 8px 20px rgba(15,23,42,.06);
}

.portal-action-icon{
    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#f1f5f9;
    color:#475569;

    border-radius:9px;

    font-size:16px;
}

.portal-action-card strong{
    display:block;

    margin-bottom:5px;

    font-size:14px;
}

.portal-action-card span{
    display:block;

    color:#64748b;

    font-size:12px;
    line-height:1.4;
}

.portal-action-card > .fa-chevron-right{
    color:#94a3b8;

    font-size:11px;
}


/* =========================
   FOOTER PORTAL
========================= */

.portal-footer{
    padding:0 20px 25px;

    text-align:center;

    color:#94a3b8;

    font-size:11px;
}


/* =========================
   RESPONSIVE PORTAL
========================= */

@media(max-width:800px){

    .portal-main{
        padding:
            25px 16px
            40px;
    }

    .portal-header-inner{
        padding:0 16px;
    }

    .portal-brand img{
        max-width:150px;
    }

    .portal-welcome{
        align-items:stretch;
        flex-direction:column;
        gap:18px;
    }

    .portal-casillero{
        min-width:0;

        text-align:left;
    }

    .portal-stats{
        grid-template-columns:1fr;
    }

    .portal-actions-grid{
        grid-template-columns:1fr;
    }

}


@media(max-width:520px){

    .portal-user-info strong{
        max-width:125px;

        overflow:hidden;

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

    .portal-user-info span{
        display:none;
    }

    .portal-welcome h1{
        font-size:23px;
    }

}
/* =========================================================
   PORTAL - MIS PAQUETES
========================================================= */

.portal-page-heading{
    margin-bottom:22px;
}

.portal-page-heading h1{
    margin:10px 0 6px;
    font-size:28px;
    color:#0f172a;
}

.portal-page-heading p{
    margin:0;
    color:#64748b;
    font-size:14px;
}

.portal-back-link{
    display:inline-flex;
    align-items:center;
    gap:7px;

    color:#64748b;

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

    text-decoration:none;
}

.portal-back-link:hover{
    color:#0f172a;
}


/* FILTROS */

.portal-package-filters{
    display:flex;
    align-items:center;
    gap:10px;
}

.portal-package-search{
    position:relative;
    flex:1;
}

.portal-package-search i{
    position:absolute;
    left:14px;
    top:50%;

    transform:translateY(-50%);

    color:#94a3b8;
    font-size:14px;
}

.portal-package-search input{
    width:100%;
    height:44px;

    box-sizing:border-box;

    padding:0 14px 0 40px;

    border:1px solid #dbe3ec;
    border-radius:10px;

    background:#fff;
    color:#0f172a;

    font-size:14px;

    outline:none;
}

.portal-package-search input:focus{
    border-color:#94a3b8;
}

.portal-package-select{
    height:44px;

    padding:0 35px 0 13px;

    border:1px solid #dbe3ec;
    border-radius:10px;

    background:#fff;
    color:#334155;

    font-size:14px;

    outline:none;
}

.portal-filter-button{
    height:44px;

    padding:0 18px;

    border:0;
    border-radius:10px;

    background:#0b2e59;
    color:#fff;

    font-size:14px;
    font-weight:600;

    cursor:pointer;
}

.portal-filter-button:hover{
    background:#092648;
}

.portal-filter-clear{
    height:44px;

    display:inline-flex;
    align-items:center;

    padding:0 14px;

    color:#64748b;

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

    text-decoration:none;
}


/* LISTADO */

.portal-package-list-header{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-bottom:14px;
}

.portal-package-list-header h2{
    margin:0 0 4px;

    color:#0f172a;

    font-size:18px;
}

.portal-package-list-header p{
    margin:0;

    color:#64748b;

    font-size:13px;
}

.portal-package-list{
    overflow:hidden;

    background:#fff;

    border:1px solid #e2e8f0;
    border-radius:14px;
}

.portal-package-item{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;

    padding:16px 18px;

    border-bottom:1px solid #edf2f7;

    color:inherit;
    text-decoration:none;

    transition:background .15s ease;
}

.portal-package-item:last-child{
    border-bottom:0;
}

.portal-package-item:hover{
    background:#f8fafc;
}

.portal-package-main{
    display:flex;
    align-items:center;

    gap:14px;

    min-width:0;
}

.portal-package-icon{
    width:42px;
    height:42px;

    flex:0 0 42px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:10px;

    background:#f1f5f9;
    color:#475569;
}

.portal-package-info{
    min-width:0;
}

.portal-package-tracking{
    display:block;

    overflow:hidden;
    text-overflow:ellipsis;

    color:#0f172a;

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

    white-space:nowrap;
}

.portal-package-meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:12px;

    margin-top:6px;

    color:#64748b;

    font-size:12px;
}

.portal-package-meta span{
    display:inline-flex;
    align-items:center;
    gap:5px;
}

.portal-package-invoice{
    display:flex;
    align-items:center;

    gap:6px;

    margin-top:7px;

    color:#475569;

    font-size:12px;
    font-weight:600;
}

.portal-package-invoice.muted{
    color:#94a3b8;
    font-weight:500;
}

.portal-package-side{
    display:flex;
    align-items:center;

    gap:12px;

    flex-shrink:0;
}

.portal-package-status{
    display:inline-flex;
    align-items:center;

    min-height:28px;

    padding:4px 10px;

    border-radius:8px;

    background:#f1f5f9;
    color:#475569;

    font-size:12px;
    font-weight:600;

    white-space:nowrap;
}

.portal-package-side > i{
    color:#94a3b8;
    font-size:12px;
}


/* VACÍO */

.portal-package-empty{
    min-height:220px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    padding:30px;

    text-align:center;
}

.portal-package-empty > i{
    margin-bottom:12px;

    color:#cbd5e1;

    font-size:32px;
}

.portal-package-empty strong{
    color:#334155;

    font-size:15px;
}

.portal-package-empty span{
    margin-top:5px;

    color:#94a3b8;

    font-size:13px;
}


/* PAGINACIÓN */

.portal-pagination{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:6px;

    margin-top:20px;
}

.portal-page-button{
    min-width:36px;
    height:36px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:0 8px;

    box-sizing:border-box;

    border:1px solid #e2e8f0;
    border-radius:8px;

    background:#fff;
    color:#475569;

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

    text-decoration:none;
}

.portal-page-button:hover{
    background:#f8fafc;
}

.portal-page-button.active{
    background:#0b2e59;
    border-color:#0b2e59;
    color:#fff;
}


/* RESPONSIVE */

@media(max-width:700px){

    .portal-package-filters{
        align-items:stretch;
        flex-direction:column;
    }

    .portal-package-select,
    .portal-filter-button,
    .portal-filter-clear{
        width:100%;
    }

    .portal-filter-clear{
        justify-content:center;
    }

    .portal-package-item{
        align-items:flex-start;
    }

    .portal-package-side{
        flex-direction:column;
        align-items:flex-end;

        gap:8px;
    }

    .portal-package-status{
        max-width:130px;

        overflow:hidden;
        text-overflow:ellipsis;
    }

}
/* =========================================================
   PORTAL - DETALLE DE PAQUETE
========================================================= */

.portal-package-detail-card{
    overflow:hidden;

    margin-bottom:28px;

    background:#fff;

    border:1px solid #e2e8f0;
    border-radius:14px;
}


/* CABECERA */

.portal-package-detail-top{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;

    padding:20px;

    border-bottom:1px solid #edf2f7;
}

.portal-package-detail-title{
    display:flex;
    align-items:center;

    gap:14px;

    min-width:0;
}

.portal-package-detail-icon{
    width:46px;
    height:46px;

    flex:0 0 46px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:11px;

    background:#f1f5f9;
    color:#475569;

    font-size:17px;
}

.portal-package-detail-title span{
    display:block;

    margin-bottom:4px;

    color:#64748b;

    font-size:12px;
}

.portal-package-detail-title strong{
    display:block;

    color:#0f172a;

    font-size:17px;

    overflow-wrap:anywhere;
}

.portal-package-detail-status{
    display:inline-flex;
    align-items:center;

    min-height:30px;

    padding:5px 11px;

    border-radius:8px;

    background:#f1f5f9;
    color:#334155;

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

    white-space:nowrap;
}


/* DATOS */

.portal-package-detail-grid{
    display:grid;

    grid-template-columns:
        repeat(4, minmax(0,1fr));

    padding:20px;
}

.portal-package-detail-field{
    min-width:0;

    padding:5px 18px;

    border-right:1px solid #edf2f7;
}

.portal-package-detail-field:first-child{
    padding-left:0;
}

.portal-package-detail-field:last-child{
    border-right:0;
}

.portal-package-detail-field span{
    display:block;

    margin-bottom:6px;

    color:#64748b;

    font-size:12px;
}

.portal-package-detail-field strong{
    color:#0f172a;

    font-size:14px;
    font-weight:650;
}


/* NOTA */

.portal-package-note{
    margin:0 20px 20px;

    padding:14px 16px;

    background:#f8fafc;

    border:1px solid #edf2f7;
    border-radius:9px;
}

.portal-package-note span{
    display:block;

    margin-bottom:5px;

    color:#64748b;

    font-size:12px;
    font-weight:600;
}

.portal-package-note p{
    margin:0;

    color:#334155;

    font-size:13px;
    line-height:1.5;
}


/* FACTURA */

.portal-package-invoice-card{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;

    padding:17px 18px;

    background:#fff;

    border:1px solid #e2e8f0;
    border-radius:12px;

    color:inherit;
    text-decoration:none;

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

.portal-package-invoice-card:hover{
    background:#f8fafc;
    border-color:#cbd5e1;
}

.portal-package-invoice-main{
    display:flex;
    align-items:center;

    gap:12px;
}

.portal-package-invoice-icon{
    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    flex:0 0 42px;

    border-radius:9px;

    background:#f1f5f9;
    color:#475569;
}

.portal-package-invoice-main span,
.portal-package-invoice-side span{
    display:block;

    margin-bottom:3px;

    color:#64748b;

    font-size:11px;
}

.portal-package-invoice-main strong,
.portal-package-invoice-side strong{
    color:#0f172a;

    font-size:13px;
}

.portal-package-invoice-side{
    display:flex;
    align-items:center;

    gap:20px;

    text-align:right;
}

.portal-package-invoice-side > i{
    color:#94a3b8;

    font-size:12px;
}


/* TIMELINE */

.portal-package-timeline{
    overflow:hidden;

    background:#fff;

    border:1px solid #e2e8f0;
    border-radius:14px;

    padding:6px 20px;
}

.portal-timeline-item{
    position:relative;

    display:flex;

    gap:15px;

    min-height:70px;
}

.portal-timeline-marker{
    position:relative;

    width:16px;

    flex:0 0 16px;
}

.portal-timeline-marker::after{
    content:"";

    position:absolute;

    top:28px;
    bottom:0;
    left:7px;

    width:1px;

    background:#e2e8f0;
}

.portal-timeline-item:last-child
.portal-timeline-marker::after{
    display:none;
}

.portal-timeline-marker span{
    position:absolute;

    top:22px;
    left:3px;

    width:9px;
    height:9px;

    box-sizing:border-box;

    border:2px solid #64748b;
    border-radius:50%;

    background:#fff;
}

.portal-timeline-item:first-child
.portal-timeline-marker span{
    border-color:#0b2e59;
    background:#0b2e59;
}

.portal-timeline-content{
    flex:1;

    padding:17px 0;

    border-bottom:1px solid #edf2f7;
}

.portal-timeline-item:last-child
.portal-timeline-content{
    border-bottom:0;
}

.portal-timeline-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;
}

.portal-timeline-heading strong{
    color:#0f172a;

    font-size:14px;
}

.portal-timeline-heading span{
    flex-shrink:0;

    color:#64748b;

    font-size:12px;
}

.portal-timeline-content p{
    margin:6px 0 0;

    color:#64748b;

    font-size:12px;
}

.portal-timeline-content p i{
    margin-right:4px;
}


/* RESPONSIVE */

@media(max-width:800px){

    .portal-package-detail-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:18px 0;
    }

    .portal-package-detail-field{
        border-right:0;
        padding:5px 10px 5px 0;
    }

}

@media(max-width:600px){

    .portal-package-detail-top{
        align-items:flex-start;
        flex-direction:column;
    }

    .portal-package-detail-grid{
        grid-template-columns:1fr;
    }

    .portal-package-detail-field{
        padding:5px 0;
    }

    .portal-package-invoice-side{
        gap:10px;
    }

    .portal-timeline-heading{
        align-items:flex-start;
        flex-direction:column;

        gap:4px;
    }

}
/* =========================================================
   PORTAL - FACTURA
========================================================= */

.portal-back-link{
    display:inline-flex;
    align-items:center;
    gap:7px;

    margin-bottom:12px;

    color:#476582;
    text-decoration:none;

    font-size:14px;
    font-weight:500;
}

.portal-back-link:hover{
    color:#0d3b66;
}


/* =========================
   CABECERA FACTURA
========================= */

.portal-invoice-card{
    overflow:hidden;

    background:#fff;

    border:1px solid #dbe3ec;
    border-radius:14px;
}

.portal-invoice-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;

    padding:24px;

    border-bottom:1px solid #e7edf3;
}

.portal-invoice-header h1{
    margin:5px 0 4px;

    color:#0f172a;

    font-size:26px;
    line-height:1.2;
}

.portal-invoice-header p{
    margin:0;

    color:#64748b;
    font-size:14px;
}

.portal-invoice-header-right{
    display:flex;
    align-items:center;
    gap:10px;
}

.portal-invoice-status{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:32px;
    padding:6px 12px;

    background:#f1f5f9;
    color:#334155;

    border-radius:8px;

    font-size:13px;
    font-weight:600;
}

.portal-print-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;

    min-height:36px;
    padding:8px 13px;

    background:#0d3b66;
    color:#fff;

    border:0;
    border-radius:8px;

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

    cursor:pointer;
}

.portal-print-button:hover{
    background:#092f52;
}


/* =========================
   INFORMACIÓN
========================= */

.portal-invoice-info-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);

    padding:20px 24px;
}

.portal-invoice-info-grid > div{
    padding:0 18px;

    border-right:1px solid #e7edf3;
}

.portal-invoice-info-grid > div:first-child{
    padding-left:0;
}

.portal-invoice-info-grid > div:last-child{
    padding-right:0;
    border-right:0;
}

.portal-invoice-info-grid span{
    display:block;

    margin-bottom:5px;

    color:#64748b;

    font-size:12px;
}

.portal-invoice-info-grid strong{
    display:block;

    color:#0f172a;

    font-size:14px;
    font-weight:650;
}


/* =========================
   SECCIÓN DETALLE
========================= */

.portal-invoice-section{
    margin-top:24px;
}

.portal-invoice-table-wrap{
    overflow-x:auto;

    margin-top:14px;

    background:#fff;

    border:1px solid #dbe3ec;
    border-radius:14px;
}


/* =========================
   TABLA
========================= */

.portal-invoice-table{
    width:100%;

    border-collapse:collapse;
}

.portal-invoice-table th{
    padding:12px 16px;

    background:#f8fafc;
    color:#64748b;

    border-bottom:1px solid #e2e8f0;

    text-align:left;

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

    text-transform:uppercase;
    letter-spacing:.02em;

    white-space:nowrap;
}

.portal-invoice-table td{
    padding:14px 16px;

    color:#334155;

    border-bottom:1px solid #edf2f7;

    font-size:14px;
}

.portal-invoice-table tbody tr:last-child td{
    border-bottom:0;
}

.portal-invoice-table tbody tr:hover{
    background:#fafcff;
}

.portal-text-right{
    text-align:right !important;
}

.portal-total-cell{
    color:#0f172a !important;
    font-weight:700;
}

.portal-tracking-link{
    color:#0d3b66;

    font-weight:650;
    text-decoration:none;
}

.portal-tracking-link:hover{
    text-decoration:underline;
}

.portal-empty-cell{
    padding:35px !important;

    color:#94a3b8 !important;

    text-align:center !important;
}


/* =========================
   TOTALES
========================= */

.portal-invoice-totals{
    width:100%;
    max-width:390px;

    margin:18px 0 0 auto;

    padding:18px 20px;

    background:#fff;

    border:1px solid #dbe3ec;
    border-radius:12px;
}

.portal-invoice-total-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;

    padding:7px 0;

    color:#64748b;

    font-size:14px;
}

.portal-invoice-total-row strong{
    color:#0f172a;
    font-weight:650;
}

.portal-invoice-grand-total{
    margin-top:5px;
    padding-top:12px;

    border-top:1px solid #e2e8f0;

    color:#0f172a;

    font-size:15px;
    font-weight:700;
}

.portal-invoice-grand-total strong{
    font-size:17px;
}

.portal-invoice-balance{
    margin-top:5px;
    padding-top:12px;

    border-top:1px solid #e2e8f0;

    color:#0d3b66;

    font-weight:700;
}

.portal-invoice-balance strong{
    color:#0d3b66;

    font-size:18px;
}


/* =========================
   TÉRMINOS
========================= */

.portal-invoice-terms{
    margin-top:30px;
    padding:18px 20px;

    color:#64748b;

    border-top:1px solid #dbe3ec;

    font-size:11px;
    line-height:1.6;
}

.portal-invoice-terms strong{
    display:block;

    margin-bottom:6px;

    color:#475569;

    font-size:11px;
    text-transform:uppercase;
}

.portal-invoice-terms p{
    margin:0;
}


/* =========================
   RESPONSIVE
========================= */

@media(max-width:800px){

    .portal-invoice-header{
        flex-direction:column;
    }

    .portal-invoice-header-right{
        width:100%;

        justify-content:space-between;
    }

    .portal-invoice-info-grid{
        grid-template-columns:1fr 1fr;
        gap:18px;

        padding:20px;
    }

    .portal-invoice-info-grid > div{
        padding:0;

        border-right:0;
    }

    .portal-invoice-table{
        min-width:760px;
    }

    .portal-invoice-totals{
        max-width:none;
    }

}


/* =========================
   IMPRESIÓN
========================= */

@media print{

    .portal-header,
    .portal-footer,
    .portal-back-link,
    .portal-print-button{
        display:none !important;
    }

    .portal-body{
        background:#fff;
    }

    .portal-main{
        max-width:none;
        padding:0;
    }

    .portal-invoice-card,
    .portal-invoice-table-wrap,
    .portal-invoice-totals{
        box-shadow:none;
    }

    .portal-invoice-table-wrap{
        overflow:visible;
    }

}
/* =========================================================
   PORTAL - LISTADO DE FACTURAS
========================================================= */

.portal-invoice-list-status{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:27px;
    padding:4px 9px;

    background:#f1f5f9;
    color:#475569;

    border-radius:7px;

    font-size:12px;
    font-weight:600;

    white-space:nowrap;
}

.portal-invoice-view{
    width:30px;
    height:30px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border:1px solid #e2e8f0;
    border-radius:7px;

    background:#fff;
    color:#64748b;

    text-decoration:none;
}

.portal-invoice-view:hover{
    background:#f8fafc;
    color:#0d3b66;
    border-color:#cbd5e1;
}
/* =========================================================
   ESTADOS - LISTADO DE FACTURAS
========================================================= */

.portal-invoice-list-status.pagada {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.portal-invoice-list-status.pendiente {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}
/* =========================================================
   ESTADO - DETALLE DE FACTURA
========================================================= */

.portal-invoice-status.pagada {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.portal-invoice-status.pendiente {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}
/* =========================================================
   PERFIL
========================================================= */

.portal-profile-card {
    background: #ffffff;
    border: 1px solid #dbe3ec;
    border-radius: 14px;
    margin-top: 22px;
    overflow: hidden;
}

.portal-profile-header {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px 26px;
}

.portal-profile-avatar {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #f1f5f9;
    color: #365674;
    font-size: 22px;
}

.portal-profile-header h2 {
    margin: 3px 0 4px;
    font-size: 22px;
}

.portal-profile-code {
    color: #64748b;
    font-size: 14px;
}

.portal-profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.portal-profile-field {
    background: #ffffff;
    border: 1px solid #dbe3ec;
    border-radius: 12px;
    padding: 18px 20px;
    min-height: 72px;
}

.portal-profile-field > span,
.portal-profile-field-title span {
    display: block;
    color: #64748b;
    font-size: 13px;
    margin-bottom: 7px;
}

.portal-profile-field strong {
    display: block;
    color: #0f172a;
    font-size: 15px;
    overflow-wrap: anywhere;
}

.portal-profile-field-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4b6680;
}

.portal-profile-field-title span {
    margin-bottom: 0;
}

.portal-profile-field-title + strong {
    margin-top: 7px;
}


/* =========================================================
   PERFIL RESPONSIVE
========================================================= */

@media (max-width: 700px) {

    .portal-profile-grid {
        grid-template-columns: 1fr;
    }

    .portal-profile-header {
        padding: 20px;
    }

}
/* =========================================================
   PORTAL - MIS DIRECCIONES
========================================================= */

.portal-address-alert{
    display:flex;
    align-items:flex-start;
    gap:11px;

    margin-bottom:26px;
    padding:14px 16px;

    background:#fffbeb;
    color:#475569;

    border:1px solid #fde68a;
    border-radius:10px;

    font-size:13px;
    line-height:1.5;
}

.portal-address-alert i{
    margin-top:2px;

    color:#b45309;
    font-size:15px;
}

.portal-address-alert strong{
    color:#92400e;
}


/* =========================
   GRUPO / PAÍS
========================= */

.portal-address-group{
    margin-bottom:30px;
}

.portal-address-group-header{
    margin-bottom:14px;
}

.portal-address-group-header h2{
    margin:0 0 5px;

    color:#0f172a;

    font-size:18px;
    font-weight:700;
}

.portal-address-group-header p{
    margin:0;

    color:#64748b;

    font-size:12px;
    line-height:1.5;
}


/* =========================
   GRID DE DIRECCIONES
========================= */

.portal-address-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}


/* =========================
   TARJETA
========================= */

.portal-address-card{
    display:flex;
    flex-direction:column;

    min-width:0;

    background:#fff;

    border:1px solid #e2e8f0;
    border-radius:14px;

    overflow:hidden;
}

.portal-address-card-header{
    display:flex;
    align-items:center;
    gap:13px;

    padding:17px 18px;

    border-bottom:1px solid #edf2f7;
}

.portal-address-icon{
    width:40px;
    height:40px;

    flex:0 0 40px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#f1f5f9;
    color:#475569;

    border-radius:9px;

    font-size:16px;
}

.portal-address-card-header h3{
    margin:0 0 3px;

    color:#0f172a;

    font-size:15px;
    font-weight:700;
}

.portal-address-card-header span{
    display:block;

    color:#64748b;

    font-size:11px;
}


/* =========================
   DIRECCIÓN
========================= */

.portal-address-content{
    flex:1;

    padding:18px;

    color:#334155;

    font-size:13px;
    line-height:1.65;
}

.portal-address-content strong{
    color:#0f172a;
    font-weight:700;
}


/* =========================
   BOTÓN COPIAR
========================= */

.portal-address-actions{
    padding:0 18px 18px;
}

.portal-address-copy{
    width:100%;
    min-height:38px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;

    padding:8px 13px;

    background:#f8fafc;
    color:#334155;

    border:1px solid #dbe3ec;
    border-radius:8px;

    font-size:12px;
    font-weight:600;

    cursor:pointer;

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

.portal-address-copy:hover{
    background:#f1f5f9;
    border-color:#cbd5e1;
    color:#0b2e59;
}


/* =========================
   COLOMBIA
========================= */

.portal-address-service{
    display:inline-flex;
    align-items:center;

    margin-bottom:10px;
    padding:4px 8px;

    background:#f1f5f9;
    color:#475569;

    border-radius:6px;

    font-size:11px;
    font-weight:700;
}


/* =========================
   NOTA INFERIOR
========================= */

.portal-address-note{
    display:flex;
    align-items:flex-start;
    gap:9px;

    margin-top:8px;
    padding:13px 15px;

    background:#f8fafc;

    border:1px solid #e2e8f0;
    border-radius:9px;

    color:#64748b;

    font-size:12px;
    line-height:1.5;
}

.portal-address-note i{
    margin-top:2px;
    color:#64748b;
}


/* =========================
   RESPONSIVE
========================= */

@media(max-width:750px){

    .portal-address-grid{
        grid-template-columns:1fr;
    }

    .portal-address-group{
        margin-bottom:25px;
    }

}

@media(max-width:520px){

    .portal-address-card-header,
    .portal-address-content{
        padding-left:15px;
        padding-right:15px;
    }

    .portal-address-actions{
        padding-left:15px;
        padding-right:15px;
        padding-bottom:15px;
    }

    .portal-address-alert{
        padding:12px 13px;
    }

}
/* =========================================================
   ESTADOS DE PAQUETES
========================================================= */

.status-recibido {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
}

.status-transito {
    background: #fef3c7 !important;
    color: #92400e !important;
}

.status-entregado {
    background: #dcfce7 !important;
    color: #166534 !important;
}

.status-bodega {
    background: #f3e8ff !important;
    color: #7e22ce !important;
}

.status-desconocido {
    background: #f1f5f9 !important;
    color: #64748b !important;
}

.status-inventario {
    background: #dbeafe !important;
    color: #1e3a8a !important;
}

.status-vehiculo {
    background: #ffedd5 !important;
    color: #c2410c !important;
}

.status-excepcion {
    background: #fee2e2 !important;
    color: #b91c1c !important;
}

.status-prealertado {
    background: #cffafe !important;
    color: #0e7490 !important;
}