/* =========================================================
   SERVICIO DE TRANSPORTE – ventanas Nuevo / Editar servicio (antes Popup/ServicioTransporte/Agregar.aspx y Editar.aspx)
   Copia de bootstrap/css/servicio-transporte.css de TransporteWeb. Los selectores de los editores ASPx (dxeTextBox_...)
   pasan a los de DevExpress Blazor (dxbl-text-edit) y las pestañas del ASPxPageControl a DxTabs. La ventana es un DxPopup
   sin barra de título (clase st-ventana), del ancho de la ventana integrada del TMS (960 px).
   ========================================================= */

.st-page {
    margin: 0;
    background: #fff;
    font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
    font-size: 13px;
    color: #1e293b;
}
.st-page *, .st-page *:before, .st-page *:after { box-sizing: border-box; }

/* ---------- Encabezado ---------- */
.st-hd {
    display: flex; align-items: center; gap: 14px; padding: 14px 20px;
    background: linear-gradient(135deg, #07346e 0%, #0c4d96 45%, #1461c4 100%);
    color: #fff;
}
.st-av {
    width: 42px; height: 42px; border-radius: 10px; background: rgba(255, 255, 255, .18);
    display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;
}
.st-hd-t { min-width: 0; }
.st-hd h3 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.35; color: #fff; }
.st-hd p { margin: 2px 0 0; font-size: 12px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-close { margin-left: auto; background: none; border: 0; color: #fff; font-size: 18px; cursor: pointer; opacity: .8; padding: 4px 6px; }
.st-close:hover { opacity: 1; }

.st-badge {
    display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600;
    padding: 2px 10px; border-radius: 10px; margin-left: 6px; vertical-align: middle;
    background: rgba(255, 255, 255, .2); color: #fff;
}
.st-badge:before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .9; }
.st-est-0 { background: #fef3c7; color: #92400e; }   /* Pendiente */
.st-est-1 { background: #dbeafe; color: #1d4ed8; }   /* En Ruta */
.st-est-2 { background: #dcfce7; color: #166534; }   /* Entregado */
.st-est-7 { background: #ede9fe; color: #5b21b6; }   /* Facturado */
.st-est-8 { background: #fee2e2; color: #991b1b; }   /* Anulado */

/* ---------- Cuerpo y secciones ---------- */
.st-bd { padding: 16px 20px 4px; }
.st-sec { border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px 16px 6px; margin-bottom: 14px; background: #fff; }
.st-sec h4 {
    margin: 0 0 12px; padding: 0; font-size: 12px; font-weight: 700; line-height: 22px;
    letter-spacing: .04em; text-transform: uppercase; color: #0c4d96;
    display: flex; align-items: center; gap: 8px; font-family: inherit;
}
.st-i {
    width: 22px; height: 22px; border-radius: 6px; background: #e0ecff; color: #2563eb;
    display: inline-flex; align-items: center; justify-content: center; font-size: 11px;
}
.st-r { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500; color: #64748b; font-size: 11px; display: inline-flex; align-items: center; gap: 4px; }
.st-excel { vertical-align: middle; cursor: pointer; opacity: .8; }
.st-excel:hover { opacity: 1; }

.st-g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 16px; }
.st-g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; }
.st-span2 { grid-column: span 2; }
.st-route { display: grid; grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr); align-items: end; gap: 0 8px; }
.st-arrow { height: 34px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; color: #2563eb; }

.st-f { margin-bottom: 12px; min-width: 0; }
.st-page label.st-l {
    display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: #334155;
    margin: 0 0 4px; padding: 0; max-width: none;
}
.st-l > i { color: #94a3b8; font-size: 11px; width: 14px; text-align: center; }
.st-req { color: #dc3545; }
.st-help { font-size: 11px; color: #64748b; margin-top: 3px; }
.st-loading { margin-left: auto; font-size: 11px; font-weight: 500; color: #2563eb; }

/* ---------- Editores DevExpress Blazor ---------- */
.st-page .dxbl-text-edit {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #f8fafc;
    min-height: 34px;
    font-family: inherit;
    font-size: 13px;
    color: #1e293b;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.st-page .dxbl-text-edit:focus-within {
    border-color: #2563eb;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
.st-page .dxbl-text-edit.dxbl-disabled,
.st-page .dxbl-text-edit.dxbl-readonly { background: #eef2f7; color: #64748b; }
.st-page .st-f .dxbl-text-edit,
.st-page .st-f-memo .dxbl-text-edit { width: 100%; }
.st-validacion { font-size: 11px; color: #dc3545; margin-top: 3px; }

/* ---------- Carga: indicadores ---------- */
.st-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.st-kpi {
    border: 1px solid #cbd5e1; border-radius: 8px; padding: 8px 12px; background: #f8fafc;
    display: flex; align-items: center; gap: 10px;
}
.st-kpi:focus-within { border-color: #2563eb; background: #fff; box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.st-kpi > i { color: #2563eb; font-size: 16px; width: 20px; text-align: center; }
.st-kpi-b { flex: 1; min-width: 0; }
.st-kpi-b small { display: block; font-size: 11px; color: #64748b; }
.st-page .st-kpi .dxbl-text-edit { border: 0; background: transparent; box-shadow: none; min-height: 0; }
.st-page .st-kpi .dxbl-text-edit input { font-size: 18px; font-weight: 700; padding: 0; }

/* ---------- Servicios adicionales (Editar) ---------- */
.st-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.st-tot { border-radius: 8px; padding: 10px 12px; background: #f1f5f9; }
.st-tot span { display: block; font-size: 11px; color: #64748b; }
.st-tot b { display: block; font-size: 17px; }
.st-tot-m { background: #dcfce7; }
.st-tot-m b { color: #166534; }
.st-addrow { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: 0 12px; align-items: end; }
.st-f-btn { display: flex; align-items: flex-end; }

/* ---------- Pie y botones ---------- */
.st-ft {
    position: sticky; bottom: 0; z-index: 5;
    display: flex; align-items: center; gap: 10px; padding: 12px 20px;
    border-top: 1px solid #e2e8f0; background: #f8fafc;
}
.st-meta { margin-right: auto; font-size: 11px; color: #64748b; }
.st-page .st-btn { height: 34px; font-size: 13px; font-weight: 600; }
.st-error { font-size: 12px; margin: 0 0 8px; }
.st-error span:empty { display: none; }

.st-alert-wrap { padding: 0 20px; }
.st-alert-wrap .st-alerta { margin: 12px 0 0; border-radius: 6px; font-size: 12.5px; padding: 10px 14px; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }

/* ---------- Pestañas (DxTabs en vez del ASPxPageControl, Editar) ---------- */
.st-tabs > .dxbl-tabs-tablist,
.st-tabs .dxbl-tabs-tablist {
    background: #f8fafc; border-bottom: 1px solid #e2e8f0; padding: 10px 20px; gap: 6px;
}
.st-tabs .dxbl-tabs-item {
    border: 1px solid transparent; border-radius: 16px; background: transparent;
    padding: 6px 14px; color: #475569; font-size: 13px;
}
.st-tabs .dxbl-tabs-item:hover { background: #eef2f7; }
.st-tabs .dxbl-tabs-item.dxbl-active { background: #e0ecff; border-color: #bfd4fe; color: #2563eb; font-weight: 600; }
.st-tabs .dxbl-tabs-item.dxbl-active::after,
.st-tabs .dxbl-tabs-item::after { display: none; }
.st-tabs .st-tab-cont { padding: 16px 20px 0; }
.st-tabs .st-bd { padding: 0; }
.st-tabs .st-ft { margin: 0 -20px; }

/* ---------- Ventanas chicas ---------- */
@media (max-width: 760px) {
    .st-g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .st-route { grid-template-columns: minmax(0, 1fr); }
    .st-arrow { display: none; }
    .st-addrow { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
    .st-g3, .st-g2, .st-kpis, .st-totals { grid-template-columns: minmax(0, 1fr); }
    .st-span2 { grid-column: auto; }
}

/* ---------- Seccion "Entrega" (solo lectura) en Editar ---------- */
.st-ent { background: #f8fafc; }
.st-ent h4 .st-r i { font-size: 10px; margin-right: 3px; }
.st-ent-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 16px; margin-bottom: 12px; }
.st-ro { min-width: 0; }
.st-ro-l { display: block; font-size: 11.5px; font-weight: 600; color: #64748b; margin-bottom: 3px; }
.st-ro-l > i { color: #94a3b8; font-size: 11px; width: 14px; text-align: center; }
.st-ro-v { display: block; font-size: 13px; font-weight: 600; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-ro-ok { color: #15803d; }
.st-ro-warn { color: #b45309; }
.st-ro-full { margin-bottom: 12px; }
.st-ro-obs {
    background: #fff; border: 1px solid #e2e8f0; border-left: 3px solid #2563eb; border-radius: 6px;
    padding: 8px 10px; font-size: 13px; color: #334155; white-space: pre-wrap; word-break: break-word;
    max-height: 140px; overflow-y: auto;
}
.st-ro-obs.st-ro-vacio { color: #94a3b8; font-style: italic; border-left-color: #cbd5e1; }
@media (max-width: 700px) { .st-ent-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Comentarios (ASPxMemo) ---------- */
.st-page .dxbl-text-edit textarea {
    font-family: inherit; font-size: 13px; color: #1e293b; padding: 6px 8px; resize: vertical; min-height: 64px; line-height: 1.45;
}
.st-opc { margin-left: 4px; font-size: 10.5px; font-weight: 500; color: #94a3b8; text-transform: none; }

/* ---------- Pestaña Fotos (galeria + visor) ---------- */
.st-fotos h4 .st-r { font-size: 12px; color: #64748b; text-transform: none; letter-spacing: 0; }
.st-fg-zip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 6px; background: #2563eb; color: #fff !important; font-weight: 600; text-decoration: none !important; font-size: 12px; }
.st-fg-zip:hover { background: #1d4ed8; }
.st-fg { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; padding-bottom: 12px; }
.st-fc { border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; background: #fff; display: flex; flex-direction: column; transition: box-shadow .15s, border-color .15s; }
.st-fc:hover { border-color: #bfdbfe; box-shadow: 0 6px 16px rgba(15, 23, 42, .10); }
.st-fc-img { display: block; aspect-ratio: 4 / 3; background: #f1f5f9; overflow: hidden; cursor: zoom-in; }
.st-fc-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.st-fc:hover .st-fc-img img { transform: scale(1.03); }
.st-fc-pie { display: flex; align-items: center; gap: 8px; padding: 7px 10px; }
.st-fc-t { flex: 1; min-width: 0; line-height: 1.25; }
.st-fc-t b { display: block; font-size: 12.5px; color: #1e293b; }
.st-fc-t small { display: block; font-size: 11px; color: #64748b; }
.st-fc-dl { width: 30px; height: 30px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; color: #2563eb !important; background: #eff6ff; text-decoration: none !important; }
.st-fc-dl:hover { background: #2563eb; color: #fff !important; }
.st-fc-desc { padding: 0 10px 8px; font-size: 11.5px; color: #475569; white-space: normal; }
.st-fg-vacio { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 30px 10px; color: #94a3b8; font-size: 12.5px; text-align: center; }
.st-fg-vacio i { font-size: 30px; margin-bottom: 6px; color: #cbd5e1; }
.st-fg-vacio b { color: #475569; font-size: 13.5px; }

.st-lb { position: fixed; inset: 0; z-index: 20000; background: rgba(15, 23, 42, .88); display: flex; align-items: center; justify-content: center; padding: 56px 64px 20px; }
.st-lb img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); background: #0f172a; }
.st-lb-bar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: #fff; font-size: 13.5px; }
.st-lb-tt { flex: 1; font-weight: 600; }
.st-lb-dl { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; background: #2563eb; color: #fff !important; text-decoration: none !important; font-size: 12.5px; font-weight: 600; }
.st-lb-dl:hover { background: #1d4ed8; }
.st-lb-x, .st-lb-prev, .st-lb-next { background: rgba(255, 255, 255, .12); border: 0; color: #fff; cursor: pointer; border-radius: 50%; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.st-lb-x:hover, .st-lb-prev:hover, .st-lb-next:hover { background: rgba(255, 255, 255, .25); }
.st-lb-prev, .st-lb-next { position: absolute; top: 50%; margin-top: -19px; }
.st-lb-prev { left: 14px; }
.st-lb-next { right: 14px; }

/* ---------- Combos: lista desplegable, ayuda y avisos (16-oct-2026) ---------- */
/* ListBoxStyle CssClass="st-dd" en cada combo de Agregar/Editar */
.st-dd, .st-dd td, .st-dd th { font-family: "Open Sans", "Segoe UI", Arial, sans-serif !important; font-size: 12.5px; }
.st-dd { border-color: #cbd5e1 !important; }
.st-dd [role="option"], .st-dd [role="option"] td { padding: 6px 10px; color: #1e293b; border-bottom: 1px solid #f1f5f9; white-space: nowrap; }
.st-dd [role="option"]:hover, .st-dd [role="option"]:hover td { background: #eff6ff; color: #0c4d96; }
.st-dd [aria-selected="true"], .st-dd [aria-selected="true"] td { background: #dbeafe; color: #07346e; font-weight: 600; }
/* encabezado de columnas (combos multicolumna) */
.st-dd th, .st-dd [class*="Header"] td, .st-dd tr[class*="Header"] td { background: #f8fafc !important; color: #64748b !important; font-size: 10.5px !important; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 6px 10px !important; border-bottom: 1px solid #e2e8f0 !important; }
/* texto que coincide con lo escrito */
.st-dd em { font-style: normal; background: #fef3c7; color: #92400e; border-radius: 2px; }

/* línea de ayuda bajo Origen, Destino, Camión y Chofer */
.st-hint { margin-top: 4px; font-size: 11.5px; line-height: 1.35; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-hint i { width: 12px; margin-right: 3px; text-align: center; color: #94a3b8; }
.st-hint-vacio { white-space: normal; color: #b45309; }
.st-hint-vacio i { color: #d97706; }

/* avisos no bloqueantes: capacidad del camión, licencia vencida */
.st-avisos { margin-top: 2px; }
.st-aviso { display: flex; align-items: flex-start; gap: 8px; margin-top: 6px; padding: 8px 12px; border-radius: 8px; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: 12px; line-height: 1.4; }
.st-aviso i { margin-top: 2px; color: #d97706; }

/* ---------- Folio de ruta: AsignarRuta.aspx y bloque "Ruta" de Editar/Agregar (16-oct-2026) ---------- */
.ar-tbl-wrap { max-height: 230px; overflow: auto; border: 1px solid #e2e8f0; border-radius: 8px; }
.ar-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.ar-tbl th { position: sticky; top: 0; background: #f8fafc; color: #64748b; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; text-align: left; padding: 7px 10px; border-bottom: 1px solid #e2e8f0; }
.ar-tbl td { padding: 7px 10px; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.ar-tbl tr:last-child td { border-bottom: 0; }
.ar-tbl tr.ar-no td { color: #94a3b8; background: #fafafa; }
.ar-tbl tr.ar-cambia td { background: #fffbeb; }
.ar-tbl tr.ar-cambia td:last-child { color: #b45309; font-weight: 600; }
.ar-motivo { display: block; margin-top: 2px; font-size: 11px; color: #b91c1c; font-weight: 400; }
.ar-pat { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 4px; background: #f1f5f9; color: #334155; font-size: 11px; font-weight: 600; }
.ar-sin { display: inline-block; padding: 1px 7px; border-radius: 10px; background: #fee2e2; color: #991b1b; font-size: 11px; font-weight: 600; }
.ar-ops { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 12px; }
.ar-op { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 10px; cursor: pointer; background: #fff; transition: border-color .15s, background .15s; }
.ar-op:hover { border-color: #93c5fd; }
.ar-op.on { border-color: #2563eb; background: #eff6ff; box-shadow: 0 0 0 1px #2563eb inset; }
.ar-op input { margin-top: 3px; }
.ar-op b { display: block; font-size: 12.5px; color: #1e293b; }
.ar-op b i { color: #2563eb; margin-right: 3px; }
.ar-op small { display: block; font-size: 11px; color: #64748b; }
.ar-pan { margin-bottom: 6px; }
.ar-previa { margin-top: 8px; padding: 9px 12px; border-radius: 8px; background: #f8fafc; border: 1px solid #e2e8f0; color: #475569; font-size: 12px; line-height: 1.45; }
.ar-previa i { margin-right: 4px; color: #64748b; }
.ar-previa-aviso { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.ar-previa-aviso i { color: #d97706; }
.ar-previa-ok { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.ar-previa-ok i { color: #16a34a; }
.ar-res { margin-bottom: 12px; }
.ar-res-ok, .ar-res-err { display: flex; gap: 10px; padding: 12px 14px; border-radius: 10px; margin-bottom: 10px; font-size: 12.5px; }
.ar-res-ok { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.ar-res-err { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.ar-res-ok > i, .ar-res-err > i { font-size: 18px; margin-top: 1px; }
.ar-res b { display: block; }
.ar-res small { display: block; margin-top: 2px; opacity: .85; }
.ar-res ul { margin: 4px 0 0; padding-left: 18px; }
.ar-proc { position: fixed; inset: 0; z-index: 9000; background: rgba(255, 255, 255, .7); display: flex; align-items: center; justify-content: center; font-size: 14px; color: #1d4ed8; font-weight: 600; }
.ar-proc i { margin-right: 6px; }

/* bloque "Ruta" en Editar / Agregar */
.st-ruta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 12px; margin-bottom: 12px; border: 1px solid #dbeafe; border-radius: 10px; background: #f8fbff; font-size: 12.5px; color: #1e293b; }
.st-ruta > i { color: #2563eb; }
.st-ruta b { font-size: 13px; }
.st-ruta .st-ruta-eq { color: #64748b; }
.st-ruta .st-ruta-sin { color: #991b1b; font-weight: 600; }
.st-ruta a.st-ruta-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 6px; background: #2563eb; color: #fff !important; font-size: 12px; font-weight: 600; text-decoration: none !important; }
.st-ruta a.st-ruta-btn:hover { background: #1d4ed8; }
.st-ruta-cambio { display: none; margin-top: 8px; padding: 10px 12px; border-radius: 8px; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: 12px; }
.st-ruta-cambio label { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; cursor: pointer; color: #78350f; }
.st-ruta-cambio label.dis { opacity: .5; cursor: not-allowed; }

/* ---------- Ventana (DxPopup de 960 px sin barra de título, como TmsModal) ---------- */
.st-ventana .dxbl-modal-body { padding: 0; overflow-y: auto; }
.st-ventana .dxbl-modal-content { height: 90vh; }

/* Estado del servicio (Cambiar estado, antes Estado.aspx: etiqueta a la izquierda y botones de imagen) */
.st-estado { display: grid; grid-template-columns: 20% 1fr; gap: 10px 12px; align-items: start; padding: 4px 4px 0; }
.st-estado > label { text-align: right; font-size: 12px; font-weight: 600; color: #334155; padding-top: 8px; }

/* Estilos que Editar.aspx tenía en su <style>: etiqueta "Dirección destino" con la casilla "Editar" */
.st-page div.st-l { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: #334155; margin: 0 0 4px; padding: 0; }
.st-page label.st-l { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: #334155; margin: 0 0 4px; padding: 0; }
.st-dir-editar { margin: 0 0 0 auto; font-weight: 500; font-size: 12px; color: #1d4ed8; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; text-transform: none; }
.st-dir-editar input { margin: 0; cursor: pointer; }

/* Pestaña Detalle Carga: Código, Producto (doble), Cantidad y Agregar (LayoutGroup de 5 columnas del sitio anterior) */
.st-carga-add { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr) auto; gap: 0 12px; align-items: end; }
.st-sec h4 .st-r a { color: #2563eb; text-decoration: none; }
.st-sec h4 .st-r a:hover { text-decoration: underline; }
@media (max-width: 760px) { .st-carga-add { grid-template-columns: minmax(0, 1fr); } }