/* ── Cápsula de vehículo (JSCB y JPCB) ────────────────────────────────────
   Una tarjeta por OT. Arriba la identidad (foto, semáforo, placa y promesa) y, a la derecha, la
   OT con su duración; el JSCB añade debajo la pista de procesos y el JPCB la deja sin ella.
   Cuando la orden se parte en fragmentos, el primero lleva la identidad y el último la OT y la
   duración: leídos seguidos forman una sola tarjeta. El ancho lo pone la columna, así que la
   cápsula se declara contenedor y, al estrecharse, retira lo que dejaría de caber (ver «Tarjeta
   estrecha» más abajo).

   Global a propósito: el CSS con ámbito de un componente no alcanza al otro, y tener la tarjeta
   duplicada en los dos tableros fue lo que las hizo divergir. Lo que cada tablero le añade
   (arrastre, huecos, menú desplegable, estados de ejecución) sigue en su propio .razor.css. */
.vehicle-capsule-card {
    position: relative;
    z-index: 2;
    container-name: board-card;
    container-type: inline-size;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px;
    padding: 4px;
    /* Aire propio de la tarjeta, solo en vertical: con los 4 px que dejaba la celda, dos órdenes en
       filas seguidas quedaban a 7 px y se leían como una sola pieza. En horizontal no lleva nada,
       porque los fragmentos de una misma orden partida han de seguir tocándose. */
    margin: 3px 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    width: 100%;
    min-height: 86px;
    min-width: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box;
    /* La identidad va a la izquierda pase lo que pase: la tabla del JPCB centra el texto de sus
       celdas y la promesa, que ocupa todo el ancho de su columna, se iba al centro. */
    text-align: left;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.vehicle-capsule-card * {
    min-width: 0;
}

/* Semáforo: píldora vertical de la altura de la foto, al lado de la placa. */
.capsule-traffic-status-indicator {
    width: 10px;
    height: 40px;
    border-radius: 5px;
    flex-shrink: 0;
    align-self: center;
    margin: 0 2px;
    transition: background-color 0.2s ease;
}

.vehicle-capsule-card.has-cut-start {
    padding-left: 4px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left: 2.5px dashed #94a3b8 !important;
}

.vehicle-capsule-card.has-cut-end {
    padding-right: 4px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: 2.5px dashed #94a3b8 !important;
}

.vehicle-capsule-card.has-cut-start.has-cut-end {
    border-radius: 0 !important;
    border-left: 2.5px dashed #94a3b8 !important;
    border-right: 2.5px dashed #94a3b8 !important;
}

.vehicle-capsule-card:hover {
    border-color: #0284c7;
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.2);
}

/* La fila alta conserva su altura aunque un fragmento de continuación no lleve identidad:
   así todos los fragmentos de una orden miden lo mismo. */
.capsule-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    min-width: 0;
    min-height: 40px;
}

.capsule-left-side {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

/* La foto siempre está: si no hay imagen o no carga, el recuadro queda con una silueta de
   vehículo detrás (el `onerror` de la etiqueta pone además la foto genérica). */
.capsule-car-thumb-wrap {
    width: 52px;
    height: 40px;
    box-sizing: border-box;
    border-radius: 9px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f1f5f9 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 13l1.6-4.6A2 2 0 0 1 6.5 7h11a2 2 0 0 1 1.9 1.4L21 13'/><path d='M3 13h18v4a1 1 0 0 1-1 1h-1a2 2 0 0 1-4 0H8a2 2 0 0 1-4 0H4a1 1 0 0 1-1-1z'/></svg>") center / 58% no-repeat;
    border: 1.5px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.capsule-car-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.capsule-primary-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.15;
}

.capsule-plate-row {
    display: flex;
    align-items: center;
    min-width: 0;
}

.capsule-plate-text {
    overflow: hidden;
    max-width: 100%;
    color: #334d6e;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: 0.2px;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.capsule-date-text {
    overflow: hidden;
    max-width: 100%;
    color: #3d5676;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* El prefijo de la promesa viene en dos largos, «Promesa: » y «Prom: », y solo se ve uno: el
   corto entra cuando el largo deja de caber y se retira cuando tampoco cabe él (ver «Tarjeta
   estrecha» más abajo). */
.capsule-date-prefix-short {
    display: none;
}

/* Lado derecho: OT y duración apiladas, alineadas a la derecha, y el menú de acciones. */
.capsule-right-side {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex: 0 1 auto;
    min-width: 0;
}

.capsule-order-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 1px;
    min-width: 0;
    text-align: right;
}

.capsule-ot-text {
    overflow: hidden;
    max-width: 100%;
    color: #4e99c5;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.capsule-duration-text {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0;
    padding: 0 3px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #c65d08;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    text-align: right;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.capsule-duration-text:hover {
    background: #fff7ed;
    color: #9a3412;
}

.vehicle-actions-menu-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
}

