/* ===================================================================
   Videos de ayuda (va-): el botón «▶ Mira cómo funciona (3 min)» de cada módulo y su ventana
   con el reproductor (Client/Shared/VideoAyuda.razor, docs/videos-ayuda.md). Cielo azul y pastel,
   colores sólidos, el botón con su borde de abajo como botón de juego.
   =================================================================== */

:root {
  --va-fondo: #dff1ff;
  --va-borde: #7cc4f5;
  --va-tinta: #0b4a78;
  --va-play: #0b6fb8;
  --va-sombra: #9fd3f7;
}
:root[data-theme="dark"] {
  --va-fondo: #13324a;
  --va-borde: #2f6d98;
  --va-tinta: #cfeaff;
  --va-play: #5fb8f5;
  --va-sombra: #0b2233;
}

.va-boton {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 44px;
  padding: .45rem 1rem .45rem .5rem; border-radius: 999px;
  background: var(--va-fondo); color: var(--va-tinta); border: 2px solid var(--va-borde);
  box-shadow: 0 3px 0 var(--va-sombra);
  font: inherit; font-weight: 700; cursor: pointer;
  transition: transform var(--dur-1, 120ms) var(--ease-out, ease-out), box-shadow var(--dur-1, 120ms) var(--ease-out, ease-out);
}
.va-boton:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--va-sombra); }
.va-boton:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--va-sombra); }
.va-boton:focus-visible { outline: 3px solid var(--color-primary-ring); outline-offset: 2px; }
.va-boton-play {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none;
  border-radius: 50%; background: var(--va-play); color: #fff; font-size: .8rem; padding-left: 2px;
}
:root[data-theme="dark"] .va-boton-play { color: #0f1320; }

.va-enlace { font-weight: 600; }

.va-ventana { max-width: 960px; padding: 1.1rem 1.25rem 1rem; }
.va-ventana-telefono { max-width: 440px; }
.va-ventana .modal-header { margin-bottom: .5rem; }
.va-para-que { margin: 0 0 .75rem; color: var(--color-text-muted); }
.va-video {
  display: block; width: 100%; max-height: 72vh; border-radius: 12px; background: #000;
}
.va-ventana-telefono .va-video { max-height: 62vh; }
.va-pie {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .75rem;
  margin: .6rem 0 0; font-size: .88rem; color: var(--color-text-muted);
}

/* En la cabecera de un módulo (la portada de Proyectos y flujos), debajo del «para qué». */
.flu-hub-cabeza .va-boton { margin: 0 0 1rem; }

@media (max-width: 640px) {
  .va-ventana { padding: .9rem .85rem .85rem; }
  .va-boton { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .va-boton, .va-boton:hover, .va-boton:active { transition: none; transform: none; }
}

/* ---------------- La configuración de la plataforma (SuperAdmin) ---------------- */

.va-admin-lista { display: grid; gap: .9rem; }
.va-admin-modulo { border: 1px solid var(--color-border); border-radius: 14px; padding: .85rem 1rem; background: var(--color-surface-2); }
.va-admin-modulo h4 { margin: 0 0 .15rem; }
.va-admin-donde { margin: 0 0 .6rem; font-size: .85rem; color: var(--color-text-soft); }
.va-admin-formatos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .75rem; }
.va-admin-formato { border: 2px dashed var(--color-border); border-radius: 12px; padding: .7rem .8rem; background: var(--color-surface); }
.va-admin-formato.va-con-video { border-style: solid; border-color: var(--va-borde); }
.va-admin-formato h5 { margin: 0 0 .4rem; font-size: .95rem; }
.va-admin-datos { margin: .35rem 0; font-size: .85rem; color: var(--color-text-muted); }
.va-admin-previa { display: block; width: 100%; max-height: 220px; border-radius: 10px; background: #000; }
.va-admin-acciones { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.va-admin-apagado { display: inline-block; padding: .05rem .5rem; border-radius: 999px; background: var(--color-warning-bg); color: var(--color-warning-tinta); font-size: .78rem; font-weight: 700; }