/* ============================================================
   TECPORT — GARANTÍAS

   Dos pantallas: la bandeja (contadores + tabla) y el documento del reclamo (dos columnas,
   65/35). Se apoya en lo que ya existe y no lo reinventa: `.adm`/`.adm__panel` para el armazón,
   `.btn-adm` para los botones, `.mc-status`/`.mc-chip`/`.mc-empty`/`.mc-viewer` de la ficha de
   máquina, y `.tp-phases` (compartida con Producción) para la barra de fases.

   NINGÚN color en crudo: todo sale de tokens.css, para que claro y oscuro salgan solos y la capa
   siga siendo portable a móvil. Los valores que sí van en px son geometría (radios ya
   tokenizados, alturas de miniatura, anchos de columna).
   ============================================================ */

/* El cuerpo de la sección lo gobierna Garantías, igual que hace la ficha de máquina.

   `.adm--page .adm__body` trae 18px de relleno arriba y ES el contenedor con scroll. Una cabecera
   `position: sticky; top: 0` se ancla al borde del scrollport, o sea al borde INTERIOR de ese
   relleno: el contenido subía por esa franja y se veía POR ENCIMA de la cabecera fijada. No era
   z-index, era la franja de relleno. A cero, no hay franja por la que colarse.

   De paso el fondo deja de ser una banda más clara que la página (la cabecera pinta `--app` y el
   armazón `--bg-grad`), y el tope de 1180px de `.wc__inner` vuelve a mandar — antes el shell
   recortaba a 1100 y el filete de la cabecera se cortaba a media pantalla. */
#tp-warranty .adm__body {
    padding: 0; max-width: none; overflow: auto; background: var(--app);
    /* Que ESTIRE hasta el alto del panel. Sin esto la caja mide lo que su contenido, y con una
       bandeja de dos filas el fondo se cortaba a media pantalla dejando ver el del armazón
       debajo: una costura horizontal a la altura de la última fila. */
    flex: 1 1 auto; min-height: 0;
}

.wc { padding: 0 0 40px; }
.wc__inner { max-width: 1180px; margin: 0 auto; padding: 0 22px; }

/* ───────────────────────── Bandeja ───────────────────────── */

.wc-bar {
    display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center;
    padding: 12px 0 12px; margin-bottom: 2px;
    border-bottom: 1px solid var(--border);
}

/* Los contadores por estado ARRIBA y en horizontal: es lo primero que se mira al entrar, y un
   panel lateral de filtros se comería el ancho de la tabla sin decir cuántos hay de cada cosa.
   Cada uno es una PÍLDORA de una línea —cifra y etiqueta juntas—: en dos alturas y con ancho
   mínimo ocupaban dos filas enteras por encima de la tabla, que es lo que se viene a mirar. */
/* Los contadores NO encogen (encogerlos parte la fila de píldoras en dos alturas, que es justo
   lo que se venía a evitar); quien cede ancho es el buscador, que se apaña con menos. */
.wc-kpis { display: flex; flex-wrap: wrap; gap: 6px; flex: 0 0 auto; }
.wc-kpi {
    display: inline-flex; align-items: baseline; gap: 6px;
    padding: 6px 12px; cursor: pointer; text-align: left;
    border: 1px solid var(--border-2); border-radius: 999px;
    background: var(--surface); color: var(--text-2);
    transition: border-color .15s var(--ease), background .15s var(--ease);
}
.wc-kpi:hover { background: var(--surface-2); }
.wc-kpi.is-active {
    border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    color: var(--primary);
}
.wc-kpi__n { font: 800 13.5px/1.3 var(--ui); font-variant-numeric: tabular-nums; }
.wc-kpi__k { font: 600 12px/1.3 var(--ui); color: var(--text-3); }
.wc-kpi.is-active .wc-kpi__k { color: inherit; }

.wc-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    flex: 1 1 auto; justify-content: flex-end; }
.wc-search {
    flex: 1 1 240px; min-width: 170px; max-width: 420px; min-height: 34px; padding: 6px 12px;
    border: 1px solid var(--border-2); border-radius: var(--r-sm);
    background: var(--surface); color: var(--text); font: 500 13px/1.3 var(--ui);
}
.wc-search:focus { outline: none; border-color: var(--primary); }
.btn-adm.is-on {
    border-color: var(--primary); color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
}

/* Las tablas anchas hacen scroll DENTRO de su caja; el body no se mueve nunca en horizontal. */
.wc-tblwrap { width: 100%; overflow-x: auto; }

.wc-tbl { width: 100%; border-collapse: collapse; margin-top: 12px; }
.wc-tbl th {
    position: sticky; top: 0; z-index: 1; text-align: left; white-space: nowrap;
    padding: 9px 12px; background: var(--surface-2); color: var(--text-3);
    font: 700 11px/1.3 var(--ui); text-transform: uppercase; letter-spacing: .04em;
    border-bottom: 1px solid var(--border);
}
.wc-tbl td {
    padding: 11px 12px; border-bottom: 1px solid var(--border);
    font: 500 13px/1.35 var(--ui); color: var(--text); vertical-align: middle;
}
.wc-tbl tbody tr { cursor: pointer; transition: background .12s var(--ease); }
.wc-tbl tbody tr:hover { background: var(--surface-2); }
/* Un reclamo que se movió desde la última vez que lo miraste: la marca va en el borde, no en el
   fondo, para no competir con el hover ni con el chip de estado. */
.wc-tbl tbody tr.is-unread td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.wc-td__sub { display: block; margin-top: 2px; font: 500 11.5px/1.35 var(--ui); color: var(--text-3); }
.wc-td__who { display: block; font-weight: 600; white-space: nowrap; }
/* Nadie lo ha tocado todavía. En tenue y en minúscula: es una respuesta, no una alarma — el
   reclamo puede llevar dos horas en la bandeja y estar perfectamente. */
.wc-td__none { color: var(--text-faint); font-style: italic; }
.wc-td__phase { min-width: 140px; }
.wc-td__go { width: 28px; color: var(--text-faint); text-align: right; }
.wc-tbl tbody tr:hover .wc-td__go { color: var(--primary); }

/* Pedido → Aprobado. Las dos cifras juntas y la diferencia marcada: es lo primero que mira tanto
   quien reclama como quien paga, y compararlas de memoria es justo lo que no debe pasar. */
.wc-td__money { white-space: nowrap; font-variant-numeric: tabular-nums; }
.wc-money__ask { font-weight: 600; }
.wc-money__arrow { margin: 0 6px; color: var(--text-faint); }
.wc-money__ok { font-weight: 800; }
.wc-money__ok.is-cut { color: var(--warn); }
.wc-money__none { font: 500 12px/1.3 var(--ui); color: var(--text-faint); }

.wc-count { margin: 10px 2px 0; font: 500 12px/1.4 var(--ui); color: var(--text-3); }

/* ───────────────────────── El documento ───────────────────────── */

/* Cabecera fija: el nº, la máquina, la fase y los botones de la fase actual. Se queda arriba
   porque en un documento largo hay que poder actuar sin volver a subir.

   Y se PLIEGA al bajar (`.is-stuck`, lo pone warranty.js al oír el scroll de `.adm__body`): el
   contexto y los rótulos de las fases desaparecen y quedan ~56px en vez de ~180. Lo que se pliega
   no se pierde — el botón «i» lo abre entero, con el historial. */
