/* ==========================================================
   NUBO_QUICK_ADD_PREMIUM_V1_START

   Solo afecta el modal que contiene
   .nubo-quick-add-panel.
   ========================================================== */


/* ==========================================================
   MODAL Y FONDO
   ========================================================== */

#modal-layer
.modal:has(.nubo-quick-add-panel) {
  width:
    min(
      610px,
      calc(100vw - 34px)
    ) !important;

  max-width:
    610px !important;

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

  overflow:
    hidden !important;

  border:
    1px solid
    rgba(189, 211, 199, 0.88) !important;

  border-radius:
    27px !important;

  background:
    #f8fbf9 !important;

  box-shadow:
    0 30px 80px
    rgba(8, 35, 21, 0.22),
    0 8px 24px
    rgba(8, 35, 21, 0.08),
    inset 0 1px 0
    rgba(255, 255, 255, 0.98) !important;

  animation:
    nubo-quick-add-enter
    220ms
    cubic-bezier(
      0.2,
      0.8,
      0.2,
      1
    );
}


#modal-layer:has(.nubo-quick-add-panel) {
  background:
    rgba(8, 27, 17, 0.49) !important;

  backdrop-filter:
    blur(9px)
    saturate(112%) !important;

  -webkit-backdrop-filter:
    blur(9px)
    saturate(112%) !important;
}


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

#modal-layer
.modal:has(.nubo-quick-add-panel)
.modal-head {
  position:
    relative !important;

  z-index:
    2 !important;

  min-height:
    84px !important;

  padding:
    20px
    21px !important;

  overflow:
    hidden !important;

  border-bottom:
    1px solid
    rgba(207, 224, 215, 0.84) !important;

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f8fdf9 56%,
      #eaf7ef 100%
    ) !important;
}


#modal-layer
.modal:has(.nubo-quick-add-panel)
.modal-head::before {
  content:
    "";

  position:
    absolute;

  z-index:
    -1;

  top:
    -70px;

  right:
    -45px;

  width:
    230px;

  height:
    160px;

  border-radius:
    48%
    52%
    60%
    40%;

  background:
    radial-gradient(
      circle at center,
      rgba(76, 184, 121, 0.17),
      rgba(76, 184, 121, 0)
      70%
    );

  transform:
    rotate(-12deg);

  pointer-events:
    none;
}


#modal-layer
.modal:has(.nubo-quick-add-panel)
#modal-title {
  position:
    relative;

  margin:
    0 !important;

  color:
    #103d29 !important;

  font-size:
    22px !important;

  font-weight:
    850 !important;

  letter-spacing:
    -0.045em !important;

  line-height:
    1.15 !important;
}


#modal-layer
.modal:has(.nubo-quick-add-panel)
.modal-head
[data-action="close-modal"] {
  width:
    42px !important;

  min-width:
    42px !important;

  height:
    42px !important;

  padding:
    0 !important;

  border:
    1px solid
    rgba(200, 219, 209, 0.92) !important;

  border-radius:
    14px !important;

  color:
    #527063 !important;

  background:
    rgba(255, 255, 255, 0.82) !important;

  box-shadow:
    0 5px 14px
    rgba(26, 67, 45, 0.05) !important;
}


/* ==========================================================
   CONTENIDO
   ========================================================== */

#modal-layer
.modal:has(.nubo-quick-add-panel)
.modal-body {
  padding:
    17px
    18px
    19px !important;

  overflow-y:
    auto !important;

  overscroll-behavior:
    contain;

  background:
    linear-gradient(
      180deg,
      #f8fbf9,
      #f3f8f5
    ) !important;
}


.nubo-quick-add-panel {
  display:
    grid;

  gap:
    14px;
}


/* ==========================================================
   INTRODUCCIÓN
   ========================================================== */

.nubo-quick-add-intro {
  display:
    flex;

  align-items:
    center;

  gap:
    11px;

  min-width:
    0;

  padding:
    3px
    3px
    2px;
}


