/* ═══════════════════════════════════════════════════════════════
   TECPORT — CAMPO y SERVICIO.

   Dos pantallas del mismo flujo, con dos públicos muy distintos, y por eso una sola hoja: los
   estados, las etapas y los colores de las esperas tienen que decir lo mismo en las dos.

   `.cmp*` es CAMPO: el móvil del técnico. Todo grande, mucho aire, una cosa por fila. Nada se
   pulsa por debajo de 44px porque esto se usa con guantes.
   `.svc*` es SERVICIO: el escritorio del supervisor. Densidad de tablero.
   ═══════════════════════════════════════════════════════════════ */

/* ═════════════════════════ CAMPO (el técnico) ═════════════════════════ */

/* El cuerpo pinta el fondo HASTA ABAJO. Sin el min-height, una pantalla corta —la de «llegué»,
   que es un botón y nada más— dejaba ver el fondo de la app por debajo, con un corte de color a
   media altura que parecía la página rota. */
/* `.adm--page .adm__body` viene con tope de 1100px y centrado, que es lo correcto para una
   consola de formularios. Estas dos pantallas son a sangre: el tablero es una tabla ancha y la
   del técnico se lee a pantalla completa en un móvil. Se levanta el tope aquí y el ancho de
   lectura lo pone cada `wrap`, igual que hace Garantías. */
/* La especificidad es a propósito: `console.css` se carga DESPUÉS y su `.adm--page .adm__body`
   empata a (0,2,0). Con la clase del módulo en el mismo elemento raíz se sube a (0,3,0) y gana
   sin tener que reordenar hojas ni recurrir a !important. */
.adm--page.cmp .adm__body, .adm--page.svc .adm__body { max-width: none; }
.adm--page.cmp .adm__body { background: var(--app); min-height: 100%; padding: 0; }

.cmp-wrap {
    max-width: 720px; margin: 0 auto;
    padding: calc(18px + var(--safe-top)) max(16px, var(--safe-left))
             calc(90px + var(--safe-bottom)) max(16px, var(--safe-right));
}

.cmp-h1  { margin: 4px 0 2px; font: 800 24px/1.2 var(--ui); color: var(--text); }
.cmp-sub { margin: 0 0 20px; font: 500 13.5px/1.4 var(--ui); color: var(--text-3); }

.cmp-group {
    margin: 22px 0 10px; font: 700 12px/1.3 var(--ui); color: var(--text-3);
    text-transform: uppercase; letter-spacing: .06em;
}
.cmp-group--late { color: var(--danger); }

/* ── La tarjeta de una visita ──
   Es el elemento más importante de esta pantalla: se mira de reojo, entre el ruido de un patio,
   para saber a dónde toca ir. Por eso el CLIENTE va en grande y arriba, y la hora encima. */
.cmp-card {
    display: block; width: 100%; text-align: left; position: relative;
    margin-bottom: 12px; padding: 15px 16px 46px;
    border: 1px solid var(--border); border-left: 4px solid var(--border-2);
    border-radius: var(--r-md); background: var(--surface);
    box-shadow: var(--shadow-sm); cursor: pointer;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .1s var(--ease);
}
.cmp-card:hover  { box-shadow: var(--shadow-md); border-left-color: var(--primary); }
.cmp-card:active { transform: scale(.995); }
.cmp-card.is-open { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }

.cmp-card__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.cmp-card__when {
    display: inline-flex; align-items: center; gap: 5px;
    font: 600 12.5px/1.2 var(--ui); color: var(--text-3);
}
.cmp-card__live {
    padding: 3px 9px; border-radius: 999px; background: var(--accent); color: #fff;
    font: 700 11px/1.3 var(--ui); text-transform: uppercase; letter-spacing: .04em;
}
/* El correlativo. `margin-left: auto` lo manda al hueco de la derecha, que en esta tarjeta está
   siempre libre; tabular para que dos números seguidos no bailen. Atenuado porque no es lo que se
   viene a leer — se busca cuando alguien lo pregunta por radio. */
.cmp-card__no {
    margin-left: auto;
    font: 700 12px/1.2 var(--ui); color: var(--text-3);
    font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.cmp-prio { padding: 3px 9px; border-radius: 999px; font: 700 11px/1.3 var(--ui); }
.cmp-prio--alta    { background: var(--warn-bg); color: var(--warn); }
.cmp-prio--urgente { background: var(--danger-bg); color: var(--danger); }

/* Cómo se recoge la visita, arriba y no escondido en un campo: cambia lo que la orden va a pedir
   para cerrarse. Neutro a propósito — no es una alarma, es una forma de trabajar. */
.svc-directa {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 999px;
    background: var(--surface-3); color: var(--text-2); font: 700 11px/1.3 var(--ui);
}

.cmp-card__client  { font: 800 18px/1.25 var(--ui); color: var(--text); }
.cmp-card__machine,
.cmp-card__site {
    display: flex; align-items: center; gap: 6px; margin-top: 6px;
    font: 600 13px/1.35 var(--ui); color: var(--text-2);
}
.cmp-card__site { color: var(--text-3); font-weight: 500; }
/* Modelo y serial, DEBAJO del apodo de la casa. Se van al segundo renglón y atenuados porque no
   sirven para encontrar la máquina, sino para confirmar que se está delante de la correcta. */
.cmp-card__mach2, .cmp-head__mach2 {
    margin-top: 2px; padding-left: 20px;
    font: 500 12px/1.35 var(--ui); color: var(--text-3);
}
.cmp-card__why {
    margin: 9px 0 0; font: 500 13px/1.45 var(--ui); color: var(--text-3);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cmp-card__with {
    display: flex; align-items: center; gap: 5px; margin-top: 8px;
    font: 500 12px/1.3 var(--ui); color: var(--text-3);
}
.cmp-card__go {
    position: absolute; right: 14px; bottom: 12px;
    padding: 7px 16px; border-radius: 999px;
    background: var(--primary); color: var(--primary-tx);
    font: 700 12.5px/1.2 var(--ui);
}

/* ── La visita abierta ── */
.cmp-back {
    display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap);
    padding: 0 4px 0 0; margin-bottom: 6px;
    border: 0; background: none; color: var(--text-3);
    font: 600 13px/1.2 var(--ui); cursor: pointer;
}
.cmp-back:hover { color: var(--primary); }

.cmp-head {
    padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--border);
}
.cmp-head__row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.cmp-head__client  { font: 800 21px/1.25 var(--ui); color: var(--text); }
.cmp-head__no {
    flex: 0 0 auto;
    font: 700 13px/1.2 var(--ui); color: var(--text-3);
    font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.cmp-head__machine {
    display: flex; align-items: center; gap: 6px; margin-top: 6px;
    font: 600 13.5px/1.35 var(--ui); color: var(--text-2);
}
.cmp-head__mach2 { padding-left: 21px; font-size: 12.5px; }
.cmp-head__why {
    margin: 10px 0 0; padding: 10px 12px; border-radius: var(--r-sm);
    background: var(--surface-2); font: 500 13.5px/1.5 var(--ui); color: var(--text-2);
}
.cmp-head__live {
    display: flex; align-items: center; gap: 6px; margin-top: 10px;
    font: 500 12.5px/1.3 var(--ui); color: var(--accent);
}
.cmp-head__live b { font-variant-numeric: tabular-nums; }

/* ── Llegar ── */
.cmp-arrive { text-align: center; padding: 26px 8px; }
.cmp-arrive__t { margin: 0 0 6px; font: 700 16px/1.4 var(--ui); color: var(--text); }
.cmp-arrive__d { margin: 0 0 22px; font: 500 13.5px/1.55 var(--ui); color: var(--text-3); }

/* ── Botones ── */
.cmp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: var(--tap); padding: 0 20px;
    border: 1px solid transparent; border-radius: 999px;
    background: var(--primary); color: var(--primary-tx);
    font: 700 14px/1.2 var(--ui); cursor: pointer;
    transition: filter .15s var(--ease);
}
.cmp-btn:hover { filter: brightness(1.08); }
.cmp-btn[disabled] { opacity: .55; cursor: default; }
.cmp-btn--big { width: 100%; min-height: 58px; font-size: 16px; }
.cmp-btn--sm  { min-height: 38px; padding: 0 14px; font-size: 13px; }
.cmp-btn--ghost {
    background: var(--surface); color: var(--text-2); border-color: var(--border-2);
}
.cmp-btn--ghost:hover { color: var(--primary); border-color: var(--primary); filter: none; }

/* ── El horómetro: la primera pregunta ── */
.cmp-hour {
    padding: 13px 14px; margin-bottom: 18px;
    border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
}
.cmp-hour.is-missing { border-color: var(--warn); background: var(--warn-bg); }
.cmp-hour__k { display: block; margin-bottom: 8px; font: 700 13px/1.2 var(--ui); color: var(--text-2); }
.cmp-hour__req {
    margin-left: 6px; padding: 2px 7px; border-radius: 999px;
    background: var(--warn); color: #fff; font: 700 10.5px/1.3 var(--ui);
    text-transform: uppercase; letter-spacing: .04em;
}
.cmp-hour__row { display: flex; align-items: center; gap: 8px; }
.cmp-hour__in {
    flex: 1 1 auto; min-width: 0; min-height: var(--tap); padding: 0 12px;
    border: 1px solid var(--border-2); border-radius: var(--r-sm);
    background: var(--surface); color: var(--text);
    /* Grande y tabular: es un número que se teclea mirando una placa sucia. */
    font: 700 20px/1 var(--ui); font-variant-numeric: tabular-nums;
}
.cmp-hour__in:focus { outline: none; border-color: var(--primary); }
.cmp-hour__u { font: 700 15px/1 var(--ui); color: var(--text-3); }

