/* App de campo: supervisión, visita previa, «Lleva contigo» y herramientas que me prestaron. */

/* ── visita previa ── */
.vp-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; background: var(--info-50); color: var(--info); font-size: 0.75rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.visit-card { border-left-color: var(--info); }
.visit-card.live { box-shadow: 0 0 0 2px var(--info), var(--sombra-2); }
.visit-detail .job-head { border-top: 4px solid var(--info); }
.finish-card { border: 2px solid var(--oro); }
/* Lo que encontraste, ya guardado: se lee como nota (con «Editar» abajo). */
.vp-saved { padding: 12px 14px; border-radius: 12px; background: var(--acero-50); border-left: 3px solid var(--ok, #1f7a4d); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1rem; line-height: 1.5; color: var(--grafito); }
.visit-list { display: grid; gap: 10px; }
.visit-list li { display: grid; gap: 3px; padding: 10px 12px; border-radius: 12px; background: var(--acero-50); border-left: 3px solid var(--info); }

/* ── lo que se necesita ── */
.need-groups { display: grid; gap: 12px; }
.need-group { display: grid; gap: 6px; }
.need-head { font-size: 0.7813rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--acero-500); display: flex; align-items: center; gap: 6px; }
.need-head .n { background: var(--acero-100); color: var(--acero-700); border-radius: 9px; padding: 0 7px; font-size: 0.7188rem; letter-spacing: 0; }
.need-note { display: block; font-size: 0.8125rem; color: var(--acero-600); margin-top: 2px; overflow-wrap: anywhere; }
.mat-list li .grow { min-width: 0; overflow-wrap: anywhere; }
.need-form .need-kinds .chip { flex: 1 1 0; justify-content: center; }
.mat-qty.no-unit { grid-template-columns: minmax(84px, 140px); }
@media (max-width: 520px) { .mat-qty.no-unit { grid-template-columns: minmax(0, 1fr); } }

/* ── supervisión ── */
.sup-card { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; background: var(--papel); }
.sup-card:focus-visible { outline: 3px solid var(--oro-100); outline-offset: 2px; }
.sup-hero .t-hello { color: #C9CED6; margin-top: 4px; font-size: 0.875rem; }
.pick-list { display: grid; gap: 8px; max-height: 46vh; overflow: auto; }
.pick-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 54px; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--acero-200); background: var(--papel); font: inherit; text-align: left; cursor: pointer; }
.pick-item .grow { display: grid; min-width: 0; }
.pick-item[aria-checked="true"] { border-color: var(--oro); background: var(--oro-50); box-shadow: 0 0 0 1px var(--oro); }

/* ── «Lleva contigo» y «Me prestaron» ── */
.take-along { border: 1px solid var(--oro-100, #FCE7B0); background: #FFFCF3; }
.take-along .mat-list li, .my-loans .mat-list li { align-items: center; }
.tech-page > .my-loans { margin-bottom: 14px; }