.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: 2rem;

            .rojo
            {
                svg {fill: red;}
            }
        }

        #frm-dgt-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
            {
                border: solid 1px var(--cl-gris3);
                background-color: var(--cl-gris4);
                border-radius: 3px;
                width: 100%;
                height: 100%;
                display: block;
                touch-action: none;
                user-select: none;
                -webkit-user-select: none;
                -ms-user-select: none;
            }

        }

    }

}