/* ==========================================================
   NUBO_MOVEMENT_MODAL_POLISH_V3_START

   Pulido exclusivamente visual del modal de movimientos.
   No modifica lógica, eventos, formularios ni otros modales.
   ========================================================== */


/* ==========================================================
   CONTENEDOR EXCLUSIVO DEL MODAL DE MOVIMIENTOS
   ========================================================== */

#modal-layer:has(#movement-form)
.nubo-movement-modal {
  width:
    min(
      920px,
      calc(100vw - 40px)
    ) !important;

  max-width:
    920px !important;

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

  border-radius:
    26px !important;

  box-shadow:
    0 28px 75px
    rgba(9, 31, 20, 0.21),
    0 8px 24px
    rgba(9, 31, 20, 0.08),
    inset 0 1px 0
    rgba(255, 255, 255, 0.96) !important;
}


/* ==========================================================
   CABECERA
   ========================================================== */

#modal-layer:has(#movement-form)
.nubo-movement-modal
.modal-head {
  min-height:
    76px !important;

  padding:
    15px
    18px !important;
}


#modal-layer:has(#movement-form)
.nubo-movement-modal__identity {
  gap:
    12px !important;
}


#modal-layer:has(#movement-form)
.nubo-movement-modal__icon {
  flex-basis:
    44px !important;

  width:
    44px !important;

  height:
    44px !important;

  border-radius:
    14px !important;
}


#modal-layer:has(#movement-form)
.nubo-movement-modal__copy
#modal-title {
  font-size:
    18px !important;

  letter-spacing:
    -0.03em !important;
}


#modal-layer:has(#movement-form)
.nubo-movement-modal__copy
p {
  color:
    #74877d !important;

  font-size:
    9.5px !important;
}


/* ==========================================================
   ÁREA DESPLAZABLE
   ========================================================== */

#modal-layer:has(#movement-form)
.nubo-movement-modal
.modal-body {
  padding:
    15px
    17px
    18px !important;

  scrollbar-width:
    thin;

  scrollbar-color:
    #b4ccbD
    transparent;
}


#modal-layer:has(#movement-form)
.nubo-movement-modal
.modal-body::-webkit-scrollbar {
  width:
    7px;
}


#modal-layer:has(#movement-form)
.nubo-movement-modal
.modal-body::-webkit-scrollbar-thumb {
  border:
    2px solid
    transparent;

  border-radius:
    999px;

  background:
    #b6cebf;

  background-clip:
    padding-box;
}


/* ==========================================================
   FORMULARIO Y SECCIONES
   ========================================================== */

#modal-layer:has(#movement-form)
.nubo-movement-form-v2 {
  gap:
    12px !important;
}


#modal-layer:has(#movement-form)
.nubo-movement-section {
  gap:
    12px !important;

  padding:
    15px !important;

  border-radius:
    18px !important;

  box-shadow:
    0 4px 14px
    rgba(25, 66, 45, 0.025),
    inset 0 1px 0
    rgba(255, 255, 255, 0.95) !important;
}


#modal-layer:has(#movement-form)
.nubo-movement-section.is-primary {
  background:
    linear-gradient(
      180deg,
      #ffffff,
      #fcfefd
    ) !important;
}


#modal-layer:has(#movement-form)
.nubo-movement-section.is-category {
  border-color:
    #cfe4d7 !important;

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #fbfefc
    ) !important;
}


#modal-layer:has(#movement-form)
.nubo-movement-section.is-details {
  background:
    linear-gradient(
      180deg,
      #ffffff,
      #fcfefd
    ) !important;
}


#modal-layer:has(#movement-form)
.nubo-movement-section__head
h3 {
  font-size:
    13.5px !important;

  line-height:
    1.2 !important;
}


#modal-layer:has(#movement-form)
.nubo-movement-section__head
p {
  margin-top:
    3px !important;

  font-size:
    9.3px !important;

  line-height:
    1.35 !important;
}


#modal-layer:has(#movement-form)
.nubo-movement-primary-grid,
#modal-layer:has(#movement-form)
.nubo-movement-detail-grid {
  gap:
    12px
    14px !important;
}


/* ==========================================================
   CAMPOS
   ========================================================== */

