/* ═══════════════════════════════════════════════════════════════
   Estilos del modal BPM de Cotización de Transporte y sus componentes
   (TransportQuoteTaskDialog + Components/). Antes vivían como <style>
   inline (global de facto) en el .razor; movidos aquí como CSS dedicado.
   Tokens de marca en tokens.css (var(--brand-*)).
   ═══════════════════════════════════════════════════════════════ */

.ct-bpm-dialog { width: 880px; min-width: 880px; max-width: 94vw; overflow: hidden; }
.ct-bpm-dialog .mud-dialog-title { padding: 0 !important; display: none !important; }
.ct-bpm-dialog .mud-dialog-content { padding: 0 !important; overflow: hidden !important; }
.ct-bpm-dialog .mud-dialog-actions { display: none !important; }

/* Cuerpo de los forms de fase: se ajusta al contenido (sin el min-height del shell). */
.ct-form-body { padding: 24px 40px 8px; }

/* Banner de fase ("Fase X de Y — descripción") sobre el form de la acción. */
.ct-phase-banner {
    display: flex; align-items: center; gap: 8px;
    margin: 14px 40px 0; padding: 8px 14px; border-radius: 10px;
    background: var(--brand-blue-light); color: var(--brand-blue-dark);
    font-size: 0.78rem; font-weight: 700;
}

/* ── Encabezados de sección ── */
.ct-section-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 12px;
}
.ct-section-title {
    font-size: 0.8rem; font-weight: 700; color: var(--brand-blue-dark);
    text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 12px;
}
.ct-section-head .ct-section-title { margin-bottom: 0; }
.ct-section-hint { font-size: 0.7rem; color: var(--brand-neutral); font-weight: 600; }

/* Chip de estado (validación de afiliaciones) */
.ct-status-chip {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 12px;
    border-radius: 999px; font-size: 0.68rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.ct-status-chip.is-ok { background: var(--brand-success-light); color: var(--brand-success); }
.ct-status-chip.is-pending { background: var(--brand-orange-light); color: var(--brand-orange); }

.ct-detail-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
}
@media (max-width: 720px) {
    .ct-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Tablas (afiliaciones / confirmación / detalle) ── */
.ct-pricing-table {
    position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-radius: 10px;
}
.ct-pricing-table::-webkit-scrollbar { height: 7px; }
.ct-pricing-table::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }
.ct-pricing-table table {
    width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.72rem;
}
.ct-pricing-table thead th {
    position: sticky; top: 0; z-index: 1; background: white;
    font-size: 0.62rem; color: var(--brand-neutral); font-weight: 700; text-align: left;
    text-transform: uppercase; letter-spacing: 0.05em; padding: 8px 8px;
    white-space: nowrap; box-shadow: inset 0 -1px 0 #E5E7EB;
}
.ct-pricing-table tbody td {
    padding: 5px 8px; vertical-align: middle; min-width: 92px;
    font-variant-numeric: tabular-nums;
}
.ct-pricing-table .mud-input-control { min-width: 88px; }
.ct-pricing-table--editable tbody tr:hover { background: var(--brand-blue-light); }
.ct-pricing-table--readonly tbody td {
    font-size: 0.82rem; font-weight: 600; color: #1E1E1E; padding: 8px 10px;
    border-bottom: 1px solid #F1F5F9; white-space: nowrap; min-width: 0;
}
.ct-pricing-table--readonly tbody tr:nth-child(even) { background: #F8FAFD; }

/* Fila de totales (pie de tabla) */
.ct-total-row td {
    background: var(--brand-blue-light); color: var(--brand-blue-dark);
    font-weight: 800; font-size: 0.78rem; padding: 9px 10px !important;
    border-top: 2px solid #DBE6F5; font-variant-numeric: tabular-nums;
}
.ct-total-row td:first-child { text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.68rem; }

/* ── Costeo por línea en TARJETAS (sin scroll horizontal) ── */
.ct-line-card {
    border: 1px solid #E5E7EB; border-radius: 12px;
    padding: 12px 16px 4px; margin-bottom: 12px; background: #fff;
}
.ct-line-card__head {
    display: flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 800;
    color: var(--brand-blue-dark); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px;
}
.ct-line-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 8px 12px; }
.ct-total-strip {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px; background: var(--brand-blue-light); color: var(--brand-blue-dark);
    border-radius: 10px; font-weight: 800; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em;
}
.ct-total-strip__amount { font-size: 1.1rem; font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* ── Costeo por línea en TABLA DENSA (escala a 20-40+ líneas) ── */
.ct-price-pending { color: #B45309; font-weight: 700; }

.ct-price-toolbar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px;
}
.ct-price-toolbar__label {
    font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--brand-blue-dark);
}
.ct-price-toolbar__field { max-width: 160px; }
.ct-price-toolbar__field--sm { max-width: 100px; }
.ct-price-toolbar__spacer { flex: 1 1 auto; min-width: 8px; }
.ct-price-upload { display: inline-flex; }
.ct-price-upload .mud-input-control { margin: 0; }

