/* BLINDAJE CSS: Evita el scroll y el rebote elástico en Android */
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      overflow: hidden; /* Prohíbe el scroll */
      background-color: #212529; /* Color oscuro para evitar destellos blancos */
      touch-action: none; /* Evita gestos nativos como pull-to-refresh */
    }

    #app {
      position: fixed; /* Anclado a la ventana visual real */
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      display: block;
      z-index: 1;
    }
.dialog {
  position: relative;
  border: 2px solid #0d6efd;
  background-color: #fff;
  margin: 20px;
  overflow: hidden;
}

.boton, .label, .contenedor {
  position: absolute;
}


/* --- ESTILOS DEL OVERLAY --- */
        #trainer-notification-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: 10000;
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            backdrop-filter: blur(8px); /* Efecto de desenfoque moderno */
        }

        #trainer-notification-overlay.show {
            opacity: 1;
            visibility: visible;
        }

        /* Animación para el icono */
        .notification-icon-wrapper svg {
            width: 120px;
            height: 120px;
            filter: drop-shadow(0 0 10px rgba(255,255,255,0.5));
            animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        @keyframes popIn {
            0% { transform: scale(0); opacity: 0; }
            100% { transform: scale(1); opacity: 1; }
        }

        .display-4 {
            text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
        }