#modal-layer:has(#movement-form)
.nubo-movement-form-v2
.field {
  gap:
    6px !important;
}


#modal-layer:has(#movement-form)
.nubo-movement-form-v2
.field
> span {
  font-size:
    10px !important;
}


#modal-layer:has(#movement-form)
.nubo-movement-form-v2
input,
#modal-layer:has(#movement-form)
.nubo-movement-form-v2
select {
  min-height:
    46px !important;

  border-radius:
    13px !important;
}


#modal-layer:has(#movement-form)
.nubo-movement-form-v2
textarea {
  min-height:
    92px !important;

  border-radius:
    13px !important;
}


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

#modal-layer:has(#movement-form)
.nubo-movement-form-v2
.ai-helper {
  gap:
    8px !important;

  margin-bottom:
    12px !important;

  padding:
    12px !important;

  border-radius:
    15px !important;

  background:
    linear-gradient(
      135deg,
      #e7f8ee,
      #dff5e8
    ) !important;
}


#modal-layer:has(#movement-form)
.nubo-movement-form-v2
.ai-helper__row {
  gap:
    9px !important;
}


#modal-layer:has(#movement-form)
.nubo-movement-form-v2
.ai-helper
.btn {
  min-height:
    46px !important;

  border-radius:
    12px !important;
}


#modal-layer:has(#movement-form)
.nubo-movement-form-v2
.ai-helper
small {
  font-size:
    9px !important;
}


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

#modal-layer:has(#movement-form)
.nubo-quick-amounts {
  gap:
    6px !important;

  margin-top:
    1px !important;
}


#modal-layer:has(#movement-form)
.nubo-quick-amount {
  min-height:
    28px !important;

  padding:
    4px
    10px !important;

  border-color:
    #d3e2da !important;

  color:
    #537064 !important;

  background:
    #f5f9f7 !important;

  font-size:
    8.7px !important;
}


@media (hover: hover) {
  #modal-layer:has(#movement-form)
  .nubo-quick-amount:hover {
    border-color:
      #72c096 !important;

    color:
      #146e48 !important;

    background:
      #eaf8f0 !important;
  }
}


/* ==========================================================
   CATEGORÍAS
   ========================================================== */

/*
 * La sección ya dice “Elige una categoría”.
 * Conservamos el texto interno para lectores de pantalla,
 * pero evitamos mostrar “Categoría” dos veces.
 */

#modal-layer:has(#movement-form)
.nubo-movement-category-field
> span:first-child {
  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;
}


/*
 * La explicación ya aparece en la cabecera de la sección.
 * Evitamos repetirla también debajo de todas las tarjetas.
 */

#modal-layer:has(#movement-form)
.nubo-movement-category-field
.nubo-category-field__help {
  display:
    none !important;
}


#modal-layer:has(#movement-form)
.nubo-movement-category-tools {
  margin:
    0
    0
    10px !important;

  gap:
    8px !important;
}


#modal-layer:has(#movement-form)
.nubo-category-search-wrap
.nubo-category-search {
  min-height:
    40px !important;

  border-radius:
    12px !important;
}


#modal-layer:has(#movement-form)
.nubo-category-expand {
  min-height:
    40px !important;

  padding:
    7px
    13px !important;

  border-radius:
    12px !important;

  font-size:
    8.8px !important;
}


/* Cinco columnas en laptop y escritorio amplio */

@media (min-width: 1100px) {
  #modal-layer:has(#movement-form)
  .nubo-movement-category-grid {
    grid-template-columns:
      repeat(
        5,
        minmax(0, 1fr)
      ) !important;

    gap:
      9px !important;
  }
}


/* Cuatro columnas en laptop compacta */

@media (
  min-width: 760px
)
and (
  max-width: 1099px
) {
  #modal-layer:has(#movement-form)
  .nubo-movement-category-grid {
    grid-template-columns:
      repeat(
        4,
        minmax(0, 1fr)
      ) !important;

    gap:
      9px !important;
  }
}


/* Tres columnas en tablet */

@media (
  min-width: 621px
)
and (
  max-width: 759px
) {
  #modal-layer:has(#movement-form)
  .nubo-movement-category-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      ) !important;

    gap:
      8px !important;
  }
}