/* Etiquetas de precio de las bandas de tarifa dinámica. Google centra el
   contenido del marcador sobre el punto, así que aquí no se desplaza. */
.zone-price-tag {
    background: rgba(255, 255, 255, 0.94); color: #1A3D7A; font-weight: 800; font-size: 11px;
    padding: 1px 8px; border-radius: 11px; border: 1px solid rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); font-variant-numeric: tabular-nums;
    width: max-content;
}
.zone-price-tag.is-active { background: #EF7890; color: #fff; border-color: #EF7890; }

/* Pin con etiqueta de los mapas de ruta (origen / destino). */
.rm-pin {
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .02em;
    padding: 3px 9px; border-radius: 999px; border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .35); white-space: nowrap;
}

/* Zona tarifaria: punto y nombre. */
.zone-dot {
    width: 14px; height: 14px; margin: 0 auto; border-radius: 50%;
    background: rgba(59, 130, 246, .35); border: 2px solid #1A3D7A;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .3);
}
.zone-label {
    margin-top: 3px; background: rgba(255, 255, 255, .94); color: #1A3D7A;
    font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 9px;
    border: 1px solid rgba(0, 0, 0, .12); white-space: nowrap; width: max-content;
}

.ct-price-table-wrap {
    position: relative; max-height: 52vh; overflow: auto;
    border: 1px solid #E5E7EB; border-radius: 10px;
}
.ct-price-table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    font-size: 0.8rem; background: #fff;
}
.ct-price-table thead th {
    position: sticky; top: 0; z-index: 3;
    background: #F1F5FB; color: var(--brand-blue-dark);
    font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em;
    text-align: left; white-space: nowrap; padding: 8px 8px; border-bottom: 1px solid #D6DEEA;
}
.ct-price-table tbody td {
    padding: 2px 8px; border-bottom: 1px solid #EEF1F5; vertical-align: middle;
}
.ct-price-table th.num, .ct-price-table td.num { text-align: right; }
.ct-price-table .ct-col-idx { width: 40px; text-align: center; }
.ct-price-table .ct-col-o { min-width: 130px; }
.ct-price-table .ct-col-sm { width: 78px; }
.ct-price-table .ct-col-cost { min-width: 120px; }