.wc-hero {
    position: sticky; top: 0; z-index: 3;
    padding: 12px 0 10px; background: var(--app);
    box-shadow: 0 1px 0 var(--border);
    transition: padding .16s var(--ease);
}
/* Velo bajo la cabecera: lo que pasa por debajo se desvanece en vez de cortarse contra el filete.
   Fuera del flujo y sin ratón, así que no toca ni la geometría ni los clics de nada. */
.wc-hero::after {
    content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px;
    background: linear-gradient(var(--app), transparent);
    pointer-events: none;
}
.wc-hero__inner { max-width: 1180px; margin: 0 auto; padding: 0 22px; }

/* Franja 1: lo que no puede desaparecer nunca. */
.wc-hero__top { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.wc-hero__sp { flex: 1 1 12px; }
.wc-hero__back {
    display: inline-flex; align-items: center; gap: 5px; flex: none;
    padding: 5px 10px 5px 8px; border-radius: var(--r-sm); cursor: pointer;
    border: 1px solid var(--btn-bd); background: var(--btn-bg); color: var(--btn-tx);
    font: 700 12px/1 var(--ui);
}
.wc-hero__back:hover { background: var(--btn-bg-hov); }
.wc-hero__title {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px; min-width: 0;
    margin: 0; font: 800 19px/1.2 var(--ui); color: var(--heading);
}
.wc-hero__mac { font: 600 12.5px/1.3 var(--mono); color: var(--accent); letter-spacing: -.2px; }
.wc-hero__i {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 30px; height: 30px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text-2);
}
.wc-hero__i:hover { color: var(--primary); border-color: var(--primary); }
.wc-hero__acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Franja 2: el contexto. Es lo primero que sobra cuando hace falta pantalla. */
.wc-hero__meta {
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px;
    overflow: hidden; transition: max-height .16s var(--ease), margin .16s var(--ease);
}
.wc-hero .tp-phases { margin: 11px 0 0; }
.wc-hero .tp-phase { padding: 7px 24px 7px 14px; font-size: 12px; }
.wc-hero .tp-phase:first-child { padding-left: 14px; }
.wc-hero .tp-phase:not(:first-child) { padding-left: 24px; }

/* Plegada. `max-height: 0` y no `display: none` para que la transición tenga a qué agarrarse. */
.wc-hero.is-stuck { padding: 8px 0 10px; }
.wc-hero.is-stuck .wc-hero__meta { max-height: 0; margin-top: 0; }
.wc-hero.is-stuck .wc-hero__title { font-size: 16px; }
.wc-hero.is-stuck .tp-phases { margin-top: 7px; }
/* La barra pasa a su variante compacta: por dónde va se sigue viendo, y el nombre de la fase lo
   dice el chip de estado, que no se pliega. */
.wc-hero.is-stuck .tp-phase {
    padding: 3px 12px 3px 8px; font-size: 0; gap: 0;
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 0 100%, 6px 50%);
}
.wc-hero.is-stuck .tp-phase:first-child { padding-left: 8px;
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 0 100%); }
.wc-hero.is-stuck .tp-phase:not(:first-child) { padding-left: 14px; margin-left: -2px; }
.wc-hero.is-stuck .tp-phase__n, .wc-hero.is-stuck .tp-phase__t { display: none; }

/* La barra de fases NAVEGABLE (solo en la cabecera del reclamo; en el listado y en Producción
   sigue siendo un indicador y no debe prometer un clic que no existe). */
/* Los tramos pasan a <button>, que llega con borde, relleno y tipografía propios y rompe el
   galón. Se reinicia todo lo que el elemento trae de fábrica y se conserva solo lo que la barra
   compartida ya define. */
.wc-hero .tp-phases--nav .tp-phase {
    cursor: pointer; border: 0; margin-top: 0; margin-bottom: 0;
    font: 600 12.5px/1.2 var(--ui); text-align: left; -webkit-appearance: none; appearance: none;
}
.wc-hero .tp-phases--nav .tp-phase:not(:first-child) { margin-left: -3px; }
.wc-hero .tp-phases--nav .tp-phase:hover { filter: brightness(1.06); }
.wc-hero .tp-phases--nav .tp-phase:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Dónde está MIRANDO quien lee, que no es lo mismo que dónde está el reclamo: `is-now` marca la
   fase real y no se mueve. Por eso esto es un subrayado y no un relleno — no puede confundirse
   con un avance que no ha ocurrido. */
.wc-hero .tp-phases--nav .tp-phase.is-viewing { box-shadow: inset 0 -3px 0 var(--accent); }

/* El contexto y el historial dentro del diálogo del botón «i». */
.wc-info .wc-hero__meta { margin: 0 0 4px; max-height: none; }
.wc-info__h { margin: 14px 0 6px; font: 700 12.5px/1.3 var(--ui); color: var(--text-3); }

/* DOS columnas: la pila de etapas y, fuera de ella, el equipo con su cobertura. Fuera de la pila
   solo se queda eso: es el dato que se mira para decidir si el reclamo procede, y esa pregunta no
   pertenece a ninguna etapa en particular. Lo demás vive en la etapa en la que ocurrió. */
.wc-cols {
    display: grid; grid-template-columns: minmax(0, 70fr) minmax(0, 30fr);
    gap: 14px; align-items: start; padding-top: 14px;
}
.wc-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* Misma pareja de cajas que usaba el historial: la de fuera se estira hasta el alto de la fila y
   la de dentro, que sí tiene sitio libre, es la que se queda quieta al hacer scroll. */
.wc-side { align-self: stretch; min-width: 0; }

/* La barra se ancla justo DEBAJO de la cabecera fija y hace su propio scroll. El anclaje sale de
   `--wc-hero-h`, que escribe warranty.js midiendo la cabecera de verdad: cambia de alto al
   plegarse y al envolver los botones, así que un número a mano dejaría un hueco o la taparía.

   Son DOS cajas a propósito. `.wc-cols` alinea sus celdas con `align-items: start`, así que una
   celda mide lo que mide su contenido — y una caja que ya ocupa toda su celda no tiene recorrido
   por el que pegarse. La de fuera se estira hasta el alto de la fila y la de dentro, que sí tiene
   sitio libre, es la que se queda quieta. */
.wc-rail__in {
    position: sticky; top: calc(var(--wc-hero-h, 96px) + 12px);
    max-height: calc(100vh - var(--wc-hero-h, 96px) - 34px);
    overflow: auto;
}


.wc-card {
    padding: 13px 15px; border: 1px solid var(--border); border-radius: var(--r-lg);
    background: var(--surface);
}

/* ══════════════════════ El nivel de atención ══════════════════════
   Dos niveles y no cinco: «mira esto» y «esto ya se pasó». Una escala más fina obliga a recordar
   qué significa cada color, y lo que hay que poder hacer con esta columna es barrerla con la vista
   y quedarse con dos o tres reclamos. */
