/* ============================================================
   DANGOFE OS · HOJA DEL CHECKLIST DEL TÉCNICO (src/js/views/checklist-hoja.js v3 · prefijo chkh) · v3.1.0 · 2026-10-23 · chat de Diseño
   Karla (22-oct): «esta es una obligación, pero no quiero que sea tedioso para el técnico que lo llena». Fotos, antes y después, video, audio del cliente, firma, «Lo entendí»,
   opciones, puntos que dependen de una respuesta y ahora: partes (A a E), puntos importantes, respuestas de siempre, dictado, varias fotos, pausa para limpiar y cámara guiada.
   Sin sombras. Sin desenfoque en la hoja (tapa casi toda la pantalla del teléfono): cristal por gradientes y bordes. Claro y «Noche azul» por [data-theme='dark'].
   Tres formas de llenar rápido (data-v en .chkh): A · Por partes · B · Un paso a la vez · C · Cámara guiada (data-foco='1' es B y C). Nada se anima sin parar.
   ============================================================ */
.chkh {
  --ck-az: 3, 38, 155; --ck-cel: 53, 146, 207; --ck-ok: 29, 154, 91; --ck-amb: 194, 117, 0; --ck-mal: 192, 57, 43;
  --ck-tinta: #0a1633; --ck-tenue: #5b6880; --ck-suave: #93a0b8; --ck-azul-txt: #03269b; --ck-ok-txt: #15724a; --ck-amb-txt: #8a5400; --ck-mal-txt: #a52f20;
  --ck-hoja: linear-gradient(180deg, #ffffff, #f3f7fe); --ck-tarjeta: rgba(255, 255, 255, .92); --ck-linea: rgba(10, 22, 51, .09); --ck-campo: rgba(10, 22, 51, .05);
  --ck-borde: rgba(255, 255, 255, .95); --ck-pri: #03269b; --ck-pri-txt: #fff; --ck-lienzo: #fff; --ck-velo: rgba(10, 22, 51, .42);
  position: fixed; inset: 0; z-index: 9000; display: flex; align-items: flex-end; justify-content: center; background: var(--ck-velo); animation: chkh-aparece .25s ease both;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--ck-tinta); -webkit-font-smoothing: antialiased;
}
[data-theme='dark'] .chkh {
  --ck-tinta: #f2f5fb; --ck-tenue: #a9b4c9; --ck-suave: #6f7a93; --ck-azul-txt: #8fb4ff; --ck-ok-txt: #6ee7b7; --ck-amb-txt: #f6b64a; --ck-mal-txt: #fca5a5;
  --ck-hoja: linear-gradient(180deg, #0d1840, #070d26); --ck-tarjeta: rgba(20, 34, 84, .62); --ck-linea: rgba(255, 255, 255, .11); --ck-campo: rgba(255, 255, 255, .07);
  --ck-borde: rgba(140, 170, 255, .28); --ck-pri: #2e5bd9; --ck-velo: rgba(2, 6, 24, .66);
}
.chkh--montada { position: absolute; }
.chkh *, .chkh *::before, .chkh *::after { box-sizing: border-box; }
.chkh [hidden] { display: none !important; }
.chkh svg { flex: none; }
.chkh button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.chkh button:disabled { cursor: default; }
.chkh .chkh__bt--pri, .chkh .chkh__ok, .chkh .chkh__op.is-on, .chkh .chkh__bt--mal { color: var(--ck-pri-txt); }
.chkh .chkh__bt--mal { color: #fff; }
.chkh button:focus-visible, .chkh input:focus-visible, .chkh textarea:focus-visible { outline: 2px solid var(--ck-azul-txt); outline-offset: 2px; }

/* la hoja: cabecera fija, puntos que se desplazan y pie fijo */
.chkh__caja { position: relative; width: 100%; max-width: 560px; max-height: 94vh; max-height: 94dvh; height: 94vh; height: 94dvh; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 30px 30px 0 0; border: 1px solid var(--ck-borde); border-bottom: 0; background: var(--ck-hoja); animation: chkh-sube .5s cubic-bezier(.2, .9, .25, 1) both; }
.chkh--montada .chkh__caja { height: 100%; max-height: 100%; }
.chkh__caja::before { content: ''; position: absolute; left: 50%; top: 7px; width: 42px; height: 5px; margin-left: -21px; border-radius: 999px; background: var(--ck-linea); }
.chkh__cab { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: 8px 10px; align-items: start; padding: 22px 18px 10px; }
.chkh__sobre { display: block; margin-bottom: 3px; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ck-azul-txt); }
.chkh__cab-t b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.012em; line-height: 1.18; }
.chkh__x { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--ck-linea); background: var(--ck-campo); color: var(--ck-tenue); display: grid; place-items: center; padding: 0; }
.chkh__prog { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }
.chkh__barra { flex: 1 1 auto; height: 9px; border-radius: 999px; background: var(--ck-campo); overflow: hidden; }
.chkh__barra i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ck-pri), rgb(var(--ck-cel))); transition: width .5s cubic-bezier(.2, .9, .25, 1); }
.chkh__prog.is-completa .chkh__barra i { background: rgb(var(--ck-ok)); }
.chkh__cuenta { flex: none; font-size: 13px; font-weight: 700; color: var(--ck-tenue); white-space: nowrap; }
.chkh__cuenta b { font-size: 19px; font-weight: 800; color: var(--ck-tinta); font-variant-numeric: tabular-nums; }
.chkh__puntos { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; padding: 6px 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.chkh__puntos::-webkit-scrollbar { display: none; }

/* cada punto */
.chkh__punto { flex: none; border-radius: 22px; border: 1px solid var(--ck-linea); background: var(--ck-tarjeta); overflow: hidden; transition: border-color .25s, background .25s; }
.chkh__punto.is-ok { border-color: rgba(var(--ck-ok), .4); }
.chkh__punto.is-mala, .chkh__punto.is-error { border-color: rgba(var(--ck-mal), .55); }
.chkh__punto.is-cargando, .chkh__punto.is-grabando { border-color: rgba(var(--ck-cel), .5); }
.chkh__ch { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 11px; align-items: center; width: 100%; padding: 13px 14px; text-align: left; border: 0; background: none; cursor: default; }
.chkh__ti { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; background: rgba(var(--ck-az), .09); color: var(--ck-azul-txt); }
.chkh__punto.is-ok .chkh__ti { background: rgba(var(--ck-ok), .14); color: var(--ck-ok-txt); }
.chkh__punto.is-mala .chkh__ti, .chkh__punto.is-error .chkh__ti { background: rgba(var(--ck-mal), .12); color: var(--ck-mal-txt); }
.chkh__tt b { display: block; font-size: 15px; font-weight: 700; line-height: 1.32; }
.chkh__tt small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 500; line-height: 1.35; color: var(--ck-tenue); }
.chkh__est { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; white-space: nowrap; background: rgba(var(--ck-amb), .14); color: var(--ck-amb-txt); }
.chkh__bola { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chkh__est.is-ok { background: rgba(var(--ck-ok), .14); color: var(--ck-ok-txt); }
.chkh__est.is-mala, .chkh__est.is-error, .chkh__est.is-grabando { background: rgba(var(--ck-mal), .13); color: var(--ck-mal-txt); }
.chkh__est.is-cargando { background: rgba(var(--ck-cel), .16); color: var(--ck-azul-txt); }
.chkh__chev { display: none; color: var(--ck-suave); transition: transform .25s; }
.chkh__cuerpo { padding: 0 14px 14px; }

/* texto, número, casilla y opciones */
.chkh__cuerpo textarea, .chkh__cuerpo input[type='number'] { width: 100%; min-height: 46px; padding: 11px 13px; border-radius: 14px; border: 1px solid var(--ck-linea); background: var(--ck-campo); color: inherit; font: inherit; font-size: 15.5px; line-height: 1.4; outline: none; }
.chkh__cuerpo textarea { resize: vertical; min-height: 78px; }
.chkh__cuerpo input[type='number'] { max-width: 220px; font-variant-numeric: tabular-nums; }
.chkh__cuerpo textarea:focus, .chkh__cuerpo input[type='number']:focus { border-color: rgba(var(--ck-cel), .7); background: var(--ck-tarjeta); }
.chkh__casilla { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 46px; cursor: pointer; font-size: 15.5px; font-weight: 600; }
.chkh__casilla input[type='checkbox'] { -webkit-appearance: none; appearance: none; width: 30px; height: 30px; margin: 0; border-radius: 10px; border: 2px solid var(--ck-suave); background: var(--ck-tarjeta); display: grid; place-items: center; cursor: pointer; transition: background .2s, border-color .2s; }
.chkh__casilla input[type='checkbox']::before { content: ''; width: 16px; height: 16px; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; transform: scale(0); opacity: 0; transition: transform .2s, opacity .2s; }
.chkh__casilla input[type='checkbox']:checked { background: var(--ck-pri); border-color: var(--ck-pri); }
.chkh__casilla input[type='checkbox']:checked::before { transform: scale(1); opacity: 1; }
.chkh__opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.chkh__op { min-height: 46px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--ck-linea); background: var(--ck-campo); font-size: 15px; font-weight: 700; transition: background .2s, border-color .2s, color .2s; }
.chkh__op.is-on { background: var(--ck-pri); border-color: var(--ck-pri); color: var(--ck-pri-txt); }

