/* Contenedor base: flex para alinear horizontalmente el bloque vertical */
.svt-vertical{
  display:flex;
  align-items:center;
  width:100%;
  /* si quieres que el bloque ocupe todo el alto de su contenedor, controla esto desde el control "min-height" */
}

/* Texto: sin márgenes, sin saltos raros */
.svt-vertical__text{
  margin:0;
  white-space:nowrap;     /* evita saltos de línea indeseados en vertical */
  line-height:1;          /* más compacto para vertical */
  display:inline-block;   /* ayuda con transform y baseline */
}

/* Enlaces: heredan estilo del texto */
.svt-vertical a{
  color:inherit;
  text-decoration:inherit;
}
.svt-vertical a:focus{
  outline:2px solid currentColor;
  outline-offset:2px;
}

/* ——— Direcciones ——— */

/* Vertical top→bottom (clásico). 
   Nota: en latín, sin text-orientation, las letras se ven “de costado” (estilo sideways). */
.svt-vertical[data-dir="down"] .svt-vertical__text{
  writing-mode: vertical-rl;
  /* Si prefieres letras “de pie” apiladas, descomenta: */
  /* text-orientation: upright; */
  transform:none;
}

/* Vertical bottom→top (invertido) */
.svt-vertical[data-dir="up"] .svt-vertical__text{
  writing-mode: vertical-rl;
  /* text-orientation: upright;  ← idem nota de arriba si lo deseas */
  transform: rotate(180deg);
}

/* Alternativas con giro 90° (sideways por transform) */
.svt-vertical[data-dir="right"] .svt-vertical__text{
  writing-mode: horizontal-tb;   /* explícito */
  transform: rotate(90deg);
  transform-origin: left top;
}
.svt-vertical[data-dir="left"] .svt-vertical__text{
  writing-mode: horizontal-tb;
  transform: rotate(-90deg);
  transform-origin: left top;
}

/* Placeholder visible solo en el editor (marco tenue) */
.svt-vertical.svt--placeholder{
  outline:1px dashed rgba(0,0,0,.25);
  opacity:.65;
}

/* (Opcional) Si en móviles quieres forzar que el texto NO sea vertical:
@media (max-width: 767px){
  .svt-vertical[data-dir="down"] .svt-vertical__text,
  .svt-vertical[data-dir="up"] .svt-vertical__text{
    writing-mode: horizontal-tb;
    transform:none;
  }
}
*/