.wc-att-chip {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
    border: 1px solid currentColor; border-radius: 999px; background: none;
    font: 700 11px/1.5 var(--ui); cursor: pointer;
}
.wc-att-chip.is-warn { color: #b45309; }
.wc-att-chip.is-late { color: var(--danger, #c0392b); }
.wc-att-chip:hover { background: color-mix(in srgb, currentColor 8%, transparent); }

.wc-td__att { max-width: 260px; }
/* El punto de un reclamo al día: lo justo para que la columna no parezca rota, sin llamar la
   atención de nada. */
.wc-att-ok { color: var(--text-3); opacity: .5; }
.wc-att-cell { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }
/* El motivo, no un color: un punto rojo sin explicación obliga a entrar al reclamo para saber por
   qué está encendido, que es el viaje que esta columna viene a ahorrar. */
.wc-att-cell__r {
    font: 600 11.5px/1.35 var(--ui); overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.wc-att-cell.is-warn { color: #b45309; }
.wc-att-cell.is-late { color: var(--danger, #c0392b); }
.wc-att-cell__m { flex: none; font: 700 10px/1.3 var(--ui); opacity: .7; }

.wc-att-why { margin: 6px 0 0; padding-left: 18px; }
.wc-att-why li { font: 600 12.5px/1.6 var(--ui); color: var(--danger, #c0392b); }
.wc-att-nums { margin-top: 10px; }

/* ══════════════════════ Etiquetas de atención ══════════════════════
   El color lo pone cada etiqueta desde el catálogo (`--c`, mismo truco que los puntos de la línea
   de tiempo de la ficha de máquina). El chip no se pinta ENTERO de ese color a propósito: en la
   cabecera hay ya un chip de estado, y dos manchas de color compitiendo hacen que ninguna se lea.
   El color va en el punto, y el chip se queda en gris. */
.wc-tags { display: inline-flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.wc-tag {
    display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 7px;
    border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
    font: 600 11px/1.7 var(--ui); color: var(--text-2); white-space: nowrap;
}
.wc-tag__dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--c, #6b7280); flex: none;
}
/* Vencida: el borde y el texto se tiñen. Es la única etiqueta que grita, y grita porque el plazo
   que alguien se puso ya pasó — no porque el color del catálogo sea llamativo. */
.wc-tag.is-late { border-color: var(--danger, #c0392b); color: var(--danger, #c0392b); }
.wc-tag__late { font: 700 9.5px/1.7 var(--ui); text-transform: uppercase; letter-spacing: .4px; }
.wc-tags--mini { margin-top: 4px; }
.wc-tags--mini .wc-tag { padding: 1px 7px 1px 5px; font-size: 10px; }
.wc-tags--mini .wc-tag__late { display: none; }

.wc-hero__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 6px; }
.wc-tag-add {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px;
    border: 1px dashed var(--border); border-radius: 999px; background: none;
    color: var(--text-3); font: 600 11px/1.7 var(--ui); cursor: pointer;
}
.wc-tag-add:hover { color: var(--primary); border-color: var(--primary); }
/* Al plegarse la cabecera, los chips se van con el resto del contexto: lo que no puede
   desaparecer es el número, el estado y los botones de la fase. */
.wc-hero.is-stuck .wc-hero__tags { display: none; }

/* El bloque del rail es el mismo dato, pero para trabajar: con su nota, su plazo y el botón de
   darlo por hecho. Solo lo ve quien puede etiquetar; al cliente sus chips ya se los cuenta la
   cabecera y aquí no tendría nada que pulsar. */
.wc-atts { display: flex; flex-direction: column; gap: 8px; }
.wc-att {
    padding: 7px 9px; border: 1px solid var(--border); border-left: 3px solid var(--c, #6b7280);
    border-radius: var(--r-md); background: var(--surface-2);
}
.wc-att.is-late { border-color: var(--danger, #c0392b); border-left-color: var(--danger, #c0392b); }
.wc-att__top { display: flex; align-items: center; gap: 6px; }
.wc-att__top b { font: 700 12px/1.35 var(--ui); color: var(--heading); }
.wc-att__due {
    margin-left: auto; font: 400 10.5px/1.3 var(--ui); color: var(--text-3); white-space: nowrap;
}
.wc-att.is-late .wc-att__due { color: var(--danger, #c0392b); font-weight: 700; }
.wc-att__ok, .wc-att__x {
    display: inline-flex; padding: 3px; border: 1px solid var(--border); border-radius: 6px;
    background: var(--surface); color: var(--text-3); cursor: pointer; flex: none;
}
.wc-att__ok:hover { color: #15803d; border-color: #15803d; }
.wc-att__x:hover { color: var(--danger, #c0392b); border-color: var(--danger, #c0392b); }
.wc-att__n {
    margin: 5px 0 0; font: 400 11.5px/1.45 var(--ui); color: var(--text-2);
    overflow-wrap: anywhere;
}
/* Lo ya hecho, plegado: contesta «¿ya llamamos a este cliente?» sin ocupar sitio mientras no se
   pregunte. */
.wc-att__done > summary {
    cursor: pointer; font: 600 11px/1.6 var(--ui); color: var(--text-3); list-style: none;
}
.wc-att__done > summary::-webkit-details-marker { display: none; }
.wc-att__done > summary::before { content: "▸ "; }
.wc-att__done[open] > summary::before { content: "▾ "; }
.wc-att__done ul { margin: 5px 0 0; padding: 0 0 0 14px; list-style: none; }
.wc-att__done li {
    display: flex; gap: 8px; justify-content: space-between;
    font: 400 11px/1.7 var(--ui); color: var(--text-2);
}
.wc-att__when { color: var(--text-3); white-space: nowrap; }

/* ══════════════════════ La conversación ══════════════════════
   Primera caja del rail, encima del equipo: sirve en todas las fases —se pregunta por la evidencia
   mientras se revisa y por el monto mientras se dictamina— y por eso no está dentro de la pila de
   etapas, que está ordenada por fase y casi toda plegada.

   El log hace SU propio scroll dentro de un alto acotado, en lugar de estirarse: el rail ya scrolla
   como un todo, y un hilo de cuarenta mensajes empujaría el equipo y su cobertura fuera de la
   pantalla — que es justo el dato que se mira mientras se conversa. */
.wc-chat { display: flex; flex-direction: column; min-height: 0; }
.wc-chat__n {
    margin-left: auto; min-width: 20px; padding: 1px 7px; border-radius: 999px;
    background: var(--primary); color: #fff; font: 700 11px/1.6 var(--ui); text-align: center;
}
.wc-chat__log {
    display: flex; flex-direction: column; gap: 8px;
    max-height: 46vh; min-height: 60px; overflow-y: auto; overscroll-behavior: contain;
    padding: 2px 4px 2px 0; margin-bottom: 10px;
}
.wc-chat__empty { margin: 6px 2px; font: 400 12px/1.5 var(--ui); color: var(--text-3); }

.wc-msg {
    padding: 7px 9px; border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface-2); max-width: 88%; min-width: 55%;
}
/* Los míos a la derecha y con el filete de la casa; los del otro lado a la izquierda. Es la
   convención que todo el mundo trae aprendida de cualquier chat, y ahorra leer el nombre para
   saber quién habla. */
.wc-msg--mine { align-self: flex-end; border-left: 3px solid var(--primary); }
.wc-msg--them { align-self: flex-start; border-left: 3px solid var(--text-3); }
.wc-msg__top { display: flex; align-items: baseline; gap: 7px; margin-bottom: 3px; }
.wc-msg__who { font: 700 11.5px/1.3 var(--ui); color: var(--heading); }
.wc-msg__d { font: 400 10.5px/1.3 var(--ui); color: var(--text-3); white-space: nowrap; }
.wc-msg__x {
    margin-left: auto; padding: 2px; border: 0; background: none; cursor: pointer;
    color: var(--text-3); opacity: 0; transition: opacity .12s;
}
.wc-msg:hover .wc-msg__x, .wc-msg__x:focus-visible { opacity: 1; }
.wc-msg__x:hover { color: var(--danger, #c0392b); }
.wc-msg__b { font: 400 12.5px/1.5 var(--ui); color: var(--text); overflow-wrap: anywhere; }
.wc-msg__fs { margin-top: 6px; }
.wc-msg__f { width: 42px; height: 42px; }
/* Un mensaje retirado deja el hueco, no el texto: el reclamo es un documento histórico y un salto
   sin explicar es peor que decir que alguien retiró algo. */
.wc-msg--gone {
    align-self: center; max-width: 100%; padding: 4px 10px; border-style: dashed;
    background: none; font: 400 11px/1.4 var(--ui); color: var(--text-3);
}

.wc-chat__composer { border-top: 1px solid var(--border); padding-top: 9px; }
.wc-chat__ta {
    width: 100%; min-height: 38px; max-height: 140px; resize: none;
    padding: 8px 9px; border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface); color: var(--text); font: 400 12.5px/1.45 var(--ui);
}
.wc-chat__ta:focus { outline: none; border-color: var(--primary); }
.wc-chat__acts { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.wc-chat__clip {
    display: inline-flex; padding: 5px; border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface); color: var(--text-3); cursor: pointer;
}
.wc-chat__clip:hover { color: var(--primary); border-color: var(--primary); }
.wc-chat__hint { flex: 1; min-width: 0; font: 400 10.5px/1.3 var(--ui); color: var(--text-3); }
.wc-chat__send { padding: 6px 14px; }
.wc-chat__chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 7px; }
.wc-chip-f {
    display: inline-flex; align-items: center; gap: 5px; max-width: 160px;
    padding: 2px 4px 2px 8px; border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface-2); font: 400 11px/1.6 var(--ui); color: var(--text-2);
}
.wc-chip-f > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-chip-f button {
    border: 0; background: none; cursor: pointer; color: var(--text-3);
    font: 700 13px/1 var(--ui); padding: 0 3px;
}
.wc-chip-f button:hover { color: var(--danger, #c0392b); }

/* El botón de la cabecera: lleva a la conversación y dice cuántos mensajes hay. En pantalla
   estrecha el rail cae al final del documento, así que este botón es la forma de llegar. */
.wc-hero__chat {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
    border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
    color: var(--text-2); font: 600 12px/1.3 var(--ui); cursor: pointer; white-space: nowrap;
}
.wc-hero__chat:hover { color: var(--primary); border-color: var(--primary); }
.wc-hero__chat-n {
    min-width: 18px; padding: 0 5px; border-radius: 999px;
    background: var(--primary); color: #fff; font: 700 10.5px/1.7 var(--ui); text-align: center;
}
.wc-hero.is-stuck .wc-hero__chat span:not(.wc-hero__chat-n) { display: none; }

/* ── La pila de etapas ──
   Una por tramo de la barra de fases y en el mismo orden. Toma prestado el idioma visual de los
   estadíos de la ficha de máquina (`.fu-stage`, fleet.css): número, nombre, estado a la derecha y
   un filete de color en el borde izquierdo que dice de un vistazo por dónde va la cosa. */
.wc-steps { display: flex; flex-direction: column; gap: 10px; }
.wc-step {
    border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--r-lg);
    background: var(--surface); overflow: hidden;
}
.wc-step--todo { border-left-color: var(--border-2); background: var(--surface-2); }
.wc-step--now { border-left-color: var(--primary); }
.wc-step--done { border-left-color: var(--ok); }

.wc-step__head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 11px 15px; cursor: pointer; list-style: none;
}
.wc-step__head::-webkit-details-marker { display: none; }
.wc-step__head:hover { background: var(--surface-2); }
.wc-step--todo .wc-step__head:hover { background: var(--surface-3); }
.wc-step__n {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 22px; height: 22px; border-radius: 999px;
    background: var(--surface-3); color: var(--text-2);
    font: 700 11.5px/1 var(--ui); font-variant-numeric: tabular-nums;
}
.wc-step--now .wc-step__n { background: var(--primary); color: var(--primary-tx); }
.wc-step--done .wc-step__n { background: var(--ok); color: var(--primary-tx); }
.wc-step__name { flex: none; font: 700 13.5px/1.3 var(--ui); color: var(--heading); }
/* El resumen es lo que hace legible una etapa PLEGADA: sin él, cerrar sería esconder. */
.wc-step__sum {
    flex: 1 1 160px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: 500 12px/1.4 var(--ui); color: var(--text-3);
}
.wc-step__st {
    flex: none; padding: 2px 9px; border-radius: 999px;
    background: var(--surface-3); color: var(--text-3);
    font: 700 10px/1.7 var(--ui); text-transform: uppercase; letter-spacing: .04em;
}
.wc-step--now .wc-step__st {
    background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary);
}
.wc-step--done .wc-step__st { background: var(--ok-bg); color: var(--ok); }
.wc-step--todo .wc-step__name, .wc-step--todo .wc-step__sum { color: var(--text-3); }

.wc-step__body { padding: 0 15px 14px; display: flex; flex-direction: column; gap: 12px; }
.wc-step__desc { margin: 0; font: 500 12px/1.5 var(--ui); color: var(--text-3); }

/* Un bloque dentro de una etapa NO lleva marco: el marco lo pone el panel, y anidar dos dibuja
   una caja dentro de otra caja sin que eso signifique nada. */
.wc-block { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.wc-block__h {
    display: flex; align-items: center; gap: 7px; margin: 0;
    font: 700 12.5px/1.3 var(--ui); color: var(--text-2);
}
.wc-block > .wc-grid, .wc-block > .wc-tblwrap { margin: 0; }
/* Las evidencias, ya dentro de su etapa, se despliegan en rejilla: en una columna estrecha eran
   una lista larguísima, y aquí hay ancho de sobra. */
.wc-evs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 18px; }
.wc-card--side { padding: 12px 13px; }
.wc-card__h {
    display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
    font: 700 13.5px/1.3 var(--ui); color: var(--heading);
}
.wc-card__cur {
    margin-left: auto; padding: 2px 8px; border-radius: 999px;
    background: var(--surface-2); color: var(--text-3);
    font: 700 10.5px/1.6 var(--mono);
}
.wc-card__d { margin: 0 0 12px; font: 500 12px/1.5 var(--ui); color: var(--text-3); }

/* ── Formulario del evento ── */
.wc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.wc-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wc-f--wide { grid-column: 1 / -1; }
.wc-f__k { font: 600 11.5px/1.3 var(--ui); color: var(--text-3); }
.wc-f__in {
    width: 100%; min-height: 36px; padding: 8px 11px;
    border: 1px solid var(--border-2); border-radius: var(--r-sm);
    background: var(--surface-2); color: var(--text); font: 500 13px/1.4 var(--ui);
    resize: vertical;
}
.wc-f__in:focus { outline: none; border-color: var(--primary); background: var(--surface); }
/* Solo lectura NO es «deshabilitado»: el dato sigue siendo legible, solo que ya no es tuyo. */
.wc-f__in[readonly] { background: transparent; border-color: var(--border); color: var(--text-2); }

/* Aviso de fuera de garantía: avisa y pide justificar, nunca bloquea. */
.wc-alert {
    display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 12px 14px;
    border: 1px solid var(--warn-bd); border-radius: var(--r-md);
    background: var(--warn-bg); color: var(--text); font: 500 12.5px/1.55 var(--ui);
}
.wc-alert > svg { flex: none; margin-top: 1px; color: var(--warn); }

/* ── Tabla de líneas ── */
.wc-items { width: 100%; border-collapse: collapse; }
.wc-items th {
    text-align: left; padding: 8px 10px; background: var(--surface-2); color: var(--text-3);
    font: 700 11px/1.3 var(--ui); text-transform: uppercase; letter-spacing: .04em;
    border-bottom: 1px solid var(--border); white-space: nowrap;
}
.wc-th__grp span {
    display: block; margin-top: 2px; text-transform: none; letter-spacing: 0;
    font: 500 10px/1.3 var(--ui); color: var(--text-faint);
}
/* La columna nuestra se separa de la del cliente con un filete: son dos propuestas distintas
   sobre la misma línea, no una continuación. */
.wc-th__ok, .wc-it__ok { border-left: 1px solid var(--border-2); }
.wc-items td {
    padding: 9px 10px; border-bottom: 1px solid var(--border);
    font: 500 12.5px/1.4 var(--ui); color: var(--text); vertical-align: top;
}
.wc-it__what { min-width: 190px; }
.wc-it__kind {
    display: inline-block; margin-bottom: 3px; padding: 1px 7px; border-radius: 999px;
    font: 700 9.5px/1.7 var(--ui); text-transform: uppercase; letter-spacing: .05em;
    background: var(--surface-3); color: var(--text-3);
}
.wc-it__kind--mano_obra { background: var(--cite-bg); color: var(--cite-tx-strong); }
.wc-it__pn { display: block; font: 700 12.5px/1.4 var(--mono); }
.wc-it__desc { display: block; color: var(--text-2); }
.wc-it__sn { display: block; margin-top: 2px; font: 500 11px/1.4 var(--mono); color: var(--text-3); }
.wc-it__cause {
    display: inline-block; margin-top: 4px; padding: 1px 7px; border-radius: 999px;
    border: 1px solid var(--danger-bd); background: var(--danger-bg); color: var(--danger);
    font: 700 10px/1.6 var(--ui);
}
.wc-it__ask, .wc-it__ok { white-space: nowrap; }
.wc-n {
    width: 62px; padding: 5px 7px; margin-right: 3px;
    border: 1px solid var(--border-2); border-radius: 6px;
    background: var(--surface-2); color: var(--text);
    font: 600 12px/1.3 var(--ui); font-variant-numeric: tabular-nums; text-align: right;
}
.wc-n:focus { outline: none; border-color: var(--primary); background: var(--surface); }
.wc-n[readonly] { background: transparent; border-color: transparent; color: var(--text-2); }
/* El importe aprobado es LA cifra de su columna, no una casilla más de un desglose: se escribe
   más ancha y más marcada que las del pedido. */
.wc-n--amt { width: 92px; font-weight: 800; font-size: 12.5px; }
/* La unidad al lado de la cantidad: «3» solo no dice si son tres piezas o tres horas. */
.wc-it__u { margin-right: 4px; font: 500 11px/1.3 var(--ui); color: var(--text-3); }
.wc-it__sum {
    display: block; margin-top: 5px; font: 700 12.5px/1.3 var(--ui);
    font-variant-numeric: tabular-nums;
}
/* Lo que se recortó respecto a lo pedido, marcado: así el cliente no tiene que comparar cifra a
   cifra para saber qué se le tocó. */
.wc-it__ok.is-cut .wc-it__sum, .wc-it__tot td.is-cut { color: var(--warn); }
.wc-it__act { width: 34px; text-align: right; }
.wc-it__tot td {
    padding-top: 11px; border-bottom: none; background: var(--surface-2);
    font: 800 13px/1.3 var(--ui); font-variant-numeric: tabular-nums;
}
.wc-it__tot td:first-child { color: var(--text-3); font-weight: 700; }
.wc-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ── Documentos de cierre ── */
.wc-docs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.wc-doc {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface-2);
}
.wc-doc--pendiente { border-style: dashed; }   /* está, pero todavía no lo ha mirado nadie */
.wc-doc--aprobado { border-color: var(--ok-bd); background: var(--ok-bg); }
.wc-doc--rechazado { border-color: var(--danger-bd); background: var(--danger-bg); }
/* La miniatura del documento, dentro de su propia tarjeta y no en la barra de evidencias: los
   datos de la factura y su imagen son la misma cosa y tienen que leerse juntos. */
.wc-doc__ths { flex: none; margin: 0; }
.wc-doc__ths .wc-th { width: 46px; height: 58px; }
.wc-doc__ths .wc-th img { object-fit: contain; background: #fff; }
.wc-doc__main { flex: 1 1 240px; min-width: 0; font: 600 13px/1.4 var(--ui); }
.wc-doc__sub { display: block; margin-top: 2px; font: 500 11.5px/1.4 var(--ui); color: var(--text-3); }
.wc-doc__warn {
    display: flex; align-items: center; gap: 5px; margin-top: 4px;
    font: 600 11.5px/1.4 var(--ui); color: var(--warn);
}
.wc-doc__notes { display: block; margin-top: 4px; font: 500 11.5px/1.5 var(--ui); color: var(--text-2); }
.wc-doc__st {
    padding: 2px 9px; border-radius: 999px; background: var(--surface-3); color: var(--text-2);
    font: 700 10.5px/1.7 var(--ui); text-transform: uppercase; letter-spacing: .04em;
}
.wc-doc--aprobado .wc-doc__st { background: var(--ok); color: var(--primary-tx); }
.wc-doc--rechazado .wc-doc__st { background: var(--danger); color: #fff; }
.wc-doc__acts { display: flex; gap: 6px; }

.wc-upload {
    padding: 16px; border: 1px dashed var(--border-2); border-radius: var(--r-md);
    background: var(--surface-2); text-align: center;
}
.wc-upload__t { margin: 0; font: 700 13.5px/1.4 var(--ui); color: var(--heading); }
.wc-upload__d { margin: 5px 0 12px; font: 500 12px/1.5 var(--ui); color: var(--text-3); }

.wc-note {
    padding: 11px 13px; margin-bottom: 12px;
    border-left: 3px solid var(--primary); border-radius: 0 var(--r-sm) var(--r-sm) 0;
    background: var(--surface-2); font: 500 12.5px/1.55 var(--ui); color: var(--text);
}
.wc-note__k { display: block; margin-bottom: 3px; font: 700 11px/1.4 var(--ui); color: var(--text-3); }

/* ── Barra lateral ── */
.wc-kv {
    display: flex; justify-content: space-between; gap: 10px; padding: 5px 0;
    font: 500 12px/1.45 var(--ui); border-bottom: 1px solid var(--hairline);
}
.wc-kv:last-child { border-bottom: none; }
.wc-kv span { color: var(--text-3); }
.wc-kv b { color: var(--text); text-align: right; }

.wc-cov { margin-top: 10px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); }
.wc-cov--wide { margin-top: 0; }
.wc-cov__ok, .wc-cov__bad, .wc-cov__na {
    display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
    font: 700 12.5px/1.4 var(--ui);
}
.wc-cov__ok { color: var(--ok); }
.wc-cov__bad { color: var(--warn); }
.wc-cov__na { color: var(--text-3); font-weight: 500; }

/* Evidencias por categoría: nombradas, con la que falta marcada. Un «min. 4» opaco no dice qué
   subir, y es la causa de la mitad de los reclamos devueltos. */
.wc-ev { padding: 8px 0; border-bottom: 1px solid var(--hairline); }
.wc-ev:last-child { border-bottom: none; }
.wc-ev__head { display: flex; align-items: center; gap: 8px; }
.wc-ev__k { flex: 1; font: 600 12px/1.4 var(--ui); color: var(--text-2); }
.wc-ev__req {
    margin-left: 6px; padding: 1px 6px; border-radius: 999px;
    background: var(--surface-3); color: var(--text-3); font: 700 9.5px/1.7 var(--ui);
}
.wc-ev.is-missing .wc-ev__k { color: var(--warn); }
.wc-ev.is-missing .wc-ev__req { background: var(--warn-bg); color: var(--warn); }
.wc-ev__add {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 7px; cursor: pointer;
    border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text-2);
}
.wc-ev__add:hover { background: var(--surface-3); color: var(--primary); border-color: var(--primary); }
.wc-ev__none { font: 500 11.5px/1.5 var(--ui); color: var(--text-faint); }
.wc-ev.is-missing .wc-ev__none { color: var(--warn); }

.wc-ths { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.wc-th {
    position: relative; width: 52px; height: 52px; padding: 0; cursor: pointer;
    border: 1px solid var(--border-2); border-radius: var(--r-sm); overflow: hidden;
    background: var(--surface-2);
}
.wc-th:hover { border-color: var(--primary); }
.wc-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Contador de páginas: un PDF de varias hojas es UN documento, y hay que poder verlo de un vistazo. */
.wc-th__n {
    position: absolute; right: 2px; bottom: 2px; padding: 0 5px; border-radius: 999px;
    background: var(--navy-deep); color: #fff; font: 700 9.5px/1.7 var(--ui);
}

.wc-hist { list-style: none; margin: 0; padding: 0; }
.wc-ev-row {
    display: flex; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--hairline);
    font: 500 12px/1.45 var(--ui);
}
.wc-ev-row:last-child { border-bottom: none; }
.wc-ev-row__d { flex: none; width: 52px; color: var(--text-faint); font-size: 11px; }
.wc-ev-row__who { display: block; font-size: 11px; color: var(--text-3); }
.wc-ev-row__n { display: block; margin-top: 2px; color: var(--text-2); }


/* ── Reclamos dentro de la pestaña de una máquina ── */
.wc-minis { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.wc-mini {
    display: block; width: 100%; padding: 12px 14px; cursor: pointer; text-align: left;
    border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
    transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
}
.wc-mini:hover { border-color: var(--border-2); box-shadow: var(--shadow-sm); }
.wc-mini__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.wc-mini__top b { font: 800 13.5px/1.3 var(--mono); color: var(--text); }
.wc-mini__sp { flex: 1; }
.wc-mini__money { font: 700 13px/1.3 var(--ui); font-variant-numeric: tabular-nums; color: var(--text); }
.wc-mini__money small { font: 500 10.5px/1.3 var(--ui); color: var(--text-3); }
.wc-mini__sub { display: block; margin-top: 7px; font: 500 11.5px/1.4 var(--ui); color: var(--text-3); }
.wc-mini .tp-phases { margin: 0; }

/* ───────────────────────── Móvil ───────────────────────── */

/* En estrecho los chips de contexto se envuelven en dos y tres filas y la cabecera vuelve a
   comerse media pantalla, que es lo que se venía a arreglar. Se van al botón «i», donde ya
   estaban, junto con el historial. */
@media (max-width: 1000px) {
    .wc-hero__meta { display: none; }
}
@media (max-width: 900px) {
    /* La barra lateral pasa DEBAJO, no se comprime: la cobertura y las evidencias se leen igual,
       y la tabla de líneas recupera el ancho que necesita. */
    .wc-cols { grid-template-columns: 1fr; }
    /* Sin dos columnas, el rail cae al final: el hilo puede estirarse porque ya no le quita
       pantalla a nada que esté al lado. */
    .wc-chat__log { max-height: 60vh; }
}
@media (max-width: 620px) {
    .wc__inner, .wc-hero__inner { padding: 0 14px; }
    /* Con poca altura, fijar la cabecera roba pantalla: aquí se queda en el flujo, así que
       tampoco hay nada que plegar ni velo que pintar. */
    .wc-hero { position: static; }
    .wc-hero::after { display: none; }
    .wc-hero__title { font-size: 17px; }
    .wc-hero__back span { display: none; }   /* solo la flecha: el título ya dice dónde estás */
    .wc-kpi { padding: 6px 10px; }
    .wc-card { padding: 12px 13px; }
}

/* Contador de página dentro del visor. `.mc-viewer__t` ya existe en machine_card.css; esto es
   solo el sufijo que dice «página 2 de 3» — en la ficha de máquina no hacía falta porque una
   foto de placa es siempre una sola imagen, y aquí un adjunto puede ser un PDF entero. */
.mc-viewer__c {
    display: block; margin-top: 2px;
    font: 500 11.5px/1.4 var(--ui); color: var(--text-3); opacity: .85;
}


/* ═════════════════════ Selector de máquina del alta ═════════════════════
   La ventana en la que se elige sobre qué máquina va el reclamo. Es un buscador con la lista
   debajo, y no un desplegable flotante, por una razón concreta: quien tiene dos máquinas no
   debería tener que adivinar qué escribir para que aparezcan. */

.wc-pick-dlg { max-width: 620px; width: min(620px, calc(100vw - 32px)); }

.wc-pick__qwrap {
    position: relative; display: flex; align-items: center;
}
.wc-pick__qwrap > svg {
    position: absolute; left: 11px; color: var(--text-faint); pointer-events: none;
}
.wc-pick__q {
    width: 100%; padding: 10px 12px 10px 34px;
    border: 1px solid var(--border-2); border-radius: var(--r-sm);
    background: var(--surface); color: var(--text); font: 500 13.5px/1.3 var(--ui);
}
.wc-pick__q:focus { outline: none; border-color: var(--primary); }

.wc-pick__list {
    margin-top: 10px; max-height: min(48vh, 380px); overflow: auto;
    border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface);
}
.wc-pick__row {
    display: flex; align-items: center; gap: 10px; width: 100%;
    /* La fila entera es el botón, y alta: esto se pulsa desde un móvil, en un patio. */
    min-height: var(--tap); padding: 9px 12px; text-align: left;
    border: 0; border-bottom: 1px solid var(--border); background: transparent;
    color: var(--text); cursor: pointer;
    transition: background .12s var(--ease);
}
.wc-pick__row:last-child { border-bottom: 0; }
/* Elegida, en un selector de VARIAS. El diálogo no se cierra al marcar, así que la fila tiene que
   decir por sí sola que ya está dentro. */
.wc-pick__row.is-on { background: color-mix(in srgb, var(--primary) 7%, var(--surface)); }
.wc-pick__row.is-on b { color: var(--primary); }
.wc-pick__tick { flex: 0 0 auto; display: inline-flex; color: var(--primary); }
/* Encabezado de grupo: «De esta orden» / «Otras de este cliente». */
.wc-pick__grp {
    position: sticky; top: 0; z-index: 1;
    margin: 0; padding: 7px 12px 5px;
    background: var(--surface-2); color: var(--text-3);
    font: 700 10.5px/1.3 var(--ui); text-transform: uppercase; letter-spacing: .05em;
}
/* Cuántas llevas marcadas, encima de la lista: la cuenta es la mitad de la pregunta. */
.wc-pick__n {
    margin: 8px 0 0; font: 600 12px/1.4 var(--ui); color: var(--text-3);
}
.wc-pick__row:hover, .wc-pick__row:focus-visible { background: var(--surface-2); outline: none; }
.wc-pick__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wc-pick__main b { font: 700 13.5px/1.3 var(--ui); }
.wc-pick__sub {
    font: 500 11.5px/1.35 var(--ui); color: var(--text-3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wc-pick__co {
    flex: 0 1 auto; max-width: 34%;
    font: 600 11.5px/1.35 var(--ui); color: var(--text-3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wc-pick__cov {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px; border-radius: 999px;
    font: 600 11px/1.3 var(--ui); color: var(--text-3);
    background: var(--surface-3);
}
.wc-pick__cov--ok  { color: var(--ok); background: var(--ok-bg); }
.wc-pick__cov--bad { color: var(--danger); background: var(--danger-bg); }

.wc-pick__empty, .wc-pick__note {
    margin: 0; padding: 14px 12px;
    font: 500 12.5px/1.5 var(--ui); color: var(--text-3);
}
.wc-pick__note { padding: 8px 2px 0; font-size: 11.5px; color: var(--text-faint); }

@media (max-width: 620px) {
    /* En estrecho sobra el nombre de la empresa: el cliente ya sabe de quién son sus máquinas,
       y lo que hay que poder leer es el n° de serie. */
    .wc-pick__co { display: none; }
    .wc-pick__list { max-height: 56vh; }
}


/* ═════════════════════════ Notas de voz (TPVoice) ═════════════════════════
   El grabador y sus notas. Vive aquí y no en un archivo propio porque hoy solo lo usa Garantías;
   el día que lo estrene el módulo del técnico se muda a su propia hoja, no antes. */

.tpv { display: block; }
.tpv__bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.tpv__btn {
    display: inline-flex; align-items: center; gap: 7px;
    /* Alto de dedo: esto se pulsa en un patio, con guantes. */
    min-height: var(--tap); padding: 9px 15px;
    border: 1px solid var(--border-2); border-radius: 999px;
    background: var(--surface); color: var(--text);
    font: 600 13px/1.2 var(--ui); cursor: pointer;
    transition: border-color .15s var(--ease), background .15s var(--ease);
}
.tpv__btn:hover { border-color: var(--primary); color: var(--primary); }
.tpv__btn--stop {
    border-color: var(--danger-bd); color: var(--danger); background: var(--danger-bg);
}
.tpv__btn--stop:hover { border-color: var(--danger); color: var(--danger); }

.tpv__rec {
    display: inline-flex; align-items: center; gap: 7px;
    font: 700 14px/1 var(--ui); color: var(--danger);
    font-variant-numeric: tabular-nums;
}
.tpv__rec i {
    width: 9px; height: 9px; border-radius: 50%; background: var(--danger);
    animation: tpv-latido 1.1s var(--ease) infinite;
}
@keyframes tpv-latido { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
/* Quien pide no ver movimiento no quiere ver un punto parpadeando: se queda fijo, que sigue
   diciendo lo mismo. */
@media (prefers-reduced-motion: reduce) { .tpv__rec i { animation: none; } }

.tpv__hint  { font: 500 11.5px/1.4 var(--ui); color: var(--text-3); }
.tpv__hint--busy { color: var(--primary); font-weight: 600; }
.tpv__aviso {
    display: inline-flex; align-items: center; gap: 5px;
    font: 600 11.5px/1.3 var(--ui); color: var(--warn);
}
.tpv__nope {
    margin: 0; display: flex; align-items: center; gap: 6px;
    font: 500 12px/1.45 var(--ui); color: var(--text-3);
}

.tpv__list { display: flex; flex-direction: column; gap: 10px; }
.tpv__list:not(:empty) { margin-top: 12px; }
.tpv__note {
    border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--surface); padding: 10px 11px;
}
.tpv__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tpv__audio { height: 34px; max-width: 100%; flex: 1 1 220px; min-width: 180px; }
.tpv__meta  { font: 500 11.5px/1.3 var(--ui); color: var(--text-3); }
.tpv__chip {
    padding: 3px 8px; border-radius: 999px; background: var(--surface-3);
    font: 600 11px/1.3 var(--ui); color: var(--text-3);
}
.tpv__chip--ed  { background: var(--ok-bg); color: var(--ok); }
.tpv__chip--bad {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--danger-bg); color: var(--danger);
}
.tpv__ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: var(--r-sm);
    border: 1px solid var(--border-2); background: var(--surface);
    color: var(--text-3); cursor: pointer;
}
.tpv__ico:hover { color: var(--primary); border-color: var(--primary); }
.tpv__ico--del:hover { color: var(--danger); border-color: var(--danger-bd); }
.tpv__ico[disabled] { opacity: .5; cursor: default; }

.tpv__text {
    width: 100%; margin-top: 8px; padding: 8px 10px; resize: vertical;
    border: 1px solid var(--border-2); border-radius: var(--r-sm);
    background: var(--surface-2); color: var(--text);
    font: 500 13px/1.5 var(--ui);
}
.tpv__text:focus { outline: none; border-color: var(--primary); background: var(--surface); }
.tpv__err {
    margin: 8px 0 0; font: 500 12px/1.45 var(--ui); color: var(--text-3);
}

/* Dentro del diálogo de alta: el grabador va ENCIMA de «Qué falló», separado por una línea, para
   que se lea como «cuéntalo hablando… o escríbelo aquí debajo». */
.tpv-host {
    margin: 4px 0 14px; padding-bottom: 12px;
    border-bottom: 1px dashed var(--border-2);
}

/* En el reclamo abierto, junto al relato de la avería. */
.wc-voice { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.wc-voice__h {
    display: flex; align-items: center; gap: 7px; margin: 0 0 10px;
    font: 700 12.5px/1.3 var(--ui); color: var(--text-2);
    text-transform: uppercase; letter-spacing: .03em;
}

/* ─────────────── Borrado permanente (solo developer) ───────────────
   Se pinta en rojo pero SIN relleno: es un botón que casi nunca se pulsa y que no debe competir
   por la mirada con «Dictaminar» o «Enviar». El relleno llega al pasar por encima, cuando ya hay
   intención. Los tokens son los de siempre (`tokens.css`), así que el modo oscuro sale solo. */
.wc-nuke {
    color: var(--danger); border-color: var(--danger-bd); background: transparent;
}
.wc-nuke:hover { background: var(--danger-bg-hov); border-color: var(--danger); }

/* ─────────────── «Que toca ahora» ───────────────
   Pegada a la barra de fases: la barra dice DONDE esta el reclamo y esto dice QUIEN lo mueve.
   Dos intensidades y no dos colores: cuando toca a quien mira, la banda se enciende en el naranja
   de aviso; cuando toca al otro, se apaga a un gris de superficie. Que la que espera sea gris es
   deliberado — una pantalla donde todo grita no deja ver lo que de verdad reclama atencion. */
.wc-next {
    display: flex; flex-direction: column; gap: 6px;
    margin-top: 10px; padding: 9px 12px; border-radius: 10px;
    background: var(--surface-2); border: 1px solid var(--border);
}
.wc-next--mine { background: var(--warn-bg); border-color: var(--warn-bd); }
.wc-next__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wc-next__who {
    flex: none; font: 800 11px/1.2 var(--ui); text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-2);
}
.wc-next--mine .wc-next__who { color: var(--warn); }
.wc-next__what { flex: 1 1 240px; font: 600 13px/1.45 var(--ui); color: var(--text); }
.wc-next__go {
    flex: none; padding: 5px 11px; border-radius: 7px; cursor: pointer;
    font: 700 12px/1 var(--ui); color: var(--text-2);
    background: transparent; border: 1px solid var(--border-2);
}
.wc-next__go:hover { color: var(--text); border-color: var(--text-3); }
.wc-next--mine .wc-next__go { color: var(--warn); border-color: var(--warn-bd); }
/* Lo que falta para poder enviar. Antes vivia detras de un boton («Falta algo para enviar») que
   habia que pulsar para leer una lista que ya estaba en memoria. */
.wc-next__miss {
    margin: 0; padding-left: 18px; font: 500 12.5px/1.65 var(--ui); color: var(--text-2);
}

/* El sello de la etapa en curso, cuando ademas dice de quien depende. */
.wc-step__st.is-mine { color: var(--warn); border-color: var(--warn-bd); background: var(--warn-bg); }
.wc-step__st.is-wait { color: var(--text-3); }

/* ─────────────── La instruccion de la tabla de lineas ───────────────
   Va ENCIMA de la tabla y no al pie: una instruccion que se lee despues de la tabla se lee
   despues de haberse equivocado. En un tono de aviso suave, para que se distinga del texto
   descriptivo de la etapa sin gritar. */
.wc-guide {
    margin: 0 0 12px; padding: 8px 11px; border-radius: 8px;
    background: var(--surface-2); border-left: 3px solid var(--warn-bd);
    font: 500 12.5px/1.6 var(--ui); color: var(--text-2);
}
.wc-guide b { color: var(--text); font-weight: 700; }

/* El importe PEDIDO, de fantasma en la casilla de «Aprobado». No es un valor guardado: es la
   escala, para que quien dictamina no tenga que ir a buscarla a la columna de al lado. Se pinta
   mas tenue que un valor real para que nadie lo confunda con una cifra ya escrita. */
.wc-n::placeholder { color: var(--text-3); opacity: .55; font-weight: 500; }

/* ─────────────── El recorrido, en vertical (dialogo del boton «i») ───────────────
   La barra de la cabecera es horizontal porque ahi compite por el ancho. Aqui hay sitio, y en
   vertical cada fase puede llevar debajo lo que le falta sin que la linea se rompa. */
.wc-info--cols { display: grid; grid-template-columns: minmax(190px, 240px) 1fr; gap: 22px; }
/* El recorrido se queda ANCLADO arriba mientras el historial se desplaza. Sin esto, un reclamo
   con veinte movimientos deja la columna izquierda en blanco justo cuando mas falta hace: se
   baja a leer que paso y se pierde de vista por donde va. */
.wc-info__flow { min-width: 0; position: sticky; top: 0; align-self: start; }
.wc-info__side { min-width: 0; display: flex; flex-direction: column; gap: 4px; }

.wc-flow { display: flex; flex-direction: column; }
.wc-flow__node { position: relative; display: flex; gap: 10px; padding-bottom: 14px; }
.wc-flow__node:last-child { padding-bottom: 0; }
/* La linea que une los nodos sale del propio nodo, no de un elemento aparte: asi no puede
   quedarse colgando cuando el ultimo nodo cambia de sitio. */
.wc-flow__node:not(:last-child)::before {
    content: ""; position: absolute; left: 10px; top: 22px; bottom: 2px;
    width: 2px; background: var(--border-2);
}
.wc-flow__node.is-done::before { background: var(--ok); }
.wc-flow__dot {
    position: relative; z-index: 1; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 999px;
    background: var(--surface-3); color: var(--text-2);
    font: 700 11.5px/1 var(--ui); font-variant-numeric: tabular-nums;
}
.wc-flow__node.is-done .wc-flow__dot { background: var(--ok); color: #fff; }
.wc-flow__node.is-now  .wc-flow__dot { background: var(--primary); color: var(--primary-tx); }
.wc-flow__node.is-cancel .wc-flow__dot { background: var(--danger); color: #fff; }
.wc-flow__body { min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-top: 2px; }
.wc-flow__body b { font: 700 12.5px/1.3 var(--ui); color: var(--heading); }
.wc-flow__node.is-todo .wc-flow__body b { color: var(--text-3); font-weight: 600; }
.wc-flow__here {
    font: 800 10px/1.2 var(--ui); text-transform: uppercase; letter-spacing: .06em;
    color: var(--primary);
}
.wc-flow__hint { font: 500 11.5px/1.5 var(--ui); color: var(--text-3); }
/* Lo que falta, colgando de su fase. Es el mismo texto de la banda de la cabecera: si aqui se
   redactara aparte, el dialogo y la pantalla acabarian diciendo cosas distintas. */
.wc-flow__next {
    margin-top: 2px; padding: 5px 8px; border-radius: 7px;
    background: var(--surface-2); border-left: 2px solid var(--border-2);
    font: 500 11.5px/1.5 var(--ui); color: var(--text-2);
}
.wc-flow__next.is-mine {
    background: var(--warn-bg); border-left-color: var(--warn-bd); color: var(--warn);
    font-weight: 600;
}

/* En estrecho, el recorrido va PRIMERO y a lo ancho: es la respuesta corta, y el historial la
   larga. Apilarlas al reves obligaria a bajar hasta el final para saber por donde va el reclamo. */
@media (max-width: 620px) {
    .wc-info--cols { grid-template-columns: 1fr; gap: 16px; }
}

/* El dialogo del boton «i» lleva dos columnas: pisa el max-width base de `.tp-dlg` (440px). */
.tp-dlg--wcinfo { max-width: min(760px, calc(100vw - 32px)); }

/* ─────────────── Reposición de pieza ───────────────
   El chip de tipo en la bandeja. Solo lo llevan las reposiciones: marcar TODO haría que la marca
   dejara de significar nada, y el reconocimiento de costos es el caso de siempre. */
.wc-kind {
    display: inline-block; margin-top: 3px; padding: 1px 7px; border-radius: 999px;
    font: 700 10px/1.6 var(--ui); text-transform: uppercase; letter-spacing: .04em;
}
.wc-kind--rep { color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn-bd); }

/* Elegir de qué va el reclamo, antes del formulario. Dos tarjetas grandes: no es un dato más,
   es la bifurcación que decide qué se le va a pedir a quien lo abre. */
.tp-dlg--wckind { max-width: min(680px, calc(100vw - 32px)); }
.wc-kindpick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wc-kindpick__card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
    padding: 16px 15px; border-radius: 12px; cursor: pointer; text-align: left;
    background: var(--surface); border: 1px solid var(--border);
}
.wc-kindpick__card:hover { border-color: var(--primary); background: var(--surface-2); }
.wc-kindpick__ic { color: var(--primary); }
.wc-kindpick__card b { font: 700 14px/1.3 var(--ui); color: var(--heading); }
.wc-kindpick__d { font: 500 12px/1.55 var(--ui); color: var(--text-2); }
@media (max-width: 560px) { .wc-kindpick { grid-template-columns: 1fr; } }

/* Los datos del envío ya registrado, en la etapa 4. */
.wc-ship {
    display: flex; flex-direction: column; gap: 6px;
    padding: 11px 13px; border-radius: 10px;
    background: var(--ok-bg); border: 1px solid var(--ok-bd);
}