/* ==========================================================
   NUBO_DESKTOP_QUICK_POPOVER_PREMIUM_V1_START

   Rediseño exclusivamente visual del menú rápido
   anclado al botón + de la barra superior.

   No modifica el bottom sheet móvil.
   No modifica acciones ni JavaScript.
   ========================================================== */

@media (min-width: 761px) {

  /* ========================================================
     CONTENEDOR
     ======================================================== */

  #quick-menu.quick-menu,
  .header-quick-wrap .quick-menu,
  .quick-add-wrap .quick-menu {
    position:
      absolute !important;

    top:
      calc(
        100% +
        13px
      ) !important;

    right:
      0 !important;

    left:
      auto !important;

    z-index:
      250 !important;

    display:
      grid !important;

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

    gap:
      9px !important;

    width:
      340px !important;

    min-width:
      340px !important;

    max-width:
      calc(
        100vw -
        32px
      ) !important;

    margin:
      0 !important;

    padding:
      69px
      12px
      12px !important;

    overflow:
      visible !important;

    border:
      1px solid
      rgba(
        185,
        208,
        196,
        0.88
      ) !important;

    border-radius:
      23px !important;

    background:
      linear-gradient(
        145deg,
        rgba(
          255,
          255,
          255,
          0.98
        ),
        rgba(
          246,
          251,
          248,
          0.97
        )
      ) !important;

    box-shadow:
      0 24px 58px
      rgba(
        10,
        38,
        23,
        0.18
      ),
      0 7px 19px
      rgba(
        10,
        38,
        23,
        0.07
      ),
      inset 0 1px 0
      rgba(
        255,
        255,
        255,
        0.98
      ) !important;

    backdrop-filter:
      blur(22px)
      saturate(140%) !important;

    -webkit-backdrop-filter:
      blur(22px)
      saturate(140%) !important;

    transform-origin:
      calc(
        100% -
        24px
      )
      0;

    animation:
      nubo-desktop-quick-popover-in
      190ms
      cubic-bezier(
        0.2,
        0.8,
        0.2,
        1
      ) !important;
  }


  #quick-menu.quick-menu[hidden],
  .header-quick-wrap .quick-menu[hidden],
  .quick-add-wrap .quick-menu[hidden] {
    display:
      none !important;
  }


  /* ========================================================
     ENCABEZADO DEL GLOBO
     ======================================================== */

  #quick-menu.quick-menu::before,
  .header-quick-wrap .quick-menu::before,
  .quick-add-wrap .quick-menu::before {
    content:
      "✦  Añadir rápido";

    position:
      absolute;

    top:
      12px;

    right:
      12px;

    left:
      12px;

    display:
      flex;

    align-items:
      center;

    min-height:
      44px;

    padding:
      0
      14px;

    border:
      1px solid
      rgba(
        193,
        225,
        207,
        0.76
      );

    border-radius:
      15px;

    color:
      #176840;

    background:
      linear-gradient(
        135deg,
        #edf9f2,
        #e3f5eb
      );

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

    font-size:
      12px;

    font-weight:
      830;

    letter-spacing:
      -0.02em;

    pointer-events:
      none;
  }


  /*
   * Punta del globo hacia el botón +
   */

  #quick-menu.quick-menu::after,
  .header-quick-wrap .quick-menu::after,
  .quick-add-wrap .quick-menu::after {
    content:
      "";

    position:
      absolute;

    top:
      -7px;

    right:
      19px;

    width:
      14px;

    height:
      14px;

    border-top:
      1px solid
      rgba(
        185,
        208,
        196,
        0.88
      );

    border-left:
      1px solid
      rgba(
        185,
        208,
        196,
        0.88
      );

    background:
      rgba(
        253,
        255,
        254,
        0.99
      );

    transform:
      rotate(45deg);

    pointer-events:
      none;
  }


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

  #quick-menu.quick-menu
  > button[data-action],
  .header-quick-wrap
  .quick-menu
  > button[data-action],
  .quick-add-wrap
  .quick-menu
  > button[data-action] {
    --quick-color:
      #1a8b57;

    --quick-soft:
      #e8f7ef;

    --quick-border:
      #cce6d7;

    position:
      relative !important;

    display:
      grid !important;

    grid-template-columns:
      47px
      minmax(0, 1fr)
      18px !important;

    grid-template-rows:
      auto
      auto !important;

    align-items:
      center !important;

    column-gap:
      12px !important;

    row-gap:
      3px !important;

    width:
      100% !important;

    min-width:
      0 !important;

    min-height:
      76px !important;

    margin:
      0 !important;

    padding:
      11px
      13px !important;

    overflow:
      hidden !important;

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

    border-radius:
      18px !important;

    color:
      #173d2b !important;

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

    box-shadow:
      0 6px 17px
      rgba(
        20,
        58,
        38,
        0.04
      ),
      inset 0 1px 0
      rgba(
        255,
        255,
        255,
        0.96
      ) !important;

    font-size:
      0 !important;

    text-align:
      left !important;

    cursor:
      pointer;

    -webkit-tap-highlight-color:
      transparent;

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


  /*
   * Movimiento
   */

  #quick-menu.quick-menu
  > button[data-action="new-movement"],
  .header-quick-wrap
  .quick-menu
  > button[data-action="new-movement"],
  .quick-add-wrap
  .quick-menu
  > button[data-action="new-movement"] {
    --quick-color:
      #168b56;

    --quick-soft:
      #e6f7ee;

    --quick-border:
      #c7e6d4;
  }


  /*
   * Deuda
   */

  #quick-menu.quick-menu
  > button[data-action="new-debt"],
  .header-quick-wrap
  .quick-menu
  > button[data-action="new-debt"],
  .quick-add-wrap
  .quick-menu
  > button[data-action="new-debt"] {
    --quick-color:
      #de6b5e;

    --quick-soft:
      #fff0ed;

    --quick-border:
      #f0d0ca;
  }


  /*
   * Meta
   */

  #quick-menu.quick-menu
  > button[data-action="new-goal"],
  .header-quick-wrap
  .quick-menu
  > button[data-action="new-goal"],
  .quick-add-wrap
  .quick-menu
  > button[data-action="new-goal"] {
    --quick-color:
      #7958c9;

    --quick-soft:
      #f2edfc;

    --quick-border:
      #ddd2f3;
  }


  /* ========================================================
     ICONOS
     ======================================================== */

  #quick-menu.quick-menu
  > button[data-action]
  svg,
  .header-quick-wrap
  .quick-menu
  > button[data-action]
  svg,
  .quick-add-wrap
  .quick-menu
  > button[data-action]
  svg {
    grid-column:
      1 !important;

    grid-row:
      1 / 3 !important;

    align-self:
      center !important;

    justify-self:
      center !important;

    width:
      21px !important;

    height:
      21px !important;

    padding:
      11px !important;

    overflow:
      visible !important;

    box-sizing:
      content-box !important;

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

    border-radius:
      14px !important;

    color:
      var(--quick-color) !important;

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

    box-shadow:
      inset 0 1px 0
      rgba(
        255,
        255,
        255,
        0.98
      ) !important;

    transition:
      transform
      160ms
      ease !important;
  }


  /* ========================================================
     TÍTULOS GENERADOS
     ======================================================== */

  #quick-menu.quick-menu
  > button[data-action]::before,
  .header-quick-wrap
  .quick-menu
  > button[data-action]::before,
  .quick-add-wrap
  .quick-menu
  > button[data-action]::before {
    grid-column:
      2 !important;

    grid-row:
      1 !important;

    align-self:
      end !important;

    min-width:
      0;

    overflow:
      hidden;

    color:
      #173d2b;

    font-size:
      13px;

    font-weight:
      820;

    letter-spacing:
      -0.025em;

    line-height:
      1.2;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;
  }


  #quick-menu.quick-menu
  > button[data-action="new-movement"]::before,
  .header-quick-wrap
  .quick-menu
  > button[data-action="new-movement"]::before,
  .quick-add-wrap
  .quick-menu
  > button[data-action="new-movement"]::before {
    content:
      "Registrar movimiento";
  }


  #quick-menu.quick-menu
  > button[data-action="new-debt"]::before,
  .header-quick-wrap
  .quick-menu
  > button[data-action="new-debt"]::before,
  .quick-add-wrap
  .quick-menu
  > button[data-action="new-debt"]::before {
    content:
      "Registrar deuda";
  }


  #quick-menu.quick-menu
  > button[data-action="new-goal"]::before,
  .header-quick-wrap
  .quick-menu
  > button[data-action="new-goal"]::before,
  .quick-add-wrap
  .quick-menu
  > button[data-action="new-goal"]::before {
    content:
      "Crear meta";
  }


  /* ========================================================
     SUBTÍTULOS
     ======================================================== */

  #quick-menu.quick-menu
  > button[data-action]::after,
  .header-quick-wrap
  .quick-menu
  > button[data-action]::after,
  .quick-add-wrap
  .quick-menu
  > button[data-action]::after {
    grid-column:
      2 !important;

    grid-row:
      2 !important;

    align-self:
      start !important;

    min-width:
      0;

    overflow:
      hidden;

    color:
      #788a81;

    font-size:
      9px;

    font-weight:
      560;

    line-height:
      1.35;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;
  }


  #quick-menu.quick-menu
  > button[data-action="new-movement"]::after,
  .header-quick-wrap
  .quick-menu
  > button[data-action="new-movement"]::after,
  .quick-add-wrap
  .quick-menu
  > button[data-action="new-movement"]::after {
    content:
      "Gasto, ingreso o transferencia";
  }


  #quick-menu.quick-menu
  > button[data-action="new-debt"]::after,
  .header-quick-wrap
  .quick-menu
  > button[data-action="new-debt"]::after,
  .quick-add-wrap
  .quick-menu
  > button[data-action="new-debt"]::after {
    content:
      "Organiza tus saldos pendientes";
  }


  #quick-menu.quick-menu
  > button[data-action="new-goal"]::after,
  .header-quick-wrap
  .quick-menu
  > button[data-action="new-goal"]::after,
  .quick-add-wrap
  .quick-menu
  > button[data-action="new-goal"]::after {
    content:
      "Define un objetivo financiero";
  }


  /*
   * Flecha lateral mediante imagen de fondo.
   */

  #quick-menu.quick-menu
  > button[data-action],
  .header-quick-wrap
  .quick-menu
  > button[data-action],
  .quick-add-wrap
  .quick-menu
  > button[data-action] {
    background-image:
      url(
        "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7c73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"
      ),
      linear-gradient(
        145deg,
        #ffffff,
        #fcfefd
      ) !important;

    background-repeat:
      no-repeat,
      no-repeat !important;

    background-position:
      calc(
        100% -
        13px
      )
      center,
      center !important;

    background-size:
      17px
      17px,
      cover !important;
  }


  /* ========================================================
     INTERACCIONES
     ======================================================== */

  @media (hover: hover) {

    #quick-menu.quick-menu
    > button[data-action]:hover,
    .header-quick-wrap
    .quick-menu
    > button[data-action]:hover,
    .quick-add-wrap
    .quick-menu
    > button[data-action]:hover {
      border-color:
        var(--quick-color) !important;

      box-shadow:
        0 12px 25px
        rgba(
          20,
          58,
          38,
          0.09
        ),
        inset 0 1px 0
        rgba(
          255,
          255,
          255,
          0.98
        ) !important;

      transform:
        translateY(-2px) !important;
    }


    #quick-menu.quick-menu
    > button[data-action]:hover
    svg,
    .header-quick-wrap
    .quick-menu
    > button[data-action]:hover
    svg,
    .quick-add-wrap
    .quick-menu
    > button[data-action]:hover
    svg {
      transform:
        scale(1.055) !important;
    }
  }


  #quick-menu.quick-menu
  > button[data-action]:active,
  .header-quick-wrap
  .quick-menu
  > button[data-action]:active,
  .quick-add-wrap
  .quick-menu
  > button[data-action]:active {
    transform:
      scale(0.985) !important;
  }


  #quick-menu.quick-menu
  > button[data-action]:focus-visible,
  .header-quick-wrap
  .quick-menu
  > button[data-action]:focus-visible,
  .quick-add-wrap
  .quick-menu
  > button[data-action]:focus-visible {
    outline:
      3px solid
      rgba(
        43,
        170,
        108,
        0.23
      ) !important;

    outline-offset:
      2px;
  }


  /* ========================================================
     LAPTOPS MÁS ESTRECHAS
     ======================================================== */

  @media (max-width: 980px) {

    #quick-menu.quick-menu,
    .header-quick-wrap .quick-menu,
    .quick-add-wrap .quick-menu {
      width:
        320px !important;

      min-width:
        320px !important;
    }
  }


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

  html[data-theme="dark"]
  #quick-menu.quick-menu,
  html[data-theme="dark"]
  .header-quick-wrap .quick-menu,
  html[data-theme="dark"]
  .quick-add-wrap .quick-menu {
    border-color:
      rgba(
        77,
        105,
        90,
        0.82
      ) !important;

    background:
      linear-gradient(
        145deg,
        rgba(
          26,
          39,
          32,
          0.98
        ),
        rgba(
          19,
          31,
          25,
          0.97
        )
      ) !important;

    box-shadow:
      0 25px 60px
      rgba(
        0,
        0,
        0,
        0.38
      ),
      inset 0 1px 0
      rgba(
        255,
        255,
        255,
        0.05
      ) !important;
  }


  html[data-theme="dark"]
  #quick-menu.quick-menu::before,
  html[data-theme="dark"]
  .header-quick-wrap .quick-menu::before,
  html[data-theme="dark"]
  .quick-add-wrap .quick-menu::before {
    border-color:
      rgba(
        71,
        110,
        89,
        0.72
      );

    color:
      #a9e3c2;

    background:
      rgba(
        46,
        88,
        65,
        0.28
      );
  }


  html[data-theme="dark"]
  #quick-menu.quick-menu
  > button[data-action],
  html[data-theme="dark"]
  .header-quick-wrap
  .quick-menu
  > button[data-action],
  html[data-theme="dark"]
  .quick-add-wrap
  .quick-menu
  > button[data-action] {
    border-color:
      #364d41 !important;

    background-color:
      #1b2922 !important;
  }


  html[data-theme="dark"]
  #quick-menu.quick-menu
  > button[data-action]::before,
  html[data-theme="dark"]
  .header-quick-wrap
  .quick-menu
  > button[data-action]::before,
  html[data-theme="dark"]
  .quick-add-wrap
  .quick-menu
  > button[data-action]::before {
    color:
      #e6f0ea;
  }


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

  @media (prefers-reduced-motion: reduce) {

    #quick-menu.quick-menu,
    .header-quick-wrap .quick-menu,
    .quick-add-wrap .quick-menu,
    #quick-menu.quick-menu
    > button[data-action],
    .header-quick-wrap
    .quick-menu
    > button[data-action],
    .quick-add-wrap
    .quick-menu
    > button[data-action],
    #quick-menu.quick-menu
    > button[data-action]
    svg,
    .header-quick-wrap
    .quick-menu
    > button[data-action]
    svg,
    .quick-add-wrap
    .quick-menu
    > button[data-action]
    svg {
      animation:
        none !important;

      transition:
        none !important;
    }
  }
}


/* ==========================================================
   ANIMACIÓN
   ========================================================== */

@keyframes nubo-desktop-quick-popover-in {
  from {
    opacity:
      0;

    transform:
      translateY(-6px)
      scale(0.97);
  }

  to {
    opacity:
      1;

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

/* NUBO_DESKTOP_QUICK_POPOVER_PREMIUM_V1_END */