/* botones dentro de los puntos */
.chkh__bts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chkh__bt { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--ck-linea); background: var(--ck-campo); font-size: 14.5px; font-weight: 700; transition: transform .2s, opacity .2s; }
.chkh__bt:active { transform: scale(.97); }
.chkh__bt:disabled { opacity: .45; }
.chkh__bt--pri { background: var(--ck-pri); border-color: var(--ck-pri); color: var(--ck-pri-txt); }
.chkh__bt--mal { background: rgb(var(--ck-mal)); border-color: rgb(var(--ck-mal)); color: #fff; }
.chkh__bts--chico .chkh__bt { min-height: 36px; padding: 0 13px; font-size: 13px; }

/* fotos y videos */
.chkh__par { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.chkh__rot { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ck-tenue); }
.chkh__thumb { position: relative; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; display: grid; place-items: center; border: 1.5px dashed rgba(var(--ck-az), .32); background: var(--ck-campo); color: var(--ck-suave); }
.chkh__par .chkh__thumb { aspect-ratio: 1 / 1; }
.chkh__slot.is-vacio .chkh__thumb { aspect-ratio: 16 / 7; }
.chkh__par .chkh__slot.is-vacio .chkh__thumb { aspect-ratio: 1 / .8; }
.chkh__slot.is-mala .chkh__thumb, .chkh__slot.is-error .chkh__thumb { margin-top: 10px; aspect-ratio: 16 / 9; }
.chkh__slot:not(.is-vacio) .chkh__thumb { border-style: solid; border-color: var(--ck-linea); }
.chkh__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chkh__slot.is-mala .chkh__thumb { border-color: rgba(var(--ck-mal), .6); }
.chkh__slot.is-mala .chkh__thumb img { filter: saturate(.6); }
.chkh__vel { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 8px; text-align: center; background: rgba(8, 14, 40, .58); color: #fff; font-size: 13px; font-weight: 700; }
.chkh__vel em { font-style: normal; }
.chkh__vel--lin { position: static; flex-direction: row; justify-content: flex-start; padding: 10px 0 0; background: none; color: var(--ck-tenue); }
.chkh__rueda { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .32); border-top-color: #fff; animation: chkh-gira .85s linear 40; }
.chkh__vel--lin .chkh__rueda, .chkh__guardando .chkh__rueda { border-color: rgba(var(--ck-cel), .3); border-top-color: rgb(var(--ck-cel)); width: 16px; height: 16px; border-width: 2.5px; }
.chkh__sello { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.chkh__sello--ok { background: rgb(var(--ck-ok)); }
.chkh__sello--mal { background: rgb(var(--ck-mal)); }
.chkh__okfila .chkh__sello { position: static; display: inline-grid; width: 24px; height: 24px; vertical-align: middle; margin-right: 6px; }
.chkh__okfila { font-size: 14px; font-weight: 700; color: var(--ck-ok-txt); }
.chkh__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--ck-tenue); }
.chkh__meta svg { vertical-align: -2px; }
.chkh__origen { padding: 2px 8px; border-radius: 999px; background: rgba(var(--ck-cel), .16); color: var(--ck-azul-txt); font-size: 11px; font-weight: 800; }
.chkh__ia { display: block; margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(var(--ck-mal), .1); border: 1px solid rgba(var(--ck-mal), .28); color: var(--ck-mal-txt); font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.chkh__ia b { display: block; margin-bottom: 2px; font-weight: 800; }
.chkh__ia svg { vertical-align: -3px; }
.chkh__ia em { font-style: normal; font-weight: 800; }
.chkh__leido { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 9px; padding: 9px 11px; border-radius: 14px; background: rgba(var(--ck-cel), .1); border: 1px solid rgba(var(--ck-cel), .28); font-size: 13px; }
.chkh__leido b { color: var(--ck-azul-txt); font-weight: 800; }
.chkh__leido b svg { vertical-align: -3px; }
.chkh__leido span { color: var(--ck-tenue); font-weight: 600; }
.chkh__leido i { font-style: normal; font-weight: 800; color: var(--ck-tinta); }
.chkh__slot--video { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 12px; align-items: center; }
.chkh__slot--video .chkh__thumb { aspect-ratio: 4 / 3; border-radius: 14px; }
.chkh__vtx b { display: block; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.chkh__vtx small { display: block; margin-top: 2px; font-size: 12px; color: var(--ck-tenue); }
.chkh__vtx a { color: var(--ck-azul-txt); font-weight: 800; }
.chkh__slot--video > .chkh__bts, .chkh__slot--video > .chkh__meta, .chkh__slot--video > .chkh__ia { grid-column: 1 / -1; }

/* audio del cliente */
.chkh__slot--audio audio { display: block; width: 100%; height: 42px; margin-bottom: 4px; }
.chkh__grab { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 14px; border-radius: 16px; background: rgba(var(--ck-mal), .1); border: 1px solid rgba(var(--ck-mal), .3); font-size: 14px; font-weight: 700; color: var(--ck-mal-txt); }
.chkh__grab b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ck-tinta); }
.chkh__punto-rojo { width: 13px; height: 13px; border-radius: 50%; background: rgb(var(--ck-mal)); }
.chkh__slot--audio .chkh__bt--mal { width: 100%; margin-top: 10px; min-height: 50px; }

/* firma con el dedo (el lienzo siempre blanco: el trazo es oscuro) */
.chkh__firma { display: block; width: 100%; height: 150px; border-radius: 16px; border: 1.5px dashed rgba(var(--ck-az), .4); background: var(--ck-lienzo); touch-action: none; cursor: crosshair; }
.chkh__firma-acc { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-top: 8px; }
.chkh__firma-acc small { font-size: 12.5px; color: var(--ck-tenue); font-weight: 600; }
.chkh__firma-acc .chkh__bts { margin-top: 0; }
.chkh__firmada { display: grid; place-items: center; min-height: 96px; border-radius: 16px; background: var(--ck-lienzo); border: 1px solid var(--ck-linea); color: var(--ck-ok-txt); font-weight: 700; }
.chkh__firmada img { display: block; width: 100%; max-height: 150px; object-fit: contain; }

/* «Lo entendí» */
.chkh__pasa { margin: 0 0 8px; font-size: 13.5px; font-weight: 600; color: var(--ck-tenue); }
.chkh__entendi { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 66px; border-radius: 20px; border: 2px solid rgba(var(--ck-az), .4); background: rgba(var(--ck-az), .08); color: var(--ck-azul-txt); font-size: 19px; transition: transform .2s, background .2s; }
.chkh__entendi b { font-weight: 800; }
.chkh__entendi:active { transform: scale(.98); }
.chkh__entendi.is-ok { cursor: default; border-color: rgba(var(--ck-ok), .45); background: rgba(var(--ck-ok), .12); color: var(--ck-ok-txt); flex-direction: column; gap: 2px; padding: 10px; }
.chkh__entendi small { font-size: 12.5px; font-weight: 700; }

/* B · uno a la vez */
.chkh__nav { flex: none; }
.chkh__nav:empty { display: none; }
.chkh__pasos { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 8px 16px 0; }
.chkh__pasos--s { gap: 4px; }
.chkh__pasos--s .chkh__paso { width: 9px; height: 9px; }
.chkh__pasos--s .chkh__paso.is-aqui { width: 20px; }
.chkh__pasos--xs { gap: 3px; }
.chkh__pasos--xs .chkh__paso { width: 7px; height: 7px; border-width: 1.2px; }
.chkh__pasos--xs .chkh__paso.is-aqui { width: 16px; }
.chkh__paso { width: 12px; height: 12px; padding: 0; border-radius: 50%; border: 1.5px solid var(--ck-suave); background: transparent; }
.chkh__paso.is-ok { background: rgb(var(--ck-ok)); border-color: rgb(var(--ck-ok)); }
.chkh__paso.is-mala, .chkh__paso.is-error { background: rgb(var(--ck-mal)); border-color: rgb(var(--ck-mal)); }
.chkh__paso.is-cargando { border-color: rgb(var(--ck-cel)); }
.chkh__paso.is-aqui { width: 24px; border-radius: 999px; border-color: var(--ck-pri); }
.chkh__paso.is-aqui.is-falta { background: rgba(var(--ck-az), .2); }
.chkh__navbt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px 0; }
.chkh__npaso { font-size: 13px; font-weight: 700; color: var(--ck-tenue); }
.chkh[data-foco='1'] .chkh__punto:not(.is-actual) { display: none; }
.chkh[data-foco='1'] .chkh__puntos { padding-top: 10px; }
.chkh[data-foco='1'] .chkh__punto { border-radius: 26px; }
.chkh[data-foco='1'] .chkh__ch { grid-template-columns: 48px minmax(0, 1fr); padding: 18px 16px 8px; align-items: start; }
.chkh[data-foco='1'] .chkh__ti { width: 48px; height: 48px; border-radius: 16px; }
.chkh[data-foco='1'] .chkh__tt b { font-size: 19px; line-height: 1.28; }
.chkh[data-foco='1'] .chkh__tt small { font-size: 14px; }
.chkh[data-foco='1'] .chkh__est { grid-column: 1 / -1; justify-self: start; }
.chkh[data-foco='1'] .chkh__cuerpo { padding: 6px 16px 18px; }
.chkh[data-foco='1'] .chkh__thumb { aspect-ratio: 16 / 10; max-height: 34vh; max-height: 34dvh; }
.chkh[data-foco='1'] .chkh__par .chkh__thumb { aspect-ratio: 1 / 1; max-height: 24dvh; }
.chkh[data-foco='1'] .chkh__slot:not(.chkh__slot--video):not(.chkh__slot--audio):not(.chkh__slot--firma) { display: flex; flex-direction: column; }
.chkh[data-foco='1'] .chkh__slot > .chkh__bts { order: -1; margin: 0 0 10px; }
.chkh[data-foco='1'] .chkh__slot.is-mala > .chkh__ia, .chkh[data-foco='1'] .chkh__slot.is-error > .chkh__ia { order: -2; margin: 0 0 10px; }
.chkh[data-foco='1'] .chkh__slot.is-vacio .chkh__thumb { aspect-ratio: 16 / 9; }
.chkh[data-foco='1'] .chkh__slot > .chkh__rot { order: -2; }
.chkh[data-foco='1'] .chkh__falta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chkh[data-foco='1'] .chkh__cab { padding-top: 20px; }
.chkh[data-foco='1'] .chkh__cuerpo { max-height: none; }
.chkh[data-foco='1'] .chkh__bt { min-height: 50px; font-size: 15.5px; }
.chkh[data-foco='1'] .chkh__bts--chico .chkh__bt { min-height: 40px; }


