/* ════════════════════════════════════════════════════════════════════════
   FLOTA · estilos propios de la página unificada de vehículos
   ------------------------------------------------------------------------
   Se apoya en vehiculos-doc.css (tarjetas, tablas, badges, modales) y solo
   añade lo nuevo: remolques, estado de taller, incidencias y talleres.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Pestaña con contador ── */
.tab-pill {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px; margin-left: 5px;
    border-radius: 9px; background: #dc2626; color: #fff;
    font-size: 0.68rem; font-weight: 800;
}

/* ── Barra lateral: remolques y unidades en taller ── */
.veh-avatar.avatar-remolque { background: #ede9fe; color: #6d28d9; }
.worker-item.unidad-taller { background: #fef2f2; }
.worker-item.unidad-taller .worker-name { color: #b91c1c; }
.mini-taller { color: #dc2626; font-size: 0.7rem; margin-left: 3px; }
.mini-taller-txt {
    display: inline-block; margin-left: 6px; font-size: 0.68rem; font-weight: 700;
    color: #b91c1c; background: #fee2e2; padding: 1px 6px; border-radius: 50px;
}

/* ── Tarjetas de unidad ── */
.veh-card-icon.remolque { background: #ede9fe; color: #6d28d9; }
.veh-card.card-en-taller { border-color: #fecaca; box-shadow: 0 0 0 1px #fecaca inset; }

.badge-origen {
    background: #e0f2fe; color: #0369a1; font-size: 0.58rem; padding: 2px 6px;
    border-radius: 4px; font-weight: 700; margin-left: 5px; vertical-align: middle;
}
.badge-tipo {
    display: inline-block; font-size: 0.56rem; font-weight: 800; letter-spacing: 0.03em;
    padding: 2px 6px; border-radius: 4px; margin-left: 5px; vertical-align: middle;
}
.badge-tipo-rem  { background: #ede9fe; color: #6d28d9; }
.badge-tipo-trac { background: #dbeafe; color: #1d4ed8; }
.bastidor-line {
    font-family: monospace; font-size: 0.7rem; color: #9ca3af; display: block; margin-top: 2px;
}
.chip-pedida {
    background: #d1fae5; color: #065f46; font-size: 0.6rem; font-weight: 700;
    padding: 1px 5px; border-radius: 50px; margin-left: 3px;
}

.tarjeta-taller {
    display: flex; align-items: center; gap: 0.6rem;
    margin: 0 0 0.6rem; padding: 0.55rem 0.7rem;
    background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px;
    color: #b91c1c; font-size: 0.78rem;
}
.tarjeta-taller > i { font-size: 1rem; flex-shrink: 0; }
.tarjeta-taller div { flex: 1; line-height: 1.3; min-width: 0; }
.tarjeta-taller strong { display: block; font-size: 0.72rem; letter-spacing: 0.02em; }
.tarjeta-taller span { color: #7f1d1d; font-size: 0.74rem; }
.btn-mini {
    border: 1px solid #fecaca; background: #fff; color: #b91c1c; border-radius: 6px;
    padding: 3px 9px; font-size: 0.72rem; font-weight: 700; cursor: pointer; flex-shrink: 0;
}
.btn-mini:hover { background: #fee2e2; }

.btn-edit-card.btn-averia { color: #dc2626; border-color: #fecaca; }
.btn-edit-card.btn-averia:hover { background: #fef2f2; }
.btn-edit-card.btn-borrar, .btn-row-action.btn-borrar { color: #ef4444; }
.btn-edit-card.btn-borrar:hover, .btn-row-action.btn-borrar:hover { background: #fef2f2; }

.mat-pill.pill-remolque { background: #ede9fe; color: #6d28d9; }

/* ── Tabla de incidencias ── */
.fila-inc-viva { background: #fffbeb; }
.mini-leve  { font-size: 0.68rem; color: #16a34a; margin-top: 2px; }
.mini-pend  { font-size: 0.68rem; color: #b45309; margin-top: 2px; font-weight: 600; }
.td-num     { text-align: right; }

/* ── Modal ancho para la incidencia ── */
.modal-box-xl { max-width: 900px; width: 96vw; }

/* Línea de estados */
.inc-ruta {
    display: flex; align-items: center; gap: 0; margin-bottom: 1.1rem;
    padding: 0.9rem 0.6rem; background: #f8fafc; border-radius: 10px;
}
.inc-paso { display: flex; flex-direction: column; align-items: center; gap: 5px; flex-shrink: 0; }
.inc-paso span { font-size: 0.68rem; color: #9ca3af; font-weight: 600; white-space: nowrap; }
.inc-paso-punto {
    width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; background: #e5e7eb; color: #9ca3af; font-size: 0.8rem;
}
.inc-paso.hecho .inc-paso-punto { background: #d1fae5; color: #047857; }
.inc-paso.hecho span { color: #4b5563; }
.inc-paso.actual .inc-paso-punto {
    background: #2563eb; color: #fff; box-shadow: 0 0 0 4px #dbeafe;
}
.inc-paso.actual span { color: #1d4ed8; font-weight: 800; }
.inc-linea { flex: 1; height: 3px; background: #e5e7eb; margin: 0 4px; margin-bottom: 18px; border-radius: 2px; }
.inc-linea.hecho { background: #6ee7b7; }

/* Ficha de datos */
.inc-ficha {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.5rem 1rem; margin-bottom: 0.8rem;
}
.inc-ficha > div { display: flex; flex-direction: column; gap: 1px; }
.inc-descripcion {
    background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 8px;
    padding: 0.7rem 0.85rem; font-size: 0.85rem; color: #374151; margin-bottom: 0.9rem;
}
.inc-descripcion i { color: #9ca3af; margin-right: 6px; }

/* Bloques */
.inc-bloque {
    border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; margin-bottom: 0.9rem;
}
.inc-bloque-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.6rem 0.85rem; background: #f8fafc; border-bottom: 1px solid #e5e7eb;
    font-size: 0.85rem; font-weight: 700; color: #374151;
}
.inc-bloque-head i { color: #6b7280; margin-right: 5px; }
.inc-total { font-size: 0.82rem; font-weight: 500; color: #6b7280; }
.inc-total strong { color: #111827; }

.inc-nueva-linea {
    display: grid; grid-template-columns: 1.1fr 1fr 2.4fr 0.7fr 0.9fr auto;
    gap: 0.4rem; padding: 0.6rem 0.7rem; background: #f8fafc; border-top: 1px solid #e5e7eb;
}
.inc-nueva-linea .form-ctrl { padding: 0.42rem 0.6rem; font-size: 0.82rem; }
.inc-nueva-linea .btn-save { padding: 0.42rem 0.8rem; }

/* Comprobaciones */
.comp-lista { display: flex; flex-direction: column; }
.comp-item {
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
    padding: 0.5rem 0.85rem; border-bottom: 1px solid #f1f5f9; font-size: 0.85rem;
}
.comp-item:last-child { border-bottom: none; }
.comp-concepto { flex: 1; min-width: 160px; color: #374151; }
.comp-item.comp-ok  { background: #f0fdf4; }
.comp-item.comp-ko  { background: #fef2f2; }
.comp-item.comp-na  { background: #f8fafc; }
.comp-botones { display: flex; gap: 3px; }
.comp-btn {
    border: 1px solid #e5e7eb; background: #fff; border-radius: 6px; cursor: pointer;
    padding: 3px 10px; font-size: 0.72rem; font-weight: 700; color: #6b7280;
    transition: all .12s;
}
.comp-btn:hover { border-color: #cbd5e1; }
.comp-btn-ok.sel { background: #10b981; border-color: #10b981; color: #fff; }
.comp-btn-ko.sel { background: #ef4444; border-color: #ef4444; color: #fff; }
.comp-btn-na.sel { background: #6b7280; border-color: #6b7280; color: #fff; }
.comp-obs-input {
    flex: 0 1 220px; min-width: 130px; border: 1px solid #e5e7eb; border-radius: 6px;
    padding: 4px 8px; font: inherit; font-size: 0.76rem; color: #374151; outline: none;
}
.comp-obs-input:focus { border-color: #3b82f6; }
.comp-item.comp-ko .comp-obs-input { border-color: #fca5a5; background: #fff; }
.comp-res { font-size: 0.75rem; font-weight: 700; }
.comp-res-ok { color: #047857; } .comp-res-ko { color: #b91c1c; }
.comp-res-na { color: #6b7280; } .comp-res-pendiente { color: #b45309; }
.comp-obs   { flex-basis: 100%; font-size: 0.75rem; color: #b91c1c; padding-left: 2px; }
.comp-quien { flex-basis: 100%; font-size: 0.7rem; color: #9ca3af; padding-left: 2px; }
.comp-ayuda {
    padding: 0.55rem 0.85rem; background: #eff6ff; border-top: 1px solid #dbeafe;
    font-size: 0.78rem; color: #1e40af;
}
.comp-ayuda i { margin-right: 5px; }

/* Trazabilidad */
.inc-timeline { padding: 0.8rem 0.9rem; display: flex; flex-direction: column; gap: 0.1rem; }
.inc-evento { display: flex; gap: 0.7rem; position: relative; padding-bottom: 0.85rem; }
.inc-evento:not(:last-child)::before {
    content: ''; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: #e5e7eb;
}
.inc-evento-punto {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 0.72rem; z-index: 1;
}
.inc-evento-cuerpo { flex: 1; padding-top: 2px; }
.inc-evento-titulo { font-size: 0.83rem; color: #374151; }
.inc-evento-txt    { font-size: 0.8rem; color: #6b7280; margin-top: 1px; }
.inc-evento-meta   { font-size: 0.7rem; color: #9ca3af; margin-top: 2px; }

/* ── Avisos y errores en modales ── */
.flota-error {
    background: #fee2e2; border: 1px solid #fecaca; color: #b91c1c;
    border-radius: 8px; padding: 0.6rem 0.85rem; font-size: 0.83rem; margin-bottom: 0.6rem;
}
.flota-aviso {
    background: #eff6ff; border: 1px solid #dbeafe; color: #1e40af;
    border-radius: 8px; padding: 0.6rem 0.85rem; font-size: 0.8rem; line-height: 1.45;
}
.flota-aviso i { margin-right: 5px; }
.flota-aviso code {
    background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 4px; font-size: 0.76rem;
}

/* ── Aviso flotante ── */
.flota-toast {
    position: fixed; left: 50%; bottom: 92px; transform: translate(-50%, 20px);
    background: #111827; color: #fff; padding: 0.7rem 1.1rem; border-radius: 10px;
    font-size: 0.86rem; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.25);
    opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
    z-index: 4000; max-width: 90vw; text-align: center;
}
.flota-toast.visible { opacity: 1; transform: translate(-50%, 0); }
.flota-toast.ok    { background: #047857; }
.flota-toast.error { background: #b91c1c; }

/* Con una ventana abierta, la página de detrás queda quieta: si pudiera
   moverse, en el móvil el gesto de scroll se lo llevaría ella y la ventana
   parecería congelada. La clase la pone y quita flota.js. */
html.modal-abierta, body.modal-abierta { overflow: hidden !important; }

/* El cuerpo de la ventana es el que hace scroll, también con el dedo */
.modal-backdrop .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;   /* al llegar al final, el gesto no salta a la página */
}

/* Y sus secciones NUNCA se encogen. El cuerpo es un flexbox en columna:
   cuando el contenido no cabía, encogía los bloques (que llevan
   overflow:hidden) hasta dejarlos en 2px — la línea de estados, las
   reparaciones y las comprobaciones desaparecían aplastadas y no había
   nada hacia donde bajar. Con esto conservan su altura y el scroll lo
   hace el cuerpo, que es lo suyo. */
.modal-backdrop .modal-body > * { flex-shrink: 0; }

/* ── Tablet ── */
@media (max-width: 820px) {
    .inc-nueva-linea { grid-template-columns: 1fr 1fr; }
    .inc-nueva-linea .form-ctrl:nth-child(3) { grid-column: 1 / -1; }
    .inc-nueva-linea .btn-save { grid-column: 1 / -1; }
    .inc-ruta { overflow-x: auto; }
    .inc-paso span { font-size: 0.62rem; }
    .modal-box-xl { width: 96vw; max-height: 94vh; }
}

/* ── Móvil ── */
@media (max-width: 700px) {
    /* Las ventanas de incidencia y documentación ocupan toda la pantalla:
       en un móvil, una ventana flotante de 900px no cabe de ninguna forma.
       El desenfoque del fondo se quita: en móviles modestos ese efecto
       arrastra tanto que el scroll parece atascado. */
    .modal-backdrop {
        padding: 0; align-items: stretch;
        backdrop-filter: none; -webkit-backdrop-filter: none;
    }
    .modal-box-wide, .modal-box-xl {
        max-width: 100%; width: 100%;
        height: 100vh;  max-height: 100vh;    /* respaldo para navegadores viejos */
        height: 100dvh; max-height: 100dvh;   /* altura visible real en el móvil */
        border-radius: 0;
    }
    .modal-body { padding: 0.9rem; }
    .modal-head { border-radius: 0; }

    /* Los campos a 16px: por debajo, el móvil hace zoom solo al tocarlos */
    .modal-body .form-ctrl, .inc-nueva-linea .form-ctrl, .comp-obs-input { font-size: 16px; }

    /* Pie de la ventana: botones a lo ancho, fáciles de pulsar */
    .modal-foot { flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem 0.9rem; }
    .modal-foot .form-ctrl { flex: 1 1 100%; max-width: 100% !important; }
    .modal-foot .btn-save, .modal-foot .btn-cancel, .modal-foot .btn-del {
        flex: 1 1 45%; padding: 0.7rem 0.5rem; text-align: center; justify-content: center;
    }

    /* Línea de estados compacta y con scroll si hace falta */
    .inc-ruta { padding: 0.6rem 0.3rem; }
    .inc-paso-punto { width: 26px; height: 26px; font-size: 0.66rem; }
    .inc-paso span { font-size: 0.56rem; }
    .inc-linea { margin-bottom: 14px; }

    /* Ficha de la incidencia en una sola columna */
    .inc-ficha { grid-template-columns: 1fr 1fr; gap: 0.45rem 0.7rem; }

    /* Añadir rotura/reparación: un campo por fila */
    .inc-nueva-linea { grid-template-columns: 1fr; }
    .inc-nueva-linea .form-ctrl:nth-child(3),
    .inc-nueva-linea .btn-save { grid-column: auto; }
    .inc-nueva-linea .btn-save { padding: 0.65rem; }

    /* Comprobaciones: botones grandes para el dedo, observaciones a lo ancho */
    .comp-item { padding: 0.65rem 0.75rem; gap: 0.5rem; }
    .comp-concepto { flex-basis: 100%; min-width: 0; font-weight: 600; }
    .comp-obs-input { flex: 1 1 100%; min-width: 0; padding: 8px 10px; }
    .comp-botones { display: flex; width: 100%; gap: 6px; }
    .comp-btn { flex: 1; padding: 9px 4px; font-size: 0.82rem; }

    /* Trazabilidad más pegada al borde */
    .inc-timeline { padding: 0.6rem 0.5rem; }
}

@media (max-width: 420px) {
    .inc-ficha { grid-template-columns: 1fr; }
}

/* ─── Ayuda debajo de un campo de la ficha ───
   La usa el campo de códigos permitidos del remolque, donde hace falta
   explicar que dejarlo vacío NO es lo mismo que ponerle una lista. */
.form-ayuda {
    font-size: 0.74rem; color: #6b7280; line-height: 1.4;
    margin-top: 0.3rem;
}
#uCodigos { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.82rem; }

/* ─── Con qué remolques puede un vehículo ───
   Se ve de un vistazo lo que carga la pareja, que es lo que de verdad
   importa al planificar: un camión de 12 t con un remolque de 12 t son 24. */
.remolques-lista { display: flex; flex-direction: column; gap: 4px; margin-top: 0.35rem; }
.remolque-item {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 9px; border: 1px solid #e5e7eb; border-radius: 8px;
    background: #fafafa; cursor: pointer; font-size: 0.82rem;
}
.remolque-item:hover { background: #f1f5f9; }
.remolque-item.marcado { background: #eff6ff; border-color: #93c5fd; }
.remolque-chapa { font-weight: 700; color: #1e293b; font-family: ui-monospace, Consolas, monospace; }
.remolque-desc { color: #64748b; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.remolque-suma { color: #2563eb; font-weight: 600; white-space: nowrap; font-size: 0.76rem; }