/* inspeccion.css — hoja a pantalla completa de la inspección de vehículo.
 *
 * Todo con prefijo `insp-` y colgado de #insp-modal, que crea inspeccion.js.
 * Usa las variables de index.css (--primary, --success, --error, --warning,
 * --text-muted, --border-color…) con fallback por si la hoja se carga sola.
 * Pensada para el móvil del chófer con el cliente delante: objetivos táctiles
 * de 44 px o más, foco visible, contraste alto y sin nada que dependa del hover. */

body.insp-lock { overflow: hidden; }

.insp-modal {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; flex-direction: column;
  background: var(--bg-dark, #f4f7fa); color: var(--text-main, #0f2d4a);
  font-family: 'Roboto', system-ui, sans-serif; font-size: 0.95rem; line-height: 1.4;
  padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
  -webkit-font-smoothing: antialiased;
}
.insp-modal[hidden] { display: none; }
.insp-modal *, .insp-modal *::before, .insp-modal *::after { box-sizing: border-box; }
.insp-modal :focus-visible { outline: 3px solid var(--primary, #0f3d64); outline-offset: 2px; }
.insp-modal button { font: inherit; }
.insp-modal .material-symbols-outlined { font-size: 1.35rem; line-height: 1; }

/* ── Cabecera, progreso, cuerpo, pie ─────────────────────────────────────── */
.insp-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px 10px 18px; background: #fff; border-bottom: 1px solid var(--border-color, rgba(15, 61, 100, 0.08));
}
.insp-head-txt { flex: 1; min-width: 0; }
.insp-titulo { font-size: 1.05rem; font-weight: 800; color: var(--primary, #0f3d64); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.insp-sub { font-size: 0.8rem; color: var(--text-muted, #5a738e); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.insp-dot { opacity: .5; padding: 0 2px; }
.insp-progreso { display: flex; gap: 4px; padding: 0 18px; background: #fff; }
.insp-progreso i { flex: 1; height: 4px; border-radius: 2px; background: rgba(15, 61, 100, 0.10); }
.insp-progreso i.is-hecho { background: var(--success, #10b981); }
.insp-progreso i.is-actual { background: var(--primary, #0f3d64); }
.insp-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 14px 24px; overscroll-behavior: contain; }
/* En una pantalla ancha (el administrador desde el portátil) el formulario no se estira de lado a lado. */
.insp-body > .insp-sec { max-width: 760px; margin-left: auto; margin-right: auto; }
.insp-foot {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: #fff; border-top: 1px solid var(--border-color, rgba(15, 61, 100, 0.08));
}
.insp-foot-msg { flex: 1; min-width: 0; font-size: 0.8rem; font-weight: 600; line-height: 1.3; color: var(--text-muted, #5a738e); }
.insp-foot-msg.is-error { color: var(--error, #ef4444); }

/* ── Botones ─────────────────────────────────────────────────────────────── */
.insp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border-radius: 12px; font-weight: 700; font-size: 0.95rem; cursor: pointer;
  border: 1px solid var(--border-color, rgba(15, 61, 100, 0.08)); background: #fff; color: var(--text-main, #0f2d4a);
  transition: filter .15s, transform .15s, opacity .15s;
}
.insp-btn:active:not(:disabled) { transform: translateY(1px); }
.insp-btn:disabled { opacity: .5; cursor: not-allowed; }
.insp-btn-pri {
  border-color: transparent; color: var(--text-inverse, #fff);
  background: linear-gradient(90deg, var(--primary, #0f3d64), var(--accent-cyan, #4ea6e0));
  box-shadow: 0 4px 12px rgba(15, 61, 100, 0.2);
}
.insp-btn-pri:disabled { background: var(--text-muted, #5a738e); box-shadow: none; }
.insp-btn-sec { background: #fff; }
.insp-btn-block { width: 100%; margin: 6px 0 12px; }
/* Botón solo icono: el mismo cuadrado que los de la fila de expediciones. */
.insp-ib {
  width: 44px; height: 44px; min-width: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1.5px solid var(--border-color, rgba(15, 61, 100, 0.08)); border-radius: 12px;
  color: var(--primary, #0f3d64); cursor: pointer; transition: background .14s, border-color .14s, opacity .14s;
}
.insp-ib .material-symbols-outlined { color: inherit; }
.insp-ib:active:not(:disabled) { background: var(--primary-glow, rgba(15, 61, 100, 0.08)); border-color: var(--primary, #0f3d64); }
.insp-ib:disabled { opacity: .4; cursor: not-allowed; }
.insp-ib.is-peligro:not(:disabled) { color: var(--error, #ef4444); }
.insp-ib.is-peligro:active:not(:disabled) { background: rgba(239, 68, 68, .08); border-color: var(--error, #ef4444); }
.insp-ib-xs { width: 32px; height: 32px; min-width: 32px; border-radius: 9px; vertical-align: middle; }
.insp-ib-xs .material-symbols-outlined { font-size: 1.1rem; }

/* ── Secciones y campos ──────────────────────────────────────────────────── */
.insp-sec {
  background: #fff; border: 1px solid var(--border-color, rgba(15, 61, 100, 0.08)); border-radius: 16px;
  padding: 14px 14px 6px; margin-bottom: 12px; box-shadow: var(--shadow-sm, 0 1px 3px rgba(15, 61, 100, 0.04));
}
.insp-h2 { font-size: 0.95rem; font-weight: 800; color: var(--primary, #0f3d64); margin: 0 0 10px; }
.insp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.insp-row .insp-h2, .insp-row .insp-lbl { margin: 0; }
.insp-muted { font-size: 0.82rem; color: var(--text-muted, #5a738e); margin: 0 0 12px; }
.insp-grid2 { display: grid; grid-template-columns: 1fr; gap: 0 12px; }
@media (min-width: 440px) { .insp-grid2 { grid-template-columns: 1fr 1fr; } .insp-grid2 .is-ancho { grid-column: 1 / -1; } }
.insp-campo { display: block; margin-bottom: 12px; }
.insp-lbl { display: block; font-size: 0.76rem; font-weight: 700; color: var(--text-muted, #5a738e); margin-bottom: 6px; letter-spacing: .2px; }
.insp-lbl b { color: var(--error, #ef4444); font-weight: 800; }
.insp-in {
  width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 12px; font: inherit; font-size: 1rem;
  border: 1px solid #cbd5e1; background: #fff; color: var(--text-main, #0f2d4a); outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.insp-in:focus { border-color: var(--primary, #0f3d64); box-shadow: 0 0 0 4px var(--primary-glow, rgba(15, 61, 100, 0.08)); }
.insp-in::placeholder { color: #94a3b8; }
.insp-in.is-invalido, .insp-chips.is-invalido, .insp-firma.is-invalido .insp-firma-box { border-color: var(--error, #ef4444) !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, .12); }
.insp-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 1px; }
.insp-ta { min-height: 84px; resize: vertical; }
.insp-ta.is-con { border-left: 4px solid var(--error, #ef4444); }
.insp-libre { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.insp-libre .insp-in { flex: 1; }
.insp-libre span { font-size: 0.85rem; font-weight: 700; color: var(--text-muted, #5a738e); }
.insp-bajo { display: block; margin-top: 4px; }
.insp-prev { display: inline-block; font-size: 0.76rem; color: #94a3b8; font-weight: 600; margin-top: 4px; }
.insp-chips { display: flex; flex-wrap: wrap; gap: 8px; border-radius: 12px; }
.insp-chip {
  min-height: 44px; padding: 0 16px; border-radius: 999px; font-weight: 700; font-size: 0.9rem; cursor: pointer;
  border: 1.5px solid #cbd5e1; background: #fff; color: var(--text-main, #0f2d4a); transition: background .15s, border-color .15s, color .15s;
}
.insp-chip.is-on { background: var(--primary, #0f3d64); border-color: var(--primary, #0f3d64); color: #fff; }
.insp-chip.is-no.is-on { background: var(--error, #ef4444); border-color: var(--error, #ef4444); }
.insp-chip:disabled { opacity: .6; cursor: default; }
.insp-sino { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.insp-sino .insp-chip { min-height: 48px; border-radius: 12px; font-size: 1rem; padding: 0; }
.insp-cont { font-size: 0.78rem; font-weight: 800; color: var(--warning, #f59e0b); background: rgba(245, 158, 11, .12); padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.insp-cont.is-ok { color: var(--success, #10b981); background: rgba(16, 185, 129, .12); }

/* Checklist */
.insp-lista { display: flex; flex-direction: column; }
.insp-item { padding: 12px 0 12px 10px; border-top: 1px solid var(--border-color, rgba(15, 61, 100, 0.08)); border-left: 3px solid transparent; margin-left: -10px; }
.insp-item.is-pendiente { border-left-color: var(--warning, #f59e0b); }
.insp-item-lbl { font-weight: 700; font-size: 0.92rem; margin-bottom: 8px; }
.insp-stepper { display: flex; align-items: center; gap: 8px; }
.insp-in-num { width: 92px; flex: 0 0 92px; text-align: center; font-weight: 700; font-size: 1.1rem; -moz-appearance: textfield; }
.insp-in-num::-webkit-outer-spin-button, .insp-in-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Fotos ───────────────────────────────────────────────────────────────── */
.insp-vistas { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .insp-vistas { grid-template-columns: 1fr 1fr; } }
.insp-vista { border: 1px solid var(--border-color, rgba(15, 61, 100, 0.08)); border-radius: 14px; padding: 10px 12px; background: #fff; }
.insp-vista.is-oblig { border-left: 4px solid var(--primary, #0f3d64); }
.insp-vista-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.insp-vista-lbl { font-weight: 800; font-size: 0.92rem; }
.insp-badge { font-size: 0.68rem; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; color: var(--text-muted, #5a738e); background: rgba(15, 61, 100, .06); padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.insp-badge.is-oblig { color: var(--primary, #0f3d64); background: var(--primary-glow, rgba(15, 61, 100, 0.08)); }
.insp-vista-body { display: flex; gap: 12px; align-items: stretch; }
.insp-thumb {
  position: relative; width: 124px; min-width: 124px; height: 96px; border-radius: 12px; overflow: hidden; padding: 0; cursor: pointer;
  border: 2px dashed #cbd5e1; background: #f8fafc; color: var(--primary, #0f3d64);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.insp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.insp-thumb .material-symbols-outlined { font-size: 1.8rem; }
.insp-thumb-txt { font-size: 0.72rem; font-weight: 800; }
.insp-thumb-n { position: absolute; top: 6px; right: 6px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: var(--error, #ef4444); color: #fff; font-size: 0.78rem; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.insp-vista-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
.insp-estado { font-size: 0.78rem; font-weight: 700; color: var(--text-muted, #5a738e); display: flex; align-items: center; gap: 4px; min-height: 18px; }
.insp-estado .material-symbols-outlined { font-size: 1.05rem; }
.insp-estado.is-hecho { color: var(--success, #10b981); }
.insp-estado.is-error { color: var(--error, #ef4444); }
.insp-estado.is-subiendo { color: var(--warning, #f59e0b); }
.insp-danos-n { font-size: 0.8rem; color: var(--text-muted, #5a738e); }
.insp-vista-acc { display: flex; gap: 8px; }
.insp-mini-spin, .insp-spinner { display: inline-block; border-radius: 50%; border: 2px solid rgba(15, 61, 100, .15); border-top-color: var(--primary, #0f3d64); animation: insp-gira .8s linear infinite; }
.insp-mini-spin { width: 14px; height: 14px; }
.insp-spinner { width: 44px; height: 44px; border-width: 4px; margin: 4px auto 14px; }
@keyframes insp-gira { to { transform: rotate(360deg); } }

/* ── Firmas ──────────────────────────────────────────────────────────────── */
.insp-firma { margin-bottom: 14px; }
.insp-firma-box { background: #f8fafc; border: 2px dashed #cbd5e1; border-radius: 12px; height: 150px; overflow: hidden; }
.insp-firma-box canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; background: transparent; }

/* ── Resumen ─────────────────────────────────────────────────────────────── */
.insp-res { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border-color, rgba(15, 61, 100, 0.08)); }
.insp-res:first-of-type { border-top: none; }
.insp-res-ico { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: 0 0 34px; }
.insp-res-ico .material-symbols-outlined { font-size: 1.2rem; }
.insp-res.is-ok .insp-res-ico { color: var(--success, #10b981); background: rgba(16, 185, 129, .12); }
.insp-res.is-error .insp-res-ico { color: var(--error, #ef4444); background: rgba(239, 68, 68, .1); }
.insp-res.is-aviso .insp-res-ico { color: var(--warning, #f59e0b); background: rgba(245, 158, 11, .12); }
.insp-res.is-neutro .insp-res-ico { color: var(--text-muted, #5a738e); background: rgba(15, 61, 100, .06); }
.insp-res-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 0.86rem; }
.insp-res-txt b { font-weight: 800; }
.insp-res-txt > span { color: var(--text-muted, #5a738e); }
.insp-res-vistas { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.insp-res-vista { white-space: nowrap; }
.insp-res-vista.is-oblig { font-weight: 700; }
.insp-res i { font-style: normal; font-weight: 800; }
.insp-res i.is-ok { color: var(--success, #10b981); }
.insp-res i.is-error { color: var(--error, #ef4444); }
.insp-res i.is-aviso { color: var(--warning, #f59e0b); }

/* ── Superposición (cargando, mensajes) ──────────────────────────────────── */
.insp-overlay { position: absolute; inset: 0; z-index: 20; background: rgba(15, 23, 42, .55); display: flex; align-items: center; justify-content: center; padding: 18px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.insp-overlay[hidden] { display: none; }
.insp-card { background: #fff; border-radius: 20px; padding: 22px 20px 18px; width: 100%; max-width: 420px; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); text-align: center; }
.insp-card h3 { margin: 0 0 8px; font-size: 1.05rem; font-weight: 800; color: var(--text-main, #0f2d4a); }
.insp-card p { margin: 0 0 14px; font-size: 0.9rem; color: var(--text-muted, #5a738e); line-height: 1.45; }
.insp-card-ico { width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; }
.insp-card-ico .material-symbols-outlined { font-size: 1.8rem; }
.insp-card-ico.insp-tono-info { color: var(--primary, #0f3d64); background: var(--primary-glow, rgba(15, 61, 100, 0.08)); }
.insp-card-ico.insp-tono-ok { color: var(--success, #10b981); background: rgba(16, 185, 129, .12); }
.insp-card-ico.insp-tono-error { color: var(--error, #ef4444); background: rgba(239, 68, 68, .1); }
.insp-card-ico.insp-tono-aviso { color: var(--warning, #f59e0b); background: rgba(245, 158, 11, .14); }
.insp-card-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.insp-card-btns .insp-btn { width: 100%; }
@media (min-width: 380px) { .insp-card-btns { flex-direction: row-reverse; } .insp-card-btns .insp-btn { flex: 1; } }

/* ── Anotador de daños ───────────────────────────────────────────────────── */
.insp-anot { position: absolute; inset: 0; z-index: 30; background: #0b1220; color: #fff; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
.insp-anot[hidden] { display: none; }
.insp-anot-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: rgba(255, 255, 255, .06); }
.insp-anot-head .insp-ib { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .18); color: #fff; }
.insp-anot-tit { flex: 1; min-width: 0; }
.insp-anot-nombre { font-weight: 800; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.insp-anot-sub { font-size: 0.76rem; opacity: .75; }
.insp-seg { display: flex; background: rgba(255, 255, 255, .1); border-radius: 999px; padding: 3px; }
.insp-seg-b { min-height: 38px; padding: 0 14px; border: none; border-radius: 999px; background: transparent; color: #fff; font-weight: 700; font-size: 0.85rem; cursor: pointer; }
.insp-seg-b.is-on { background: #fff; color: var(--primary, #0f3d64); }
.insp-anot-lienzo { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.insp-anot-lienzo canvas { display: block; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.insp-anot-vacio { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; font-weight: 700; color: rgba(255, 255, 255, .8); }
.insp-anot-vacio[hidden] { display: none; }
.insp-anot-pie { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: rgba(255, 255, 255, .06); }
/* Altura FIJA de dos líneas: si el texto de ayuda cambiara la altura del pie, el
   lienzo se encogería y la foto bailaría bajo el dedo. */
.insp-anot-hint { flex: 1; min-width: 0; font-size: 0.78rem; line-height: 1.3; opacity: .85; height: 2.6em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.insp-anot-tools { display: flex; gap: 8px; }
.insp-anot-tools[hidden] { display: none; }
.insp-anot-tools .insp-ib { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .18); color: #fff; }
.insp-anot-tools .insp-ib.is-peligro:not(:disabled) { color: #fca5a5; }
.insp-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; background: #fff; color: var(--text-main, #0f2d4a);
  border-radius: 20px 20px 0 0; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px rgba(0, 0, 0, .35);
  display: flex; flex-direction: column; gap: 10px; max-height: 60%; overflow-y: auto;
}
.insp-sheet[hidden] { display: none; }
.insp-sheet-head { display: flex; align-items: center; gap: 10px; }
.insp-sheet-head b { flex: 1; font-size: 1rem; font-weight: 800; }
.insp-sheet-btns { display: flex; align-items: center; gap: 10px; }
.insp-sheet-btns .insp-btn { flex: 1; }
.insp-chips-wrap .insp-chip { min-height: 40px; padding: 0 14px; font-size: 0.85rem; }

@media (prefers-reduced-motion: reduce) { .insp-mini-spin, .insp-spinner { animation-duration: 2s; } .insp-btn, .insp-ib, .insp-chip, .insp-in { transition: none; } }