/* el pie */
.chkh__pie { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--ck-linea); background: var(--ck-hoja); }
.chkh__falta { min-height: 18px; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--ck-tenue); }
.chkh__guardando { display: inline-flex; align-items: center; gap: 8px; color: var(--ck-azul-txt); font-weight: 700; }
.chkh__err { padding: 10px 12px; border-radius: 14px; background: rgba(var(--ck-mal), .12); color: var(--ck-mal-txt); font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.chkh__err:empty { display: none; }
.chkh__acc { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
.chkh__cancelar { min-height: 54px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ck-tenue); font-size: 14.5px; font-weight: 700; }
.chkh__ok { min-height: 54px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--ck-pri); color: var(--ck-pri-txt); font-size: 16.5px; font-weight: 800; transition: opacity .25s; }
.chkh__ok:disabled { opacity: .42; }
.chkh__voz { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* pantallas anchas: tarjeta centrada */
@media (min-width: 700px) {
  .chkh:not(.chkh--montada) { align-items: center; padding: 20px; }
  .chkh:not(.chkh--montada) .chkh__caja { height: auto; max-height: calc(100vh - 40px); min-height: 520px; border-radius: 30px; border-bottom: 1px solid var(--ck-borde); }
  .chkh:not(.chkh--montada) .chkh__caja::before { display: none; }
}
/* movimiento corto y con final */
@keyframes chkh-aparece { from { opacity: 0; } }
@keyframes chkh-sube { from { opacity: 0; transform: translateY(60px); } }
@keyframes chkh-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .chkh, .chkh__caja, .chkh__rueda, .chkh__barra i { animation: none !important; transition: none !important; } }

