// OT-MMO Design System: componentes que el cliente de OTClient no trae (fase 2, paso 2.6).
// Normativa: vault OT-MMO/diseno/guia-de-diseno.md (A.5). Solo tokens de 0-vars.otui y escala de 4 px.
// Los módulos propios dejan de definir sus *Seccion / *Texto / *Fila / casillas y heredan de estas clases (fase 4.1).

// Texto ------------------------------------------------------------------------------------------------------------
// Rótulo de sección dentro de una ventana: SemiBold 12 en text-2, sentence case (nada de versalitas).
GameSection < Label
  ttf-font: $otmmo-font-strong
  ttf-font-size: $otmmo-size-sm
  color: $otmmo-text-2
  text-auto-resize: true

GameText < Label
  ttf-font: $otmmo-font
  ttf-font-size: $otmmo-size-sm
  color: $otmmo-text
  text-auto-resize: true

GameTextMuted < GameText
  color: $otmmo-text-2

// Párrafo (descripciones, diálogos): Geist 12 text-2, con ajuste de línea. Fijar el ancho con anclas.
GameParagraph < GameTextMuted
  text-wrap: true

// Dato menor (metadatos de fila, pistas): Geist 11 text-2.
GameTextSmall < GameTextMuted
  ttf-font-size: $otmmo-size-xs

// Nombre de una fila o de un objeto dentro de una ventana: SemiBold 12 text.
GameLabelStrong < Label
  ttf-font: $otmmo-font-strong
  ttf-font-size: $otmmo-size-sm
  color: $otmmo-text
  text-auto-resize: true

// Título dentro del contenido (la misión elegida, la rama de talentos): SemiBold 15 text, sentence case.
GameTitle < Label
  ttf-font: $otmmo-font-strong
  ttf-font-size: $otmmo-size-lg
  color: $otmmo-text
  text-auto-resize: true

// Números (vida, maná, precios, recargas): Geist Mono, cifras tabulares.
GameNumber < Label
  ttf-font: $otmmo-font-num
  ttf-font-size: $otmmo-size-sm
  color: $otmmo-text
  text-auto-resize: true

// Separador de 1 px (GameDivider); la imagen mide 2 px y deja ver 1.
GameDivider < HorizontalSeparator
GameDividerVertical < VerticalSeparator

// Contenedores ---------------------------------------------------------------------------------------------------
// Marco del HUD que flota sobre el mapa (barra de acción, minimapa): bg-2 casi opaco, borde 1 px, radio 4.
GameHudPanel < UIWidget
  image-source: /images/ui/hud_marco
  image-border: 5
  focusable: false

// Panel hundido dentro de una ventana (lista, detalle, columna): fondo bg, borde 1 px. Nunca uno dentro de otro.
GamePanel < UIWidget
  background-color: $otmmo-bg
  border-width: 1
  border-color: $otmmo-border
  focusable: false

// Casilla de ícono u objeto (libro, talentos, recompensas, botín): fondo bg, borde 1 px, 40 px para íconos de 32.
// Estados: hover border-hover; activa/elegida ($on o $checked) borde de acento; desactivada al 50 %.
GameCell < UIWidget
  size: 40 40
  background-color: $otmmo-bg
  border-width: 1
  border-color: $otmmo-border
  focusable: false

  $hover !disabled:
    border-color: $otmmo-border-hover

  $on:
    border-color: $otmmo-accent

  $checked:
    border-color: $otmmo-accent

  $disabled:
    opacity: 0.5

// Fila seleccionable de una lista: hover surface-hover, elegida surface con borde de acento (como la lista de personajes).
GameRow < UIWidget
  height: 32
  padding: 0 8
  background-color: alpha
  border-width: 1
  border-color: alpha
  focusable: false

  $hover !checked:
    background-color: $otmmo-surface-hover

  $checked:
    background-color: $otmmo-surface
    border-color: $otmmo-accent

// Casilla de objeto: 32 o 40 px (los íconos de Tibia son de 32).
GameItemSlot < Item
  size: 34 34
  virtual: false

GameItemSlotLarge < GameItemSlot
  size: 42 42

// Insignia: nivel («Nv 12») y etiquetas cortas. Fondo surface, borde, texto SemiBold 12.
GameBadge < UIWidget
  height: 20
  padding: 0 6
  text-auto-resize: true
  text-align: center
  image-source: /images/ui/boton_icono
  image-clip: 0 0 28 28
  image-border: 4
  ttf-font: $otmmo-font-strong
  ttf-font-size: $otmmo-size-sm
  color: $otmmo-text
  phantom: true

// Contador pequeño sobre un botón-ícono (misiones listas, puntos de talento): relleno acento, texto bg.
GameCounter < UIWidget
  size: 14 14
  text-auto-resize: false
  text-align: center
  image-source: /images/ui/contador
  image-border: 4
  ttf-font: $otmmo-font-num
  ttf-font-size: $otmmo-size-xs
  color: $otmmo-bg
  phantom: true
  visible: false

// Botón con ícono de línea (familia propia: data/images/game/hud/iconos, scripts/generar-iconos-hud.py).
// Los íconos se dibujan claros; icon-color los tiñe: text-2 en reposo, text con hover o activo.
// boton_icono.png apila 5 estados de 28 px: normal · hover · pulsado · activo (borde acento) · desactivado.
GameIconButton < UIButton
  size: 28 28
  image-source: /images/ui/boton_icono
  image-clip: 0 0 28 28
  image-border: 4
  icon-color: $otmmo-text-2
  icon-align: center
  change-cursor-image: true
  cursor: pointer

  $hover !disabled:
    image-clip: 0 28 28 28
    icon-color: $otmmo-text

  $on !disabled:
    image-clip: 0 84 28 28
    icon-color: $otmmo-text

  $pressed !disabled:
    image-clip: 0 56 28 28
    icon-offset-y: 1

  $disabled:
    image-clip: 0 112 28 28
    icon-color: $otmmo-text-disabled
    change-cursor-image: false

// Barra de progreso del HUD (vida, maná, experiencia, carga): fondo bg, borde 1 px, relleno a mano (hijo «fill»,
// ancho desde Lua) y número centrado en Geist Mono con contorno bg para leerse sobre cualquier relleno.
GameProgressBar < UIWidget
  height: 20
  background-color: $otmmo-bg
  border-width: 1
  border-color: $otmmo-border
  focusable: false

  UIWidget
    id: fill
    anchors.top: parent.top
    anchors.bottom: parent.bottom
    anchors.left: parent.left
    margin: 1
    width: 0
    background-color: $otmmo-hp
    phantom: true

  Label
    id: text
    anchors.fill: parent
    ttf-font: $otmmo-font-num
    ttf-font-size: $otmmo-size-md
    ttf-stroke: 1 #10161C
    color: $otmmo-text
    text-align: center
    phantom: true