/* ═══════════════════════════════════════════════════════════════
   TECPORT — Machine Card (machine_card.css)

   Estilos de la PÁGINA de máquina (fleet_unit.js) y de la FICHA de configuración
   (machine_card.js). Namespace único `.mc-*` para no chocar con `.fleet*`/`.fu-*`
   (fleet.css), `.pm-*`/`.pma-*` (parts.css) ni `.adm*` (console.css).

   Reglas del proyecto que se respetan aquí:
     · Colores, radios, tipografías y sombras SIEMPRE desde tokens.css. Sin hex crudos,
       salvo los dos filtros de imagen del visor (que no son color de interfaz).
     · Prohibido fijar z-index en línea: solo --z-view / --z-dialog / --z-float.
     · Claro y oscuro se resuelven por token; solo se afinan a mano los tintes que se
       calculan con color-mix sobre el color propio de cada estado (--c).
   ═══════════════════════════════════════════════════════════════ */

#tp-fleet-unit .adm__body { padding: 0; overflow: auto; background: var(--app); }

.mc { display: flex; flex-direction: column; min-height: 100%; }
.mc__inner { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 22px 40px; }

/* ═══════════════ Cabecera de la máquina (pegada arriba) ═══════════════ */

.mc-hero {
    position: sticky; top: 0; z-index: 3;
    background: var(--app);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 0 var(--hairline);
}
.mc-hero__inner { width: 100%; max-width: 1180px; margin: 0 auto; padding: 14px 22px 0; }

.mc-hero__top { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.mc-hero__back {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; border: none; padding: 4px 8px 4px 0; cursor: pointer;
    color: var(--text-3); font: 600 12.5px/1 var(--ui); border-radius: var(--r-sm);
}
.mc-hero__back:hover { color: var(--text); }

.mc-hero__idwrap { min-width: 0; flex: 1 1 320px; }
.mc-hero__title {
    margin: 2px 0 0; font: 800 22px/1.15 var(--ui); color: var(--heading);
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
/* El n° de serie es el dato que más se coteja contra una placa: monoespaciado para que
   no se confundan 0/O ni 1/l/I al leerlo en pantalla junto a la máquina. */
.mc-hero__serial {
    font: 700 15px/1.2 var(--mono); color: var(--accent);
    letter-spacing: .02em; overflow-wrap: anywhere;
}
.mc-hero__meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 9px 0 0; }
.mc-hero__acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }

/* ── Chips de identidad y de estado ── */
.mc-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 999px;
    font: 600 11.5px/1.5 var(--ui); white-space: nowrap;
    background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border);
}
.mc-chip__k { color: var(--text-faint); font-weight: 500; }
/* `.mc-chip__none` (el hueco en cursiva gris) se fue: era el apodo sin poner, y en gris entre
   ocho chips grises no lo veía nadie. Lo hace ahora `.mc-chip--todo`, más abajo. */
.mc-chip--ghost { background: transparent; }
.mc-chip--ext { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-bd); }
/* Chip cuyo VALOR ya es un aviso por sí mismo (garantía vencida). Mismo tratamiento que --ext:
   no es un error, es un dato que conviene que salte a la vista. */
.mc-chip--warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-bd); }
.mc-chip--warn .mc-chip__k { color: inherit; opacity: .7; }
/* Cuando el aviso tiene arreglo, el chip ES el arreglo: como <button> abre el diálogo que ata el
   cliente con su empresa del portal. Un aviso que solo avisa se queda años sin atender. */
button.mc-chip--warn { cursor: pointer; }
button.mc-chip--warn:hover { border-color: var(--warn); }

/* ── El apodo de una empresa («La llamamos …») ──
   No es un dato más de la cabecera: es el ÚNICO que se le pide a quien mira, y es el nombre con
   el que la máquina aparece en las pantallas de servicio. Como chip gris entre otros ocho no lo
   veía nadie (y sin apodo, el selector del técnico enseña un n° de serie que no le dice nada).
   Con nombre va marcado en el color de acento; sin nombre, dibujado como un hueco por rellenar
   —borde discontinuo y un «+»—, que es la forma en que una interfaz pide algo sin regañar. */