.nubo-quick-add-intro__icon {
  display:
    grid;

  place-items:
    center;

  flex:
    0
    0
    38px;

  width:
    38px;

  height:
    38px;

  border:
    1px solid
    #ccebd8;

  border-radius:
    13px;

  color:
    #28a765;

  background:
    linear-gradient(
      145deg,
      #ecfaf2,
      #dff6e8
    );

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.94);
}


.nubo-quick-add-intro__icon
svg {
  width:
    20px;

  height:
    20px;
}


.nubo-quick-add-intro__copy {
  display:
    grid;

  min-width:
    0;

  gap:
    3px;
}


.nubo-quick-add-intro__copy
strong {
  color:
    #224c38;

  font-size:
    12px;

  font-weight:
    810;
}


.nubo-quick-add-intro__copy
small {
  color:
    #7b8d84;

  font-size:
    9.5px;

  line-height:
    1.35;
}


/* ==========================================================
   TARJETAS
   ========================================================== */

.nubo-quick-add-actions {
  display:
    grid;

  gap:
    11px;
}


.nubo-quick-add-card {
  --quick-accent:
    #22945c;

  --quick-border:
    #cce7d7;

  --quick-soft:
    #e8f8ef;

  position:
    relative;

  display:
    grid;

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

  align-items:
    center;

  gap:
    13px;

  width:
    100%;

  min-height:
    91px;

  padding:
    13px
    14px;

  overflow:
    hidden;

  border:
    1px solid
    var(--quick-border);

  border-radius:
    20px;

  color:
    #183e2c;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #fcfefd
    );

  box-shadow:
    0 8px 21px
    rgba(24, 62, 42, 0.045),
    inset 0 1px 0
    rgba(255, 255, 255, 0.96);

  font:
    inherit;

  text-align:
    left;

  cursor:
    pointer;

  -webkit-tap-highlight-color:
    transparent;

  touch-action:
    manipulation;

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


.nubo-quick-add-card::before {
  content:
    "";

  position:
    absolute;

  top:
    15px;

  bottom:
    15px;

  left:
    0;

  width:
    3px;

  border-radius:
    0
    999px
    999px
    0;

  background:
    var(--quick-accent);

  opacity:
    0.72;
}


.nubo-quick-add-card.is-movement {
  --quick-accent:
    #259c61;

  --quick-border:
    #cae8d6;

  --quick-soft:
    #e5f8ed;
}


.nubo-quick-add-card.is-debt {
  --quick-accent:
    #3c83d6;

  --quick-border:
    #cddff4;

  --quick-soft:
    #e8f2fd;
}


.nubo-quick-add-card.is-goal {
  --quick-accent:
    #bf8424;

  --quick-border:
    #ecd9ad;

  --quick-soft:
    #fff4d9;
}


.nubo-quick-add-card__icon {
  display:
    grid;

  place-items:
    center;

  width:
    58px;

  height:
    58px;

  border:
    1px solid
    var(--quick-border);

  border-radius:
    18px;

  color:
    var(--quick-accent);

  background:
    linear-gradient(
      145deg,
      #ffffff,
      var(--quick-soft)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.95);
}


.nubo-quick-add-card__icon
svg {
  width:
    25px !important;

  height:
    25px !important;
}


.nubo-quick-add-card__copy {
  display:
    grid;

  min-width:
    0;

  gap:
    5px;
}


.nubo-quick-add-card__copy
strong {
  color:
    #173d2b;

  font-size:
    14px;

  font-weight:
    820;

  letter-spacing:
    -0.022em;

  line-height:
    1.2;
}


.nubo-quick-add-card__copy
small {
  color:
    #71837a;

  font-size:
    10px;

  line-height:
    1.4;
}