/* ── Las tres etapas ── */
.cmp-tabs {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px;
}
.cmp-tab {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
    min-height: 62px; padding: 9px 4px;
    border: 1px solid var(--border-2); border-radius: var(--r-md);
    background: var(--surface); color: var(--text-3); cursor: pointer;
    transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
}
.cmp-tab:hover { border-color: var(--primary); }
.cmp-tab.is-on {
    border-color: var(--primary); background: var(--primary); color: var(--primary-tx);
}
.cmp-tab__n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--surface-3); color: var(--text-3);
    font: 800 12px/1 var(--ui);
}
.cmp-tab.is-on .cmp-tab__n { background: rgba(255,255,255,.22); color: #fff; }
.cmp-tab__l { font: 700 11.5px/1.2 var(--ui); text-align: center; }
.cmp-tab__c {
    position: absolute; top: -6px; right: -4px;
    min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
    background: var(--accent); color: #fff;
    font: 700 11px/19px var(--ui); text-align: center;
}
.cmp-stage__hint {
    margin: 0 0 14px; font: 500 12.5px/1.45 var(--ui); color: var(--text-3);
}

.cmp-tools {
    display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 16px;
}
.cmp-voice { flex: 1 1 100%; }
.cmp-photo { position: relative; }

/* ── Lo anotado ── */
.cmp-entries { display: flex; flex-direction: column; gap: 10px; }
.cmp-entry {
    padding: 12px 13px; border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface);
}
.cmp-entry__b {
    margin: 0; font: 500 14px/1.55 var(--ui); color: var(--text); white-space: pre-wrap;
}
.cmp-entry__f {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 9px;
}
.cmp-entry__who { font: 600 11.5px/1.3 var(--ui); color: var(--text-3); }
.cmp-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: 999px; background: var(--surface-3);
    font: 600 11px/1.3 var(--ui); color: var(--text-3);
}
.cmp-chip--ok { background: var(--ok-bg); color: var(--ok); }

.cmp-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; margin-left: auto; border-radius: var(--r-sm);
    border: 1px solid var(--border-2); background: var(--surface);
    color: var(--text-3); cursor: pointer;
}
.cmp-ico:hover { color: var(--danger); border-color: var(--danger-bd); }
.cmp-ico--onimg {
    position: absolute; top: 6px; right: 6px; margin: 0;
    background: rgba(255,255,255,.9); border-color: transparent;
}

.cmp-photos {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    gap: 8px; margin-top: 14px;
}
.cmp-photo__i { position: relative; margin: 0; }
.cmp-photo__i img {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: var(--r-sm); border: 1px solid var(--border);
}

.cmp-foot { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border); }

.cmp-empty {
    margin: 18px 0; font: 500 13.5px/1.55 var(--ui); color: var(--text-3); text-align: center;
}
.cmp-empty--soft {
    padding: 20px 14px; border: 1px dashed var(--border-2); border-radius: var(--r-md);
}
.cmp-nada { text-align: center; padding: 44px 16px; color: var(--text-faint); }
.cmp-nada__t { margin: 14px 0 6px; font: 700 16px/1.3 var(--ui); color: var(--text-2); }
.cmp-nada__d { margin: 0; font: 500 13.5px/1.55 var(--ui); color: var(--text-3); }

.cmp-skel {
    height: 108px; margin-bottom: 12px; border-radius: var(--r-md);
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
    background-size: 400% 100%; animation: cmp-shimmer 1.3s ease infinite;
}
@keyframes cmp-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .cmp-skel { animation: none; } }

/* Aviso flotante. Abajo y no arriba: en un móvil, arriba está el pulgar de nadie y abajo está
   justo donde acaba de pulsar. */
.cmp-toast {
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: calc(20px + var(--safe-bottom)); z-index: var(--z-float);
    max-width: min(92vw, 460px); padding: 12px 18px; border-radius: 999px;
    background: var(--navy-deep); color: #fff;
    font: 600 13px/1.4 var(--ui); box-shadow: var(--shadow-lg);
    animation: cmp-in .22s var(--ease);
}
.cmp-toast--err { background: var(--danger-solid); }
.cmp-toast.is-out { opacity: 0; transition: opacity .3s var(--ease); }
@keyframes cmp-in { from { opacity: 0; transform: translate(-50%, 12px); } }
@media (prefers-reduced-motion: reduce) { .cmp-toast { animation: none; } }

@media (max-width: 520px) {
    .cmp-wrap { padding: 14px 12px 90px; }
    .cmp-h1 { font-size: 21px; }
    .cmp-card__client { font-size: 17px; }
    .cmp-tab__l { font-size: 10.5px; }
}


/* ═══════════════════ MI PARTE (Campo) ═══════════════════
   El formato cerrado que llena el técnico. Un acordeón y no un formulario largo: en un móvil, con
   guantes y la máquina delante, una pantalla con nueve campos abiertos se contesta a medias. Cada
   paso cerrado enseña LO QUE SE CONTESTÓ, así que el avance se ve sin abrir nada.

   Todo lo pulsable pasa de 44px, como el resto de `.cmp*`. */

.cmp-parte {
    margin: 0 0 18px; padding: 14px 14px 16px;
    border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
}
.cmp-parte__h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cmp-parte__t {
    display: flex; align-items: center; gap: 7px; margin: 0;
    font: 800 16px/1.25 var(--ui); color: var(--text);
}
.cmp-parte__n { margin-left: auto; font: 600 12px/1.3 var(--ui); color: var(--text-3); }
.cmp-parte__off {
    display: flex; align-items: center; gap: 6px; margin: 10px 0 0;
    font: 500 12px/1.4 var(--ui); color: var(--text-3);
}
.cmp-parte__d { margin: 12px 0 0; font: 500 12px/1.5 var(--ui); color: var(--text-3); }

/* ── Un paso ── */
.cmp-steps { margin-top: 12px; border-top: 1px solid var(--border); }
.cmp-step { border-bottom: 1px solid var(--border); }
.cmp-step__h {
    display: flex; align-items: center; gap: 11px; width: 100%;
    min-height: 54px; padding: 8px 2px; border: 0; background: none; cursor: pointer;
    text-align: left; color: var(--text);
}
.cmp-step__n {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 999px;
    background: var(--surface-3); color: var(--text-3); font: 700 12px/1 var(--ui);
}
/* Sobre `--ok` NO se pone blanco: en tema oscuro ese verde es claro (#4cd394) y el blanco encima
   no se lee. `--surface` es la pareja que funciona en los dos temas —blanco en claro, casi negro
   en oscuro— y es la misma trampa que ya está avisada para `--primary` en style.css. */
