// OT-MMO: pantalla completa para crear personaje. La usan «Crear cuenta» y «Nuevo personaje» de la lista.
// Composición aprobada el 22-oct (clases a la izquierda, personaje al centro, ficha a la derecha, nombre abajo),
// rehecha el 22-oct con el Design System: tokens pizarra, Geist / Geist Mono, escala de 4 px, componentes base.

// Fila de la lista de clases: ícono de su primera habilidad (asset real del juego), nombre y papel.
CPClase < UIWidget
  height: 56
  focusable: false
  background-color: alpha
  border-width: 0
  border-width-bottom: 1
  border-color: $otmmo-border
  $hover !checked:
    background-color: $otmmo-surface
  $checked:
    background-color: $otmmo-surface
    border-width: 1
    border-color: $otmmo-accent

  UIWidget
    id: icono
    size: 32 32
    anchors.left: parent.left
    anchors.verticalCenter: parent.verticalCenter
    margin-left: 12
    phantom: true

  Label
    id: nombre
    anchors.left: icono.right
    anchors.right: parent.right
    anchors.top: parent.top
    margin-left: 12
    margin-top: 10
    height: 18
    ttf-font: $otmmo-font-strong
    ttf-font-size: $otmmo-size-md
    color: $otmmo-text
    phantom: true

  Label
    id: resumen
    anchors.left: nombre.left
    anchors.right: parent.right
    anchors.top: nombre.bottom
    margin-top: 2
    color: $otmmo-text-2
    phantom: true

CPSeccion < Label
  ttf-font: $otmmo-font-strong
  ttf-font-size: $otmmo-size-sm
  color: $otmmo-text-2
  height: 16

CPEspecialidad < UIWidget
  height: 32
  border-width-bottom: 1
  border-color-bottom: $otmmo-border

  Label
    id: n
    anchors.left: parent.left
    anchors.verticalCenter: parent.verticalCenter
    ttf-font: $otmmo-font
    ttf-font-size: $otmmo-size-md
    color: $otmmo-text
    text-auto-resize: true

  Label
    id: r
    anchors.right: parent.right
    anchors.verticalCenter: parent.verticalCenter
    color: $otmmo-text-2
    text-auto-resize: true

CPHabilidad < UIWidget
  size: 112 64

  UIWidget
    id: marco
    size: 36 36
    anchors.top: parent.top
    anchors.left: parent.left
    image-source: /images/ui/item
    image-border: 1

    UIWidget
      id: icono
      size: 32 32
      anchors.centerIn: parent
      phantom: true

  Label
    id: nombre
    anchors.top: marco.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    margin-top: 6
    height: 16
    color: $otmmo-text-2

// Cifra de la ficha: etiqueta pequeña arriba, número en Geist Mono debajo.
CPCifra < UIWidget
  size: 96 40

  Label
    id: etiqueta
    anchors.top: parent.top
    anchors.left: parent.left
    color: $otmmo-text-2
    text-auto-resize: true

  Label
    id: valor
    anchors.top: etiqueta.bottom
    anchors.left: parent.left
    margin-top: 4
    ttf-font: $otmmo-font-num
    ttf-font-size: $otmmo-size-lg
    color: $otmmo-text
    text-auto-resize: true

// Parte del cuerpo a colorear (Cabeza, Torso, Piernas, Pies): botón base con su color actual a la izquierda.
CPParte < Button
  text-align: left
  text-offset: 28 0

  UIWidget
    id: muestra
    size: 12 12
    anchors.left: parent.left
    anchors.verticalCenter: parent.verticalCenter
    border-width: 1
    border-color: $otmmo-border
    phantom: true

// Casilla de la paleta de atuendos de Tibia (133 colores, getOutfitColor). Elegida: borde text de 1 px.
CPColor < UIWidget
  size: 13 13
  border-width: 1
  border-color: alpha
  $hover:
    border-color: $otmmo-text-2
  $checked:
    border-color: $otmmo-text

// Baldosa del suelo bajo el personaje (ver CrearPersonaje.pintarSuelo).
CPBaldosa < UIItem
  size: 96 96
  virtual: true
  phantom: true