.mc-chip--name { background: var(--cite-bg); border-color: var(--cite-bd); color: var(--cite-tx-strong); }
.mc-chip--name .mc-chip__k { color: var(--cite-tx); }
button.mc-chip--name { cursor: pointer; font-family: var(--ui); }
button.mc-chip--name:hover { background: var(--cite-hover); border-color: var(--link); }
.mc-chip--todo { background: transparent; border-style: dashed; border-color: var(--accent);
  color: var(--accent); }
.mc-chip--todo .mc-chip__k { color: var(--accent); opacity: .75; }
button.mc-chip--todo:hover { background: var(--warn-bg); border-style: solid; }
.mc-chip--name svg, .mc-chip--todo svg { opacity: .8; }

/* Estado de trazabilidad: el color lo aporta el catálogo por fila (--c). */
.mc-status {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 11px 3px 8px; border-radius: 999px;
    font: 700 11.5px/1.6 var(--ui); white-space: nowrap;
    color: var(--c, var(--text-2));
    background: color-mix(in srgb, var(--c, var(--text-3)) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--c, var(--text-3)) 34%, transparent);
}
.mc-status::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: var(--c, var(--text-3)); flex: none;
}
.mc-status--none { color: var(--text-faint); background: var(--surface-2); border-color: var(--border); }
.mc-status--none::before { background: var(--text-faint); }
/* En oscuro los tintes al 12% desaparecen y el texto saturado vibra: se sube el fondo
   y se mezcla el texto con blanco para recuperar contraste sin tocar el token de origen. */
[data-theme="dark"] .mc-status {
    color: color-mix(in srgb, var(--c, var(--text-2)) 68%, #ffffff);
    background: color-mix(in srgb, var(--c, var(--text-3)) 24%, transparent);
    border-color: color-mix(in srgb, var(--c, var(--text-3)) 45%, transparent);
}

/* ── Pestañas ── */
.mc-tabs { display: flex; gap: 4px; margin: 14px 0 0; overflow-x: auto; scrollbar-width: none; }
.mc-tabs::-webkit-scrollbar { display: none; }
.mc-tab {
    position: relative; padding: 9px 14px 11px; background: transparent; border: none;
    cursor: pointer; white-space: nowrap; border-radius: var(--r-sm) var(--r-sm) 0 0;
    font: 600 13px/1 var(--ui); color: var(--text-3);
}
.mc-tab:hover { color: var(--text); background: var(--surface-2); }
.mc-tab.is-active { color: var(--heading); font-weight: 800; }
.mc-tab.is-active::after {
    content: ""; position: absolute; left: 10px; right: 10px; bottom: 0;
    height: 2.5px; border-radius: 2px 2px 0 0; background: var(--accent);
}
.mc-tab__n {
    display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
    background: var(--surface-3); color: var(--text-3); font: 700 10.5px/1.5 var(--ui);
}
.mc-tab.is-active .mc-tab__n { background: var(--btn-primary-bg); color: var(--primary); }

/* ═══════════════ Ficha: barra de herramientas ═══════════════ */

.mc-bar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 18px 0 14px;
}
.mc-bar__count { font: 500 12px/1 var(--ui); color: var(--text-3); }
.mc-bar__sp { flex: 1; }
.mc-search {
    flex: 0 1 260px; min-width: 160px; padding: 7px 11px;
    border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--surface); color: var(--text); font: inherit; font-size: 12.5px;
}
.mc-search:focus-visible { outline: 2px solid var(--btn-primary-bd); outline-offset: 1px; }

/* ═══════════════ Ficha: seriales obligatorios pendientes ═══════════════
   Aviso ámbar sobre la barra: las partes `requires_serial` del modelo+versión que aún no tienen
   n° de serie. No bloquea nada (el alta ya no lo hace) — reclama. */

