/* ============================================================
   MonTech · Casa Médica · vista cirugias
   Clases prefijadas v-cirugias-…  ·  solo var(--token), nunca hex
   ============================================================ */

/* ---------- Armado del kit por componentes ---------- */
.v-kit__titulo { font-size: var(--fs-12); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.v-kit__tipo { margin-bottom: 10px; }
.v-kit__check { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: var(--fs-13); }
.v-kit__tlif { margin: 4px 0 10px; }
.v-kit { display: flex; flex-direction: column; gap: 10px; }
.v-kit__comp { border-top: 1px solid var(--border); padding-top: 10px; }
.v-kit__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; font-size: var(--fs-13); }
.v-kit__fila { display: grid; grid-template-columns: minmax(0, 1fr) 72px 84px 32px; gap: 8px; align-items: center; margin-bottom: 6px; }
.v-kit__sel { min-width: 0; }
.v-kit__cant { text-align: right; }
.v-kit__disp { font-size: var(--fs-12); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.v-kit__disp.is-falta { color: var(--danger); font-weight: 600; }
.v-kit__hueco { width: 32px; }
.v-kit__mas { margin-top: 2px; }

/* ---------- Registrar consumo ---------- */
.v-cons { border-top: 1px solid var(--border); padding: 10px 0 6px; }
.v-cons__head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; font-size: var(--fs-13); }
.v-cons__lote { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: var(--fs-13); cursor: pointer; }
.v-cons__lote .input { width: 70px; text-align: right; flex: none; }
.v-cons__extra { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--border); padding-top: 10px; margin-top: 4px; flex-wrap: wrap; }
.v-cons__total { border-top: 1px solid var(--border-strong); padding-top: 10px; font-size: var(--fs-14); }
.v-cons__venta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; margin-top: 4px; font-size: var(--fs-12); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.v-cons__venta span:nth-child(even) { text-align: right; }
.v-cons__nota { margin-top: 4px; }

/* ---------- Certificado de procedimiento (foto de la hoja) ---------- */
.v-consumo { display: flex; flex-direction: column; gap: 14px; }
.v-cert { border: 1px solid var(--border); border-radius: var(--r); background: var(--bg-muted); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.v-cert__head { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-13); }
.v-cert__head svg { color: var(--brand); flex: none; margin-top: 1px; }
.v-cert__head b { display: block; }
.v-cert__head span { color: var(--text-secondary); font-size: var(--fs-12); }
.v-cert__fotos { display: flex; gap: 8px; flex-wrap: wrap; }
.v-cert__fotos:empty { display: none; }
.v-cert__foto { position: relative; width: 84px; height: 112px; border-radius: var(--r-sm); overflow: hidden; background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--border); }
.v-cert__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v-cert__foto.is-cargando { display: grid; place-items: center; font-size: var(--fs-11); color: var(--text-muted); }
.v-cert__cuenta { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 4px; font-size: var(--fs-11); font-weight: 600; text-align: center; color: #fff; background: rgba(10, 22, 41, .72); }   /* sobre la foto: igual en claro y oscuro */
.v-cert__quitar { position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; border-radius: 50%; background: rgba(10, 22, 41, .72); color: #fff; }
.v-cert__quitar:hover { background: rgba(10, 22, 41, .9); }
.v-cert__botones { display: flex; gap: 8px; flex-wrap: wrap; }
.v-cert__botones label { position: relative; overflow: hidden; cursor: pointer; }
.v-cert__botones label.is-off { opacity: .45; pointer-events: none; }
.v-cert__archivo { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; font-size: 0; }
.v-cert__botones label:focus-within { box-shadow: 0 0 0 3px var(--brand-ring); }
.v-cert__num { max-width: 220px; }
.v-cert__num .input { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.v-cert__estado { font-size: var(--fs-12); color: var(--text-secondary); line-height: 1.45; }
.v-cert__estado:empty { display: none; }
.v-cert__estado.is-ok { color: var(--ok-ink); }
.v-cert__estado.is-warn { color: var(--warn-ink); }
.v-cert__estado.is-danger { color: var(--danger-ink); }
.v-cons__sello { align-self: flex-start; margin: 2px 0; }
.v-cons.is-revisar .v-cons__head b { color: var(--warn-ink); }
.v-cx-certs { margin-bottom: 14px; }
.v-cx-certs__lista { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.v-cx-certs__lista a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.v-cx-sincert { margin-left: 4px; white-space: nowrap; }

@media (max-width: 640px) {
  .v-cert__botones .btn { flex: 1 1 140px; justify-content: center; height: 40px; }
  .v-cert__num { max-width: none; }
  .v-cert__foto { width: 76px; height: 100px; }
  .v-cx-sincert { margin: 4px 0 0; }
  .v-kit__fila { grid-template-columns: minmax(0, 1fr) 64px 32px; }
  .v-kit__disp { grid-column: 1 / -1; order: 5; }
}