UIWidget
  id: crearPersonaje
  anchors.fill: parent
  background-color: $otmmo-bg
  focusable: true
  @onEscape: CrearPersonaje.volver()

  UIWidget
    id: barra
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.right: parent.right
    height: 56
    border-width-bottom: 1
    border-color-bottom: $otmmo-border

    Button
      id: volver
      anchors.left: parent.left
      anchors.verticalCenter: parent.verticalCenter
      margin-left: 24
      size: 88 28
      !text: tr('Volver')
      @onClick: CrearPersonaje.volver()

    Label
      id: titulo
      anchors.left: volver.right
      anchors.verticalCenter: parent.verticalCenter
      margin-left: 16
      ttf-font: $otmmo-font-strong
      ttf-font-size: $otmmo-size-lg
      color: $otmmo-text
      text-auto-resize: true

    Label
      id: cupo
      anchors.right: parent.right
      anchors.verticalCenter: parent.verticalCenter
      margin-right: 24
      color: $otmmo-text-2
      text-auto-resize: true

  CPSeccion
    id: tituloLista
    anchors.top: barra.bottom
    anchors.left: parent.left
    margin-top: 24
    margin-left: 24
    width: 280
    !text: tr('Clase')

  UIWidget
    id: lista
    anchors.top: tituloLista.bottom
    anchors.left: tituloLista.left
    margin-top: 8
    width: 280
    image-source: /images/ui/3pixel-frame-borderimage
    image-border: 3
    padding: 1
    layout:
      type: verticalBox
      fit-children: true

  UIWidget
    id: ficha
    anchors.top: barra.bottom
    anchors.right: parent.right
    anchors.bottom: pie.top
    width: 400
    border-width-left: 1
    border-color-left: $otmmo-border
    padding: 24 24 24 32

    Label
      id: nombre
      anchors.top: parent.top
      anchors.left: parent.left
      ttf-font: $otmmo-font-strong
      ttf-font-size: $otmmo-size-xl
      color: $otmmo-text
      text-auto-resize: true

    Label
      id: roles
      anchors.top: nombre.bottom
      anchors.left: parent.left
      margin-top: 4
      color: $otmmo-text-2
      text-auto-resize: true

    UIWidget
      id: dificultad
      anchors.right: parent.right
      anchors.verticalCenter: nombre.verticalCenter
      size: 120 16

      Label
        id: texto
        anchors.right: barras.left
        anchors.verticalCenter: parent.verticalCenter
        margin-right: 8
        color: $otmmo-text-2
        text-auto-resize: true

      UIWidget
        id: barras
        anchors.right: parent.right
        anchors.verticalCenter: parent.verticalCenter
        size: 44 6
        layout:
          type: horizontalBox
          spacing: 4

        UIWidget
          size: 12 6
        UIWidget
          size: 12 6
        UIWidget
          size: 12 6

    Label
      id: texto
      anchors.top: roles.bottom
      anchors.left: parent.left
      anchors.right: parent.right
      margin-top: 16
      text-wrap: true
      text-auto-resize: true
      ttf-font: $otmmo-font
      ttf-font-size: $otmmo-size-md
      color: $otmmo-text

    CPSeccion
      id: tituloSpecs
      anchors.top: texto.bottom
      anchors.left: parent.left
      margin-top: 24
      !text: tr('Especializaciones a nivel 10')

    UIWidget
      id: specs
      anchors.top: tituloSpecs.bottom
      anchors.left: parent.left
      anchors.right: parent.right
      margin-top: 4
      layout:
        type: verticalBox
        fit-children: true

    CPSeccion
      id: tituloHab
      anchors.top: specs.bottom
      anchors.left: parent.left
      margin-top: 24
      !text: tr('Habilidades iniciales')

    UIWidget
      id: habs
      anchors.top: tituloHab.bottom
      anchors.left: parent.left
      anchors.right: parent.right
      margin-top: 12
      height: 64
      layout:
        type: horizontalBox
        spacing: 8

    UIWidget
      id: cifras
      anchors.top: habs.bottom
      margin-top: 24
      anchors.left: parent.left
      anchors.right: parent.right
      height: 57
      border-width-top: 1
      border-color-top: $otmmo-border
      padding-top: 16
      layout:
        type: horizontalBox
        spacing: 24

      CPCifra
        id: vida
      CPCifra
        id: mana
      CPCifra
        id: carga

  UIWidget
    id: escena
    anchors.top: barra.bottom
    anchors.left: lista.right
    anchors.right: ficha.left
    anchors.bottom: pie.top

    // Figura y apariencia lado a lado, centradas en la escena. Los tamaños (escala 3x o 4x) los fija ajustar().
    UIWidget
      id: grupo
      anchors.centerIn: parent
      size: 608 344

      UIWidget
        id: suelo
        size: 288 288
        anchors.left: parent.left
        anchors.verticalCenter: parent.verticalCenter
        phantom: true
        layout:
          type: grid
          cell-size: 96 96
          num-columns: 3
          flow: true

      UICreature
        id: figura
        size: 192 192
        anchors.right: suelo.right
        anchors.bottom: suelo.bottom
        margin-right: 120
        margin-bottom: 120
        creature-center: false
        phantom: true

      UIWidget
        id: apariencia
        anchors.right: parent.right
        anchors.verticalCenter: parent.verticalCenter
        size: 280 520

        // Razas (25-oct): solo Humano desde el 25-oct (las otras no pueden montar); la seccion queda oculta.
        CPSeccion
          id: tituloRaza
          visible: false
          anchors.top: parent.top
          anchors.left: parent.left
          !text: tr('Raza')

        UIWidget
          id: razas
          visible: false
          anchors.top: tituloRaza.bottom
          anchors.left: parent.left
          anchors.right: parent.right
          margin-top: 8
          height: 60
          layout:
            type: grid
            cell-size: 138 28
            cell-spacing: 4
            num-columns: 2
            flow: true

        Label
          id: razaTexto
          visible: false
          anchors.top: razas.bottom
          anchors.left: parent.left
          anchors.right: parent.right
          margin-top: 8
          height: 72
          text-wrap: true
          color: $otmmo-text-2

        CPSeccion
          id: tituloSexo
          anchors.top: parent.top
          anchors.left: parent.left
          !text: tr('Cuerpo')

        UIWidget
          id: sexo
          anchors.top: tituloSexo.bottom
          anchors.left: parent.left
          anchors.right: parent.right
          margin-top: 8
          height: 28

          Button
            id: hombre
            anchors.left: parent.left
            anchors.top: parent.top
            size: 138 28
            !text: tr('Hombre')
            @onClick: CrearPersonaje.sexo('hombre')

          Button
            id: mujer
            anchors.right: parent.right
            anchors.top: parent.top
            size: 138 28
            !text: tr('Mujer')
            @onClick: CrearPersonaje.sexo('mujer')

        CPSeccion
          id: tituloAtuendo
          anchors.top: sexo.bottom
          anchors.left: parent.left
          margin-top: 24
          !text: tr('Atuendo')

        UIWidget
          id: atuendo
          anchors.top: tituloAtuendo.bottom
          anchors.left: parent.left
          anchors.right: parent.right
          margin-top: 8
          height: 28
          image-source: /images/ui/input
          image-clip: 0 0 32 24
          image-border: 3

          Button
            id: anterior
            anchors.left: parent.left
            anchors.top: parent.top
            size: 28 28
            icon-source: /images/ui/chevron
            icon-clip: 0 0 8 12
            !tooltip: tr('Atuendo anterior')
            @onClick: CrearPersonaje.atuendo(-1)

          Label
            id: nombre
            anchors.left: anterior.right
            anchors.right: siguiente.left
            anchors.verticalCenter: parent.verticalCenter
            text-align: center
            ttf-font-size: $otmmo-size-md

          Button
            id: siguiente
            anchors.right: parent.right
            anchors.top: parent.top
            size: 28 28
            icon-source: /images/ui/chevron
            icon-clip: 8 0 8 12
            !tooltip: tr('Atuendo siguiente')
            @onClick: CrearPersonaje.atuendo(1)

        CPSeccion
          id: tituloColores
          anchors.top: atuendo.bottom
          anchors.left: parent.left
          margin-top: 24
          text-auto-resize: true
          !text: tr('Colores')

        UIButton
          id: azar
          anchors.right: parent.right
          anchors.verticalCenter: tituloColores.verticalCenter
          ttf-font: $otmmo-font
          ttf-font-size: $otmmo-size-sm
          color: $otmmo-text-2
          text-auto-resize: true
          !text: tr('Al azar')
          @onClick: CrearPersonaje.azar()
          $hover:
            color: $otmmo-text

        UIWidget
          id: partes
          anchors.top: tituloColores.bottom
          anchors.left: parent.left
          anchors.right: parent.right
          margin-top: 8
          height: 60
          layout:
            type: grid
            cell-size: 138 28
            cell-spacing: 4
            num-columns: 2
            flow: true

        UIWidget
          id: paleta
          anchors.top: partes.bottom
          anchors.left: parent.left
          margin-top: 8
          size: 266 98
          layout:
            type: grid
            cell-size: 13 13
            cell-spacing: 1
            num-columns: 19
            flow: true

  UIWidget
    id: pie
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    height: 88
    border-width-top: 1
    border-color-top: $otmmo-border

    UIWidget
      id: centro
      anchors.right: parent.right
      anchors.verticalCenter: parent.verticalCenter
      margin-right: 24
      size: 680 52

      FieldLabel
        id: etiqueta
        anchors.left: parent.left
        anchors.top: parent.top
        width: 120
        !text: tr('Nombre')

      FieldError
        id: error
        anchors.left: etiqueta.right
        anchors.top: parent.top
        anchors.right: dado.right
        text-auto-resize: false
        text-align: right
        height: 16

      GameInput
        id: nombre
        anchors.left: parent.left
        anchors.bottom: parent.bottom
        size: 296 32
        max-length: 25
        @onEnter: CrearPersonaje.crear()

      Button
        id: dado
        anchors.left: nombre.right
        anchors.bottom: parent.bottom
        margin-left: 8
        size: 96 32
        !text: tr('Sugerir')
        !tooltip: tr('Sugerir otro nombre')
        @onClick: CrearPersonaje.sugerir()

      PrimaryButton
        id: crear
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        size: 248 32
        ttf-font-size: $otmmo-size-md
        @onClick: CrearPersonaje.crear()