/* ===================== v3 · llenar rápido ===================== */
.chkh { --ck-imp2: 217, 82, 4; }
[data-theme='dark'] .chkh { --ck-imp2: 255, 138, 61; }
.chkh__lab { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.chkh__lab:empty { display: none; }
.chkh__lab-p { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 800; background: rgba(var(--ck-az), .1); color: var(--ck-azul-txt); }
.chkh__lab-t { font-size: 12px; font-weight: 700; color: var(--ck-tenue); }

/* las partes (forma A) */
.chkh__rail { flex: none; display: flex; gap: 8px; overflow-x: auto; padding: 2px 14px 8px; scrollbar-width: none; }
.chkh__rail[hidden] { display: none; }
.chkh__rail::-webkit-scrollbar { display: none; }
.chkh__rl { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 13px 0 6px; border-radius: 999px; border: 1.5px solid var(--ck-linea); background: var(--ck-campo); font-size: 13px; font-weight: 700; white-space: nowrap; transition: background .2s, border-color .2s; }
.chkh__rl i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 800; background: rgba(var(--ck-az), .12); color: var(--ck-azul-txt); }
.chkh__rl em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--ck-tenue); font-variant-numeric: tabular-nums; }
.chkh__rl.is-ok:not(.is-aqui) { border-color: rgba(var(--ck-ok), .45); }
.chkh__rl.is-ok:not(.is-aqui) i { background: rgba(var(--ck-ok), .16); color: var(--ck-ok-txt); }
.chkh__rl.is-mal:not(.is-aqui) { border-color: rgba(var(--ck-mal), .5); }
.chkh__rl.is-mal:not(.is-aqui) i { background: rgba(var(--ck-mal), .14); color: var(--ck-mal-txt); }
.chkh .chkh__rl.is-aqui { background: var(--ck-pri); border-color: var(--ck-pri); color: var(--ck-pri-txt); }
.chkh__rl.is-aqui i { background: rgba(255, 255, 255, .22); color: #fff; }
.chkh__rl.is-aqui em { color: rgba(255, 255, 255, .82); }
.chkh__gt { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px 10px; flex-wrap: wrap; padding: 2px 4px 0; }
.chkh__gt[hidden] { display: none; }
.chkh__gt-t b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.chkh__gt-t small { display: block; font-size: 12.5px; font-weight: 600; color: var(--ck-tenue); }
.chkh__gt-ok { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 800; color: var(--ck-ok-txt); }
.chkh[data-v='A'] .chkh__punto[data-fuera='1'] { display: none; }
.chkh[data-v='A'][data-partes='1'] .chkh__ch { cursor: pointer; grid-template-columns: 40px minmax(0, 1fr) auto 18px; }
.chkh[data-v='A'][data-partes='1'] .chkh__chev { display: block; }
.chkh[data-v='A'][data-partes='1'] .chkh__punto:not(.is-plegada) .chkh__chev { transform: rotate(180deg); }
.chkh__punto.is-plegada .chkh__cuerpo, .chkh__punto.is-plegada .chkh__tt small { display: none; }

/* lo importante: la bandera arriba y el borde de color */
.chkh__imp { display: flex; align-items: center; gap: 7px; padding: 6px 14px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.chkh__imp--1 { background: rgba(var(--ck-amb), .14); color: var(--ck-amb-txt); }
.chkh__imp--2 { background: rgba(var(--ck-imp2), .18); color: #b54203; }
[data-theme='dark'] .chkh__imp--2 { color: #ffb27a; }
.chkh__imp--3 { background: rgb(var(--ck-mal)); color: #fff; }
.chkh__punto--imp1 { border-color: rgba(var(--ck-amb), .5); }
.chkh__punto--imp2 { border-color: rgba(var(--ck-imp2), .6); }
.chkh__punto--imp3 { border-color: rgba(var(--ck-mal), .75); border-width: 1.5px; }
.chkh__est.is-espera { background: rgba(var(--ck-amb), .16); color: var(--ck-amb-txt); }
.chkh__paso.is-espera { background: rgba(var(--ck-amb), .45); border-color: rgb(var(--ck-amb)); }

/* respuestas de siempre, dictado y varias fotos */
.chkh__rapidas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.chkh__rap { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid rgba(var(--ck-az), .3); background: rgba(var(--ck-az), .07); font-size: 14px; font-weight: 700; transition: transform .15s, background .2s; }
.chkh .chkh__rap { color: var(--ck-azul-txt); }
.chkh__rap:active { transform: scale(.97); background: rgba(var(--ck-az), .16); }
.chkh__rap.is-on { background: var(--ck-pri); border-color: var(--ck-pri); }
.chkh .chkh__rap.is-on { color: var(--ck-pri-txt); }
.chkh__campo { position: relative; }
.chkh__campo textarea { padding-right: 58px; }
.chkh .chkh__mic { position: absolute; right: 8px; bottom: 8px; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 999px; border: 0; background: var(--ck-pri); color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 13px; font-weight: 800; }
.chkh .chkh__mic.is-oyendo { background: rgb(var(--ck-mal)); }
.chkh__mic em { font-style: normal; }
.chkh__multi { margin-bottom: 10px; }
.chkh__multi-t { margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--ck-tenue); }
.chkh__multi-t b { font-size: 17px; font-weight: 800; color: var(--ck-tinta); }
.chkh__tira { display: flex; gap: 8px; }
.chkh__mini { width: 54px; height: 54px; border-radius: 14px; overflow: hidden; display: grid; place-items: center; border: 1.5px dashed rgba(var(--ck-az), .32); color: var(--ck-suave); }
.chkh__mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chkh__mini.is-ok { border: 1.5px solid rgba(var(--ck-ok), .5); color: var(--ck-ok-txt); }
.chkh__mini.is-vuelo { border: 1.5px solid rgba(var(--ck-cel), .5); }
.chkh__mini .chkh__rueda { width: 18px; height: 18px; border-width: 2.5px; border-color: rgba(var(--ck-cel), .3); border-top-color: rgb(var(--ck-cel)); }
.chkh__sin { display: grid; place-items: center; font-style: normal; color: #fff; }
.chkh__vel--lin .chkh__sin { color: var(--ck-amb-txt); }
.chkh__sinsenal { display: inline-flex; align-items: center; gap: 6px; color: var(--ck-amb-txt); font-weight: 700; }

/* lo que hay que repetir, la pausa y la revisión final */
.chkh__avisos { flex: none; padding: 0 14px; }
.chkh__avisos:empty { display: none; }
.chkh__aviso { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; margin: 4px 0 6px; padding: 10px 12px; border-radius: 18px; border: 1.5px solid rgba(var(--ck-mal), .5); background: rgba(var(--ck-mal), .1); text-align: left; }
.chkh__aviso i { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: rgb(var(--ck-mal)); color: #fff; font-style: normal; }
.chkh__aviso b { display: block; font-size: 14px; font-weight: 800; color: var(--ck-mal-txt); }
.chkh__aviso small { display: block; font-size: 12.5px; font-weight: 600; color: var(--ck-tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chkh__aviso em { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: 13px; font-weight: 800; color: var(--ck-mal-txt); }
.chkh__esp { text-align: center; padding: 20px 18px 16px; border-radius: 26px; }
.chkh[data-v='A'] .chkh__esp { display: none; }
.chkh__esp-i { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 22px; background: rgba(var(--ck-cel), .16); color: var(--ck-azul-txt); }
.chkh__esp-i--ok { background: rgba(var(--ck-ok), .16); color: var(--ck-ok-txt); }
.chkh__esp-i--chico { width: 52px; height: 52px; margin-bottom: 10px; border-radius: 18px; }
.chkh__esp ul.chkh__esp-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 12px; }
.chkh__esp ul.chkh__esp-chips li { padding: 6px 12px; border-radius: 999px; font-size: 13px; }
.chkh__esp-i--falta { background: rgba(var(--ck-amb), .16); color: var(--ck-amb-txt); }
.chkh__esp > b { display: block; font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.chkh__esp > p { margin: 4px 0 10px; font-size: 14.5px; line-height: 1.45; color: var(--ck-tenue); }
.chkh__esp ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; text-align: left; }
.chkh__esp li { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--ck-campo); font-size: 14px; font-weight: 700; }
.chkh__esp .chkh__esp-lista li { padding: 0; background: none; }
.chkh__esp-lista button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 11px 13px; border-radius: 14px; border: 1px solid var(--ck-linea); background: var(--ck-campo); text-align: left; font-size: 14px; font-weight: 700; }
.chkh__esp-lista em { flex: none; font-style: normal; font-size: 12px; font-weight: 800; color: var(--ck-amb-txt); }
.chkh__esp-lista em.is-mala, .chkh__esp-lista em.is-error { color: var(--ck-mal-txt); }
.chkh__esp-mas { justify-content: center; color: var(--ck-tenue); }
.chkh .chkh__bt--grande { width: 100%; min-height: 58px; font-size: 17px; }
.chkh__paso--pausa { border-radius: 4px; transform: rotate(45deg); }
.chkh__paso--fin { border-radius: 5px; }
.chkh__camre { display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 32px); min-height: 44px; margin: 8px 16px 0; border-radius: 999px; border: 1.5px dashed rgba(var(--ck-az), .4); background: transparent; font-size: 14px; font-weight: 800; }
.chkh .chkh__camre { color: var(--ck-azul-txt); }

/* C · la cámara guiada */
.chkh__cam { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; background: #05091c; color: #fff; overflow: hidden; border-radius: inherit; }
.chkh__cam[hidden] { display: none; }
.chkh__cam-vista { position: absolute; inset: 0; background: #0a1226; }
.chkh__cam-vista video, .chkh__cam-vista img { display: block; width: 100%; height: 100%; object-fit: cover; }
.chkh__cam-vista video[hidden], .chkh__cam-vista img[hidden] { display: none; }
.chkh__cam-msg { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 28px; text-align: center; font-size: 15px; line-height: 1.4; }
.chkh__cam-msg[hidden] { display: none; }
.chkh__cam-msg b { font-size: 17px; }
.chkh__cam-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.chkh__cam-flash.is-on { animation: chkh-flash .22s ease-out 1; }
.chkh__cam-top { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 16px 16px 10px; background: linear-gradient(180deg, rgba(3, 6, 20, .72), rgba(3, 6, 20, 0)); }
.chkh .chkh__cam-x { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .2); color: #fff; display: grid; place-items: center; }
.chkh__cam-paso b { display: block; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.chkh__cam-paso small { display: block; font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .8); }
.chkh__cam-red { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(var(--ck-amb), .95); color: #fff; font-size: 12px; font-weight: 800; }
.chkh__cam-red[hidden] { display: none; }
.chkh__cam-guia { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 4px 16px 0; padding: 12px 14px; border-radius: 20px; background: rgba(5, 10, 30, .66); border: 1px solid rgba(255, 255, 255, .18); }
.chkh__cam-guia b { flex: 1 1 100%; font-size: 17px; font-weight: 800; line-height: 1.25; }
.chkh__cam-guia small { flex: 1 1 100%; font-size: 13px; font-weight: 600; line-height: 1.35; color: rgba(255, 255, 255, .82); }
.chkh__cam-guia .chkh__imp { display: inline-flex; padding: 4px 10px; border-radius: 999px; }
.chkh__cam-lado { padding: 3px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: #fff; color: #05091c; }
.chkh__cam-lado--despues { background: #6ee7b7; }
.chkh__cam-n { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; background: rgba(255, 255, 255, .2); }
.chkh .chkh__cam-saltar { margin-left: auto; padding: 4px 0; border: 0; background: none; color: rgba(255, 255, 255, .82); font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.chkh__cam-hint { position: relative; z-index: 2; margin: 8px 16px 0; padding: 9px 12px; border-radius: 14px; background: rgba(var(--ck-amb), .95); color: #fff; font-size: 13.5px; font-weight: 700; }
.chkh__cam-hint[hidden] { display: none; }
.chkh__cam-pie { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 24px 18px calc(22px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(0deg, rgba(3, 6, 20, .84), rgba(3, 6, 20, 0)); }
.chkh__cam-bandeja { display: flex; gap: 6px; align-items: center; min-height: 46px; }
.chkh__cam-vacia { color: rgba(255, 255, 255, .5); }
.chkh .chkh__cam-mini { position: relative; width: 46px; height: 46px; padding: 0; border-radius: 12px; overflow: hidden; border: 2px solid rgba(255, 255, 255, .55); background: #101a38; }
.chkh__cam-mini img { display: block; width: 100%; height: 100%; object-fit: cover; }
.chkh__cam-mini i { position: absolute; right: 3px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: rgb(var(--ck-cel)); border: 2px solid #05091c; }
.chkh__cam-mini.is-ok i { background: rgb(var(--ck-ok)); }
.chkh__cam-mini.is-mala, .chkh__cam-mini.is-error { border-color: rgb(var(--ck-mal)); }
.chkh__cam-mini.is-mala i, .chkh__cam-mini.is-error i { background: rgb(var(--ck-mal)); }
.chkh__cam-mini.is-espera i { background: rgb(var(--ck-amb)); }
.chkh .chkh__cam-disparo { width: 80px; height: 80px; padding: 0; border-radius: 50%; border: 4px solid #fff; background: transparent; display: grid; place-items: center; }
.chkh__cam-disparo i { display: block; width: 60px; height: 60px; border-radius: 50%; background: #fff; transition: transform .12s; }
.chkh__cam-disparo:active i { transform: scale(.86); }
.chkh__cam-der { display: flex; gap: 10px; justify-content: flex-end; }
.chkh .chkh__cam-b { width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .2); color: #fff; display: grid; place-items: center; }
.chkh .chkh__cam-b.is-on { background: #fff; color: #05091c; }
@keyframes chkh-flash { from { opacity: .85; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .chkh__cam-flash, .chkh__rap, .chkh__cam-disparo i { animation: none !important; transition: none !important; } }

/* v3.1 (23-oct) · VARIOS CHECKLISTS EN UN SERVICIO: «Al llegar» y «Al terminar» van una sola vez (banderita, borde de rayitas y una raya que los separa); cada checklist lleva su número */
.chkh__rl--llegada, .chkh__rl--cierre { border-style: dashed; }
.chkh__rl--llegada { margin-right: 8px; position: relative; }
.chkh__rl--cierre { margin-left: 8px; position: relative; }
.chkh__rl--llegada::after, .chkh__rl--cierre::before { content: ''; position: absolute; top: 9px; bottom: 9px; width: 2px; border-radius: 2px; background: var(--ck-linea); }
.chkh__rl--llegada::after { right: -9px; }
.chkh__rl--cierre::before { left: -9px; }
.chkh__rl--llegada i, .chkh__rl--cierre i { background: rgba(var(--ck-az), .08); }
.chkh__rl--lista span { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
/* v3.2 · la voz del técnico: aviso ámbar en el punto del audio y franja abajo de la hoja mientras no decida */
.chkh__ia--amb { background: rgba(var(--ck-amb), .12); border-color: rgba(var(--ck-amb), .34); color: var(--ck-amb-txt); }
.chkh__ia .chkh__bts { margin-top: 8px; }
.chkh__vozlin { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--ck-amb-txt); }
.chkh__vozav { padding: 10px 12px; border-radius: 14px; background: rgba(var(--ck-amb), .12); border: 1px solid rgba(var(--ck-amb), .34); color: var(--ck-amb-txt); font-size: 13.5px; line-height: 1.4; }
.chkh__vozav b { display: block; font-weight: 800; margin-bottom: 2px; }
.chkh__vozav b svg, .chkh__ia--amb b svg { vertical-align: -3px; }
.chkh__vozav .chkh__bts { margin-top: 8px; }