/* ============ Escáner de documentos ============
   frontend/js/escaner.js: foto nítida, recortada y enderezada. Aparte de
   estilos.css porque también lo usa la página del link de documentos del
   cliente (issue #219), que no carga los estilos de la app. */
.escaner { z-index: 70; }
.escaner-modal { max-width: 720px; }
.escaner-cuerpo { align-items: stretch; }
.esc-tomar { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: left; }
.esc-dibujo .ilus { width: 130px; height: 130px; }
.esc-consejos { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; color: var(--ink); max-width: 460px; }
.esc-botones { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.esc-lienzo { display: flex; justify-content: center; background: var(--surface-hover); border-radius: var(--radius-md); padding: 10px; }
.esc-lienzo canvas { touch-action: none; border-radius: 8px; max-width: 100%; }
.esc-ajustar .hint, .esc-trabajando { text-align: center; margin: 8px 0 0; }
.esc-resultado { display: flex; justify-content: center; background: var(--surface-hover); border-radius: var(--radius-md); padding: 10px; }
.esc-resultado img { max-width: 100%; max-height: 56vh; border-radius: 6px; box-shadow: var(--shadow-sm); }
.esc-calidad { padding: 10px 14px; border-radius: var(--radius-md); font-weight: 600; font-size: 14px; margin-bottom: 10px; }
.esc-calidad.ok { background: var(--success-bg); color: var(--success-text); }
.esc-calidad.warn { background: var(--warning-bg); color: var(--warning-text); }
.esc-calidad.crit { background: var(--danger-bg); color: var(--danger-text); }
.esc-filtros { justify-content: center; margin-top: 10px; }
#escFiltros .chip.activo { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
@media (max-width: 767px) {
  .escaner .modal { max-width: none; }
  .esc-resultado img { max-height: 48vh; }
}