.nubo-quick-add-card__arrow {
  display:
    grid;

  place-items:
    center;

  width:
    29px;

  height:
    29px;

  border-radius:
    10px;

  color:
    var(--quick-accent);

  background:
    var(--quick-soft);

  transition:
    transform
    160ms
    ease,
    background
    160ms
    ease;
}


.nubo-quick-add-card__arrow
svg {
  width:
    17px;

  height:
    17px;
}


@media (hover: hover) {
  .nubo-quick-add-card:hover {
    border-color:
      var(--quick-accent);

    background:
      linear-gradient(
        145deg,
        #ffffff,
        var(--quick-soft)
      );

    box-shadow:
      0 13px 28px
      rgba(24, 62, 42, 0.085),
      inset 0 1px 0
      rgba(255, 255, 255, 0.97);

    transform:
      translateY(-2px);
  }


  .nubo-quick-add-card:hover
  .nubo-quick-add-card__arrow {
    transform:
      translateX(2px);
  }
}


.nubo-quick-add-card:active {
  transform:
    scale(0.985);
}


.nubo-quick-add-card:focus-visible {
  outline:
    3px solid
    rgba(43, 169, 105, 0.23);

  outline-offset:
    2px;
}


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

#modal-layer
.modal:has(.nubo-quick-add-panel)
.modal-foot {
  display:
    block !important;

  min-height:
    82px !important;

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

  border-top:
    1px solid
    #d9e7df !important;

  background:
    linear-gradient(
      135deg,
      #f4faf6,
      #eef7f2
    ) !important;
}


.nubo-quick-add-footer {
  display:
    grid;

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

  align-items:
    center;

  gap:
    15px;
}


.nubo-quick-add-trust {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  min-width:
    0;
}


.nubo-quick-add-trust__icon {
  display:
    grid;

  place-items:
    center;

  flex:
    0
    0
    37px;

  width:
    37px;

  height:
    37px;

  border:
    1px solid
    #cce7d7;

  border-radius:
    13px;

  color:
    #26985e;

  background:
    #e8f8ef;
}


.nubo-quick-add-trust__icon
svg {
  width:
    19px;

  height:
    19px;
}


.nubo-quick-add-trust__copy {
  display:
    grid;

  min-width:
    0;

  gap:
    2px;
}


.nubo-quick-add-trust__copy
strong {
  color:
    #246343;

  font-size:
    10px;

  font-weight:
    800;
}