.cmp-step.is-done .cmp-step__n { background: var(--ok); color: var(--surface); }
.cmp-step.is-open .cmp-step__n { background: var(--primary); color: var(--primary-tx); }
.cmp-step__t {
    min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px;
    font: 700 14px/1.3 var(--ui);
}
.cmp-step__opt { font: 500 11px/1 var(--ui); color: var(--text-faint); font-style: normal; }
.cmp-step__v {
    font: 500 12.5px/1.35 var(--ui); color: var(--text-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cmp-step__v--none { color: var(--text-faint); font-style: italic; }
.cmp-step__go { flex: none; color: var(--text-3); line-height: 0; }
.cmp-step__b { padding: 2px 2px 16px; display: flex; flex-direction: column; gap: 10px; }

/* La ayuda-memoria. SIEMPRE visible mientras el paso está abierto, no detrás de un icono: está
   escrita para alguien que no trata con ordenadores, y esconderla es no ponerla. */
.cmp-step__hint {
    display: flex; gap: 8px; margin: 0; padding: 10px 12px;
    border-radius: var(--r-sm); background: var(--surface-2);
    font: 500 12.5px/1.5 var(--ui); color: var(--text-2);
}
.cmp-step__hint svg { flex: none; margin-top: 2px; color: var(--text-3); }
.cmp-step__val { margin: 0; font: 600 13.5px/1.4 var(--ui); color: var(--text); }
.cmp-step__val i { font-weight: 500; color: var(--text-3); }
.cmp-step__wait { margin: 0; font: 500 13px/1.5 var(--ui); color: var(--text-3); }
.cmp-step__save { align-self: flex-start; }

/* ── El selector de máquina del parte ──
   Solo existe cuando la orden lleva varias. Botones anchos y altos: esto se pulsa con guantes.
   Cada uno lleva su cuenta, porque delante de tres máquinas la pregunta no es «¿cuál toca?» sino
   «¿cuál me queda?». */
.cmp-mset { margin: 0 0 14px; }
.cmp-mset__l {
    margin: 0 0 7px; font: 700 11px/1.3 var(--ui); color: var(--text-3);
    text-transform: uppercase; letter-spacing: .05em;
}
.cmp-mset__row { display: flex; flex-wrap: wrap; gap: 8px; }
.cmp-mtab {
    flex: 1 1 140px; min-width: 0;
    display: flex; flex-direction: column; gap: 3px;
    min-height: var(--tap); padding: 9px 12px; text-align: left;
    border: 1px solid var(--border-2); border-radius: var(--r-sm);
    background: var(--surface); color: var(--text-2); cursor: pointer;
    transition: border-color .12s var(--ease), background .12s var(--ease);
}
.cmp-mtab b {
    font: 700 13.5px/1.25 var(--ui); color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cmp-mtab span {
    display: inline-flex; align-items: center; gap: 4px;
    font: 600 11.5px/1.3 var(--ui); color: var(--text-3);
}
.cmp-mtab:hover { border-color: var(--primary); }
/* La que se está llenando: barra a la izquierda, como el resto de «lo que estás mirando». */
.cmp-mtab.is-on {
    border-color: var(--primary); background: var(--surface-2);
    box-shadow: inset 3px 0 0 var(--primary);
}
.cmp-mtab.is-done span { color: var(--ok); }
/* La máquina de otro. Atenuada, no escondida: se puede entrar —en el sitio la cuadrilla se
   reparte distinto de lo que decía el papel— pero no compite con las tuyas. */
.cmp-mtab--otra { background: var(--surface-2); border-style: dashed; opacity: .8; }
.cmp-mtab--otra b { color: var(--text-2); font-weight: 600; }
.cmp-mset__l--otras { margin-top: 12px; }
.cmp-mset__none { margin: 0; font: 500 12.5px/1.4 var(--ui); color: var(--text-3); }
.cmp-mset__edit {
    margin-top: 10px; display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border: 1px solid var(--border-2); border-radius: 999px;
    background: transparent; color: var(--text-3); font: 600 11.5px/1.3 var(--ui);
    cursor: pointer;
}
.cmp-mset__edit:hover { color: var(--primary); border-color: var(--primary); }

/* De qué me encargo: una fila por máquina, del alto del dedo. */
.cmp-mine { display: flex; flex-direction: column; gap: 8px; }
.cmp-mine__row {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    min-height: var(--tap); padding: 10px 12px; cursor: pointer;
    border: 1px solid var(--border-2); border-radius: var(--r-sm);
    background: var(--surface); color: var(--text-2);
}
.cmp-mine__row.is-on { border-color: var(--primary); background: var(--surface-2); }
.cmp-mine__tick { width: 16px; color: var(--primary); flex: 0 0 auto; }
.cmp-mine__main { min-width: 0; }
.cmp-mine__main b {
    display: block; font: 700 13.5px/1.25 var(--ui); color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cmp-mine__sub { display: block; margin-top: 2px; font: 500 11.5px/1.3 var(--ui); color: var(--text-3); }

/* Lo que ya leyó otro en esta máquina. Se ofrece, no se escribe: que dos partes digan números
   distintos es un aviso para el supervisor, y rellenarlo solo lo borraría. */
.cmp-hour__hint {
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    margin: 0 0 10px; padding: 9px 11px; border-radius: var(--r-sm);
    background: var(--surface-2); font: 500 12.5px/1.4 var(--ui); color: var(--text-2);
}
.cmp-hour__use {
    margin-left: auto; padding: 5px 12px; cursor: pointer;
    border: 1px solid var(--border-2); border-radius: 999px;
    background: var(--surface); color: var(--primary); font: 700 11.5px/1.3 var(--ui);
}
.cmp-hour__use:hover { border-color: var(--primary); }

/* Se contestó «ninguno». Verde y no gris: es una respuesta dada, no un hueco. */
.cmp-none {
    display: flex; align-items: center; gap: 7px;
    margin: 0 0 10px; padding: 9px 11px; border-radius: var(--r-sm);
    background: var(--ok-bg, var(--surface-2)); color: var(--ok, var(--text-2));
    font: 600 12.5px/1.45 var(--ui);
}

/* El rótulo que convierte tres pestañas en un filtro. Sin él son la barra de fases del
   supervisor, y el técnico no mueve fases. */
.cmp-tabs__l {
    margin: 0 0 6px; font: 700 11px/1.3 var(--ui); color: var(--text-3);
    text-transform: uppercase; letter-spacing: .05em;
}

/* ── Campos ── */
.cmp-in {
    width: 100%; min-height: var(--tap); padding: 11px 13px;
    border: 1px solid var(--border-2); border-radius: var(--r-sm);
    background: var(--surface-2); color: var(--text);
    /* 16px o iOS hace zoom al enfocar y descoloca la pantalla entera. */
    font: 500 16px/1.4 var(--ui);
}
.cmp-in:focus { outline: none; border-color: var(--primary); background: var(--surface); }
.cmp-in--area { min-height: 120px; resize: vertical; line-height: 1.5; }
.cmp-lbl { font: 700 12.5px/1.3 var(--ui); color: var(--text-2); }
.cmp-dim { font: 500 13px/1.4 var(--ui); color: var(--text-faint); }
.cmp-btn--wide { width: 100%; justify-content: center; }

/* ── Los seis tipos de servicio ──
   Botones grandes con el CÓDIGO en grande: es la sigla que el técnico tiene en la cabeza y en el
   papel, y el nombre largo va debajo para quien todavía no. */
.cmp-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cmp-type {
    display: flex; flex-direction: column; gap: 3px; min-height: 62px; padding: 10px 11px;
    border: 1px solid var(--border-2); border-left: 3px solid var(--c, var(--border-2));
    border-radius: var(--r-sm); background: var(--surface-2); cursor: pointer; text-align: left;
}
.cmp-type b { font: 800 13px/1.2 var(--ui); color: var(--c, var(--text)); }
.cmp-type span { font: 500 11.5px/1.3 var(--ui); color: var(--text-3); }
.cmp-type.is-on { background: var(--surface-3); border-color: var(--c, var(--primary)); }
.cmp-type.is-on span { color: var(--text-2); }

/* ── Los números de preventivo ── */
.cmp-plans { display: flex; flex-wrap: wrap; gap: 8px; }
.cmp-plan {
    min-width: 62px; min-height: var(--tap); padding: 0 14px;
    border: 1px solid var(--border-2); border-radius: var(--r-sm);
    background: var(--surface-2); color: var(--text-2);
    font: 700 14px/1 var(--ui); cursor: pointer;
}
.cmp-plan.is-on { background: var(--primary); color: var(--primary-tx); border-color: var(--primary); }

/* ── Sí / No ── */
.cmp-yesno { display: flex; gap: 8px; flex-wrap: wrap; }
.cmp-yn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    flex: 1 1 140px; min-height: var(--tap); padding: 0 14px;
    border: 1px solid var(--border-2); border-radius: var(--r-sm);
    background: var(--surface-2); color: var(--text-2);
    font: 700 13px/1.2 var(--ui); cursor: pointer;
}
.cmp-yn.is-on { background: var(--ok); color: var(--surface); border-color: var(--ok); }
.cmp-yn--no.is-on { background: var(--danger); color: var(--surface);
  border-color: var(--danger); }

/* ── Repuestos ── */
.cmp-parts { display: flex; flex-direction: column; gap: 8px; }
.cmp-part { display: flex; gap: 8px; align-items: center; }
.cmp-part__ref { flex: 1 1 auto; min-width: 0; }
.cmp-part__q { flex: 0 0 88px; text-align: right; font-variant-numeric: tabular-nums; }

/* ── Compañeros, en chips ── */
.cmp-chipx__box { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; min-height: 26px; }
.cmp-chipx {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px;
    border-radius: 999px; background: var(--surface-3); color: var(--text);
    font: 600 13px/1.2 var(--ui);
}
.cmp-chipx button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border: 0; border-radius: 999px;
    background: var(--border-2); color: var(--text-2);
    font: 700 14px/1 var(--ui); cursor: pointer;
}
.cmp-chipx button:hover { background: var(--danger); color: var(--surface); }

/* ── Fotos y notas, plegado ──
   Deja de ser lo primero de la pantalla: el parte manda, y esto es el respaldo. Plegado ocupa una
   fila, y el contador dice que dentro hay algo para que no parezca vacío. */
.cmp-detalle {
    margin-bottom: 18px; border: 1px solid var(--border); border-radius: var(--r-lg);
    background: var(--surface);
}
.cmp-detalle__h {
    display: flex; align-items: center; gap: 9px; width: 100%;
    min-height: 52px; padding: 0 14px; border: 0; background: none; cursor: pointer;
    font: 700 14px/1.2 var(--ui); color: var(--text); text-align: left;
}
.cmp-detalle__n {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
    background: var(--surface-3); color: var(--text-2); font: 700 11px/1 var(--ui);
}
.cmp-detalle__go { margin-left: auto; color: var(--text-3); line-height: 0; }
.cmp-detalle__b { padding: 0 14px 14px; }
.cmp-detalle__d { margin: 0 0 12px; font: 500 12.5px/1.5 var(--ui); color: var(--text-3); }

@media (max-width: 380px) {
    .cmp-types { grid-template-columns: 1fr; }
}


/* ═════════════════════════ SERVICIO (el supervisor) ═════════════════════════ */

.adm--page.svc .adm__body { background: var(--app); min-height: 100%; padding: 0; }


.svc-wrap { max-width: 1320px; margin: 0 auto; padding: 16px 20px 60px; }
.svc-wrap--order { max-width: 1420px; }

/* ── La barra de arriba: montones a la izquierda, herramientas a la derecha ── */
.svc-bar {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
    padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--border);
}
.svc-kpis  { display: flex; flex-wrap: wrap; gap: 7px; }
.svc-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.svc-kpi {
    display: inline-flex; align-items: baseline; gap: 6px;
    padding: 7px 13px; border: 1px solid var(--border-2); border-radius: 999px;
    background: var(--surface); color: var(--text-2); cursor: pointer;
    transition: border-color .15s var(--ease), background .15s var(--ease);
}
.svc-kpi:hover { background: var(--surface-2); }
.svc-kpi.is-active {
    border-color: var(--primary); color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
}
.svc-kpi__n { font: 800 13.5px/1.3 var(--ui); font-variant-numeric: tabular-nums; }
.svc-kpi__k { font: 600 12px/1.3 var(--ui); color: var(--text-3); }
.svc-kpi.is-active .svc-kpi__k { color: inherit; }

.svc-search {
    min-width: 280px; padding: 9px 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);
}
.svc-search:focus { outline: none; border-color: var(--primary); }

/* ── La barra de fases ──
   Cinco tramos. Dice dónde quedó el TRABAJO; por qué está parada lo dicen las esperas, que van
   por otro eje. */
.svc-phases { display: flex; gap: 4px; align-items: center; }
.svc-phases--mini .svc-phase { width: 22px; height: 5px; border-radius: 3px; }
.svc-phase {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px 5px 8px; border-radius: 999px;
    background: var(--surface-3); color: var(--text-3);
    font: 600 11.5px/1.3 var(--ui); white-space: nowrap;
}
.svc-phase i {
    width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint);
}
.svc-phase--done { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.svc-phase--done i { background: var(--ok); }
.svc-phase--now  { background: var(--primary); color: var(--primary-tx); }
.svc-phase--now i { background: currentColor; }
.svc-phases--mini .svc-phase { padding: 0; background: var(--surface-3); }
.svc-phases--mini .svc-phase--done { background: var(--ok); }
.svc-phases--mini .svc-phase--now  { background: var(--primary); }
.svc-phases--mini .svc-phase i, .svc-phases--mini .svc-phase span { display: none; }
.svc-phases.is-dead { opacity: .45; }

.svc-chip {
    display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px;
    background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c);
    font: 700 12px/1.3 var(--ui);
}

