/* ==========================================================
   NUBO_TRANSACTION_EXPERIENCE_V4_START
   ========================================================== */


/* Modal controlado: no replica el ancho de la referencia */

#modal-layer
.nubo-transaction-experience-v4 {
  width:
    min(
      860px,
      calc(100vw - 38px)
    ) !important;

  max-width:
    860px !important;

  max-height:
    min(
      90svh,
      790px
    ) !important;
}


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

.nubo-transaction-experience-v4
.nubo-transaction-type-field
> span,
.nubo-transaction-experience-v4
.nubo-transaction-type-field
> select {
  position:
    absolute !important;

  width:
    1px !important;

  height:
    1px !important;

  padding:
    0 !important;

  margin:
    -1px !important;

  overflow:
    hidden !important;

  clip:
    rect(
      0,
      0,
      0,
      0
    ) !important;

  white-space:
    nowrap !important;

  border:
    0 !important;
}


.nubo-transaction-experience-v4
.nubo-type-segment {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    4px;

  width:
    100%;

  padding:
    4px;

  border:
    1px solid
    #e0e8e3;

  border-radius:
    16px;

  background:
    #f2f5f3;

  box-sizing:
    border-box;
}


.nubo-transaction-experience-v4
.nubo-type-option {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  min-height:
    42px;

  padding:
    0
    14px;

  border:
    0;

  border-radius:
    12px;

  color:
    #89958f;

  background:
    transparent;

  font:
    inherit;

  font-size:
    11px;

  font-weight:
    780;

  cursor:
    pointer;

  transition:
    color
    170ms
    ease,
    background
    170ms
    ease,
    box-shadow
    170ms
    ease,
    transform
    170ms
    ease;
}


.nubo-transaction-experience-v4
.nubo-type-option
svg {
  width:
    16px;

  height:
    16px;
}


.nubo-transaction-experience-v4
.nubo-type-option.is-active {
  color:
    #244a39;

  background:
    #ffffff;

  box-shadow:
    0 3px 10px
    rgba(19, 55, 36, 0.08),
    inset 0 0 0 1px
    rgba(205, 220, 211, 0.75);
}


.nubo-transaction-experience-v4
.nubo-type-option.is-expense.is-active {
  color:
    #df644b;
}


.nubo-transaction-experience-v4
.nubo-type-option.is-income.is-active {
  color:
    #24955e;
}


/* ==========================================================
   MONTO Y MONEDA
   ========================================================== */

.nubo-transaction-experience-v4
.nubo-amount-composer {
  display:
    grid;

  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;

  align-items:
    center;

  gap:
    7px;

  min-height:
    48px;

  padding:
    4px;

  border:
    1px solid
    #d5e2da;

  border-radius:
    14px;

  background:
    #ffffff;

  transition:
    border-color
    170ms
    ease,
    box-shadow
    170ms
    ease;
}


.nubo-transaction-experience-v4
.nubo-amount-composer:focus-within {
  border-color:
    #55b985;

  box-shadow:
    0 0 0 4px
    rgba(45, 168, 105, 0.10);
}


.nubo-transaction-experience-v4
.nubo-amount-prefix {
  display:
    grid;

  place-items:
    center;

  width:
    38px;

  height:
    38px;

  border-radius:
    11px;

  color:
    #de654e;

  background:
    #fff0ea;

  font-size:
    12px;

  font-weight:
    850;
}


.nubo-transaction-experience-v4.is-income
.nubo-amount-prefix {
  color:
    #238f59;

  background:
    #e6f7ed;
}


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

  padding:
    0
    6px !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  font-size:
    17px !important;

  font-weight:
    780 !important;
}


.nubo-transaction-experience-v4
.nubo-currency-badge {
  display:
    grid;

  align-content:
    center;

  min-width:
    64px;

  min-height:
    38px;

  padding:
    4px
    10px;

  border-left:
    1px solid
    #e2e9e5;

  color:
    #51675c;
}


.nubo-transaction-experience-v4
.nubo-currency-badge
small {
  color:
    #98a49e;

  font-size:
    7px;

  line-height:
    1;
}


.nubo-transaction-experience-v4
.nubo-currency-badge
strong {
  margin-top:
    3px;

  font-size:
    10px;

  line-height:
    1;
}


/* ==========================================================
   IA COMPACTA
   ========================================================== */

.nubo-transaction-experience-v4
.ai-helper {
  padding:
    11px !important;

  border-radius:
    15px !important;

  background:
    linear-gradient(
      135deg,
      #eaf8f0,
      #e0f4e8
    ) !important;
}


.nubo-transaction-experience-v4
.ai-helper__row {
  display:
    grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    auto !important;

  align-items:
    end !important;

  gap:
    8px !important;
}


.nubo-transaction-experience-v4
.ai-helper
input {
  min-height:
    43px !important;

  border-radius:
    12px !important;
}


.nubo-transaction-experience-v4
.ai-helper
.btn {
  width:
    auto !important;

  min-width:
    126px !important;

  max-width:
    none !important;

  min-height:
    43px !important;

  margin:
    0 !important;

  padding:
    0
    14px !important;

  border-radius:
    12px !important;

  font-size:
    11px !important;
}


.nubo-transaction-experience-v4
.ai-helper
small {
  margin-top:
    0 !important;

  font-size:
    8.7px !important;
}


/* ==========================================================
   CATEGORÍA E INFORMACIÓN
   ========================================================== */

