/* ═══════════════════════════════════════════════════════════════
   TECPORT — Flota (fleet.css). Estilos del panel de Flota (fleet.js).
   Reutiliza el cromado .adm/.btn-adm de console.css y las .pm-kit / .tpm de parts.css;
   aquí solo lo propio del listado de unidades (admin) y la vista del cliente.
   ═══════════════════════════════════════════════════════════════ */

/* `--fleet-pad` existe para que la barra fija de abajo sepa cuánto aire hay que descontar. Con
   el valor escrito dos veces, cambiar uno deja un hueco por el que se ven pasar las filas. */
#tp-fleet .adm__body { --fleet-pad: 18px; --fleet-gut: 22px;
  padding: var(--fleet-pad) var(--fleet-gut); overflow: auto; }

.fleet { display: flex; flex-direction: column; gap: 16px; max-width: 1100px; margin: 0 auto; }

/* ── Barra de herramientas (admin) ──
   SE QUEDA ARRIBA. Con doscientas máquinas, el buscador y los filtros que las acotan tienen que
   seguir a mano después de bajar veinte filas; si no, filtrar obliga a subir del todo, filtrar y
   volver a bajar. Los márgenes negativos comen el padding del cuerpo para que ninguna fila asome
   por los lados al pasar por debajo. */
.fleet__toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  position: sticky; z-index: 3;
  margin: calc(var(--fleet-pad) * -1) calc(var(--fleet-gut) * -1) 0;
  padding: 14px var(--fleet-gut) 12px;
  background: var(--surface); border-bottom: 1px solid var(--border); }
/* `top` ancla la caja de MÁRGENES, no la del borde: con `top: 0` y el margen negativo que come
   el aire del cuerpo, la barra se quedaba 18px más abajo y por esa franja se veían desfilar las
   filas. Descontando el mismo margen, el borde superior queda a ras del panel. */
.fleet__toolbar { top: calc(var(--fleet-pad) * -1); }
/* Los botones de la barra, como un solo bloque pegado a la derecha: al partirse la barra en dos
   líneas se van los cuatro juntos, y siguen donde la vista los busca. */
.fleet__acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.fleet__pick { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); }
.fleet__pick select { padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-1); font: inherit; }

/* ── Tabla de unidades (admin) ──
   `border-collapse: separate` y NO `collapse`: con los bordes fusionados, el navegador los pinta
   fuera de la celda y la línea inferior del encabezado FIJO desaparece al desplazar, dejando los
   títulos flotando sobre las filas. Separados, cada celda lleva la suya y viaja con ella. Por lo
   mismo se fue el `overflow: hidden` que redondeaba las esquinas: recorta el `position: sticky`
   de dentro, así que las esquinas se redondean ahora celda a celda. */
/* Desde que las columnas se reordenan y se ensanchan, la tabla puede ser más ancha que el panel.
   El scroll lateral es SUYO y no de la página: el listado se mira de arriba abajo, y mover la
   ventana entera para leer la última columna arrastraría también los filtros fuera de la vista. */
.fleet-tbl-wrap { overflow-x: auto; }
/* `table-layout: fixed` es lo que hace que el ancho del <col> mande. Sin él el navegador reparte
   por contenido y tirar del borde no cambia nada. */
.fleet-tbl { width: 100%; min-width: max-content; table-layout: fixed; border-collapse: separate;
  border-spacing: 0; font-size: 13px; border: 1px solid var(--border); border-radius: 12px; }
/* `relative` ancla el handle de ancho al borde derecho del encabezado (ver table.css). */
.fleet-tbl th { position: relative; text-align: left; padding: 9px 14px; background: var(--surface-2); color: var(--text-3); font-weight: 600; font-size: 11.5px; border-bottom: 1px solid var(--border); user-select: none; white-space: nowrap; }
/* Los encabezados se quedan justo DEBAJO de la barra de filtros: `--fleet-stick` es su alto, que
   lo mide fleet.js porque la barra se parte en dos o tres líneas según el ancho. Se le descuenta
   el mismo `--fleet-pad` que a la barra, y por el mismo motivo: el desplazamiento se cuenta desde
   el borde interior del panel, no desde el exterior. */
.fleet-tbl thead th { position: sticky; z-index: 2;
  top: calc(var(--fleet-stick, 0px) - var(--fleet-pad, 0px)); }