/* ── El tablero ── */
.svc-tbl { width: 100%; border-collapse: collapse; }
.svc-tbl thead th {
    padding: 9px 12px; background: var(--surface-2); color: var(--text-3);
    font: 700 11px/1.3 var(--ui); text-transform: uppercase; letter-spacing: .04em;
    text-align: left; border-bottom: 1px solid var(--border);
}
.svc-tbl td {
    padding: 11px 12px; border-bottom: 1px solid var(--border);
    font: 500 13px/1.35 var(--ui); color: var(--text); vertical-align: middle;
}
.svc-tbl tbody tr { cursor: pointer; transition: background .12s var(--ease); }
.svc-tbl tbody tr:hover { background: var(--surface-2); }
.svc-td__sub { display: block; margin-top: 3px; font: 500 11.5px/1.35 var(--ui); color: var(--text-3); }
.svc-td__techs { font-size: 12.5px; color: var(--text-2); max-width: 190px; }
.svc-td__go { width: 28px; color: var(--text-faint); text-align: right; }
.svc-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.svc-num small { color: var(--text-3); font-weight: 500; }

/* La columna que de verdad se lee: por qué esta orden pide atención, en una frase. */
.svc-att { font: 600 12px/1.4 var(--ui); max-width: 240px; }
.svc-att--ok      { color: var(--text-faint); }
.svc-att--revisar { color: var(--primary); }
.svc-att--espera  { color: var(--warn); }
.svc-att--mal     { color: var(--danger); }

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

/* ── La ficha de la orden ── */
.svc-head { padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.svc-head__top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.svc-head__n   { margin: 0; font: 800 21px/1.2 var(--ui); color: var(--text); }
.svc-head__sp  { flex: 1 1 auto; }
.svc-head__meta { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 14px; }
.svc-mchip {
    display: inline-flex; align-items: baseline; gap: 6px;
    padding: 5px 11px; border-radius: 999px; background: var(--surface-2);
    font: 500 12px/1.35 var(--ui); color: var(--text-2);
}
.svc-mchip em { font-style: normal; color: var(--text-3); font-weight: 600; }

.svc-back {
    display: inline-flex; align-items: center; gap: 6px;
    border: 0; background: none; color: var(--text-3);
    font: 600 13px/1.2 var(--ui); cursor: pointer; padding: 6px 2px;
}
.svc-back:hover { color: var(--primary); }

.svc-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; }
.svc-main, .svc-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.svc-card {
    padding: 16px 17px; border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface);
}
.svc-card--side { padding: 14px 15px; }
.svc-card__h {
    display: flex; align-items: center; gap: 8px; margin: 0 0 4px;
    font: 700 14px/1.3 var(--ui); color: var(--text);
}
.svc-card__d { margin: 0 0 14px; font: 500 12px/1.5 var(--ui); color: var(--text-3); }
.svc-dim { color: var(--text-3); font-style: normal; font-weight: 500; }

.svc-mini {
    margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px; border: 1px solid var(--border-2); border-radius: 999px;
    background: var(--surface); color: var(--text-3);
    font: 600 11.5px/1.3 var(--ui); cursor: pointer;
}
.svc-mini:hover { color: var(--primary); border-color: var(--primary); }
.svc-mini--inline { margin-left: 4px; }

.svc-why { margin: 8px 0 14px; font: 500 14px/1.6 var(--ui); color: var(--text); }
.svc-techs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.svc-tech {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: 999px; background: var(--surface-2);
    font: 500 12px/1.3 var(--ui); color: var(--text-2);
}
.svc-techs--mach { margin-top: 9px; }
.svc-tech em { font-style: normal; color: var(--text-3); }
.svc-tech__lead {
    font-style: normal; padding: 1px 7px; border-radius: 999px;
    background: var(--primary); color: var(--primary-tx); font: 700 10px/1.5 var(--ui);
}

/* Quién lleva cada máquina, dentro del chip de la máquina. En tenue y detrás del nombre: lo que
   se busca de un vistazo es la máquina; el reparto se lee después, y «sin repartir» tiene que
   saltar sin gritar. */
/* El horómetro es un BOTÓN: se anota desde aquí. Vacío se dibuja como un hueco por rellenar —
   la ausencia de un chip no se ve, y es justo el dato que impide cerrar la orden. */
.svc-mach__h {
    font-style: normal; padding: 1px 7px; border-radius: 999px; border: 0;
    background: var(--surface-3); color: var(--text-2); font: 600 10.5px/1.6 var(--ui);
    cursor: pointer;
}
.svc-mach__h:hover { color: var(--primary); }
.svc-mach__h.is-empty {
    background: transparent; border: 1px dashed var(--border-2); color: var(--text-faint);
}

/* Quien fue sin ser de la casa. Mismo chip que un asignado —la pregunta es una sola— con el
   contorno punteado de lo que no está en el portal. */
.svc-tech--ext { background: transparent; border: 1px dashed var(--border-2); }

/* ── El diálogo de filas: quién atendió, los repuestos, con quién estuvo ──
   Una rejilla y no un formulario por fila: lo que se hace es llenar una lista corta, y verla
   entera mientras se llena es lo que evita repetir lo que ya está puesto. */
.svc-frows__list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.svc-frow { display: grid; gap: 8px; align-items: center; }
.svc-frows--1 .svc-frow { grid-template-columns: 1fr 32px; }
.svc-frows--2 .svc-frow { grid-template-columns: 1fr 1fr 32px; }
@media (max-width: 560px) {
    .svc-frows--2 .svc-frow { grid-template-columns: 1fr 32px; }
    .svc-frows--2 .svc-frow .svc-in:nth-child(2) { grid-column: 1 / 2; }
}
.svc-mach__who { font-style: normal; color: var(--text-3); }
.svc-mach__who::before { content: "→"; margin-right: 5px; opacity: .55; }
.svc-mach__none {
    font-style: normal; padding: 1px 7px; border-radius: 999px;
    background: var(--warn-soft, var(--surface-3)); color: var(--text-3);
    font: 600 10.5px/1.6 var(--ui);
}

/* ── El diálogo de líneas ──
   Una rejilla, no un formulario por línea: lo que se está haciendo es llenar una tabla, y verla
   entera mientras se llena es lo que evita repetir una referencia ya puesta. */
.svc-lines-dlg { max-width: 860px; width: min(94vw, 860px); }
.svc-lines__h, .svc-line {
    display: grid; gap: 8px; align-items: center;
    grid-template-columns: 150px 170px 1fr 78px 92px 30px;
}
.svc-lines__h {
    margin-bottom: 6px; padding: 0 2px;
    font: 700 10.5px/1.3 var(--ui); color: var(--text-3);
    text-transform: uppercase; letter-spacing: .04em;
}
.svc-lines__rows { display: flex; flex-direction: column; gap: 7px; }
.svc-line .tp-dlg__input { margin: 0; }
.svc-line__del {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; cursor: pointer;
    border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-faint);
}
.svc-line__del:hover { color: var(--danger); background: var(--surface-2); }
.svc-lines__add { margin-top: 12px; }
@media (max-width: 760px) {
    /* En estrecho la rejilla se rompe: cada línea pasa a ser su propio bloque, que es lo que se
       puede rellenar con el pulgar. */
    .svc-lines__h { display: none; }
    .svc-line {
        grid-template-columns: 1fr 1fr 30px;
        padding-bottom: 9px; border-bottom: 1px solid var(--border);
    }
    .svc-line__desc { grid-column: 1 / -1; }
}

/* ── El diálogo del reparto ── */
.svc-crew { display: flex; flex-direction: column; gap: 12px; }
.svc-crew__m { padding-bottom: 11px; border-bottom: 1px solid var(--border); }
.svc-crew__m:last-child { border-bottom: 0; padding-bottom: 0; }
.svc-crew__name {
    display: flex; align-items: center; gap: 6px; margin: 0 0 7px;
    font: 700 12.5px/1.3 var(--ui); color: var(--text);
}
.svc-crew__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.svc-crew__chip {
    display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
    padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface); color: var(--text-2); font: 500 12px/1.3 var(--ui);
    transition: background .12s var(--ease), border-color .12s var(--ease);
}
.svc-crew__chip:hover { border-color: var(--primary); color: var(--primary); }
.svc-crew__chip.is-on {
    background: var(--primary); border-color: var(--primary); color: var(--primary-tx);
    font-weight: 600;
}
.svc-crew__note { margin: 7px 0 0; font: 500 11.5px/1.4 var(--ui); color: var(--text-3); }
.svc-crew__clear { margin-top: 14px; }

/* ── Las tres etapas: lo crudo al lado de lo firmado ── */
.svc-stage { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border-2); }
.svc-stage:first-of-type { margin-top: 4px; }
.svc-stage__h {
    display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
    font: 700 13px/1.3 var(--ui); color: var(--text-2);
}
.svc-stage__n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 21px; height: 21px; border-radius: 50%;
    background: var(--surface-3); color: var(--text-3); font: 800 11px/1 var(--ui);
}
.svc-badge {
    margin-left: auto; padding: 3px 9px; border-radius: 999px;
    background: var(--warn-bg); color: var(--warn); font: 700 10.5px/1.3 var(--ui);
}
.svc-stage__empty { margin: 0; font-size: 12.5px; }