/* Primera columna (#) congelada a la izquierda mientras scrollea el resto. */
.ct-price-table th.ct-col-idx, .ct-price-table td.ct-col-idx {
    position: sticky; left: 0; z-index: 2; background: #fff;
}
.ct-price-table thead th.ct-col-idx { z-index: 4; background: #F1F5FB; }
.ct-row-num { color: #94A3B8; font-variant-numeric: tabular-nums; font-weight: 600; }

.ct-price-table tbody tr:hover td { background: #F8FAFD; }
.ct-price-table tbody tr:hover td.ct-col-idx { background: #F8FAFD; }
.ct-row-invalid td { background: #FEF4F4; }
.ct-row-invalid td.ct-col-idx { background: #FEF4F4; box-shadow: inset 3px 0 0 #EF4444; }

.ct-price-total td { position: sticky; bottom: 0; z-index: 3;
    background: var(--brand-blue-light); border-top: 1px solid #D6DEEA; padding: 8px; }
.ct-price-total__label {
    text-align: right; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
    font-size: 0.7rem; color: var(--brand-blue-dark);
}
.ct-price-total__amount {
    font-weight: 800; font-size: 0.95rem; color: var(--brand-blue-dark);
    font-variant-numeric: tabular-nums;
}

/* Inputs compactos dentro de la tabla (Variant.Text sin márgenes extra). */
.ct-price-table .mud-input-control { margin-top: 0; }
.ct-price-table .mud-input-control .mud-input.mud-input-text { margin-top: 0; }
.ct-price-table .mud-input-slot { padding-top: 2px; padding-bottom: 2px; min-height: 28px; }
.ct-price-table .mud-select .mud-input-slot { font-size: 0.8rem; }
.ct-price-table .num .mud-input-slot input { text-align: right; }

/* ── Celdas read-only del Detalle ── */
.ct-readonly-cell {
    background: #F8FAFD; border: 1px solid #E5E7EB; border-radius: 10px; padding: 10px 12px;
}
.ct-readonly-cell__label {
    font-size: 0.62rem; color: var(--brand-neutral); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
}
.ct-readonly-cell__value {
    font-size: 0.86rem; font-weight: 600; color: #1E1E1E; margin-top: 4px;
    font-variant-numeric: tabular-nums;
}
.ct-observation {
    background: #F8FAFD; border: 1px solid #E5E7EB; border-radius: 10px;
    padding: 12px 14px; margin-top: 16px;
}
.ct-observation__body {
    font-size: 0.84rem; color: #374151; line-height: 1.55; margin-top: 6px; white-space: pre-wrap;
}

/* ── Comparativo de Afiliaciones ── */
.ct-affil-route { font-weight: 700; color: #1E1E1E; white-space: nowrap; }
.ct-affil-pricing { font-weight: 600; color: var(--brand-neutral); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ct-affil-delta { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ct-affil-delta.is-less { color: var(--brand-success); }
.ct-affil-delta.is-more { color: var(--brand-danger); }
.ct-affil-delta.is-equal { color: var(--brand-neutral); }
.ct-comp-chip {
    display: inline-block; padding: 2px 10px; border-radius: 999px;
    font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
}
.ct-comp-chip.is-less { background: var(--brand-success-light); color: var(--brand-success); }
.ct-comp-chip.is-more { background: var(--brand-danger-light); color: var(--brand-danger); }
.ct-comp-chip.is-equal { background: #F1F5F9; color: var(--brand-neutral); }

/* Aviso: el afiliado supera a Pricing (Mayor) → devolver a Pricing */
.ct-confirm-warning {
    display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
    padding: 10px 14px; border-radius: 10px; font-size: 0.8rem; line-height: 1.4;
    background: var(--brand-danger-light); color: var(--brand-danger);
    border: 1px solid #F6C9C9;
}

/* ── Estado vacío ── */
.ct-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 28px 24px; text-align: center; color: var(--brand-neutral);
    background: #F8FAFD; border: 1px dashed #E5E7EB; border-radius: 12px;
}
.ct-empty__icon { font-size: 2.1rem !important; color: #CBD5E1; margin-bottom: 10px; }
.ct-empty__title { font-size: 0.9rem; font-weight: 700; color: #475569; }
.ct-empty__sub { font-size: 0.76rem; margin-top: 4px; max-width: 360px; }

/* ── Iteraciones de costeo (Detalle) ── */
.ct-iteration-card {
    border: 1px solid #E5E7EB; border-radius: 12px; padding: 12px 14px;
    margin-bottom: 12px; background: #fff;
}
.ct-iteration-card.is-current { border-color: var(--brand-blue); box-shadow: 0 2px 14px -8px rgba(35,81,158,0.5); }
.ct-iteration-card.is-superseded { background: #FAFBFC; opacity: 0.92; }
.ct-iteration-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ct-iteration-card__title {
    font-size: 0.74rem; font-weight: 800; color: var(--brand-blue-dark);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.ct-iteration-card__badge {
    font-size: 0.6rem; font-weight: 800; padding: 2px 9px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.ct-iteration-card__badge.is-current { background: var(--brand-blue-light); color: var(--brand-blue-dark); }
.ct-iteration-card__badge.is-superseded { background: #F1F5F9; color: var(--brand-neutral); }
.ct-iteration-card__total {
    margin-left: auto; font-size: 0.95rem; font-weight: 800;
    color: var(--brand-blue-dark); font-variant-numeric: tabular-nums;
}