// OT-MMO: marco de objetivo (estilo WoW). Lo coloca y lo llena game_objetivo.lua.
// Un contenedor transparente con el marco y, debajo, la barra de carga: los hijos fuera del padre no se dibujan.
UIWidget
  id: objetivo
  size: 304 110
  phantom: true
  focusable: false

  UIWidget
    id: marco
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.right: parent.right
    margin: 12 0 0 36
    height: 64
    background-color: #192127F5
    border-width: 1
    border-color: $otmmo-border
    phantom: true

    UIWidget
      id: retratoMarco
      anchors.top: parent.top
      anchors.left: parent.left
      margin: 4 0 0 4
      size: 56 56
      background-color: $otmmo-bg
      border-width: 1
      border-color: $otmmo-border
      clipping: true
      phantom: true

      // el retrato: la criatura ampliada y subida para que se vea el torso; el recuadro la recorta
      UICreature
        id: retrato
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        margin-top: -6
        size: 72 72
        creature-size: 96
        creature-center: true
        phantom: true

    Label
      id: nombre
      anchors.top: parent.top
      anchors.left: retratoMarco.right
      anchors.right: parent.right
      margin: 6 8 0 8
      height: 17
      ttf-font: geistsemibold
      ttf-font-size: 13
      color: $otmmo-text
      text-auto-resize: false
      phantom: true

    Label
      id: tipo
      anchors.top: nombre.bottom
      anchors.left: nombre.left
      margin-top: 0
      ttf-font: geist
      ttf-font-size: 11
      color: $otmmo-text-2
      text-auto-resize: true
      phantom: true

    // vida: mismo aspecto que GameProgressBar (fondo bg, borde, cifra Geist Mono centrada con contorno bg)
    UIWidget
      id: vida
      anchors.bottom: parent.bottom
      anchors.left: retratoMarco.right
      anchors.right: parent.right
      margin: 0 8 4 8
      height: 16
      background-color: $otmmo-bg
      border-width: 1
      border-color: $otmmo-border
      phantom: true

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

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

  // elite (game_elite): dragon dorado enroscado en el retrato, encima del marco; asoma a la izquierda del retrato
  UIWidget
    id: dragon
    anchors.top: marco.top
    anchors.left: marco.left
    margin: -12 0 0 -36
    size: 104 88
    image-source: /game_elite/images/elite-retrato
    image-smooth: false
    visible: false
    phantom: true

  // amenaza (opcode 119): tu % frente al que va en cabeza, en la esquina del marco como el «%» de WoW
  Label
    id: amenaza
    anchors.top: marco.top
    anchors.right: marco.right
    margin: 24 8 0 0
    ttf-font: geistmono
    ttf-font-size: 11
    color: $otmmo-text-2
    text-auto-resize: true
    visible: false
    phantom: true

  // carga del objetivo: nombre a la izquierda, tiempo a la derecha, relleno que avanza
  UIWidget
    id: carga
    anchors.top: marco.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    margin: 4 0 0 100
    height: 22
    background-color: #192127F5
    border-width: 1
    border-color: $otmmo-border
    visible: false
    phantom: true

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

    Label
      id: nombre
      anchors.left: parent.left
      anchors.verticalCenter: parent.verticalCenter
      margin-left: 8
      ttf-font: geistsemibold
      ttf-font-size: 12
      color: $otmmo-text
      text-auto-resize: true
      phantom: true

    Label
      id: aviso
      anchors.left: nombre.right
      anchors.verticalCenter: parent.verticalCenter
      margin-left: 8
      ttf-font: geistsemibold
      ttf-font-size: 11
      color: $otmmo-warn
      text: Interrumpe
      text-auto-resize: true
      visible: false
      phantom: true

    Label
      id: tiempo
      anchors.right: parent.right
      anchors.verticalCenter: parent.verticalCenter
      margin-right: 8
      ttf-font: geistmono
      ttf-font-size: 12
      color: $otmmo-text-2
      text-auto-resize: true
      phantom: true