.svc-entries { display: flex; flex-direction: column; gap: 10px; }
.svc-entry {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden;
    background: var(--border);
}
.svc-entry__raw, .svc-entry__final { padding: 10px 12px; background: var(--surface); }
/* Lo crudo, atenuado: está para poder volver a ello, no para leerlo primero. */
.svc-entry__raw { background: var(--surface-2); }
.svc-entry__raw p { color: var(--text-3); }
.svc-entry__k {
    display: block; margin-bottom: 5px;
    font: 700 10.5px/1.3 var(--ui); color: var(--text-faint);
    text-transform: uppercase; letter-spacing: .04em;
}
.svc-entry p { margin: 0 0 8px; font: 500 13px/1.55 var(--ui); color: var(--text); white-space: pre-wrap; }
.svc-entry.is-signed .svc-entry__final { border-left: 3px solid var(--ok); }

.svc-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.svc-photo img {
    width: 96px; height: 72px; object-fit: cover;
    border-radius: var(--r-sm); border: 1px solid var(--border);
}

/* ── Lo que se usó ── */
.svc-items { width: 100%; border-collapse: collapse; margin-top: 4px; }
.svc-items th {
    padding: 8px 10px; background: var(--surface-2); color: var(--text-3);
    font: 700 10.5px/1.3 var(--ui); text-transform: uppercase; letter-spacing: .04em;
    text-align: left; border-bottom: 1px solid var(--border);
}
.svc-items th.svc-num { text-align: right; }
.svc-items td {
    padding: 9px 10px; border-bottom: 1px solid var(--border);
    font: 500 12.5px/1.4 var(--ui); vertical-align: middle;
}
.svc-items tr.is-free td { color: var(--text-3); }
.svc-items tfoot td {
    padding: 11px 10px; border: 0; font: 700 13px/1.3 var(--ui); color: var(--text);
    background: var(--surface-2);
}
.svc-kind {
    display: inline-block; margin-right: 7px; padding: 2px 8px; border-radius: 999px;
    background: var(--surface-3); color: var(--text-3);
    font: 700 10px/1.5 var(--ui); text-transform: uppercase; letter-spacing: .03em;
}
.svc-pn { font: 700 12.5px/1.3 var(--mono); }
.svc-in {
    width: 100%; padding: 7px 10px; border: 1px solid var(--border-2); border-radius: var(--r-sm);
    background: var(--surface); color: var(--text); font: 500 13px/1.4 var(--ui);
}
.svc-in:focus { outline: none; border-color: var(--primary); }
.svc-in--num { max-width: 96px; text-align: right; font-variant-numeric: tabular-nums; }
.svc-in[readonly] { background: var(--surface-2); color: var(--text-2); }

.svc-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: var(--r-sm);
    border: 1px solid var(--border-2); background: var(--surface);
    color: var(--text-3); cursor: pointer;
}
.svc-ico:hover { color: var(--danger); border-color: var(--danger-bd); }

.svc-f { display: block; margin-bottom: 12px; }
.svc-f__k { display: block; margin-bottom: 6px; font: 700 12px/1.3 var(--ui); color: var(--text-2); }

.svc-note {
    display: flex; gap: 9px; align-items: flex-start;
    padding: 11px 13px; margin-bottom: 14px; border-radius: var(--r-sm);
    background: var(--surface-2); font: 500 12.5px/1.55 var(--ui); color: var(--text-2);
}
.svc-note--warn { background: var(--warn-bg); color: var(--warn); }
.svc-note ul { margin: 6px 0 0; padding-left: 18px; }
.svc-done {
    display: flex; align-items: center; gap: 7px; margin: 4px 0 0;
    font: 600 12.5px/1.4 var(--ui); color: var(--ok);
}

/* ── Las esperas ── */
.svc-hold {
    padding: 10px 12px; margin-bottom: 9px; border-radius: var(--r-sm);
    border-left: 3px solid var(--c); background: var(--surface-2);
}
.svc-hold.is-late  { background: var(--danger-bg); }
.svc-hold.is-done  { opacity: .6; }
.svc-hold__n { display: block; font: 700 12.5px/1.35 var(--ui); color: var(--text); }
.svc-hold__d { display: block; margin-top: 2px; font: 500 11.5px/1.35 var(--ui); color: var(--text-3); }
.svc-hold__t { display: block; margin-top: 5px; font: 500 12px/1.45 var(--ui); color: var(--text-2); }
.svc-hold .svc-mini { margin: 8px 0 0; }
.svc-more summary {
    cursor: pointer; font: 600 12px/1.4 var(--ui); color: var(--text-3); padding: 6px 0;
}

.svc-hist { list-style: none; margin: 0; padding: 0; }
.svc-hist li {
    position: relative; padding: 0 0 12px 16px; border-left: 2px solid var(--border);
}
.svc-hist li:last-child { border-left-color: transparent; padding-bottom: 0; }
.svc-hist li::before {
    content: ""; position: absolute; left: -5px; top: 4px;
    width: 8px; height: 8px; border-radius: 50%; background: var(--border-2);
}
.svc-hist b    { display: block; font: 700 12.5px/1.4 var(--ui); color: var(--text); }
.svc-hist span { display: block; font: 500 11.5px/1.4 var(--ui); color: var(--text-3); }
.svc-hist em   { display: block; margin-top: 3px; font: 500 12px/1.45 var(--ui); color: var(--text-2); font-style: normal; }

