/* ==========================================================
   NUBO_TRANSACTION_LAYOUT_REFINE_V5_START

   Orden y alineación de Datos principales.
   Solo afecta el modal de movimientos con experiencia V4.
   ========================================================== */


/* ==========================================================
   BLOQUE DATOS PRINCIPALES
   ========================================================== */

#modal-layer
.nubo-transaction-experience-v4
.nubo-movement-section.is-primary {
  gap:
    12px !important;

  padding:
    15px !important;
}


#modal-layer
.nubo-transaction-experience-v4
.nubo-movement-section.is-primary
.nubo-movement-section__head {
  margin-bottom:
    0 !important;
}


#modal-layer
.nubo-transaction-experience-v4
.nubo-movement-section.is-primary
.nubo-movement-section__head
p {
  max-width:
    520px;
}


/* ==========================================================
   NUBO IA
   ========================================================== */

#modal-layer
.nubo-transaction-experience-v4
.nubo-movement-section.is-primary
.ai-helper {
  margin:
    0
    0
    1px !important;
}


/* ==========================================================
   GRID LAPTOP / DESKTOP
   ========================================================== */

#modal-layer
.nubo-transaction-experience-v4
.nubo-movement-primary-grid {
  display:
    grid !important;

  grid-template-columns:
    minmax(0, 42fr)
    minmax(0, 58fr) !important;

  grid-template-areas:
    "type amount"
    "concept concept" !important;

  align-items:
    start !important;

  column-gap:
    14px !important;

  row-gap:
    14px !important;

  width:
    100% !important;
}


#modal-layer
.nubo-transaction-experience-v4
.nubo-transaction-type-field {
  grid-area:
    type !important;

  align-self:
    start !important;
}


#modal-layer
.nubo-transaction-experience-v4
.nubo-transaction-amount-field {
  grid-area:
    amount !important;

  align-self:
    start !important;
}


#modal-layer
.nubo-transaction-experience-v4
.nubo-transaction-concept-field {
  grid-area:
    concept !important;

  margin-top:
    0 !important;
}


/* ==========================================================
   RÓTULOS ALINEADOS
   ========================================================== */

/*
 * V4 ocultó el rótulo original "Tipo".
 * Se incorpora uno más descriptivo sin cambiar el HTML.
 */

#modal-layer
.nubo-transaction-experience-v4
.nubo-transaction-type-field::before {
  content:
    "Tipo de movimiento";

  display:
    block;

  min-height:
    14px;

  margin:
    0
    0
    6px;

  color:
    #234536;

  font-size:
    10px;

  font-weight:
    780;

  line-height:
    1.35;
}


#modal-layer
.nubo-transaction-experience-v4
.nubo-transaction-amount-field
> span,
#modal-layer
.nubo-transaction-experience-v4
.nubo-transaction-concept-field
> span {
  min-height:
    14px !important;

  margin:
    0 !important;

  line-height:
    1.35 !important;
}


/* ==========================================================
   SELECTOR GASTO / INGRESO
   ========================================================== */

#modal-layer
.nubo-transaction-experience-v4
.nubo-type-segment {
  min-height:
    54px !important;

  padding:
    5px !important;

  border-radius:
    15px !important;
}


#modal-layer
.nubo-transaction-experience-v4
.nubo-type-option {
  min-height:
    44px !important;

  gap:
    7px !important;

  padding:
    0
    12px !important;

  border-radius:
    11px !important;

  font-size:
    10.5px !important;
}


#modal-layer
.nubo-transaction-experience-v4
.nubo-type-option.is-active {
  box-shadow:
    0 4px 12px
    rgba(20, 54, 36, 0.08),
    inset 0 0 0 1px
    rgba(202, 217, 208, 0.78) !important;
}


/* ==========================================================
   MONTO
   ========================================================== */

#modal-layer
.nubo-transaction-experience-v4
.nubo-amount-composer {
  min-height:
    54px !important;

  padding:
    5px !important;

  border-radius:
    15px !important;
}


#modal-layer
.nubo-transaction-experience-v4
.nubo-amount-prefix {
  width:
    40px !important;

  height:
    42px !important;

  border-radius:
    11px !important;

  font-size:
    12px !important;
}


#modal-layer
.nubo-transaction-experience-v4
.nubo-amount-composer
input[name="amount"] {
  min-height:
    42px !important;

  font-size:
    20px !important;

  font-weight:
    800 !important;

  letter-spacing:
    -0.025em !important;
}


