/* El demo de la página (2026-10-11): ZuperaCRM por dentro, la app de verdad
   en un marco a todo lo ancho. Antes de abrirlo, un botón y lo que se va a
   ver. Colores de material.css; sin desenfoque ni fondos animados (regla
   del dueño). */
.dv-portada {
  max-width: 640px; margin-inline: auto; background: var(--tarjeta); border-radius: var(--radio-dialogo);
  padding: 26px; box-shadow: var(--sombra-tarjeta); display: grid; gap: 16px; text-align: left;
}
.dv-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.dv-lista li { position: relative; padding: 10px 14px 10px 46px; background: var(--dialogo); border-radius: 16px; }
.dv-lista li::before {
  content: "✓"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 50%; background: var(--claro); color: var(--tinta);
  display: grid; place-items: center; font-weight: 800; font-size: 12px;
}
.dv-entrar { width: 100%; padding: 15px 24px; font-size: 16px; }
.dv-entrar:disabled { opacity: .7; cursor: default; }
.dv-nota { margin: 0; font-size: 13.5px; color: var(--suave); text-align: center; }
.dv-error { margin: 0; color: var(--rojo-b); font-size: 14px; text-align: center; }

.dv-app {
  display: block; width: 100%; height: 820px; border: 1px solid #333333; border-radius: var(--radio-dialogo);
  background: var(--ventana); box-shadow: var(--sombra-tarjeta);
}
@media (max-width: 900px) { .dv-app { height: 85vh; min-height: 560px; } }
@media (max-width: 560px) { .dv-portada { padding: 20px 16px; } }