/* ── Asignar, con el semáforo ── */
.svc-assign-dlg { max-width: 640px; width: min(640px, calc(100vw - 32px)); }
.svc-assign__when { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.svc-assign__when label {
    display: flex; flex-direction: column; gap: 4px;
    font: 700 11.5px/1.3 var(--ui); color: var(--text-3);
}
.svc-assign__when input {
    padding: 8px 10px; border: 1px solid var(--border-2); border-radius: var(--r-sm);
    background: var(--surface); color: var(--text); font: 500 13px/1.3 var(--ui);
}
/* El buscador es la MISMA pieza que usan Flota, Garantías y Campo (`.wc-pick__qwrap`): no hay un
   segundo campo de búsqueda en la casa, así que aquí solo se le da su hueco. */
.svc-assign__q { margin-bottom: 8px; }
.svc-assign .wc-pick__n { margin: 0 0 8px; }
.svc-assign__list {
    max-height: min(46vh, 340px); overflow: auto;
    border: 1px solid var(--border); border-radius: var(--r-sm);
}
.svc-atec {
    display: flex; align-items: center; gap: 10px; min-height: var(--tap);
    padding: 9px 12px; border-bottom: 1px solid var(--border); cursor: pointer;
}
.svc-atec:last-child { border-bottom: 0; }
.svc-atec.is-on   { background: color-mix(in srgb, var(--primary) 7%, transparent); }
.svc-atec.is-busy .svc-atec__st { color: var(--danger); }
.svc-atec__i { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.svc-atec__i b  { font: 700 13px/1.35 var(--ui); }
.svc-atec__i em { font: 500 11.5px/1.35 var(--ui); color: var(--text-3); font-style: normal; }
.svc-atec__st {
    display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; max-width: 46%;
    font: 600 11.5px/1.35 var(--ui); color: var(--ok);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.svc-atec__lead {
    flex: 0 0 auto; padding: 4px 9px; border-radius: 999px;
    border: 1px solid var(--border-2); background: var(--surface); color: var(--text-3);
    font: 700 10px/1.4 var(--ui); cursor: pointer;
}
.svc-atec__lead.is-on { background: var(--primary); color: var(--primary-tx); border-color: transparent; }

/* ── La agenda ── */
.svc-ag__range { font: 600 12.5px/1.3 var(--ui); color: var(--text-2); }
.svc-ag__scroll { overflow-x: auto; }
/* `table-layout: fixed` es lo que arregla de raíz que las columnas cambiaran de tamaño según el
   nombre más largo que hubiera dentro. Con él, los siete días se reparten a partes iguales lo que
   sobra de la primera columna y la rejilla es la misma todas las semanas. */
.svc-ag { width: 100%; min-width: 860px; table-layout: fixed; border-collapse: separate;
          border-spacing: 0; }
/* Bordes por celda y no fusionados: con `border-collapse: collapse` el navegador pinta el borde
   FUERA de la celda y la columna anclada deja escapar por debajo la línea de la de al lado al
   desplazarse. Es el mismo motivo por el que la tabla de Flota los separa. */
.svc-ag th, .svc-ag td {
    border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
    padding: 8px; vertical-align: top;
}
.svc-ag thead th { border-top: 1px solid var(--border); }
.svc-ag th:first-child, .svc-ag td:first-child { border-left: 1px solid var(--border); }
.svc-ag thead th {
    background: var(--surface-2); color: var(--text-3);
    font: 700 11.5px/1.3 var(--ui); text-align: center; text-transform: capitalize;
}
.svc-ag thead th span { display: block; font: 800 15px/1.2 var(--ui); color: var(--text-2); }
.svc-ag thead th.is-today { background: var(--primary); color: var(--primary-tx); }
.svc-ag thead th.is-today span { color: inherit; }
/* El nombre del cliente se queda a la vista al desplazarse en horizontal: sin él, las columnas de
   la derecha son siete montones de tarjetas sin dueño. Misma técnica que la clave de fila de la
   comparativa de partes. */
.svc-ag__who {
    position: sticky; left: 0; z-index: 2;
    width: 200px; background: var(--surface); text-align: left;
}
.svc-ag thead th:first-child { position: sticky; left: 0; z-index: 3; background: var(--surface-2); }
.svc-ag__who b  { display: block; font: 700 12.5px/1.35 var(--ui); color: var(--text); }
.svc-ag__who em { display: block; font: 500 11px/1.35 var(--ui); color: var(--text-3); font-style: normal; }
/* Sin esto, un cliente de nombre largo ensancha su celda y se lleva por delante el ancho fijo. */
.svc-ag__who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-ag td { min-width: 96px; height: 62px; }
.svc-ag__o {
    display: block; width: 100%; text-align: left; margin-bottom: 5px;
    padding: 6px 8px; border: 0; border-left: 3px solid var(--c); border-radius: var(--r-sm);
    background: var(--surface-2); cursor: pointer;
}
.svc-ag__o:hover { background: var(--surface-3); }
.svc-ag__o b    { display: block; font: 700 11.5px/1.3 var(--ui); color: var(--text); }
.svc-ag__o span { display: block; font: 500 10.5px/1.3 var(--ui); color: var(--text-3);
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Cuando la segunda línea es la hora va monoespaciada, como la franja de la vista de día: son el
   mismo dato y deben alinearse a ojo entre tarjetas apiladas. */
.svc-ag__o--hora span { font: 600 10.5px/1.3 var(--mono); font-variant-numeric: tabular-nums; }

.svc-empty { margin: 24px 0; font: 500 13.5px/1.55 var(--ui); color: var(--text-3); text-align: center; }
.svc-nada { text-align: center; padding: 50px 18px; color: var(--text-faint); }
.svc-nada__t { margin: 14px 0 6px; font: 700 16px/1.3 var(--ui); color: var(--text-2); }
.svc-nada__d { margin: 0 auto; max-width: 520px; font: 500 13px/1.6 var(--ui); color: var(--text-3); }

.svc-skel {
    height: 72px; margin-bottom: 12px; border-radius: var(--r-md);
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
    background-size: 400% 100%; animation: cmp-shimmer 1.3s ease infinite;
}
@media (prefers-reduced-motion: reduce) { .svc-skel { animation: none; } }

@media (max-width: 1080px) {
    /* La barra lateral pasa DEBAJO, no se comprime: las esperas y el historial se leen igual y
       las etapas recuperan el ancho que necesitan para las dos columnas. */
    .svc-cols { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .svc-wrap { padding: 14px 14px 60px; }
    /* En estrecho, lo crudo y lo firmado se apilan: dos columnas de 45 caracteres no se leen. */
    .svc-entry { grid-template-columns: 1fr; }
    .svc-search { min-width: 0; flex: 1 1 200px; }
    .svc-td__techs { display: none; }
}


/* ═══════════════ LOS PARTES, EN PARALELO (Servicio) ═══════════════
   Una fila por dato y una columna por técnico, con la versión oficial a la derecha. Puestas una al
   lado de otra, la diferencia se ve sin buscarla — que es lo que antes obligaba a leer tres
   papeles seguidos. */

/* ── Lo que no cuadra ── */
.svc-conf { margin: 12px 0 14px; }
.svc-conf__h {
    display: flex; align-items: center; gap: 7px; margin: 0 0 8px;
    font: 700 13px/1.3 var(--ui); color: var(--text-2);
}
.svc-conf__row {
    display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; margin-bottom: 6px;
    border-radius: var(--r-sm); border-left: 3px solid var(--border-2);
    background: var(--surface-2);
}
.svc-conf__row > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.svc-conf__row b { font: 700 13px/1.35 var(--ui); color: var(--text); }
.svc-conf__row span { font: 500 12.5px/1.45 var(--ui); color: var(--text-2); }
.svc-conf__lv {
    flex: none; padding: 2px 8px; border-radius: 999px;
    font: 700 10.5px/1.6 var(--ui); text-transform: uppercase; letter-spacing: .03em;
}
.svc-conf__row--alta { border-left-color: var(--danger); background: var(--danger-bg); }
.svc-conf__row--alta .svc-conf__lv { background: var(--danger); color: var(--surface); }
.svc-conf__row--media { border-left-color: var(--warn); background: var(--warn-bg); }
.svc-conf__row--media .svc-conf__lv { background: var(--warn); color: var(--surface); }
/* Ni contradicción ni falta: algo que hay que saber. Neutro a propósito — que la cuadrilla se
   repartiera distinto de lo planeado es correcto, y pintarlo de ámbar enseña a ignorar los
   avisos de al lado, que sí piden algo. */
.svc-conf__row--info { border-left-color: var(--border-2); background: var(--surface-2); }
.svc-conf__row--info .svc-conf__lv { background: var(--surface-3); color: var(--text-3); }
/* Que concuerden se dice: el silencio se lee como que nadie ha mirado. */
.svc-conf--ok {
    display: flex; align-items: center; gap: 9px; padding: 9px 12px;
    border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-2);
    font: 500 12.5px/1.45 var(--ui);
}
.svc-conf--ok svg { color: var(--ok); flex: none; }
.svc-conf--ok b { color: var(--text); }

/* ── La rejilla ──
   El scroll horizontal es del CONTENEDOR, nunca del `body`: con cinco técnicos la tabla se va de
   ancho, y una página que se mueve entera en horizontal es una página rota. */
.svc-rep__scroll { overflow-x: auto; margin-top: 4px; }
.svc-rep { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 560px; }
.svc-rep th, .svc-rep td {
    padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: top;
    font: 500 13px/1.45 var(--ui); text-align: left;
}
.svc-rep thead th {
    position: sticky; top: 0; z-index: 1;
    background: var(--surface-2); border-bottom: 1px solid var(--border-2);
}
.svc-rep thead th b { display: block; font: 700 13px/1.3 var(--ui); color: var(--text); }
.svc-rep__st { display: block; margin-top: 2px; font: 600 11px/1.4 var(--ui); color: var(--text-3); }
.svc-rep__st--entregado { color: var(--ok); }
/* La clave de la fila se queda a la vista al desplazar en horizontal: sin ella, las columnas de
   la derecha son una lista de valores sin nombre. */
.svc-rep__k {
    position: sticky; left: 0; z-index: 2;
    width: 148px; min-width: 148px; background: var(--surface);
    font: 600 12.5px/1.45 var(--ui); color: var(--text-3);
}
.svc-rep thead th:first-child { position: sticky; left: 0; z-index: 3; background: var(--surface-2); }
.svc-rep__bang {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 999px; margin-left: 4px;
    background: var(--danger); color: var(--surface);
    font: 800 11px/1 var(--ui); font-style: normal;
}
.svc-rep tr.is-diff .svc-rep__k { color: var(--danger); }
.svc-rep__c { cursor: default; }
.svc-rep__c[data-copy] { cursor: pointer; }
.svc-rep__c[data-copy]:hover { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--primary); }
/* Lo que discrepa. Fondo tenue y no un rojo pleno: son datos que hay que poder leer, no una
   alarma; el rojo pleno se lo lleva el aviso de arriba. */
.svc-rep__c.is-diff { background: var(--danger-bg); color: var(--text); font-weight: 600; }
/* Un aviso de nivel «media»: falta algo o no cuadra, pero no es una contradicción entre dos
   personas. Ámbar y no rojo — si todo grita, no grita nada. */
.svc-rep__c.is-warn { background: var(--warn-bg); color: var(--text); font-weight: 600; }
.svc-rep__bang--warn { background: var(--warn); }

/* La columna oficial, separada por un filo: es la que manda. */
.svc-rep__of { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--primary); }

/* ── El pasador de la comparativa ──
   En la cabecera de la sección y no flotando bajo la tabla: es de la sección entera, y ahí se ve
   sin tener que llegar al final de once filas. */
.svc-pager { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.svc-pager__b {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; padding: 0;
    border: 1px solid var(--border-2); border-radius: var(--r-sm);
    background: var(--surface); color: var(--text-2); cursor: pointer;
}
.svc-pager__b:hover { color: var(--primary); border-color: var(--primary); }
/* Un solo icono girado: dos trazados que solo se diferencian en el sentido acaban desincronizados
   en cuanto alguien retoca uno. */
.svc-pager__b--next svg { transform: rotate(180deg); }
.svc-pager__n {
    min-width: 74px; text-align: center;
    font: 600 11.5px/1.3 var(--ui); color: var(--text-3);
    font-variant-numeric: tabular-nums;
}

/* ── La versión oficial, en su propia ficha ──
   Fuera de la retícula: es un documento que se firma, no una opinión más en una columna. */
.svc-of { box-shadow: inset 3px 0 0 var(--primary); }
.svc-of__st {
    margin-left: 8px; padding: 2px 9px; border-radius: 999px;
    background: var(--warn-bg); color: var(--warn);
    font: 700 11px/1.4 var(--ui);
}
.svc-of__st.is-closed { background: var(--ok-bg); color: var(--ok); }
.svc-of__de { font: 700 12.5px/1.3 var(--ui); color: var(--text-3); }

/* Los repuestos y la cuadrilla, cuando no hay parte de nadie de donde traerlos: el valor es el
   botón, y el lápiz dice que se toca. Una caja de texto para una lista acaba siendo un renglón
   con comas que después nadie puede contar. */
.svc-of__pick {
    display: inline-flex; align-items: center; gap: 8px; width: 100%;
    padding: 7px 10px; text-align: left;
    border: 1px dashed var(--border-2); border-radius: var(--r-sm);
    background: transparent; color: var(--text); font: 500 12.5px/1.4 var(--ui); cursor: pointer;
}
.svc-of__pick:hover { border-color: var(--primary); color: var(--primary); }
.svc-of__pick span { flex: 1 1 auto; min-width: 0; }
.svc-of__pick svg  { flex: 0 0 auto; color: var(--text-faint); }
.svc-of__horas { display: flex; align-items: center; gap: 8px; }
.svc-of__horas em { font-style: normal; color: var(--text-3); font: 500 12px/1.3 var(--ui); }

/* Las pestañas de máquina de la comparativa. Solo con varias; una fila fina, porque lo que se
   viene a leer es la tabla de abajo. */
.svc-mtabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.svc-mtab {
    display: flex; flex-direction: column; gap: 1px;
    padding: 6px 11px; text-align: left;
    border: 1px solid var(--border-2); border-radius: var(--r-sm);
    background: var(--surface); cursor: pointer;
}
.svc-mtab b { font: 700 12.5px/1.3 var(--ui); color: var(--text); }
.svc-mtab span { font: 600 11px/1.3 var(--ui); color: var(--text-3); }
.svc-mtab:hover { border-color: var(--primary); }
.svc-mtab.is-on { border-color: var(--primary); background: var(--surface-2); }
.svc-mtab.is-on b { color: var(--primary); }
.svc-of__grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px; margin-top: 6px;
}
.svc-of__row { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* Descripción y recomendaciones ocupan la fila entera: un textarea a media anchura se lee peor
   que el papel que viene a sustituir. */
.svc-of__row--wide { grid-column: 1 / -1; }
.svc-of__k {
    font: 700 11px/1.3 var(--ui); color: var(--text-3);
    text-transform: uppercase; letter-spacing: .04em;
}
.svc-of__v { min-width: 0; font: 500 13.5px/1.45 var(--ui); color: var(--text); }
.svc-of__v .svc-in { width: 100%; }
.svc-of__v .svc-in--num { text-align: right; }
.svc-of__v .svc-rep__ro { color: var(--text-2); }
@media (max-width: 760px) {
    .svc-of__grid { grid-template-columns: minmax(0, 1fr); }
}
.svc-rep thead th.svc-rep__of b { color: var(--primary); }
.svc-rep__of .svc-in { width: 100%; min-width: 130px; }
.svc-rep__of .svc-in--num { min-width: 84px; text-align: right; }
.svc-rep__ro { color: var(--text-2); }

@media (max-width: 760px) {
    .svc-rep__k { width: 112px; min-width: 112px; }
    .svc-rep th, .svc-rep td { padding: 8px 9px; font-size: 12.5px; }
}


/* ── Agenda: día, semana y mes ──
   Tres vistas porque son tres preguntas. Pulsar un hueco crea la visita con ese técnico y ese día
   ya puestos, así que los huecos vacíos tienen que ofrecerse: un «+» tenue que solo aparece al
   pasar por encima, para no llenar el tablero de signos. */
.svc-ag__nav { min-width: 38px; font-size: 18px; line-height: 1; padding: 6px 10px; }
.svc-ag td[data-hueco] { cursor: pointer; }
.svc-ag td[data-hueco]:hover { background: var(--surface-2); }
.svc-ag__add {
    display: block; text-align: center; color: var(--text-faint);
    font: 600 17px/1.2 var(--ui); opacity: 0; transition: opacity .12s var(--ease);
}
.svc-ag td[data-hueco]:hover .svc-ag__add { opacity: 1; }

/* La vista DÍA: una columna por CLIENTE y las horas a la izquierda.

   Dejó de ser una tabla. Con celdas de hora entera no se puede pintar un bloque de 08:30 a 12:15,
   y la hora de fin no llegaba a la pantalla: una visita de nueve horas se veía igual que una de
   veinte minutos. Ahora cada columna es una caja con altura conocida y los bloques se colocan
   dentro en `absolute`, con la hora convertida a píxeles.

   Los anchos ya no bailan. La tabla los repartía según el contenido —mandaba el nombre más largo—
   así que la rejilla no era la misma dos días seguidos. `minmax(190px, 1fr)` los iguala: con pocos
   clientes se reparten el ancho, y con muchos cada uno se planta en 190px y la caja se desplaza. */
.svc-agd {
    display: grid;
    grid-template-columns: 64px repeat(var(--n, 1), minmax(190px, 1fr));
    min-width: calc(64px + var(--n, 1) * 190px);
    border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
}
/* La franja de horas se queda anclada a la izquierda: al desplazarse hasta el último cliente ya no
   se sabía qué hora se estaba mirando. El `top: 0` de la cabecera solo actúa si algún día la caja
   tiene alto propio; hoy el desplazamiento vertical es el de la página y la cabecera sube con
   ella, igual que subía el `thead` de antes. */
.svc-agd__corner {
    position: sticky; left: 0; top: 0; z-index: 4;
    background: var(--surface-2); border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.svc-agd__cli {
    position: sticky; top: 0; z-index: 2; min-width: 0;
    padding: 8px 10px; background: var(--surface-2);
    border-bottom: 1px solid var(--border); border-left: 1px solid var(--border);
}
.svc-agd__cli b {
    display: block; font: 700 12px/1.35 var(--ui); color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.svc-agd__cli em {
    display: block; font: 500 10.5px/1.3 var(--ui); font-style: normal; color: var(--text-3);
}
.svc-agd__gut {
    position: sticky; left: 0; z-index: 3;
    display: flex; flex-direction: column;
    background: var(--surface); border-right: 1px solid var(--border);
}
.svc-agd__hr {
    display: block; padding: 2px 8px 0 0; text-align: right;
    font: 600 11px/1.2 var(--mono); color: var(--text-3);
    font-variant-numeric: tabular-nums;
    border-top: 1px solid var(--hairline, var(--border));
}
.svc-agd__hr:first-child { border-top: 0; }
.svc-agd__col { position: relative; min-width: 0; border-left: 1px solid var(--border); }
/* Las casillas de hora son a la vez la rejilla que se ve y lo que se pulsa para crear. */
.svc-agd__slot { display: block; border-top: 1px solid var(--hairline, var(--border)); }
.svc-agd__slot:first-child { border-top: 0; }
.svc-agd__slot[data-hueco] { cursor: pointer; }
.svc-agd__slot[data-hueco]:hover { background: var(--surface-2); }

/* El bloque de la visita. Va en `absolute` dentro de su columna: `top` y `height` los calcula el
   JS a partir de la hora, que es la única forma de que la tarjeta diga cuánto dura. */
.svc-agd__blk {
    position: absolute; z-index: 1; margin-left: 2px;
    /* En columna y pegado arriba: un `<button>` centra su contenido en vertical, y en un bloque de
       cuatro horas eso dejaba el número flotando a media mañana en vez de a su hora de inicio. */
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    overflow: hidden; text-align: left; cursor: pointer;
    padding: 4px 7px; border: 0; border-left: 3px solid var(--c); border-radius: var(--r-sm);
    background: var(--surface-2); box-shadow: var(--shadow-sm);
}
.svc-agd__blk:hover { background: var(--surface-3); }
.svc-agd__blk b {
    display: block; font: 700 11.5px/1.3 var(--ui); color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.svc-agd__blk span {
    display: block; font: 600 10px/1.3 var(--mono); color: var(--text-3);
    font-variant-numeric: tabular-nums;
}
.svc-agd__blk em {
    margin-top: 3px; font: 500 10.5px/1.4 var(--ui); font-style: normal; color: var(--text-2);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* Sin hora de fin se pinta una hora, pero con el borde punteado: no es lo mismo «dura una hora»
   que «no se dijo hasta cuándo», y en un tablero de reparto esa diferencia es la que importa. */
.svc-agd__blk.is-abierto { border: 1px dashed var(--border-2); border-left: 3px solid var(--c); }

/* La vista MES: siete columnas y una casilla por día. No caben todas las órdenes, así que se
   enseñan tres y se dice cuántas quedan. El «+4 más» y el número del día abren la ventana con
   todas: antes el «+4 más» era un rótulo sin nada detrás y el clic caía en la casilla, o sea que
   pedir ver las que faltaban abría «Nueva orden». */
.svc-mes {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px;
    background: var(--border); border: 1px solid var(--border); border-radius: var(--r-md);
    overflow: hidden;
}
.svc-mes__k {
    padding: 7px 8px; background: var(--surface-2); color: var(--text-3);
    font: 700 11px/1.3 var(--ui); text-transform: uppercase; letter-spacing: .03em;
}
.svc-mes__d {
    min-height: 96px; padding: 6px; background: var(--surface);
    display: flex; flex-direction: column; gap: 3px;
}
.svc-mes__d[data-hueco] { cursor: pointer; }
.svc-mes__d[data-hueco]:hover { background: var(--surface-2); }
/* Los días de relleno del mes vecino se atenúan en vez de dejarse en blanco: la rejilla de siete
   columnas necesita ocuparlos, y en blanco parecerían días sin nada programado. */
.svc-mes__d.is-out { background: var(--surface-2); opacity: .5; }
.svc-mes__d.is-today .svc-mes__n { background: var(--primary); color: var(--primary-tx); }
.svc-mes__n {
    align-self: flex-start; min-width: 21px; height: 21px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
    font: 700 11.5px/1 var(--ui); color: var(--text-2);
}
.svc-mes__mas {
    font: 600 10.5px/1.3 var(--ui); color: var(--text-3); padding: 2px; text-align: left;
    border: 0; background: none; cursor: pointer; border-radius: var(--r-sm);
}
.svc-mes__mas:hover { color: var(--text); background: var(--surface-3); }
.svc-mes__n--btn { border: 0; background: none; cursor: pointer; }
.svc-mes__n--btn:hover { background: var(--surface-3); color: var(--text); }
.svc-mes__d.is-today .svc-mes__n--btn:hover { background: var(--primary); }

/* La ventana del día. Es una lista para decidir, no una tabla para estudiar: hora a la izquierda,
   quién va debajo del número, y el estado al final de cada línea. */
.svc-mesd-dlg { max-width: 560px; }
.svc-mesd { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow: auto; }
.svc-mesd__row {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
    padding: 9px 11px; border: 1px solid var(--border); border-left: 3px solid var(--c);
    border-radius: var(--r-sm); background: var(--surface);
}
.svc-mesd__row:hover { background: var(--surface-2); }
.svc-mesd__h {
    flex: 0 0 auto; font: 700 12px/1.3 var(--mono); color: var(--text-2);
    font-variant-numeric: tabular-nums;
}
.svc-mesd__c { flex: 1 1 auto; min-width: 0; }
.svc-mesd__c b {
    display: block; font: 700 12.5px/1.35 var(--ui); color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.svc-mesd__c em {
    display: block; font: 500 11px/1.35 var(--ui); font-style: normal; color: var(--text-3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.svc-mes .svc-ag__o { padding: 3px 6px; }

@media (max-width: 760px) {
    .svc-mes__d { min-height: 68px; padding: 4px; }
    .svc-mes .svc-ag__o span { display: none; }
    /* En estrecho la columna baja a 150px y el motivo se cae del bloque: con ese ancho no son
       tres líneas de texto, son tres cortes a mitad de palabra. */
    .svc-agd { grid-template-columns: 52px repeat(var(--n, 1), minmax(150px, 1fr));
               min-width: calc(52px + var(--n, 1) * 150px); }
    .svc-agd__blk em { display: none; }
}


/* ── La ficha de la visita, al pasar por encima ──
   Cuelga de <body> y se coloca en `fixed` desde el JS. Dentro de la rejilla no cabe: la caja de la
   agenda lleva `overflow-x: auto` y la recortaría contra su borde. Por encima de los diálogos no
   hace falta ir —nunca coinciden— pero sí por encima del resto del cromado. */
.svc-agtip {
    position: fixed; left: 0; top: 0; z-index: calc(var(--z-float) + 5);
    width: 306px; max-width: min(306px, 90vw); padding: 11px 13px;
    background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-md);
    box-shadow: var(--shadow-lg); color: var(--text-2);
    opacity: 0; pointer-events: none; transform: translateY(-3px) scale(.985);
    transition: opacity .13s var(--ease), transform .13s var(--ease);
}
/* `pointer-events: none` incluso abierta: la ficha no se pulsa, y si atrapara el ratón al pasar
   por encima de ella se cerraría sola en cuanto el puntero cruzara su borde. */
.svc-agtip.is-open { opacity: 1; transform: none; }
.svc-agtip__h { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.svc-agtip__h b { font: 800 13.5px/1.2 var(--ui); color: var(--text); }
/* Por qué pide atención: sale de las esperas abiertas, igual que en el tablero. */
.svc-agtip__at {
    margin: 0 0 7px; padding: 5px 8px; border-radius: var(--r-sm);
    font: 600 11.5px/1.4 var(--ui); background: var(--surface-2); color: var(--text-2);
}
.svc-agtip__at--mal    { background: var(--danger-bg); color: var(--danger); }
.svc-agtip__at--espera { background: var(--warn-bg); color: var(--warn); }
.svc-agtip__cli { margin: 0 0 2px; font: 700 12.5px/1.35 var(--ui); color: var(--text); }
.svc-agtip__cli em { font: 500 11.5px/1.35 var(--ui); font-style: normal; color: var(--text-3); }
.svc-agtip__hora {
    margin: 0; font: 600 11.5px/1.4 var(--mono); color: var(--text-3);
    font-variant-numeric: tabular-nums;
}
.svc-agtip__pri {
    display: inline-block; margin: 6px 0 0; padding: 2px 8px; border-radius: 999px;
    background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c);
    font: 700 10.5px/1.5 var(--ui); text-transform: uppercase; letter-spacing: .03em;
}
/* Los rótulos de sección. En mayúsculas y pequeños porque la ficha se lee de un vistazo: se salta
   de un rótulo al siguiente sin leer lo de en medio. */
.svc-agtip__k {
    margin: 10px 0 4px; font: 700 10px/1.3 var(--ui); color: var(--text-faint);
    text-transform: uppercase; letter-spacing: .06em;
}
.svc-agtip__techs { display: flex; flex-wrap: wrap; gap: 4px; }
.svc-agtip__t {
    padding: 3px 8px; border-radius: 999px; background: var(--surface-2);
    font: 600 11px/1.4 var(--ui); color: var(--text-2);
}
.svc-agtip__t.is-lead { background: color-mix(in srgb, var(--primary) 13%, var(--surface-2)); }
/* Los de fuera, con el borde punteado: fueron, pero no son de la casa. */
.svc-agtip__t--ext { background: none; border: 1px dashed var(--border-2); color: var(--text-3); }
.svc-agtip__warn { margin: 0; font: 600 11.5px/1.4 var(--ui); color: var(--warn); }
/* El motivo, recortado a cuatro líneas: la ficha resume, no transcribe. Quien quiera el texto
   entero abre la orden, que está a un clic. */
.svc-agtip__why {
    margin: 0; font: 500 11.5px/1.5 var(--ui); color: var(--text-2);
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.svc-agtip__maq {
    margin: 8px 0 0; padding-top: 7px; border-top: 1px solid var(--hairline, var(--border));
    font: 500 11px/1.4 var(--ui); color: var(--text-3);
}

/* ── La barra que ubica a un técnico ──
   Resalta, no filtra: lo apagado sigue ahí. Buscar a alguien en la agenda es preguntar dónde
   encaja entre lo demás, y si lo demás desaparece la respuesta pierde la mitad. */
.svc-agloc {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin-bottom: 12px; padding: 9px 12px;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md);
}
.svc-agloc__k {
    font: 700 10.5px/1.3 var(--ui); color: var(--text-faint);
    text-transform: uppercase; letter-spacing: .05em;
}
.svc-agloc__q { min-width: 180px; flex: 0 1 220px; padding: 6px 10px; font-size: 12px; }
.svc-agloc__chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; }
.svc-agloc__chip {
    padding: 5px 11px; border: 1px solid var(--border-2); border-radius: 999px;
    background: var(--surface); color: var(--text-2); cursor: pointer;
    font: 600 11.5px/1.35 var(--ui);
    transition: border-color .15s var(--ease), background .15s var(--ease);
}
.svc-agloc__chip:hover { background: var(--surface-3); }
.svc-agloc__chip.is-on {
    border-color: var(--primary); color: var(--primary-tx); background: var(--primary);
}
.svc-agloc__off {
    padding: 5px 10px; border: 0; border-radius: var(--r-sm); background: none;
    color: var(--text-3); font: 600 11.5px/1.35 var(--ui); cursor: pointer;
}
.svc-agloc__off:hover { color: var(--text); background: var(--surface-3); }
.svc-agloc .is-hidden, .svc-agloc__off.is-hidden { display: none; }

/* Con alguien enfocado, sus visitas se anillan y las demás se apagan. El anillo va por `outline`
   y no por `box-shadow`: dentro de la vista de día los bloques se tocan y una sombra de dos
   píxeles se comería el borde del vecino. */
.svc-ag__o.is-foco, .svc-agd__blk.is-foco {
    outline: 2px solid var(--primary); outline-offset: -1px;
    background: color-mix(in srgb, var(--primary) 12%, var(--surface-2));
}
.svc-ag__o.is-tenue, .svc-agd__blk.is-tenue {
    opacity: .3; filter: saturate(.35);
}

/* ── Mi equipo ── */
.svc-tbl tr.is-off td { opacity: .55; }
/* La carga de la semana. Se tiñe al llenarse porque el dato accionable no es «cuántas tiene»,
   es «a este ya no le mandes más». */
.svc-load {
    display: inline-block; padding: 2px 9px; border-radius: 999px;
    background: var(--surface-3); color: var(--text-2); font: 600 12px/1.5 var(--ui);
}
.svc-load.is-full { background: var(--warn-bg); color: var(--warn); }
/* La contraseña recién generada. Monoespaciada y grande: se lee en voz alta o se copia a mano. */
.svc-pass {
    margin: 10px 0 0; padding: 12px 14px; border-radius: var(--r-sm);
    background: var(--surface-2); border: 1px dashed var(--border-2);
    font: 700 18px/1.4 var(--mono); color: var(--text); letter-spacing: .04em;
    user-select: all; word-break: break-all;
}


/* ═════════════════ Lo que espera a que vuelva la señal ═════════════════
   La promesa de «Campo» es que nada se pierde. Para poder creérsela hay que VER dónde está lo que
   todavía no llegó, así que lo pendiente no se esconde: se marca. */

.cmp-cola {
    margin-bottom: 16px; border-radius: var(--r-md);
    border: 1px solid var(--warn); background: var(--warn-bg); overflow: hidden;
}
.cmp-cola.is-bad { border-color: var(--danger-bd); }
.cmp-cola__row {
    display: flex; align-items: center; gap: 10px; padding: 11px 13px;
    color: var(--warn);
}
.cmp-cola__row + .cmp-cola__row { border-top: 1px solid var(--warn); }
.cmp-cola__row--bad { color: var(--danger); background: var(--danger-bg); }
.cmp-cola__row > div { flex: 1 1 auto; min-width: 0; }
.cmp-cola__row b    { display: block; font: 700 13px/1.35 var(--ui); }
.cmp-cola__row span { display: block; font: 500 12px/1.45 var(--ui); opacity: .9; }
.cmp-cola__row .cmp-btn { flex: 0 0 auto; }

/* Una anotación o una foto que todavía vive solo en el móvil: se ve entera, con su marca. Se
   atenúa el borde, no el texto — lo que se escribió se lee igual, que para eso se escribió. */
.cmp-entry.is-pending { border-style: dashed; border-color: var(--warn); }
.cmp-chip--wait { background: var(--warn-bg); color: var(--warn); }
.cmp-chip--bad  { background: var(--danger-bg); color: var(--danger); }

.cmp-photo__i.is-pending img { opacity: .72; border-style: dashed; border-color: var(--warn); }
.cmp-photo__tag {
    position: absolute; left: 6px; bottom: 6px;
    padding: 2px 8px; border-radius: 999px;
    background: var(--warn); color: #fff; font: 700 10px/1.5 var(--ui);
}

.cmp-off { font-style: normal; font-weight: 600; color: var(--warn); }

/* ─────────────── Borrado permanente (solo developer) ───────────────
   Rojo sin relleno: no debe competir con las acciones de la orden. El relleno llega al pasar por
   encima, cuando ya hay intención. Gemelo de `.wc-nuke` en garantías. */
.svc-nuke {
    color: var(--danger); border-color: var(--danger-bd); background: transparent;
}
.svc-nuke:hover { background: var(--danger-bg-hov); border-color: var(--danger); }