#modal-layer:has(#movement-form)
.nubo-movement-category-option {
  min-height:
    82px !important;

  gap:
    7px !important;

  padding:
    9px
    7px !important;

  border-radius:
    15px !important;
}


#modal-layer:has(#movement-form)
.nubo-movement-category-option
svg {
  max-width:
    20px !important;

  max-height:
    20px !important;
}


#modal-layer:has(#movement-form)
.nubo-movement-category-option
span {
  font-size:
    9.6px !important;

  line-height:
    1.18 !important;
}


#modal-layer:has(#movement-form)
.nubo-movement-category-option.is-selected {
  box-shadow:
    0 7px 17px
    rgba(28, 77, 51, 0.065) !important;
}


@media (hover: hover) {
  #modal-layer:has(#movement-form)
  .nubo-movement-category-option:hover {
    transform:
      translateY(-1px) !important;

    box-shadow:
      0 7px 17px
      rgba(28, 77, 51, 0.07) !important;
  }
}


/* ==========================================================
   FOOTER
   ========================================================== */

#modal-layer:has(#movement-form)
.nubo-movement-modal
.modal-foot {
  min-height:
    68px !important;

  padding:
    11px
    17px !important;
}


#modal-layer:has(#movement-form)
.nubo-movement-summary {
  gap:
    9px !important;
}


#modal-layer:has(#movement-form)
.nubo-movement-summary__copy
small {
  font-size:
    7.8px !important;
}


#modal-layer:has(#movement-form)
.nubo-movement-summary__copy
strong {
  color:
    #29493a !important;

  font-size:
    10.2px !important;
}


#modal-layer:has(#movement-form)
.nubo-movement-modal
.modal-foot
.btn {
  min-height:
    44px !important;

  padding:
    0
    17px !important;

  border-radius:
    13px !important;
}


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

@media (max-width: 620px) {
  #modal-layer:has(#movement-form)
  .nubo-movement-modal {
    width:
      100% !important;

    max-width:
      none !important;

    max-height:
      95svh !important;

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


  #modal-layer:has(#movement-form)
  .nubo-movement-modal
  .modal-head {
    min-height:
      70px !important;

    padding:
      13px
      14px !important;
  }


  #modal-layer:has(#movement-form)
  .nubo-movement-modal
  .modal-body {
    padding:
      12px
      12px
      15px !important;
  }


  #modal-layer:has(#movement-form)
  .nubo-movement-section {
    padding:
      14px !important;

    border-radius:
      17px !important;
  }


  #modal-layer:has(#movement-form)
  .nubo-movement-category-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;

    gap:
      8px !important;
  }


  #modal-layer:has(#movement-form)
  .nubo-movement-category-option {
    min-height:
      78px !important;

    padding:
      8px
      6px !important;

    border-radius:
      14px !important;
  }


  #modal-layer:has(#movement-form)
  .nubo-movement-modal
  .modal-foot {
    min-height:
      auto !important;

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


/* ==========================================================
   MODO OSCURO Y MOVIMIENTO REDUCIDO
   ========================================================== */

html[data-theme="dark"]
#modal-layer:has(#movement-form)
.nubo-movement-section {
  box-shadow:
    none !important;
}


@media (prefers-reduced-motion: reduce) {
  #modal-layer:has(#movement-form)
  .nubo-movement-category-option,
  #modal-layer:has(#movement-form)
  .nubo-quick-amount {
    transition:
      none !important;
  }
}

/* NUBO_MOVEMENT_MODAL_POLISH_V3_END */

/* ==========================================================
   NUBO_EXISTING_TYPE_POLISH_CSS_V1_START
   Ajuste del control existente. No crea otro selector.
   ========================================================== */


.nubo-movement-modal
.nubo-existing-type-field-v1 {
  min-width: 0;
  gap: 7px;
}


.nubo-movement-modal
.nubo-existing-type-field-v1
> span:first-child {
  color: #40534a;
  font-size: 11px;
  font-weight: 780;
  line-height: 1.25;
}


.nubo-movement-modal
.nubo-existing-type-control-v1 {
  display: grid !important;
  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 62px !important;
  padding: 5px !important;
  border: 1px solid #dce7e1 !important;
  border-radius: 15px !important;
  background: #f5f8f6 !important;
  box-shadow:
    inset 0 1px 2px
    rgba(38, 69, 54, 0.035) !important;
}


.nubo-movement-modal
.nubo-existing-type-option-v1 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 50px !important;
  margin: 0 !important;
  padding: 7px 12px !important;
  border: 1px solid transparent !important;
  border-radius: 11px !important;
  outline: 0 !important;
  color: #718078 !important;
  background: transparent !important;
  box-shadow: none !important;
  font: inherit !important;
  cursor: pointer !important;
  transform: none !important;
  transition:
    color 150ms ease,
    border-color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease !important;
}


.nubo-movement-modal
.nubo-existing-type-option-v1:hover {
  color: #4f6258 !important;
  background:
    rgba(255, 255, 255, 0.68) !important;
}


.nubo-movement-modal
.nubo-existing-type-option-v1:active {
  transform:
    translateY(1px) !important;
}


.nubo-movement-modal
.nubo-existing-type-option-v1:focus-visible {
  box-shadow:
    0 0 0 3px
    rgba(59, 163, 113, 0.17) !important;
}


.nubo-movement-modal
.nubo-existing-type-option-v1__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 1px solid #e0e8e4;
  border-radius: 10px;
  color: currentColor;
  background:
    rgba(255, 255, 255, 0.84);
}


