// OT-MMO: estado del personaje encima de la barra de acción (fase 3, concepto A.6b de la guía de diseño).
// Fila 1: insignia «Nv N» + experiencia fina a lo ancho con «x / y (z %)». Fila 2: vida (corazón, barra hp) y maná
// (gota, barra mana), dos bloques del mismo ancho con el número centrado. Debajo del maná, la Reserva de Ceniza del
// Brujo (opcode 120). El ancho lo fija game_vitals.lua: el de la barra de acción. El objetivo vive en game_objetivo.
UIWidget
  id: vitals
  size: 470 54
  phantom: true
  focusable: false

  GameBadge
    id: nivel
    anchors.top: parent.top
    anchors.left: parent.left
    height: 18
    text: Nv 1

  GameProgressBar
    id: exp
    anchors.left: nivel.right
    anchors.right: parent.right
    anchors.verticalCenter: nivel.verticalCenter
    margin-left: 8
    height: 12

  UIWidget
    id: iconoVida
    size: 12 12
    anchors.left: parent.left
    anchors.top: nivel.bottom
    margin-top: 12
    image-source: /images/game/hud/iconos/corazon
    phantom: true

  GameProgressBar
    id: health
    anchors.top: nivel.bottom
    anchors.left: iconoVida.right
    anchors.right: parent.horizontalCenter
    margin-top: 8
    margin-left: 6
    margin-right: 8
    height: 20

  UIWidget
    id: iconoMana
    size: 12 12
    anchors.left: parent.horizontalCenter
    anchors.top: nivel.bottom
    margin-top: 12
    margin-left: 8
    image-source: /images/game/hud/iconos/gota
    phantom: true

  GameProgressBar
    id: mana
    anchors.top: health.top
    anchors.left: iconoMana.right
    anchors.right: parent.right
    margin-left: 6
    height: 20

  // Reserva de Ceniza del Brujo (opcode 120, server/scripts/clases/brujo.lua): hilo gris bajo el maná
  UIWidget
    id: ceniza
    anchors.left: mana.left
    anchors.right: mana.right
    anchors.top: mana.bottom
    margin-top: 2
    height: 4
    background-color: $otmmo-bg
    border-width: 1
    border-color: $otmmo-border
    visible: false

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