/* …salvo la del LISTADO DE MÁQUINAS, que desde que tiene scroll propio ya no se pega al cuerpo
   de la sección sino a su propia caja: `overflow-x: auto` convierte a `.fleet-tbl-wrap` en el
   marco contra el que se calcula el `top`, y el desplazamiento pensado para el otro marco la
   empujaba HACIA ABAJO — la cabecera aparecía a media tabla, tapando las primeras filas, con un
   hueco vacío arriba. Contra su propia caja el desplazamiento es cero. */
.fleet-tbl-wrap .fleet-tbl thead th { top: 0; }
.fleet-tbl thead th:first-child { border-top-left-radius: 11px; }
.fleet-tbl thead th:last-child { border-top-right-radius: 11px; }
/* Con el ancho fijado a mano, un texto largo tiene que recortarse en vez de ensanchar la columna
   que su dueño acaba de ajustar. Los datos de dos líneas (familia bajo el modelo) se salvan con
   `.fleet-cell--wrap`, que devuelve el alto natural a esa celda. */
.fleet-tbl td { padding: 9px 14px; border-bottom: 1px solid var(--border); vertical-align: middle;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fleet-tbl td.fleet-cell--wrap { white-space: normal; }
.fleet-tbl tbody tr:last-child td { border-bottom: none; }
.fleet-tbl tbody tr:last-child td:first-child { border-bottom-left-radius: 11px; }
.fleet-tbl tbody tr:last-child td:last-child { border-bottom-right-radius: 11px; }

/* ── El listado de máquinas en un monitor de escritorio ──────────────────────
   Una consola de sección se ciñe a 1100px (console.css) porque casi todas son texto y una línea
   de 2000px no se lee. El listado de la flota NO es texto: son once columnas, y con ese tope la
   tabla se sale por la derecha y hay que arrastrarla de lado con medio monitor vacío al costado.
   Aquí el ancho lo pone la pantalla.

   Y de paso deja de ser una página larga para ser un PANEL: los filtros y la cabecera se quedan
   quietos porque no desplazan —desplaza la tabla, dentro de su caja—, en vez de fingirlo con
   `sticky` y un alto medido a mano. El alto mínimo evita entrar en esto en un teléfono tumbado,
   donde el panel dejaría dos filas visibles. */
@media (min-width: 900px) and (min-height: 600px) {
    #tp-fleet.adm--page .adm__body:has(> .fleet--tabla) {
        max-width: none; flex: 1; min-height: 0;
        display: flex; flex-direction: column;
        overflow: hidden;                      /* el que desplaza ahora es el listado */
    }
    /* El `margin: 0 auto` que centra las vistas de lectura se QUITA aquí, y no es cosmético: un
       hijo con márgenes automáticos no se estira al ancho de su padre, así que el navegador tiene
       que medirlo por su contenido — y midiendo una tabla al aire, su `width: 100%` se resuelve
       contra un ancho infinito y sale un ancho de seis cifras que se lleva por delante la barra
       de filtros. Estirado, el ancho lo pone el panel y la tabla se acomoda dentro. */
    #tp-fleet .fleet--tabla { max-width: none; margin: 0; flex: 1; min-height: 0; }
    /* `min-height: 0` en cada eslabón: sin él un hijo flexible no se deja encoger por debajo de
       su contenido y la tabla, en vez de desplazar por dentro, empuja el panel hacia abajo. */
    #tp-fleet .fleet--tabla .fleet__list { flex: 1; min-height: 0; display: flex; flex-direction: column; }
    #tp-fleet .fleet--tabla .fleet-tbl-wrap { flex: 1; min-height: 0; overflow: auto; }
    /* La barra de filtros ya no tiene de qué escaparse. */
    #tp-fleet .fleet--tabla .fleet__toolbar { position: static; }
    /* El desplegable de columnas cuelga de esa barra, y el cuerpo ya no desplaza: en una ventana
       baja (un portátil, media pantalla) se quedaría cortado por abajo sin manera de llegar a
       «Restablecer». Con tope y desplazamiento propio siempre se alcanza la última fila. */
    #tp-fleet .fleet--tabla .pm-colmenu__panel { max-height: calc(100vh - 200px); overflow-y: auto; }
}

.fleet-fam { display: block; color: var(--text-3); font-size: 11px; }
/* Encabezado de grupo dentro del tbody: subdivide el listado de plantillas por marca sin sacar
   una tabla por marca. No es clicable ni tiene acciones — solo rotula el bloque que sigue. */