.mc-pend {
    margin-top: 18px; padding: 14px 16px;
    border: 1px solid var(--warn-bd); border-radius: var(--r-lg); background: var(--warn-bg);
}
.mc-pend__head {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    font: 700 13px/1.3 var(--ui); color: var(--text);
}
.mc-pend__head svg { color: var(--warn); flex: none; }
.mc-pend__n {
    padding: 1px 8px; border-radius: 999px; font: 700 11px/1.6 var(--ui);
    color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn-bd);
}
.mc-pend__hint { flex: 1 1 100%; font: 400 11.5px/1.5 var(--ui); color: var(--text-3); }
.mc-pend__rows { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.mc-pend-row {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) auto;
    gap: 10px; align-items: center;
}
.mc-pend-row__part {
    min-width: 0; font: 600 12px/1.35 var(--ui); color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mc-pend-row__desc {
    display: block; font-weight: 400; font-size: 11px; color: var(--text-3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mc-pend-row input {
    width: 100%; padding: 7px 10px; border: 1px solid var(--border);
    border-radius: var(--r-sm); background: var(--surface); color: var(--text);
    font: inherit; font-size: 12.5px;
}
.mc-pend-row input:focus-visible { outline: 2px solid var(--btn-primary-bd); outline-offset: 1px; }
.mc-pend-row__ro { font: 500 12px/1.35 var(--ui); color: var(--text-3); }
.mc-pend-row__ok { color: var(--ok); line-height: 0; }
.mc-pend-row.is-done .mc-pend-row__part { color: var(--text-2); }
.mc-pend__acts { margin-top: 12px; text-align: right; }

/* ═══════════ Desplegable flotante propio (pool de seriales, n° de parte, capítulo) ═══════════
   Sustituye al <datalist> nativo, que no respeta los tokens del portal ni admite dos líneas.
   `fixed` para escapar de cualquier overflow y z-index SOBRE el diálogo de TPDialog.

   OJO con el z-index: el panel se monta en <body>, o sea HERMANO de .tp-dlg-overlay, no dentro.
   El overlay vale --z-float + 10 (= 3010, style.css), no --z-dialog: se movió de token después
   de escribirse este archivo, y con `--z-dialog + 30` (= 2030) el desplegable quedaba pintado
   POR DEBAJO del velo oscuro del modal. Se usa el mismo valor que .pmm-combo (parts.css). */

.mc-combo {
    position: fixed; z-index: calc(var(--z-float, 3000) + 15);
    display: flex; flex-direction: column; gap: 1px; padding: 4px;
    max-height: 230px; min-width: 200px; overflow: auto;
    border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface); box-shadow: 0 12px 30px rgba(15, 27, 45, .18);
}
.mc-combo__opt {
    display: flex; flex-direction: column; gap: 2px; width: 100%;
    padding: 7px 10px; border: none; border-radius: var(--r-sm);
    background: transparent; cursor: pointer; text-align: left;
    font: 500 12.5px/1.35 var(--ui); color: var(--text);
}
.mc-combo__opt:hover, .mc-combo__opt.is-active { background: var(--surface-2); }
.mc-combo__lbl { font-weight: 400; font-size: 11px; color: var(--text-3); }
.mc-combo__empty { padding: 8px 10px; font: 400 11.5px/1.4 var(--ui); color: var(--text-3); }
.mc-combo__add {
    display: flex; align-items: center; gap: 6px; width: 100%;
    margin-top: 2px; padding: 8px 10px; border: none; border-top: 1px solid var(--border);
    border-radius: 0 0 var(--r-sm) var(--r-sm); background: transparent; cursor: pointer;
    font: 600 12px/1.35 var(--ui); color: var(--primary); text-align: left;
}
.mc-combo__add:hover { background: var(--surface-2); }

/* ═══════════════ Ficha: secciones colapsables ═══════════════ */

.mc-secs { display: flex; flex-direction: column; gap: 10px; }

.mc-sec {
    border: 1px solid var(--border); border-radius: var(--r-lg);
    background: var(--surface); overflow: hidden;
    transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.mc-sec:hover { border-color: var(--border-2); }
.mc-sec.is-open { box-shadow: var(--shadow-sm); }

.mc-sec__head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; cursor: pointer; user-select: none;
    background: var(--surface); border-left: 3px solid transparent;
    transition: background .14s var(--ease), border-color .14s var(--ease);
}
.mc-sec__head:hover { background: var(--surface-2); }
.mc-sec.is-open .mc-sec__head { border-left-color: var(--accent); background: var(--surface-2); }
.mc-sec__head:focus-visible { outline: 2px solid var(--btn-primary-bd); outline-offset: -2px; }

.mc-caret { flex: none; color: var(--text-faint); display: grid; place-items: center;
    transition: transform .18s var(--ease); }
.mc-sec.is-open .mc-caret { transform: rotate(90deg); color: var(--accent); }

/* Código de grupo (01, 02…): la idea que se rescata del formato Kalmar. */
.mc-sec__code {
    flex: none; min-width: 28px; padding: 2px 7px; border-radius: 6px;
    background: var(--surface-3); color: var(--text-3);
    font: 700 11px/1.6 var(--mono); text-align: center;
}
.mc-sec.is-open .mc-sec__code { background: var(--btn-primary-bg); color: var(--primary); }
.mc-sec__name { flex: 1 1 auto; min-width: 0; font: 700 14px/1.3 var(--ui); color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-sec__pn {
    flex: none; padding: 2px 8px; border-radius: 999px; background: var(--code-bg);
    color: var(--code-tx); border: 1px solid var(--code-bd); font: 600 11px/1.6 var(--mono);
}
.mc-sec__n { flex: none; font: 600 11.5px/1 var(--ui); color: var(--text-faint); }
.mc-sec__acts { flex: none; display: flex; align-items: center; gap: 2px; }
.mc-sec__body { border-top: 1px solid var(--border); }
.mc-sec.is-collapsed .mc-sec__body { display: none; }

/* ═══════════════ Ficha: filas de componente ═══════════════ */

.mc-rows { display: flex; flex-direction: column; }

.mc-row {
    display: grid; align-items: center; gap: 4px 12px;
    grid-template-columns: 22px 26px minmax(0, 2.1fr) minmax(0, 1.5fr) auto auto;
    padding: 9px 14px 9px 10px;
    border-bottom: 1px solid var(--hairline);
    transition: background .12s var(--ease);
}
.mc-row:last-child { border-bottom: none; }
.mc-row:hover { background: var(--surface-2); }
.mc-row.is-empty .mc-row__serial { color: var(--text-faint); font-style: italic; }

.mc-row__grip {
    grid-column: 1; width: 22px; height: 24px; display: grid; place-items: center;
    color: var(--text-faint); cursor: grab; background: transparent; border: none; padding: 0;
    opacity: 0; transition: opacity .14s var(--ease);
}
.mc-row:hover .mc-row__grip, .mc-row__grip:focus-visible { opacity: 1; }
.mc-row__grip:active { cursor: grabbing; }
.mc-row__idx { grid-column: 2; font: 600 11.5px/1 var(--mono); color: var(--text-faint); text-align: right; }

.mc-row__main { grid-column: 3; min-width: 0; }
.mc-row__label { font: 600 13.5px/1.35 var(--ui); color: var(--text); overflow-wrap: anywhere; }
.mc-row__sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 3px; }

.mc-pn {
    font: 600 11px/1.6 var(--mono); color: var(--code-tx); background: var(--code-bg);
    border: 1px solid var(--code-bd); border-radius: 5px; padding: 1px 6px;
}
.mc-pn--link { cursor: pointer; }
.mc-pn--link:hover { border-color: var(--link); color: var(--link); }
.mc-brand { font: 600 11px/1.6 var(--ui); color: var(--text-3); }
.mc-brand::before { content: "· "; color: var(--text-faint); }
/* Modelo del componente. Va pegado a la marca (se leen como una sola cosa: «Cummins QSM11»)
   pero es un campo aparte, así que se distingue en monoespaciado, como el resto de códigos. */
.mc-model { font: 600 11px/1.6 var(--mono); color: var(--text-2); }
.mc-model::before { content: " "; }
.mc-qty { font: 600 11px/1.6 var(--mono); color: var(--text-3); }

/* N° de serie: el dato central de la ficha. Monoespaciado y con más peso visual. */
.mc-row__serial {
    grid-column: 4; min-width: 0;
    font: 700 13px/1.35 var(--mono); color: var(--text); letter-spacing: .01em;
    overflow-wrap: anywhere;
}

.mc-row__badges { grid-column: 5; display: flex; align-items: center; gap: 6px; }
.mc-cond {
    padding: 2px 8px; border-radius: 999px; font: 700 10.5px/1.6 var(--ui);
    white-space: nowrap; text-transform: lowercase;
}
.mc-cond--original    { color: var(--ok);     background: var(--ok-bg);     border: 1px solid var(--ok-bd); }
.mc-cond--reparado    { color: var(--warn);   background: var(--warn-bg);   border: 1px solid var(--warn-bd); }
.mc-cond--reemplazado { color: var(--danger); background: var(--danger-bg); border: 1px solid var(--danger-bd); }

.mc-row__acts { grid-column: 6; display: flex; align-items: center; gap: 2px; justify-self: end; }

/* ── Botón de fotos: contador si las hay, fantasma punteado si no ── */
.mc-ph {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px; border-radius: 999px; cursor: pointer;
    font: 700 11px/1.5 var(--ui); white-space: nowrap;
    color: var(--primary); background: var(--btn-primary-bg);
    border: 1px solid var(--btn-primary-bd);
    transition: background .14s var(--ease), color .14s var(--ease);
}
.mc-ph:hover { background: var(--btn-primary-bg-hov); }
.mc-ph--empty {
    color: var(--text-faint); background: transparent;
    border: 1px dashed var(--border-2);
}
.mc-ph--empty:hover { color: var(--primary); border-color: var(--btn-primary-bd); border-style: solid; }
.mc-ph:disabled { cursor: default; opacity: .45; }

/* ── Botón de icono compacto (editar / borrar / añadir) ── */
.mc-ic {
    width: 28px; height: 28px; display: grid; place-items: center;
    background: transparent; border: 1px solid transparent; border-radius: 7px;
    color: var(--text-3); cursor: pointer; line-height: 0;
    transition: background .14s var(--ease), color .14s var(--ease);
}
.mc-ic:hover { background: var(--surface-3); color: var(--text); }
.mc-ic--del:hover { background: var(--danger-bg); color: var(--danger); }
.mc-ic:focus-visible { outline: 2px solid var(--btn-primary-bd); outline-offset: 1px; }

.mc-addrow {
    display: flex; align-items: center; gap: 7px; width: 100%;
    padding: 9px 14px 9px 46px; cursor: pointer;
    background: transparent; border: none; border-top: 1px dashed var(--border);
    color: var(--text-faint); font: 600 12px/1 var(--ui); text-align: left;
}
.mc-addrow:hover { background: var(--surface-2); color: var(--primary); }

/* ── Arrastre (SortableJS, mismas clases que el árbol del Manual de Partes) ── */
.mc-drag  { background: var(--surface-2) !important; box-shadow: var(--shadow-md); border-radius: var(--r-sm); }
.mc-ghost { opacity: .35; }
.mc-ghost .mc-sec__head, .mc-ghost.mc-row { background: var(--surface-3) !important; }
.mc-fall  { background: var(--surface); box-shadow: var(--shadow-lg); border-radius: var(--r-md); }

/* ═══════════════ Trazabilidad: línea de tiempo ═══════════════ */

.mc-tl { display: flex; flex-direction: column; padding: 4px 0 0; }
.mc-tl__item { position: relative; display: flex; gap: 14px; padding: 0 0 4px 0; }
.mc-tl__rail { position: relative; flex: none; width: 22px; display: flex; justify-content: center; }
/* La línea la dibuja el rail y se recorta en el primer y último hito para que no sobresalga. */
.mc-tl__rail::before {
    content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--border);
}
.mc-tl__item:first-child .mc-tl__rail::before { top: 11px; }
.mc-tl__item:last-child  .mc-tl__rail::before { bottom: calc(100% - 11px); }
.mc-tl__dot {
    position: relative; margin-top: 5px; width: 12px; height: 12px; border-radius: 50%;
    background: var(--c, var(--text-3)); border: 2.5px solid var(--surface);
    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--c, var(--text-3)) 50%, transparent);
}
.mc-tl__item.is-current .mc-tl__dot { width: 15px; height: 15px; margin-top: 3px; }

