html, body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      height: 100%;
    }

    #contenedorCamara {
      position: relative;
      width: 100vw;
      height: 100vh;
    }

    #video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      object-fit: cover;
      transform: scaleX(-1); /* espejo para cámara frontal */
      z-index: 1;
    }

    #overlay {
      position: absolute;
      bottom: 20px;
      right: 20px;
      z-index: 10;
      background-color: rgba(0, 0, 0, 0.5);
      padding: 18px;
      border-radius: 12px;
      color: rgb(107, 228, 148);
      font-size: 1.72em;
    }

    #overlay button {
      font-size: 1.7em;
      padding: 10px 20px;
      background-color: rgba(107, 228, 148);
    }

    #canvas {
      display: none;
    }

    #marcaAgua {
      position: absolute;
      top: 70px;                      /* margen superior */
      left: 50%;                      /* centrado horizontal */
      transform: translateX(-50%);   /* ajuste fino para centrar */
      width: 500px;                  /* tamaño grande (ajustable) */
      opacity: 0.6;                  /* transparencia */
      z-index: 15;                   /* asegurarse que esté sobre el video */
      pointer-events: none;
    }