.nubo-movement-modal
.nubo-existing-type-option-v1__icon
svg {
  display: block;
  width: 16px;
  height: 16px;
}


.nubo-movement-modal
.nubo-existing-type-option-v1__copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  text-align: left;
  line-height: 1.1;
}


.nubo-movement-modal
.nubo-existing-type-option-v1__copy
strong {
  color: currentColor;
  font-size: 12px;
  font-weight: 820;
}


.nubo-movement-modal
.nubo-existing-type-option-v1__copy
small {
  overflow: hidden;
  color: #89958e;
  font-size: 8.75px;
  font-weight: 560;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* Gasto seleccionado */


.nubo-movement-modal
.nubo-existing-type-option-v1
.is-expense {
  color: #b95d4b !important;
}


.nubo-movement-modal
.nubo-existing-type-option-v1
.is-expense.is-nubo-selected {
  color: #b95d4b !important;
  border-color: #edcfc7 !important;
  background: #ffffff !important;
  box-shadow:
    0 4px 13px
    rgba(149, 72, 54, 0.09) !important;
}


.nubo-movement-modal
.nubo-existing-type-option-v1
.is-expense.is-nubo-selected
.nubo-existing-type-option-v1__icon {
  border-color: #efd4cd;
  background: #fff0ec;
}


/* Ingreso seleccionado */


.nubo-movement-modal
.nubo-existing-type-option-v1
.is-income {
  color: #31835f !important;
}


.nubo-movement-modal
.nubo-existing-type-option-v1
.is-income.is-nubo-selected {
  color: #31835f !important;
  border-color: #c8e2d4 !important;
  background: #ffffff !important;
  box-shadow:
    0 4px 13px
    rgba(44, 129, 91, 0.09) !important;
}


.nubo-movement-modal
.nubo-existing-type-option-v1
.is-income.is-nubo-selected
.nubo-existing-type-option-v1__icon {
  border-color: #cce5d8;
  background: #eaf8f1;
}


@media (max-width: 620px) {
  .nubo-movement-modal
  .nubo-existing-type-control-v1 {
    min-height: 54px !important;
  }

  .nubo-movement-modal
  .nubo-existing-type-option-v1 {
    gap: 7px !important;
    min-height: 43px !important;
    padding: 7px 9px !important;
  }

  .nubo-movement-modal
  .nubo-existing-type-option-v1__icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }

  .nubo-movement-modal
  .nubo-existing-type-option-v1__copy
  small {
    display: none;
  }

  .nubo-movement-modal
  .nubo-existing-type-option-v1__copy
  strong {
    font-size: 11px;
  }
}


/* NUBO_EXISTING_TYPE_POLISH_CSS_V1_END */