.nubo-quick-add-trust__copy
small {
  overflow:
    hidden;

  color:
    #7b8d84;

  font-size:
    8.5px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.nubo-quick-add-close {
  min-width:
    104px !important;

  min-height:
    43px !important;

  padding:
    0
    17px !important;

  border:
    1px solid
    #a9d7bc !important;

  border-radius:
    14px !important;

  color:
    #227348 !important;

  background:
    rgba(255, 255, 255, 0.72) !important;

  box-shadow:
    0 5px 13px
    rgba(30, 91, 57, 0.045) !important;

  font-weight:
    780 !important;
}


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

@media (max-width: 620px) {
  #modal-layer:has(.nubo-quick-add-panel) {
    align-items:
      end !important;

    padding:
      0 !important;
  }


  #modal-layer
  .modal:has(.nubo-quick-add-panel) {
    width:
      100% !important;

    max-width:
      none !important;

    max-height:
      94svh !important;

    border-right:
      0 !important;

    border-bottom:
      0 !important;

    border-left:
      0 !important;

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


  #modal-layer
  .modal:has(.nubo-quick-add-panel)
  .nubo-sheet-grip-wrap {
    padding-top:
      9px !important;

    background:
      #ffffff !important;
  }


  #modal-layer
  .modal:has(.nubo-quick-add-panel)
  .modal-head {
    min-height:
      70px !important;

    padding:
      13px
      14px !important;
  }


  #modal-layer
  .modal:has(.nubo-quick-add-panel)
  #modal-title {
    font-size:
      19px !important;
  }


  #modal-layer
  .modal:has(.nubo-quick-add-panel)
  .modal-body {
    padding:
      14px
      14px
      16px !important;
  }


  .nubo-quick-add-panel {
    gap:
      12px;
  }


  .nubo-quick-add-intro {
    padding-inline:
      2px;
  }


  .nubo-quick-add-card {
    min-height:
      84px;

    gap:
      11px;

    padding:
      11px
      12px;

    border-radius:
      18px;
  }


  .nubo-quick-add-card__icon {
    width:
      52px;

    height:
      52px;

    border-radius:
      16px;
  }


  .nubo-quick-add-card__icon
  svg {
    width:
      23px !important;

    height:
      23px !important;
  }


  .nubo-quick-add-card__copy
  strong {
    font-size:
      13px;
  }


  .nubo-quick-add-card__copy
  small {
    font-size:
      9.2px;
  }


  .nubo-quick-add-card__arrow {
    width:
      27px;

    height:
      27px;
  }


  #modal-layer
  .modal:has(.nubo-quick-add-panel)
  .modal-foot {
    min-height:
      auto !important;

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


  .nubo-quick-add-footer {
    gap:
      10px;
  }


  .nubo-quick-add-trust__copy
  small {
    display:
      none;
  }


  .nubo-quick-add-close {
    min-width:
      92px !important;
  }
}


/* Pantallas estrechas */

@media (max-width: 390px) {
  .nubo-quick-add-card {
    grid-template-columns:
      auto
      minmax(0, 1fr)
      25px;

    gap:
      9px;

    min-height:
      79px;

    padding:
      10px;
  }


  .nubo-quick-add-card__icon {
    width:
      47px;

    height:
      47px;

    border-radius:
      15px;
  }


  .nubo-quick-add-card__copy
  strong {
    font-size:
      12.2px;
  }


  .nubo-quick-add-card__copy
  small {
    font-size:
      8.5px;
  }


  .nubo-quick-add-trust__icon {
    display:
      none;
  }


  .nubo-quick-add-trust__copy
  strong {
    font-size:
      9.2px;
  }
}


/* ==========================================================
   MODO OSCURO
   ========================================================== */

html[data-theme="dark"]
#modal-layer
.modal:has(.nubo-quick-add-panel) {
  border-color:
    #354b40 !important;

  background:
    #17231d !important;
}


html[data-theme="dark"]
#modal-layer
.modal:has(.nubo-quick-add-panel)
.modal-head {
  border-color:
    #354b40 !important;

  background:
    linear-gradient(
      135deg,
      #1b2922,
      #16231c
    ) !important;
}


html[data-theme="dark"]
#modal-layer
.modal:has(.nubo-quick-add-panel)
.modal-body {
  background:
    #142019 !important;
}


html[data-theme="dark"]
.nubo-quick-add-card {
  border-color:
    #364d41;

  color:
    #e4eee8;

  background:
    #1c2a23;
}


html[data-theme="dark"]
.nubo-quick-add-card__copy
strong {
  color:
    #e6f1eb;
}


html[data-theme="dark"]
.nubo-quick-add-card__copy
small,
html[data-theme="dark"]
.nubo-quick-add-intro__copy
small {
  color:
    #9caf9f;
}


/* ==========================================================
   ANIMACIONES
   ========================================================== */

@keyframes nubo-quick-add-enter {
  from {
    opacity:
      0;

    transform:
      translateY(10px)
      scale(0.985);
  }

  to {
    opacity:
      1;

    transform:
      translateY(0)
      scale(1);
  }
}


@media (prefers-reduced-motion: reduce) {
  #modal-layer
  .modal:has(.nubo-quick-add-panel),
  .nubo-quick-add-card,
  .nubo-quick-add-card__arrow {
    animation:
      none !important;

    transition:
      none !important;
  }
}

/* NUBO_QUICK_ADD_PREMIUM_V1_END */