#modal-layer
.nubo-transaction-experience-v4
.nubo-currency-badge {
  min-width:
    58px !important;

  min-height:
    40px !important;

  padding:
    4px
    8px !important;
}


#modal-layer
.nubo-transaction-experience-v4
.nubo-currency-badge
small {
  color:
    #a0aaa5 !important;

  font-size:
    6.7px !important;
}


#modal-layer
.nubo-transaction-experience-v4
.nubo-currency-badge
strong {
  color:
    #65766d !important;

  font-size:
    9px !important;
}


/* ==========================================================
   MONTOS RÁPIDOS
   ========================================================== */

#modal-layer
.nubo-transaction-experience-v4
.nubo-transaction-amount-field
.nubo-quick-amounts {
  display:
    flex !important;

  align-items:
    center !important;

  flex-wrap:
    wrap !important;

  gap:
    6px !important;

  margin:
    5px
    0
    0 !important;
}


#modal-layer
.nubo-transaction-experience-v4
.nubo-transaction-amount-field
.nubo-quick-amount {
  min-height:
    27px !important;

  padding:
    3px
    10px !important;

  border-radius:
    999px !important;

  font-size:
    8.5px !important;
}


/* ==========================================================
   CONCEPTO
   ========================================================== */

#modal-layer
.nubo-transaction-experience-v4
.nubo-transaction-concept-field {
  padding-top:
    1px !important;
}


#modal-layer
.nubo-transaction-experience-v4
.nubo-transaction-concept-field
input {
  min-height:
    47px !important;
}


/* ==========================================================
   MÓVIL
   ========================================================== */

@media (max-width: 768px) {
  #modal-layer
  .nubo-transaction-experience-v4
  .nubo-movement-primary-grid {
    grid-template-columns:
      minmax(0, 1fr) !important;

    grid-template-areas:
      "type"
      "amount"
      "concept" !important;

    column-gap:
      0 !important;

    row-gap:
      13px !important;
  }


  #modal-layer
  .nubo-transaction-experience-v4
  .nubo-transaction-type-field,
  #modal-layer
  .nubo-transaction-experience-v4
  .nubo-transaction-amount-field,
  #modal-layer
  .nubo-transaction-experience-v4
  .nubo-transaction-concept-field {
    width:
      100% !important;

    min-width:
      0 !important;
  }


  #modal-layer
  .nubo-transaction-experience-v4
  .nubo-type-segment {
    min-height:
      51px !important;
  }


  #modal-layer
  .nubo-transaction-experience-v4
  .nubo-type-option {
    min-height:
      41px !important;
  }


  #modal-layer
  .nubo-transaction-experience-v4
  .nubo-amount-composer {
    grid-template-columns:
      auto
      minmax(0, 1fr)
      auto !important;

    min-height:
      52px !important;
  }


  #modal-layer
  .nubo-transaction-experience-v4
  .nubo-amount-composer
  input[name="amount"] {
    min-width:
      0 !important;

    font-size:
      19px !important;
  }


  #modal-layer
  .nubo-transaction-experience-v4
  .nubo-transaction-amount-field
  .nubo-quick-amounts {
    margin-top:
      5px !important;
  }


  #modal-layer
  .nubo-transaction-experience-v4
  .nubo-transaction-concept-field {
    padding-top:
      0 !important;
  }
}


/* ==========================================================
   PANTALLAS MUY PEQUEÑAS
   ========================================================== */

@media (max-width: 380px) {
  #modal-layer
  .nubo-transaction-experience-v4
  .nubo-type-option {
    gap:
      5px !important;

    padding:
      0
      7px !important;

    font-size:
      10px !important;
  }


  #modal-layer
  .nubo-transaction-experience-v4
  .nubo-amount-prefix {
    width:
      35px !important;
  }


  #modal-layer
  .nubo-transaction-experience-v4
  .nubo-currency-badge {
    min-width:
      50px !important;

    padding-inline:
      5px !important;
  }
}


/* ==========================================================
   MOVIMIENTO REDUCIDO
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
  #modal-layer
  .nubo-transaction-experience-v4
  .nubo-type-option,
  #modal-layer
  .nubo-transaction-experience-v4
  .nubo-amount-composer {
    transition:
      none !important;
  }
}

/* NUBO_TRANSACTION_LAYOUT_REFINE_V5_END */