/* ============================================================
   Adm Cloud Transportación (TMS) — estilos adicionales
   de la página del módulo. Extiende site.css (misma paleta).
   ============================================================ */

/* ---------- Mockup: panel de viaje del hero ---------- */
.trip-window {
    background: rgba(16, 20, 58, .72);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(37, 170, 225, .08), 0 0 60px rgba(37, 170, 225, .12);
    backdrop-filter: blur(12px);
    overflow: hidden;
    transform: rotateY(-6deg) rotateX(2deg);
    transition: transform .4s ease;
}
.trip-window:hover { transform: rotateY(0) rotateX(0); }

.trip-body {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    padding: 1rem;
}

/* Encabezado del viaje */
.trip-head {
    display: flex;
    align-items: center;
    gap: .7rem;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: var(--radius-sm);
    padding: .7rem .8rem;
}

.trip-head-icon {
    width: 38px; height: 38px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(37, 170, 225, .14);
    border: 1px solid rgba(37, 170, 225, .35);
    color: var(--cyan);
}

.trip-head-info {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
    flex: 1;
}

.trip-id { font-family: var(--mono); font-size: .78rem; font-weight: 500; color: rgba(255, 255, 255, .92); }
.trip-dest { font-size: .66rem; color: rgba(255, 255, 255, .55); }

.trip-status {
    flex-shrink: 0;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8FB8FF;
    background: rgba(61, 77, 183, .18);
    border: 1px solid rgba(61, 77, 183, .55);
    border-radius: 999px;
    padding: .18rem .6rem;
}

/* Ruta origen → destino */
.trip-route {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: var(--radius-sm);
    padding: .7rem .8rem;
}

.trip-node {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}
.trip-node .tn-label {
    font-size: .58rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
}
.trip-node .tn-place {
    font-size: .72rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trip-line {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    color: var(--cyan);
    min-width: 40px;
}
.trip-line .tl-dist { font-family: var(--mono); font-size: .58rem; color: rgba(255, 255, 255, .55); }
.trip-line .tl-bar {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, rgba(37, 170, 225, .2), var(--cyan), rgba(254, 205, 8, .5));
    border-radius: 2px;
    position: relative;
}
.trip-line .tl-bar::after {
    content: "";
    position: absolute;
    right: -3px; top: 50%;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--yellow);
    transform: translateY(-50%);
}

/* Asignación de recursos */
.trip-assign {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.trip-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .64rem;
    color: rgba(255, 255, 255, .82);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    padding: .22rem .6rem;
}
.trip-chip svg { color: var(--cyan); flex-shrink: 0; }

/* Documentos consolidados */
.trip-docs {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.trip-doc {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    padding: .55rem .7rem;
    transition: transform .2s ease, border-color .2s ease;
}
.trip-doc:hover { transform: translateY(-2px); border-color: rgba(37, 170, 225, .5); }

.td-badge {
    flex-shrink: 0;
    font-family: var(--mono);
    font-size: .6rem;
    font-weight: 500;
    border-radius: 6px;
    padding: .14rem .45rem;
    letter-spacing: .03em;
}
.td-badge.fac { color: var(--cyan); background: rgba(37, 170, 225, .12); border: 1px solid rgba(37, 170, 225, .38); }
.td-badge.desp { color: var(--yellow); background: rgba(254, 205, 8, .1); border: 1px solid rgba(254, 205, 8, .35); }
.td-badge.rec { color: #B9C2FF; background: rgba(120, 134, 255, .12); border: 1px solid rgba(120, 134, 255, .38); }

.td-text { flex: 1; min-width: 0; font-size: .72rem; color: rgba(255, 255, 255, .88); line-height: 1.35; }
.td-amt { flex-shrink: 0; font-family: var(--mono); font-size: .64rem; color: rgba(255, 255, 255, .6); }

/* Pie del panel */
.trip-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .65rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .03);
    font-size: .68rem;
    color: rgba(255, 255, 255, .55);
}
.trip-foot strong { color: var(--yellow); font-family: var(--mono); font-weight: 500; }
.trip-foot .tf-fuel { color: var(--cyan); }

/* ---------- Etiquetas de características (tarjetas oscuras) ---------- */
.cap-tags { display: flex; flex-wrap: wrap; gap: .4rem; }

.cap-tags span {
    font-size: .64rem;
    font-weight: 600;
    color: var(--yellow);
    background: rgba(254, 205, 8, .08);
    border: 1px solid rgba(254, 205, 8, .22);
    border-radius: 6px;
    padding: .12rem .5rem;
}

/* ---------- Ciclo del viaje (flujo horizontal) ---------- */
.flow {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .5rem;
}

.flow-step {
    flex: 1 1 170px;
    max-width: 210px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 1.3rem 1.1rem;
    text-align: center;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.flow-step:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
    border-color: rgba(37, 170, 225, .5);
}

.flow-icon {
    width: 46px; height: 46px;
    display: grid;
    place-items: center;
    margin: 0 auto .7rem;
    border-radius: 12px;
    background: rgba(37, 170, 225, .12);
    color: var(--cyan);
}
.flow-step:nth-child(1) .flow-icon { background: rgba(254, 205, 8, .16); color: #B78E00; }
.flow-step:nth-child(9) .flow-icon { background: rgba(40, 54, 141, .1); color: var(--blue); }

.flow-step h3 { font-size: .92rem; margin-bottom: .35rem; }
.flow-step p { font-size: .76rem; color: var(--muted); }

.flow-arrow {
    align-self: center;
    flex: 0 0 auto;
    color: var(--cyan);
    display: grid;
    place-items: center;
    padding: 0 .1rem;
}

.flow-note {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    max-width: 720px;
    margin: 2.2rem auto 0;
    background: rgba(37, 170, 225, .07);
    border: 1px solid rgba(37, 170, 225, .3);
    border-radius: var(--radius-sm);
    padding: 1rem 1.2rem;
    font-size: .86rem;
    color: var(--ink);
    text-align: left;
}
.flow-note svg { flex-shrink: 0; color: var(--cyan); margin-top: .15rem; }
.flow-note strong { color: var(--blue); }

/* ---------- Estados del viaje ---------- */
.status-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    margin-top: 2.2rem;
}

.status-chip {
    display: inline-flex;
    align-items: center;
    font-size: .8rem;
    font-weight: 700;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .45rem 1.1rem;
    transition: transform .2s ease, box-shadow .2s ease;
}
.status-chip:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.status-chip.st-pending  { color: #B76A00; border-color: rgba(255, 149, 0, .45); background: rgba(255, 149, 0, .09); }
.status-chip.st-planned  { color: #B78E00; border-color: rgba(254, 205, 8, .45); background: rgba(254, 205, 8, .1); }
.status-chip.st-sent     { color: var(--blue); border-color: rgba(40, 54, 141, .4); background: rgba(40, 54, 141, .07); }
.status-chip.st-delivered { color: #1E8E52; border-color: rgba(64, 195, 123, .45); background: rgba(64, 195, 123, .09); }
.status-chip.st-billed   { color: var(--cyan); border-color: rgba(37, 170, 225, .45); background: rgba(37, 170, 225, .08); }

.status-arrow { color: var(--muted); flex-shrink: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .flow-step { max-width: none; }
}

@media (max-width: 680px) {
    .flow { flex-direction: column; align-items: stretch; }
    .flow-step { flex-basis: auto; }
    .flow-arrow { transform: rotate(90deg); padding: .1rem 0; }
    .td-amt { display: none; }
}