/* Las tablas de los tutoriales y sus dibujos animados (componentes/tablas-de-tutorial.js).

   Las usan la ventana del tutorial de la app (componentes/tutorial.js, cuya caja está en
   componentes.css), la ayuda del switch Visor / Editar y la página "¿Cómo grabar?" de
   OtherVision Academy, que carga este archivo con tokens.css y tema.css. Tablas de tres
   cuadros: título, dibujo y una línea. Las animaciones van solo sin "reducir movimiento";
   quietas, cada dibujo queda en su final. */

/* Los íconos de los dibujos, también donde no está componentes.css (Academy). */
.tut-grupo .icono,
.tut-cuadro .icono {
  width: 20px;
  height: 20px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tut-grupo {
  display: grid;
  gap: var(--esp-3);
}

.tut-titulo {
  margin: 0 0 var(--esp-4);
  font-family: var(--fuente-titulo);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  color: var(--texto);
}

.tut-titulo u {
  text-decoration-color: var(--celeste);
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
  text-decoration-skip-ink: none;
}

.tut-pasos {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--esp-3);
}

.tut-paso {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: var(--esp-2);
  justify-items: center;
  text-align: center;
}

.tut-paso-titulo {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  font-family: var(--fuente-marca);
  font-size: var(--t-chico);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--celeste);
}

.tut-cuadro {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--borde);
  border-radius: var(--r-tag);
  background: radial-gradient(circle at 50% 40%, var(--fondo-alto), var(--noche) 75%);
}

.tut-cuadro > svg {
  width: 100%;
  height: 100%;
}

.tut-paso-texto {
  font-family: var(--fuente-marca);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-2);
}

/* El cubo, la sala y el celular. */
.tut-cubo path {
  stroke: var(--celeste);
  stroke-width: 1.2;
  stroke-linejoin: round;
}

.tut-cara-arriba {
  fill: rgba(169, 210, 255, 0.55);
}

.tut-cara-izq {
  fill: rgba(30, 111, 224, 0.75);
}

.tut-cara-der {
  fill: rgba(21, 87, 184, 0.9);
}

.tut-guia {
  fill: none;
  stroke: var(--borde-fuerte);
  stroke-dasharray: 2 3;
}

.tut-sombra {
  fill: rgba(0, 0, 0, 0.35);
}

.tut-sala path {
  stroke: var(--celeste);
  stroke-width: 1;
  stroke-linejoin: round;
}

.tut-pared {
  fill: rgba(169, 210, 255, 0.1);
}

.tut-piso {
  fill: rgba(30, 111, 224, 0.28);
}

.tut-arista {
  fill: none;
  opacity: 0.6;
}