.fleet-tbl tbody tr.fleet-grp td { background: var(--surface-2); color: var(--text-2);
  font-weight: 700; font-size: 11.5px; padding: 7px 14px; }
.fleet-actions { text-align: right; white-space: nowrap; }

/* Botón de icono compacto (editar/borrar). */
.pm-ic { background: transparent; border: 1px solid transparent; border-radius: 7px; padding: 5px; cursor: pointer; color: var(--text-2); line-height: 0; }
.pm-ic:hover { background: var(--surface-2); color: var(--text-1); }
.pm-ic--del:hover { color: #d6453d; }

/* ── Ventana flotante de alta/edición de unidad ── */
.fu-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; font-size: 12.5px; color: var(--text-2); }
.fu-field input, .fu-field select { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-1); font: inherit; }
/* Rejilla de 2 columnas del modal (Modelo|Versión, Alias|Horómetro); --wide ocupa la fila. */
.fu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.fu-grid .fu-field--wide { grid-column: 1 / -1; }
.fu-req { color: #d6453d; }
/* Aclaración bajo un campo, para los que necesitan distinguirse de su vecino (Cliente vs
   Empresa) o avisar de un efecto en otra pestaña (puesta en marcha → hito de trazabilidad). */
.fu-hint { margin-top: -1px; font-size: 11px; line-height: 1.35; color: var(--text-3); }

/* Los seriales de componentes ya NO se capturan en este modal: viven en el panel de
   pendientes de la ficha técnica (machine_card.js / machine_card.css). Las reglas .fu-cs*
   y .fu-combo* que había aquí se fueron con él. */

/* Aviso en el listado: a la unidad le faltan seriales obligatorios del catálogo. Derivado
   (se calcula en cada hidratación), NO es un estado del catálogo de trazabilidad. */
.fleet-pend { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn-bd); }

/* ── El apodo en las tablas ──
   El nombre con el que la empresa que la tiene llama a la máquina. Se pinta con peso propio
   porque es el que se dice por teléfono y el que lee el técnico en su visita; y cuando falta se
   DICE, en lugar de dejar un guion como cualquier otro campo vacío, porque es un dato pendiente
   de poner y nadie pone lo que no sabe que existe. */
.fleet-alias { font-weight: 700; color: var(--cite-tx-strong); }
.fleet-alias-todo { display: inline-flex; align-items: center; padding: 2px 8px;
  border: 1px dashed var(--accent); border-radius: 999px;
  font-size: 11px; font-weight: 600; white-space: nowrap; color: var(--accent); }
#tp-fleet .fleet-tbl tbody tr:hover .fleet-alias-todo { background: var(--warn-bg); }
/* Variante pequeña del aviso de la fila, para colgarla de un valor ya escrito. */
.fleet-pend--sm { font-size: 10.5px; padding: 1px 7px; }

/* ── Ficha flotante de una unidad (click en la fila) ── */
#tp-fleet .fleet-tbl tbody tr { cursor: pointer; }
#tp-fleet .fleet-tbl tbody tr:hover td { background: var(--surface-2); }
.fud-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; margin-bottom: 4px; }
.fud-item { min-width: 0; }
.fud-item--wide { grid-column: 1 / -1; }
.fud-lbl { display: block; font-size: 11px; color: var(--text-3); margin-bottom: 2px; }
.fud-val { font-size: 13px; font-weight: 600; color: var(--text-1); overflow-wrap: anywhere; }
.fud-cs { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.fud-cs__head { font-size: 12.5px; font-weight: 700; color: var(--text-1); margin-bottom: 8px; }
.fud-cs table { width: 100%; border-collapse: collapse; font-size: 12.5px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.fud-cs th { text-align: left; padding: 7px 11px; background: var(--surface-2); color: var(--text-3); font-weight: 600; font-size: 11px; border-bottom: 1px solid var(--border); }
.fud-cs td { padding: 7px 11px; border-bottom: 1px solid var(--border); }
.fud-cs tr:last-child td { border-bottom: none; }
.fud-actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; justify-content: flex-end; flex-wrap: wrap; }

/* ── Toolbar de filtros de la vista global ── */
/* El tope de ancho es para que no se estire sola: con los botones en su propia línea, el
   buscador se quedaba con media barra vacía por delante y parecía otro campo distinto. */
.fleet__search { flex: 1 1 220px; min-width: 180px; max-width: 420px; padding: 7px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-1); font: inherit; font-size: 12.5px; }
.fleet__count { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }

/* ── Vista del cliente (read-only) ── */
.fleet__intro { border-bottom: 1px solid var(--border); padding-bottom: 12px; }
.fleet__h1 { font-size: 19px; font-weight: 800; margin: 0; display: flex; align-items: center; gap: 8px; }
.fleet__sub { font-size: 12.5px; color: var(--text-3); margin: 6px 0 0; }

.fleet-model { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 16px 18px; }
.fleet-model__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fleet-model__name { font-size: 16px; font-weight: 700; margin: 0; }
.fleet-model__code { font-size: 12px; color: var(--text-3); font-weight: 600; }
.fleet-model__fam { font-size: 11.5px; color: var(--text-3); }
.fleet-model__count { margin-left: auto; font-size: 11.5px; color: var(--text-3); }
.fleet-model__units { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0; }
.fleet-chip { font-size: 11.5px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text-2); }
.fleet-model__kits, .fleet-model__maint { margin-top: 14px; }
.fleet-model__sub { font-size: 13.5px; font-weight: 700; color: var(--text-1); margin: 0 0 10px; }

/* ── Vista del cliente: listado → ficha de unidad ── */
.fleet-tbl--client tbody tr .fleet-open { color: var(--accent, #2f6df6); font-size: 12px; font-weight: 600; white-space: nowrap; }

.fleet-unit { gap: 18px; }
.fleet-unit__bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: 12px; }
.fleet-unit__title { font-size: 18px; font-weight: 800; margin: 0; }
.fleet-unit__serial { color: var(--text-2); font-weight: 600; }
.fleet-unit__sec { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 16px 18px; }
/* Kits colapsados: quitar el margen superior del primer <details> dentro de la sección. */
.fleet-unit__sec .pm-kit:first-of-type { margin-top: 0; }

@media (max-width: 720px) {
    #tp-fleet .adm__body { --fleet-pad: 14px; --fleet-gut: 14px; }
    .fleet__toolbar { padding-top: 12px; padding-bottom: 10px; }
    /* En una pantalla estrecha los filtros se parten en tres líneas y, fijos, se comen un tercio
       del alto. Aquí se dejan ir con el scroll y se quedan solo los ENCABEZADOS de las tablas que
       desplazan con el cuerpo —hoy, la del cliente—, que es la mitad que de verdad hace falta:
       saber qué columna se está leyendo. El listado de máquinas ya no es una de ellas: su tabla
       tiene caja propia y en el móvil, sin alto que la acote, la cabecera viaja con las filas.
       Congelarla aquí obligaría a encerrar el listado en un panel de alto fijo, y en un teléfono
       eso deja tres filas a la vista. `top` se escribe entero y no con `--fleet-stick` porque esa
       variable la pone fleet.js en línea y ganaría a esta regla. */
    .fleet__toolbar { position: static; margin-top: 0; }
    .fleet-tbl thead th { top: calc(var(--fleet-pad) * -1); }
    .fleet-tbl { font-size: 12px; }
    .fleet-tbl th, .fleet-tbl td { padding: 7px 9px; }
    .fleet-unit__bar { gap: 8px; }
    .fleet-unit__title { font-size: 15px; }
}

/* Pestaña «Configuración» de una máquina: resumen de capítulos. El detalle y la edición viven
   en el configurador (overlay compartido con el Manual de Partes), no aquí. */
.fu-cfg__head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-wrap: wrap; padding-bottom: 10px; margin-bottom: 6px;
    border-bottom: 1px solid var(--border); font: 500 13px/1.4 var(--ui); color: var(--text-2); }
.fu-cfg__list { display: flex; flex-direction: column; }
.fu-cfg__row { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(140px, 1.3fr) auto;
    align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border);
    font: 500 13px/1.4 var(--ui); }