.nubo-transaction-experience-v4
.nubo-selected-category {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    28px;

  padding:
    4px
    10px;

  border:
    1px solid
    #cee3d6;

  border-radius:
    999px;

  color:
    #387257;

  background:
    #f0f9f4;

  font-size:
    8.5px;

  font-weight:
    780;

  white-space:
    nowrap;
}


/* ==========================================================
   FOOTER Y CTA CONTEXTUAL
   ========================================================== */

.nubo-transaction-experience-v4
.nubo-transaction-footer {
  position:
    relative !important;

  padding-bottom:
    23px !important;
}


.nubo-transaction-experience-v4
.nubo-transaction-save {
  min-width:
    142px !important;

  transition:
    transform
    160ms
    ease,
    box-shadow
    160ms
    ease,
    background
    160ms
    ease !important;
}


.nubo-transaction-experience-v4.is-expense
.nubo-transaction-save {
  background:
    linear-gradient(
      135deg,
      #e96c52,
      #ef7a5e
    ) !important;

  box-shadow:
    0 9px 20px
    rgba(220, 94, 68, 0.20) !important;
}


.nubo-transaction-experience-v4.is-income
.nubo-transaction-save {
  background:
    linear-gradient(
      135deg,
      #27945f,
      #46ae72
    ) !important;

  box-shadow:
    0 9px 20px
    rgba(38, 146, 92, 0.20) !important;
}


@media (hover: hover) {
  .nubo-transaction-experience-v4
  .nubo-transaction-save:hover {
    transform:
      translateY(-1px);
  }
}


.nubo-transaction-experience-v4
.nubo-transaction-safe {
  position:
    absolute;

  right:
    0;

  bottom:
    5px;

  left:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;

  color:
    #95a19b;

  font-size:
    7.8px;

  pointer-events:
    none;
}


.nubo-transaction-experience-v4
.nubo-transaction-safe
svg {
  width:
    11px;

  height:
    11px;
}


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

@media (max-width: 768px) {
  #modal-layer
  .nubo-transaction-experience-v4 {
    width:
      100% !important;

    max-width:
      none !important;

    max-height:
      min(
        94svh,
        var(
          --nubo-visual-height,
          94svh
        )
      ) !important;

    border-radius:
      24px
      24px
      0
      0 !important;
  }


  .nubo-transaction-experience-v4
  .modal-head {
    min-height:
      68px !important;
  }


  .nubo-transaction-experience-v4
  .nubo-movement-primary-grid,
  .nubo-transaction-experience-v4
  .nubo-movement-detail-grid {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }


  .nubo-transaction-experience-v4
  .nubo-type-option {
    min-height:
      41px;

    padding-inline:
      8px;

    font-size:
      10.5px;
  }


  .nubo-transaction-experience-v4
  .nubo-amount-composer {
    min-height:
      48px;
  }


  .nubo-transaction-experience-v4
  .nubo-currency-badge {
    min-width:
      57px;

    padding-inline:
      8px;
  }


  /*
   * Nubo IA móvil:
   * input arriba y botón compacto alineado a la derecha.
   */

  .nubo-transaction-experience-v4
  .ai-helper {
    padding:
      10px !important;
  }


  .nubo-transaction-experience-v4
  .ai-helper__row {
    grid-template-columns:
      minmax(0, 1fr) !important;

    gap:
      7px !important;
  }


  .nubo-transaction-experience-v4
  .ai-helper
  .btn {
    justify-self:
      end !important;

    width:
      auto !important;

    min-width:
      118px !important;

    min-height:
      39px !important;

    padding:
      0
      13px !important;

    margin:
      0 !important;

    border-radius:
      11px !important;

    font-size:
      10.5px !important;
  }


  .nubo-transaction-experience-v4
  .ai-helper
  small {
    font-size:
      8px !important;
  }


  .nubo-transaction-experience-v4
  .nubo-selected-category {
    max-width:
      44vw;

    overflow:
      hidden;

    text-overflow:
      ellipsis;
  }


  .nubo-transaction-experience-v4
  .nubo-transaction-footer {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;

    padding-bottom:
      calc(
        27px +
        env(
          safe-area-inset-bottom
        )
      ) !important;
  }


  .nubo-transaction-experience-v4
  .nubo-movement-summary {
    grid-column:
      1 / -1;
  }


  .nubo-transaction-experience-v4
  .nubo-transaction-footer
  .btn {
    width:
      100% !important;

    min-width:
      0 !important;
  }


  .nubo-transaction-experience-v4
  .nubo-transaction-safe {
    bottom:
      calc(
        7px +
        env(
          safe-area-inset-bottom
        )
      );
  }


  body.nubo-keyboard-open
  .nubo-transaction-experience-v4
  .nubo-transaction-safe {
    display:
      none;
  }


  body.nubo-keyboard-open
  .nubo-transaction-experience-v4
  .nubo-transaction-footer {
    padding-bottom:
      9px !important;
  }
}


/* Pantallas muy estrechas */

@media (max-width: 390px) {
  .nubo-transaction-experience-v4
  .nubo-amount-prefix {
    width:
      34px;
  }


  .nubo-transaction-experience-v4
  .nubo-currency-badge {
    min-width:
      52px;

    padding-inline:
      6px;
  }


  .nubo-transaction-experience-v4
  .nubo-type-option {
    gap:
      5px;
  }
}


/* Movimiento reducido */

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

/* NUBO_TRANSACTION_EXPERIENCE_V4_END */