.cont-frm-dgt
/*
FIRMA EN CANVAS (v1.2) - Estilos

Este CSS acompaña a la clase `Firma_canvas` (JS) y asume la estructura HTML del
modal descrita en el JS.

Mejoras v1.2 ("a prueba" de iframes/modales)
- `touch-action: none` sobre el canvas para evitar scroll/zoom mientras se dibuja.
- `user-select: none` para evitar selección accidental.

Nota de layout (importante)
- El canvas se fuerza a `width: 100%` y `height: 100%` dentro del contenedor
  para que no se salga del modal cuando el JS ajusta el bitmap interno.

Uso con iframes (MISMO DOMINIO / SAME-ORIGIN)
- La estructura HTML del modal y estos estilos deben cargarse en el documento
  PADRE (el que contiene el <iframe>), no dentro del iframe.
- El `prefijo` usado al instanciar `new Firma_canvas(prefijo, ...)` debe
  coincidir con los ids del HTML (ej: `frm-dgt` => `modal-frm-dgt`,
  `frm-dgt-btn-cerrar`, `frm-dgt-cont-canvas`, `canvas-frm-dgt`, etc.).

Notas
- Depende de variables/estilos globales (por ejemplo `--cl-gris3`) y de la base
  de estilos “xForm”.
*/
{
    width: 100%;
    max-width: 30rem;

    height: 100%;
    max-height: 18rem;

    .cont-cuerpo
    {
        width: 100%;
        height: calc(100% - 2rem);
        display: flex;
        flex-direction: column;
        gap: 0.5rem;

        .herramientas
        {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        /*
        v1.0 usaba #frm-dgt-cont-canvas; en v1.2 se mantiene compatibilidad y se
        añade un selector más genérico por si el prefijo cambia.
        */
        #frm-dgt-cont-canvas,
        [id$="-cont-canvas"]
        {
            width: 100%;
            height: calc(100% - 2rem);
            border: solid 0.1rem var(--cl-gris3);
            border-radius: 0.1rem;

          display: flex;
          justify-content: center;
          align-items: center;

            canvas
            {
                background-color: var(--cl-gris3);
            width: 100%;
            height: 100%;
            display: block;
                touch-action: none;
                user-select: none;
                -webkit-user-select: none;
                -ms-user-select: none;
            }
        }
    }
}