.mc-tl__body { flex: 1 1 auto; min-width: 0; padding: 0 0 18px; }
.mc-tl__line { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.mc-tl__date { font: 700 13px/1.3 var(--ui); color: var(--text); }
.mc-tl__ago { font: 500 11.5px/1.3 var(--ui); color: var(--text-faint); }
.mc-tl__notes { margin: 5px 0 0; font: 400 12.5px/1.5 var(--ui); color: var(--text-2); }
.mc-tl__acts { display: flex; gap: 2px; margin-left: auto; opacity: 0; transition: opacity .14s var(--ease); }
.mc-tl__item:hover .mc-tl__acts, .mc-tl__acts:focus-within { opacity: 1; }

/* ═══════════════ Paneles genéricos y estados vacíos ═══════════════ */

.mc-panel { padding: 18px 0 0; }
.mc-card {
    border: 1px solid var(--border); border-radius: var(--r-lg);
    background: var(--surface); padding: 18px 20px; margin-bottom: 14px;
}
.mc-card__h {
    margin: 0 0 14px; font: 700 14px/1.3 var(--ui); color: var(--heading);
    display: flex; align-items: center; gap: 8px;
}
.mc-card__h .mc-card__n { font: 600 11.5px/1 var(--ui); color: var(--text-faint); }

.mc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 20px; }
.mc-f { min-width: 0; }
.mc-f--wide { grid-column: 1 / -1; }
.mc-f__k { display: block; font: 500 11px/1.4 var(--ui); color: var(--text-faint); margin-bottom: 2px; }
.mc-f__v { font: 600 13px/1.45 var(--ui); color: var(--text); overflow-wrap: anywhere; }
.mc-f__v--mono { font-family: var(--mono); letter-spacing: .01em; }