.vehicle-actions-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.vehicle-actions-trigger:hover,
.vehicle-actions-trigger[aria-expanded="true"] {
    background: #e2e8f0;
    color: #1e293b;
}

.vehicle-actions-trigger svg {
    width: 18px;
    height: 18px;
}

/* ── Pista de procesos ───────────────────────────────────────────────────
   Una barra por proceso, separadas por aire blanco; el recorte de la pista es rectangular para
   que no se coma las esquinas que dibuja cada barra. Las esquinas van pequeñas salvo las dos que
   tocan las esquinas de la tarjeta: la inferior izquierda de la primera barra y la inferior
   derecha de la última siguen el radio de la cápsula (16 px menos relleno y borde = 11 px), de
   modo que quedan concéntricas con ella. */
.capsule-phase-track {
    display: flex;
    align-items: stretch;
    gap: 4px;
    height: 28px;
    width: 100%;
    background: transparent;
    border-radius: 0;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.capsule-phase-segment {
    flex-grow: 1;
    height: 100%;
    min-width: 16px;
    border: 0;
    border-radius: 5px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    user-select: none;
    transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

.capsule-phase-track > .capsule-phase-segment:first-child {
    border-bottom-left-radius: 11px;
}

.capsule-phase-track > .capsule-phase-segment:last-child {
    border-bottom-right-radius: 11px;
}

/* Lado cortado: la barra llega recta hasta el borde punteado de la tarjeta. Se lee como que el
   proceso —o la tarjeta— sigue en otro fragmento. Aplica tanto si el propio proceso continúa
   (.phase-cut-*) como si la tarjeta está partida en ese lado (.has-cut-*). */
.capsule-phase-track > .capsule-phase-segment.phase-cut-start,
.has-cut-start .capsule-phase-track > .capsule-phase-segment:first-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.capsule-phase-track > .capsule-phase-segment.phase-cut-end,
.has-cut-end .capsule-phase-track > .capsule-phase-segment:last-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.capsule-phase-segment:hover {
    transform: scaleY(1.05);
    filter: brightness(0.96);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
}

.capsule-phase-segment:active {
    cursor: grabbing;
    transform: scale(0.97);
}

/* ── Tarjeta estrecha ─────────────────────────────────────────────────────
   El ancho lo fija la columna (150 px por día en la semana, 68 px por hora, 44 px por día en el
   mes), así que no siempre cabe todo. La foto no se retira nunca: es lo que identifica el chip
   de un vistazo. Lo demás cede por orden de valor, de menos a más: primero la OT y la duración;
   luego la tarjeta pasa a compacta (foto y placa más pequeñas). Placa y promesa no se retiran
   mientras quepa algo de ellas: la placa se recorta por el final con puntos suspensivos, y la
   promesa acorta primero el prefijo («Promesa: » → «Prom: »), luego lo quita y deja la fecha,
   y al final también la fecha se recorta con puntos; las dos se retiran a la vez, cuando ya no
   cabe ni una letra de la placa, y el sitio que dejan es para la foto. Por último el menú ⋮ se
   monta sobre la foto —para no perder la acción— y el semáforo desaparece. Cada cosa reaparece
   en cuanto vuelve a haber sitio. Los umbrales miden el contenido de la cápsula (ancho menos
   10 px de relleno y borde) y están calibrados con la fuente Inter para una placa de seis
   caracteres y el mes más largo («30 Sept»). Los selectores llevan la cápsula delante para
   pesar más que las reglas base, que en parte están declaradas más abajo. */
@container board-card (max-width: 319px) {
    .vehicle-capsule-card .capsule-ot-text,
    .vehicle-capsule-card .capsule-duration-text {
        display: none;
    }

    /* Sin OT ni duración, a la derecha solo queda el menú: que no ceda ancho al texto —el
       menú se saldría de su sitio y se montaría sobre la placa— ni deje el hueco del gap. */
    .vehicle-capsule-card .capsule-right-side {
        flex-shrink: 0;
        gap: 0;
    }
}

@container board-card (max-width: 219px) {
    .vehicle-capsule-card .capsule-top-row {
        gap: 4px;
        min-height: 30px;
    }

    .vehicle-capsule-card .capsule-left-side {
        gap: 3px;
    }

    .vehicle-capsule-card .capsule-car-thumb-wrap {
        width: 34px;
        height: 30px;
        border-radius: 7px;
    }

    .vehicle-capsule-card .capsule-traffic-status-indicator {
        width: 6px;
        height: 30px;
        margin: 0;
        border-radius: 3px;
    }

    .vehicle-capsule-card .capsule-plate-text {
        font-size: 15px;
    }

    .vehicle-capsule-card .capsule-date-text {
        font-size: 11px;
    }

    .vehicle-capsule-card .vehicle-actions-menu-container,
    .vehicle-capsule-card .vehicle-actions-trigger {
        flex-basis: 24px;
        width: 24px;
        height: 24px;
    }

    .vehicle-capsule-card .vehicle-actions-trigger svg {
        width: 15px;
        height: 15px;
    }
}

/* La promesa cede antes que la placa: «Promesa: 30 Sept» ya no cabe → «Prom: 30 Sept». */
@container board-card (max-width: 168px) {
    .vehicle-capsule-card .capsule-date-prefix {
        display: none;
    }

    .vehicle-capsule-card .capsule-date-prefix-short {
        display: inline;
    }
}

/* «Prom: 30 Sept» tampoco cabe → solo la fecha. De aquí abajo la placa (y luego la fecha) se
   recortan con puntos suspensivos; el tooltip conserva el dato completo. */
@container board-card (max-width: 149px) {
    .vehicle-capsule-card .capsule-date-prefix-short {
        display: none;
    }
}

/* Ya no cabe ni una letra de la placa: se retiran placa y promesa, y el sitio que dejan es para
   la foto: crece hasta el tamaño de la tarjeta completa (52×40) y, si no cabe entera, toma el
   ancho que quede. */
@container board-card (max-width: 102px) {
    .vehicle-capsule-card .capsule-primary-copy {
        display: none;
    }

    .vehicle-capsule-card .capsule-top-row {
        min-height: 40px;
    }

    .vehicle-capsule-card .capsule-car-thumb-wrap {
        flex: 1 1 auto;
        width: auto;
        min-width: 34px;
        max-width: 52px;
        height: 40px;
        border-radius: 9px;
    }

    .vehicle-capsule-card .capsule-traffic-status-indicator {
        width: 8px;
        height: 40px;
        border-radius: 4px;
    }
}

@container board-card (max-width: 75px) {
    .vehicle-capsule-card .vehicle-actions-menu-container {
        position: absolute;
        top: 2px;
        right: 2px;
        width: 20px;
        height: 20px;
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.55);
    }

    .vehicle-capsule-card .vehicle-actions-trigger {
        flex-basis: 20px;
        width: 20px;
        height: 20px;
        border-radius: 6px;
    }

    .vehicle-capsule-card .vehicle-actions-trigger svg {
        width: 13px;
        height: 13px;
    }
}

@container board-card (max-width: 45px) {
    .vehicle-capsule-card .capsule-traffic-status-indicator {
        display: none;
    }
}

/* ── Vista previa de la cápsula estrecha ────────────────────────────────
   Cuando la tarjeta ha quedado reducida por las reglas de arriba, board-card-preview.js clona la
   cápsula al posar el ratón y la pinta fija encima con el ancho completo: esas mismas reglas se
   reevalúan sobre el clon y muestran la tarjeta entera. La original no cambia (la fila no se
   reacomoda) y el clon no recibe el puntero: el clic y el menú siguen siendo los de la original.
   La posición y el ancho los pone el módulo en línea; aquí va el aspecto de «tarjeta levantada»,
   con el borde del estado hover porque el clon nunca lo alcanza por sí mismo. */
.vehicle-capsule-preview {
    position: fixed;
    z-index: 60;
    margin: 0 !important;
    pointer-events: none;
    border-color: #0284c7 !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(2, 132, 199, 0.35) !important;
    transform-origin: top left;
    animation: vehicle-capsule-preview-in 0.14s ease-out;
}

@keyframes vehicle-capsule-preview-in {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

.vehicle-actions-trigger:focus-visible,
.capsule-duration-text:focus-visible {
    outline: 2px solid #d81b84;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .vehicle-capsule-card,
    .capsule-duration-text,
    .vehicle-actions-trigger,
    .capsule-phase-segment {
        transition-duration: 0.01ms !important;
    }

    .vehicle-capsule-preview {
        animation: none;
    }
}