.fu-cfg__row:last-child { border-bottom: 0; }
.fu-cfg__name { color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; }
.fu-cfg__ver { color: var(--text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; }
/* Lo propio de la máquina se destaca: es lo que la diferencia de sus hermanas de serie. */
.fu-cfg__own { justify-self: end; padding: 1px 8px; border-radius: 999px; font-size: 11px;
    font-weight: 600; background: var(--primary); color: var(--primary-tx); }
.fu-cfg__base { justify-self: end; color: var(--text-3); font-size: 11px; }

/* Pestaña «Estadíos»: los tres momentos de configuración de la máquina. El estado de cada uno
   se lee de un vistazo por el color del borde izquierdo, que es lo que se busca al entrar. */
.fu-stages { display: flex; flex-direction: column; gap: 12px; }
.fu-stage { padding: 12px 14px; border: 1px solid var(--border); border-left-width: 4px;
    border-radius: var(--r-md); background: var(--surface-2); }
.fu-stage--pendiente { opacity: .72; border-left-color: var(--border-2); }
.fu-stage--abierta { border-left-color: var(--warn); }
.fu-stage--sellada { border-left-color: var(--ok); }
.fu-stage__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fu-stage__n { display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 999px; background: var(--surface-3);
    color: var(--text-3); font: 700 11px/1 var(--ui); }
.fu-stage__name { font: 600 14px/1.3 var(--ui); color: var(--text); }
.fu-stage__state { margin-left: auto; color: var(--text-3); font: 500 12px/1.3 var(--ui);
    white-space: nowrap; }
.fu-stage__desc { margin: 6px 0 0; color: var(--text-2); font: 500 12.5px/1.45 var(--ui); }
.fu-stage__count { margin: 4px 0 0; color: var(--text-3); font: 500 12px/1.45 var(--ui); }
.fu-stage__notes { margin: 6px 0 0; color: var(--text-2); font: 500 12.5px/1.45 var(--ui);
    font-style: italic; }
.fu-stage__acts { margin-top: 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fu-stage__hint { color: var(--text-3); font: 500 12px/1.4 var(--ui); }

/* La pestaña de configuración es de CONSULTA: los cambios se hacen desde el estadío abierto,
   que es donde el negocio los decide y donde quedan atribuidos. */
.fu-cfg__note { margin: 14px 0 0; padding: 10px 12px; border-radius: var(--r-md);
    background: var(--surface-2); color: var(--text-2); font: 500 12.5px/1.5 var(--ui); }

/* ── Transferencia de una máquina ──
   El diálogo dice arriba CÓMO ESTÁ HOY y abajo a dónde va. En un desplegable de treinta empresas
   la de al lado está a un píxel de la correcta, y una transferencia equivocada la descubre el
   técnico que se presenta en el patio que no era. */
.fleet-tr__machine { margin: 0 0 2px; font: 700 14px/1.3 var(--ui); color: var(--text); }
.fleet-tr__now { margin: 0 0 14px; padding-bottom: 12px; font-size: 12.5px; color: var(--text-3);
  border-bottom: 1px solid var(--hairline); }
.fleet-tr__now b { color: var(--text-2); }
.fleet-tr__sum { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--hairline);
  font: 600 13px/1.4 var(--ui); color: var(--text); text-align: center; }
.fleet-tr__sum b { color: var(--primary); margin: 0 4px; }
.fleet-tr__same { color: var(--text-3); font-weight: 500; }

/* Sin dealer asignado no es un dato que falte: es que la atiende la matriz. Se dice con palabra,
   atenuada, y no con un guion — un guion se lee como «esto está sin rellenar». */
.fleet-dealer-own { color: var(--text-3); font-style: italic; }

/* ── Historial de transferencias (ficha de la máquina) ── */
.fleet-hist { display: flex; flex-direction: column; gap: 10px; }
.fleet-hist__row { display: flex; gap: 12px; align-items: baseline; padding: 10px 12px;
  background: var(--surface-2); border-radius: var(--r-md); font-size: 13px; }
.fleet-hist__date { flex: 0 0 96px; color: var(--text-3); font-size: 12px;
  font-variant-numeric: tabular-nums; }
.fleet-hist__body { flex: 1 1 auto; min-width: 0; }
.fleet-hist__move b { color: var(--text); }
.fleet-hist__arrow { color: var(--primary); margin: 0 5px; }
.fleet-hist__meta { display: block; margin-top: 3px; color: var(--text-3); font-size: 11.5px; }
.fleet-hist__kind { display: inline-block; padding: 1px 7px; border-radius: 999px;
  background: var(--surface-3); color: var(--text-2); font: 700 10.5px/1.6 var(--ui);
  text-transform: uppercase; letter-spacing: .3px; }