.mc-empty {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 46px 24px; text-align: center;
    border: 1px dashed var(--border-2); border-radius: var(--r-lg); background: var(--surface);
}
.mc-empty__ico { color: var(--text-faint); opacity: .7; }
.mc-empty__t { font: 700 15px/1.3 var(--ui); color: var(--text); margin: 0; }
.mc-empty__d { font: 400 13px/1.6 var(--ui); color: var(--text-3); margin: 0; max-width: 460px; }

/* ── Esqueletos de carga (nada de "Cargando…" en texto plano) ── */
.mc-skel { display: flex; flex-direction: column; gap: 10px; padding: 18px 0 0; }
.mc-skel__b {
    height: 54px; border-radius: var(--r-lg);
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
    background-size: 400% 100%; animation: mcShimmer 1.3s var(--ease) infinite;
}
.mc-skel__b:nth-child(2) { animation-delay: .08s; }
.mc-skel__b:nth-child(3) { animation-delay: .16s; }
.mc-skel__b:nth-child(4) { animation-delay: .24s; }
@keyframes mcShimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
    .mc-skel__b { animation: none; }
    .mc-caret, .mc-sec__head, .mc-row, .mc-ph, .mc-ic { transition: none; }
}

/* ═══════════════ Horómetro: KPIs, gráfico e historial ═══════════════ */

