Configuración de diseño de página

Ancho

Puede diferir ligeramente de la interfaz real.

Puntos:
define el ancho del elemento. Con min/max puedes mejorar estabilidad del layout.

Qué cambia este ajuste:
es clave cuando la longitud del texto varía entre botones.

Consejo de ajuste:
define primero min-width, luego ajusta width y max-width.

Elementos de configuración

• Use width: activa o desactiva ancho fijo.
• Ancho + unidad (px / % / vw / vh / fit-content).
• Use min width / Min Ancho + unidad.
• Use max width / Max Ancho + unidad.
• Responsivo.

con fit-content, el ancho se ajusta automáticamente al texto. % es relativo al padre. Combinando min/max evitas extremos y mantienes flexibilidad.

Alto

Puede diferir ligeramente de la interfaz real.

Puntos:
define la altura del elemento según cantidad de texto y decoración.

Qué cambia este ajuste:
muy bajo se ve apretado; muy alto pierde densidad.

Consejo de ajuste:
fija primero una altura mínima y usa altura fija solo cuando sea necesario.

Elementos de configuración

• Use height.
• Alto + unidad (px / % / vw / vh).
• Use min height / Min Alto + unidad.
• Use max height / Max Alto + unidad.
• Responsivo.

si fijas demasiado la altura, con más texto puede haber desbordes. Para mantener flexibilidad, prioriza min-height.

Efecto de overflow: hidden: botón, contenido, miniatura, banda y fondo usan overflow: hidden; por eso sombras/deformaciones grandes pueden recortarse. (En animación de marco neon-01/glow-01 puede cambiarse a overflow: visible.)

Margen

Puede diferir ligeramente de la interfaz real.

Puntos:
define el espacio exterior del elemento.

Qué cambia este ajuste:
mejora agrupación de información y guía visual.

Consejo de ajuste:
establece primero una regla vertical global y aplícala de forma consistente.

Elementos de configuración

• Use Individual Settings.
• Lote: Margin + unidad (px / % / vw / vh / auto).
• Individual: Top / Right / Bottom / Left + unidad.
• Responsivo.

auto permite centrado horizontal (por ejemplo, margin-left:auto + margin-right:auto). Con vw/vh, el margen responde al viewport.

Relleno

Puede diferir ligeramente de la interfaz real.

Puntos:
define el espacio interno para evitar que texto/icono queden apretados.

Qué cambia este ajuste:
también afecta facilidad de toque (tap area).

Consejo de ajuste:
en SP suele funcionar mejor un relleno vertical algo mayor que en PC.

Elementos de configuración

• Use Individual Settings.
• Lote: Padding + unidad (px / % / vw / vh).
• Individual: Top / Right / Bottom / Left + unidad.
• Responsivo.

Posición

Puede diferir ligeramente de la interfaz real.

Puntos:
define la ubicación del elemento y su relación con otros elementos.

Qué cambia este ajuste:
alto impacto; puede causar rupturas de layout si se usa sin control.

Consejo de ajuste:
usa relative como base y limita absolute a casos estrictamente necesarios.

Elementos de configuración

• Posición Type (relative / absolute).
• Top / Right / Bottom / Left (Auto / valor) + unidad.
• Z-Index (Auto / valor).
• Transformación Translate X / Y + unidad.
• Responsivo.

con absolute, la referencia es el ancestro más cercano con position: relative. Transformación Translate mueve solo el dibujo, independiente de position.

Orden de capas

Puede diferir ligeramente de la interfaz real.

Puntos:
define el orden de superposición entre fondo, banda, miniatura y contenido.

Qué cambia este ajuste:
evita que texto o elementos importantes queden ocultos.

Consejo de ajuste:
fija Content en primer plano y organiza capas decorativas por debajo.

Elementos de configuración

• Content.
• Thumbnail.
• Band.
• Background.

se controla con z-index; números más altos se muestran delante. Valores predeterminados: Background 0, Band 5, Thumbnail 10, Content 20.

z-index interno fijo:
icono en Content usa z-index: 25, texto z-index: 30, sombra interior ::after z-index: 100, animación de marco z-index: 1001. Estos valores no se cambian desde este panel.