// Aviso de logro conseguido: arriba al centro, como WoW. Pizarra con la medalla en acento (lo único con color).
UIWidget
  id: avisoLogro
  size: 380 64
  background-color: #10161CF0
  border-width: 1
  border-color: $otmmo-border
  phantom: true
  focusable: false

  UIWidget
    id: medalla
    anchors.left: parent.left
    anchors.verticalCenter: parent.verticalCenter
    margin-left: 12
    size: 40 40
    border-width: 1
    border-color: $otmmo-accent
    background-color: $otmmo-bg-2
    text-align: center
    ttf-font: $otmmo-font-num
    ttf-font-size: $otmmo-size-md
    color: $otmmo-accent
    phantom: true

  Label
    id: arriba
    anchors.top: parent.top
    anchors.left: medalla.right
    anchors.right: parent.right
    margin-top: 8
    margin-left: 12
    height: 14
    ttf-font: $otmmo-font
    ttf-font-size: $otmmo-size-xs
    color: $otmmo-text-2
    text: Logro conseguido
    phantom: true

  Label
    id: nombre
    anchors.top: arriba.bottom
    anchors.left: arriba.left
    anchors.right: parent.right
    margin-right: 12
    height: 20
    ttf-font: $otmmo-font-strong
    ttf-font-size: $otmmo-size-lg
    color: $otmmo-text
    phantom: true

  Label
    id: titulo
    anchors.top: nombre.bottom
    anchors.left: arriba.left
    anchors.right: parent.right
    margin-right: 12
    height: 14
    ttf-font: $otmmo-font
    ttf-font-size: $otmmo-size-xs
    color: $otmmo-text-2
    phantom: true