.mc-kpis {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px; margin-bottom: 14px;
}
.mc-kpi {
    display: flex; flex-direction: column; gap: 3px;
    border: 1px solid var(--border); border-radius: var(--r-lg);
    background: var(--surface); padding: 14px 16px;
}
.mc-kpi__v { font: 700 21px/1.15 var(--ui); color: var(--heading); }
.mc-kpi__v small { font: 600 12px/1 var(--ui); color: var(--text-3); }
.mc-kpi__na { font: 700 21px/1.15 var(--ui); color: var(--text-faint); }
.mc-kpi__k { font: 600 11.5px/1.4 var(--ui); color: var(--text-2); }
.mc-kpi__s { font: 400 11px/1.4 var(--ui); color: var(--text-faint); }

/* Gráfico de la serie. `preserveAspectRatio="none"` estira el trazo a lo ancho del panel: la
   forma de la curva es la información, no su escala exacta (para eso está la tabla). */
.mc-chart { margin: 0 0 16px; color: var(--primary); }
.mc-chart svg { display: block; width: 100%; height: 130px; overflow: visible; }
.mc-chart circle { fill: var(--surface); stroke: currentColor; stroke-width: 2; }
.mc-chart__ax {
    display: flex; justify-content: space-between; gap: 10px; margin-top: 6px;
    font: 500 11px/1.4 var(--ui); color: var(--text-faint);
}

.mc-hrs { display: flex; flex-direction: column; }
.mc-hr {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    padding: 9px 2px; border-top: 1px solid var(--border);
}
.mc-hr:first-child { border-top: none; }
.mc-hr__h { font: 700 13.5px/1.3 var(--ui); color: var(--text); min-width: 74px; }
.mc-hr__delta {
    padding: 1px 8px; border-radius: 999px; font: 600 11px/1.6 var(--ui);
    color: var(--ok); background: var(--ok-bg); border: 1px solid var(--ok-bd);
}
.mc-hr__delta--down { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-bd); }
.mc-hr__date { font: 500 12.5px/1.3 var(--ui); color: var(--text-2); }
.mc-hr__src { font: 500 11px/1.4 var(--ui); color: var(--text-faint); font-style: italic; }
.mc-hr__notes { flex: 1 1 100%; font: 400 12.5px/1.5 var(--ui); color: var(--text-2); }
.mc-hr__acts { display: flex; gap: 2px; margin-left: auto; opacity: 0; transition: opacity .14s var(--ease); }
.mc-hr:hover .mc-hr__acts, .mc-hr__acts:focus-within { opacity: 1; }