.tut-linea {
  fill: none;
  stroke: var(--celeste);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tut-fija {
  opacity: 0.55;
}

.tut-viajero {
  offset-rotate: 0deg;
}

/* Sobre la medialuna el celular apunta siempre al cubo. */
.tut-medialuna.tut-viajero {
  offset-rotate: auto;
}

.tut-cable {
  stroke: #fff;
  stroke-width: 1.2;
}

.tut-punta {
  fill: var(--acento);
  stroke: #fff;
  stroke-width: 1.2;
}

.tut-celular-cuerpo rect {
  fill: #fff;
}

.tut-celular-cuerpo .tut-celular-pantalla {
  fill: var(--noche);
}

.tut-flecha {
  fill: none;
  stroke: #fff;
  stroke-width: 1.4;
  stroke-dasharray: 2.5 2;
  stroke-linecap: round;
}

.tut-al-techo {
  opacity: 0;
}

/* El switch de "+ Nuevo", en chico. */
.tut-switch {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 82%;
  padding: 4px;
  border: 1px solid var(--borde);
  border-radius: var(--r-pastilla);
  background: rgba(10, 21, 34, 0.7);
}

.tut-switch-perilla {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: var(--r-pastilla);
  background: var(--acento);
  box-shadow: 0 4px 12px rgba(30, 111, 224, 0.4);
}

.tut-a-sala .tut-switch-perilla {
  transform: translateX(100%);
}

.tut-switch-opcion {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 30px;
  color: #fff;
  font-family: var(--fuente-marca);
  font-size: clamp(0.55rem, 1.2vw, 0.72rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tut-switch-opcion .icono {
  width: 14px;
  height: 14px;
}

/* El toque que elige: un aro que late sobre el lado que se elige. */
.tut-dedo {
  position: absolute;
  top: 50%;
  left: 25%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border: 2px solid #fff;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.tut-a-sala .tut-dedo {
  left: 75%;
}

/* Conectar: el splat elegido y el switch vertical del visor. */
.tut-modo-editor {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.tut-tarjeta {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46%;
  aspect-ratio: 4 / 3;
  border: 2px solid var(--celeste);
  border-radius: 10px;
  background: var(--fondo-alto);
  box-shadow: 0 0 18px rgba(169, 210, 255, 0.6);
  color: var(--celeste);
  opacity: 0;
}

.tut-tarjeta .icono {
  width: 40%;
  height: 40%;
}

.tut-editor-switch {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--r-pastilla);
  background: var(--velo);
}

.tut-editor-switch .tut-switch-perilla {
  left: 4px;
  right: 4px;
  width: auto;
  bottom: auto;
  height: 34px;
  transform: translateY(38px);
}

.tut-editor-opcion {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #fff;
}

.tut-editor-opcion .icono {
  width: 18px;
  height: 18px;
}

/* Diseña: las banderitas y el puntero. */
.tut-bandera {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.tut-bandera-pie {
  fill: rgba(0, 0, 0, 0.4);
}

.tut-bandera-mastil {
  stroke: #fff;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.tut-bandera-tela {
  fill: var(--acento);
  stroke: #fff;
  stroke-width: 1;
  stroke-linejoin: round;
}

.tut-cursor {
  fill: #fff;
  stroke: var(--noche);
  stroke-width: 1;
  transform: translate(78px, 60px);
}

/* El ojo: el del modo Visor y el de Observá. */
.tut-ojo path {
  fill: #fff;
  stroke: var(--noche);
  stroke-width: 1;
}

.tut-pupila {
  fill: var(--acento);
}

/* Describí: la ventana de una burbuja que se completa sola. */
.tut-ficha {
  position: relative;
  display: grid;
  gap: 7px;
  width: 64%;
  padding: 12px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 12px;
  background: var(--velo-fuerte);
}

.tut-ficha-renglon {
  height: 7px;
  border-radius: 4px;
  background: var(--celeste);
  opacity: 0.85;
  transform-origin: left;
}

.tut-ficha-titulo {
  width: 70%;
  height: 9px;
  background: #fff;
}

.tut-ficha-corto {
  width: 55%;
}

.tut-ficha-foto {
  position: relative;
  display: grid;
  place-items: center;
  width: 42%;
  aspect-ratio: 4 / 3;
  border: 1.5px dashed var(--borde-fuerte);
  border-radius: 8px;
  color: var(--celeste);
}

.tut-ficha-foto .icono {
  width: 18px;
  height: 18px;
}

.tut-ficha-mas,
.tut-ficha-imagen-lista {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.tut-ficha-imagen-lista {
  border-radius: 7px;
  background: var(--acento);
  color: #fff;
}

.tut-tick {
  position: absolute;
  right: -10px;
  bottom: -10px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ok);
  color: #fff;
  box-shadow: 0 0 12px rgba(62, 207, 142, 0.6);
}

.tut-tick .icono {
  width: 16px;
  height: 16px;
  stroke-width: 3;
}

/* Observá: se toca la burbuja, se abre su imagen y el ojo la mira. */
.tut-observa {
  position: relative;
  width: 100%;
  height: 100%;
}

.tut-globo {
  position: absolute;
  left: 18%;
  bottom: 18%;
  width: 26px;
  height: 34px;
}

.tut-globo::before {
  content: "";
  position: absolute;
  inset: 0 0 9px 0;
  border-radius: 3px 13px 13px 3px;
  background: var(--acento);
}

.tut-globo::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 5px;
  height: 12px;
  border-radius: 0 0 2px 3px;
  background: var(--acento);
}

.tut-globo-ojo {
  position: absolute;
  left: 4px;
  top: 4px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  color: var(--acento-fuerte);
  font-family: var(--fuente-marca);
  font-size: 0.62rem;
  font-weight: 800;
}

.tut-toque {
  position: absolute;
  left: calc(18% + 13px);
  bottom: calc(18% + 22px);
  width: 30px;
  height: 30px;
  margin: 0 0 -15px -15px;
  border: 2px solid #fff;
  border-radius: 50%;
  opacity: 0;
}

.tut-observa-foto {
  position: absolute;
  left: 34%;
  top: 22%;
  display: grid;
  place-items: center;
  width: 40%;
  aspect-ratio: 4 / 3;
  border: 2px solid #fff;
  border-radius: 8px;
  background: linear-gradient(160deg, var(--celeste), var(--acento));
  color: #fff;
  box-shadow: var(--sombra-flotante);
  opacity: 0;
  transform-origin: 0 100%;
}

.tut-observa-foto .icono {
  width: 34%;
  height: 34%;
}

.tut-observa-ojo {
  position: absolute;
  right: 7%;
  top: 9%;
  width: 26%;
}

/* Conecta: la bandera con flechas a tres escenas, y después el botón de Viajar. */
.tut-conecta {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.tut-grafo {
  width: 100%;
  height: 100%;
}

.tut-arco {
  fill: none;
  stroke: var(--celeste);
  stroke-width: 1.6;
  stroke-dasharray: 3 3;
}

.tut-viajar {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px 8px 12px;
  border-radius: var(--r-pastilla);
  background: var(--acento);
  color: #fff;
  font-family: var(--fuente-marca);
  font-size: 0.8rem;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(30, 111, 224, 0.45);
  opacity: 0;
}

.tut-viajar .icono {
  width: 16px;
  height: 16px;
}

@media (prefers-reduced-motion: no-preference) {
  .tut-linea.tut-vuelta,
  .tut-linea.tut-perimetro {
    stroke-dasharray: 100;
    animation: tut-trazar 6s linear infinite;
  }

  .tut-viajero.tut-vuelta,
  .tut-viajero.tut-perimetro {
    animation: tut-avanzar 6s linear infinite;
  }

  .tut-linea.tut-medialuna {
    stroke-dasharray: 100;
    animation: tut-trazar 3.2s ease-in-out infinite alternate;
  }

  .tut-viajero.tut-medialuna {
    animation: tut-avanzar 3.2s ease-in-out infinite alternate;
  }

  .tut-dos-vueltas {
    animation: tut-dos-vueltas 9s linear infinite;
  }

  .tut-dos-vueltas .tut-inclinado {
    animation: tut-inclinar 9s linear infinite;
  }

  .tut-al-piso {
    animation: tut-primera-mitad 9s linear infinite;
  }

  .tut-al-techo {
    animation: tut-segunda-mitad 9s linear infinite;
  }

  .tut-switch-perilla {
    animation: tut-a-objeto 4s ease-in-out infinite;
  }

  .tut-a-sala .tut-switch-perilla {
    animation-name: tut-a-sala;
  }

  .tut-dedo {
    animation: tut-tocar 4s ease-out infinite;
  }

  .tut-tarjeta {
    animation: tut-tarjeta 6s ease-in-out infinite;
  }

  .tut-editor-switch {
    animation: tut-aparecer-switch 6s ease-in-out infinite;
  }

  .tut-editor-switch .tut-switch-perilla {
    animation: tut-a-editar 6s ease-in-out infinite;
  }

  .tut-bandera {
    animation: tut-bandera 6s ease-out infinite;
  }

  .tut-bandera-2 {
    animation-name: tut-bandera-2;
  }

  .tut-bandera-3 {
    animation-name: tut-bandera-3;
  }

  /* La del grafo de Conecta está quieta. */
  .tut-bandera-0 {
    animation: none;
  }

  .tut-cursor {
    animation: tut-cursor 6s ease-in-out infinite;
  }

  .tut-grafo {
    animation: tut-grafo 6s ease-in-out infinite;
  }

  .tut-arco {
    stroke-dasharray: 3 3;
    animation: tut-flecha-1 6s ease-out infinite;
  }

  .tut-arco-2 {
    animation-name: tut-flecha-2;
  }

  .tut-arco-3 {
    animation-name: tut-flecha-3;
  }

  .tut-viajar {
    animation: tut-viajar 6s ease-in-out infinite;
  }

  .tut-ficha-renglon {
    animation: tut-renglon-1 5s ease-out infinite;
  }

  .tut-ficha-renglon:nth-child(2) {
    animation-name: tut-renglon-2;
  }

  .tut-ficha-renglon:nth-child(3) {
    animation-name: tut-renglon-3;
  }

  .tut-ficha-mas {
    animation: tut-mas 5s ease-in-out infinite;
  }

  .tut-ficha-imagen-lista {
    animation: tut-imagen-lista 5s ease-in-out infinite;
  }

  .tut-tick {
    animation: tut-tick 5s ease-out infinite;
  }

  .tut-ficha-imagen .tut-tick {
    animation-name: tut-tick-tarde;
  }

  .tut-toque {
    animation: tut-toque-globo 5s ease-out infinite;
  }

  .tut-observa-foto {
    animation: tut-observa-foto 5s ease-out infinite;
  }

  .tut-observa-ojo .tut-pupila {
    animation: tut-mirar 5s ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tut-ficha-mas {
    display: none;
  }

  .tut-observa-foto {
    opacity: 1;
  }
}

/* Describí: los renglones se escriben de a uno, después la imagen y al final el tick. */
@keyframes tut-renglon-1 {
  0%,
  6% {
    transform: scaleX(0);
  }
  18%,
  100% {
    transform: scaleX(1);
  }
}

@keyframes tut-renglon-2 {
  0%,
  18% {
    transform: scaleX(0);
  }
  30%,
  100% {
    transform: scaleX(1);
  }
}

@keyframes tut-renglon-3 {
  0%,
  30% {
    transform: scaleX(0);
  }
  40%,
  100% {
    transform: scaleX(1);
  }
}

@keyframes tut-mas {
  0%,
  42% {
    opacity: 0;
    transform: scale(0.6);
  }
  48%,
  58% {
    opacity: 1;
    transform: scale(1);
  }
  52% {
    transform: scale(1.25);
  }
  64%,
  100% {
    opacity: 0;
  }
}

@keyframes tut-imagen-lista {
  0%,
  60% {
    opacity: 0;
    transform: scale(0.7);
  }
  68%,
  94% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
  }
}

@keyframes tut-tick {
  0%,
  46% {
    opacity: 0;
    transform: scale(0);
  }
  54% {
    opacity: 1;
    transform: scale(1.2);
  }
  60%,
  92% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
  }
}

@keyframes tut-tick-tarde {
  0%,
  72% {
    opacity: 0;
    transform: scale(0);
  }
  78% {
    opacity: 1;
    transform: scale(1.2);
  }
  84%,
  94% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
  }
}

/* Observá: el toque sobre la burbuja, la imagen que se abre y la pupila que la recorre. */
@keyframes tut-toque-globo {
  0%,
  8% {
    opacity: 0;
    transform: scale(1.6);
  }
  16% {
    opacity: 1;
    transform: scale(1);
  }
  26%,
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}

@keyframes tut-observa-foto {
  0%,
  22% {
    opacity: 0;
    transform: scale(0.3);
  }
  32%,
  90% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes tut-mirar {
  0%,
  30% {
    transform: translate(-3px, 2px);
  }
  45% {
    transform: translate(-4px, 1px);
  }
  60% {
    transform: translate(-2px, 2.5px);
  }
  75%,
  100% {
    transform: translate(-3.5px, 1.5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tut-tarjeta,
  .tut-viajar {
    display: none;
  }
}

@keyframes tut-trazar {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes tut-avanzar {
  from {
    offset-distance: 0%;
  }
  to {
    offset-distance: 100%;
  }
}

/* Primera vuelta mirando al piso, segunda mirando al techo. */
@keyframes tut-dos-vueltas {
  0% {
    offset-distance: 0%;
  }
  50% {
    offset-distance: 100%;
  }
  50.01% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

@keyframes tut-inclinar {
  0%,
  49% {
    transform: rotate(16deg);
  }
  51%,
  100% {
    transform: rotate(-16deg);
  }
}

@keyframes tut-primera-mitad {
  0%,
  46% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

@keyframes tut-segunda-mitad {
  0%,
  50% {
    opacity: 0;
  }
  54%,
  96% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes tut-a-objeto {
  0%,
  30% {
    transform: translateX(100%);
  }
  45%,
  100% {
    transform: translateX(0);
  }
}

@keyframes tut-a-sala {
  0%,
  30% {
    transform: translateX(0);
  }
  45%,
  100% {
    transform: translateX(100%);
  }
}

@keyframes tut-tocar {
  0%,
  18% {
    opacity: 0;
    transform: scale(1.6);
  }
  28% {
    opacity: 1;
    transform: scale(1);
  }
  42%,
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}

@keyframes tut-tarjeta {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  10%,
  30% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 6px rgba(169, 210, 255, 0.3);
  }
  20% {
    box-shadow: 0 0 24px rgba(169, 210, 255, 0.9);
  }
  42%,
  100% {
    opacity: 0;
    transform: translateX(-120%);
  }
}

@keyframes tut-aparecer-switch {
  0%,
  40% {
    opacity: 0;
    transform: scale(0.85);
  }
  50%,
  94% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
  }
}

@keyframes tut-a-editar {
  0%,
  60% {
    transform: translateY(0);
  }
  72%,
  100% {
    transform: translateY(38px);
  }
}

@keyframes tut-bandera {
  0%,
  12% {
    opacity: 0;
    transform: scale(0);
  }
  18%,
  90% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes tut-bandera-2 {
  0%,
  38% {
    opacity: 0;
    transform: scale(0);
  }
  44%,
  90% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
  }
}

@keyframes tut-bandera-3 {
  0%,
  64% {
    opacity: 0;
    transform: scale(0);
  }
  70%,
  90% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
  }
}

/* El puntero va a cada lugar justo antes de que salga su bandera. */
@keyframes tut-cursor {
  0% {
    transform: translate(100px, 104px);
  }
  10%,
  14% {
    transform: translate(56px, 86px);
  }
  36%,
  40% {
    transform: translate(98px, 78px);
  }
  62%,
  66% {
    transform: translate(78px, 60px);
  }
  100% {
    transform: translate(100px, 104px);
  }
}

@keyframes tut-grafo {
  0%,
  52% {
    opacity: 1;
  }
  58%,
  100% {
    opacity: 0;
  }
}

/* Las flechas a las escenas salen de a una: el trazo punteado se corre hasta aparecer. */
@keyframes tut-flecha-1 {
  0%,
  5% {
    opacity: 0;
    stroke-dashoffset: 30;
  }
  20%,
  100% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes tut-flecha-2 {
  0%,
  15% {
    opacity: 0;
    stroke-dashoffset: 30;
  }
  30%,
  100% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes tut-flecha-3 {
  0%,
  25% {
    opacity: 0;
    stroke-dashoffset: 30;
  }
  40%,
  100% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes tut-viajar {
  0%,
  58% {
    opacity: 0;
    transform: scale(0.9);
  }
  66%,
  76% {
    opacity: 1;
    transform: scale(1);
  }
  80% {
    transform: scale(0.92);
    background: var(--acento-fuerte);
    box-shadow: 0 0 0 6px var(--celeste-suave);
  }
  86%,
  94% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
  }
}

@media (max-width: 600px) {
  .tut-pasos {
    gap: var(--esp-2);
  }

  .tut-paso-titulo {
    gap: 4px;
    font-size: 0.56rem;
    letter-spacing: 0.02em;
  }

  .tut-paso-texto {
    font-size: 0.56rem;
    letter-spacing: 0.02em;
  }

  .tut-switch {
    width: 94%;
  }

  .tut-switch-opcion .icono {
    display: none;
  }

  .tut-viajar {
    padding: 6px 10px 6px 8px;
    font-size: 0.68rem;
  }
}