/* Chip del hero que navega a esta pestaña (es un <button>: hereda .mc-chip y añade el afford). */
.mc-chip--go { cursor: pointer; font-family: var(--ui); }
.mc-chip--go:hover { border-color: var(--btn-primary-bd); color: var(--text); }

@media (prefers-reduced-motion: reduce) { .mc-hr__acts { transition: none; } }

/* ═══════════════ Visor de fotos de placa ═══════════════ */

.mc-viewer {
    position: fixed; inset: 0; z-index: calc(var(--z-dialog) + 20);
    display: flex; flex-direction: column;
    background: color-mix(in srgb, var(--navy-deep) 88%, transparent);
    backdrop-filter: blur(3px);
}
.mc-viewer__bar {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    color: #fff; flex: none;
}
.mc-viewer__t { font: 700 14px/1.3 var(--ui); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-viewer__t small { display: block; font: 500 11.5px/1.4 var(--mono); opacity: .72; }
.mc-viewer__sp { flex: 1; }
.mc-viewer__btn {
    width: 36px; height: 36px; display: grid; place-items: center; flex: none;
    border-radius: 9px; border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; line-height: 0;
}
.mc-viewer__btn:hover { background: rgba(255, 255, 255, .18); }
.mc-viewer__stage {
    flex: 1 1 auto; position: relative; display: grid; place-items: center;
    padding: 0 12px 8px; min-height: 0; overflow: hidden;
}
.mc-viewer__img {
    max-width: 100%; max-height: 100%; object-fit: contain;
    border-radius: var(--r-md); background: #fff;
    transition: transform .18s var(--ease); cursor: zoom-in;
}
.mc-viewer__img.is-zoom { cursor: zoom-out; transform: scale(2); }
.mc-viewer__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; display: grid; place-items: center;
    border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(0, 0, 0, .35); color: #fff; cursor: pointer; line-height: 0;
}
.mc-viewer__nav:hover { background: rgba(0, 0, 0, .6); }
.mc-viewer__nav--prev { left: 14px; }
.mc-viewer__nav--next { right: 14px; }
.mc-viewer__foot {
    flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 16px 16px; color: rgba(255, 255, 255, .85);
    font: 500 12.5px/1.5 var(--ui);
}
.mc-viewer__thumbs { display: flex; gap: 7px; overflow-x: auto; padding: 2px 0; }
.mc-viewer__th {
    width: 52px; height: 40px; flex: none; border-radius: 7px; overflow: hidden;
    border: 2px solid transparent; background: rgba(255, 255, 255, .1); cursor: pointer; padding: 0;
}
.mc-viewer__th.is-active { border-color: var(--orange); }
.mc-viewer__th img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ═══════════════ Móvil ═══════════════ */

@media (max-width: 860px) {
    .mc__inner, .mc-hero__inner { padding-left: 14px; padding-right: 14px; }
    .mc-hero__title { font-size: 18px; }
    .mc-hero__acts { margin-left: 0; width: 100%; }
    /* La rejilla de 6 columnas no cabe: la fila pasa a dos líneas, con el serial y las
       insignias debajo de la etiqueta y las acciones ancladas a la derecha. */
    .mc-row {
        grid-template-columns: 22px minmax(0, 1fr) auto;
        row-gap: 6px; padding: 11px 12px 11px 8px;
    }
    .mc-row__idx { display: none; }
    .mc-row__main { grid-column: 2; }
    .mc-row__acts { grid-column: 3; grid-row: 1; }
    .mc-row__serial { grid-column: 2 / -1; grid-row: 2; font-size: 14px; }
    .mc-row__badges { grid-column: 2 / -1; grid-row: 3; }
    .mc-row__grip { opacity: 1; }
    .mc-addrow { padding-left: 30px; }
    .mc-viewer__nav { width: 38px; height: 38px; }
    .mc-viewer__nav--prev { left: 6px; }
    .mc-viewer__nav--next { right: 6px; }
}