/* ==========================================================
   NUBO_QUICK_ADD_WEB_V2_START

   Extensión responsive del componente Premium V1.
   No modifica móvil ni las acciones existentes.
   ========================================================== */


/* ==========================================================
   TABLET Y LAPTOP COMPACTA
   769 px a 899 px
   ========================================================== */

@media (
  min-width: 769px
)
and (
  max-width: 899px
) {

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

    max-width:
      620px !important;

    max-height:
      min(
        88svh,
        700px
      ) !important;
  }


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

    padding:
      18px
      20px !important;
  }


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


  .nubo-quick-add-actions {
    grid-template-columns:
      minmax(0, 1fr) !important;

    gap:
      11px !important;
  }


  .nubo-quick-add-card {
    min-height:
      88px !important;

    padding:
      12px
      14px !important;
  }
}


/* ==========================================================
   WEB / ESCRITORIO
   Desde 900 px
   ========================================================== */

@media (min-width: 900px) {

  /*
   * Modal centrado, amplio pero controlado.
   * No ocupa toda la pantalla.
   */

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

    max-width:
      760px !important;

    max-height:
      min(
        86svh,
        680px
      ) !important;

    border-radius:
      29px !important;

    box-shadow:
      0 34px 88px
      rgba(8, 34, 20, 0.23),
      0 10px 27px
      rgba(8, 34, 20, 0.085),
      inset 0 1px 0
      rgba(255, 255, 255, 0.98) !important;
  }


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

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

    padding:
      22px
      24px !important;

    background:
      linear-gradient(
        135deg,
        #ffffff 0%,
        #fbfefc 48%,
        #edf8f1 100%
      ) !important;
  }


  #modal-layer
  .modal:has(.nubo-quick-add-panel)
  .modal-head::before {
    top:
      -88px !important;

    right:
      -36px !important;

    width:
      320px !important;

    height:
      210px !important;

    opacity:
      0.95;
  }


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

    letter-spacing:
      -0.05em !important;
  }


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

    min-width:
      44px !important;

    height:
      44px !important;

    border-radius:
      15px !important;
  }


  /* ========================================================
     CUERPO
     ======================================================== */

  #modal-layer
  .modal:has(.nubo-quick-add-panel)
  .modal-body {
    padding:
      20px
      22px
      24px !important;

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


  .nubo-quick-add-panel {
    gap:
      17px !important;
  }


  /* Introducción horizontal compacta */

  .nubo-quick-add-intro {
    gap:
      12px !important;

    padding:
      2px
      4px
      5px !important;
  }


  .nubo-quick-add-intro__icon {
    flex-basis:
      42px !important;

    width:
      42px !important;

    height:
      42px !important;

    border-radius:
      14px !important;
  }


  .nubo-quick-add-intro__icon
  svg {
    width:
      21px !important;

    height:
      21px !important;
  }


  .nubo-quick-add-intro__copy
  strong {
    font-size:
      13px !important;
  }


  .nubo-quick-add-intro__copy
  small {
    font-size:
      10px !important;
  }


  /* ========================================================
     TRES TARJETAS EN UNA FILA
     ======================================================== */

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

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

    align-items:
      stretch !important;

    gap:
      14px !important;
  }


  .nubo-quick-add-card {
    position:
      relative !important;

    display:
      grid !important;

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

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

    justify-items:
      center !important;

    align-content:
      start !important;

    gap:
      15px !important;

    min-width:
      0 !important;

    min-height:
      218px !important;

    padding:
      21px
      16px
      18px !important;

    border-radius:
      23px !important;

    text-align:
      center !important;

    isolation:
      isolate;
  }


  /*
   * La línea lateral del móvil se convierte
   * en una línea superior elegante.
   */

  .nubo-quick-add-card::before {
    top:
      0 !important;

    right:
      28px !important;

    bottom:
      auto !important;

    left:
      28px !important;

    width:
      auto !important;

    height:
      3px !important;

    border-radius:
      0
      0
      999px
      999px !important;

    opacity:
      0.76 !important;
  }


  /*
   * Brillo inferior muy discreto.
   */

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

    position:
      absolute;

    z-index:
      -1;

    right:
      -44px;

    bottom:
      -62px;

    width:
      145px;

    height:
      145px;

    border-radius:
      50%;

    background:
      var(--quick-soft);

    filter:
      blur(10px);

    opacity:
      0.58;

    pointer-events:
      none;
  }


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

    height:
      66px !important;

    border-radius:
      20px !important;

    box-shadow:
      inset 0 1px 0
      rgba(255, 255, 255, 0.98),
      0 7px 16px
      rgba(23, 67, 43, 0.055) !important;

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


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

    height:
      28px !important;
  }


  .nubo-quick-add-card__copy {
    align-content:
      start !important;

    justify-items:
      center !important;

    gap:
      8px !important;

    width:
      100% !important;
  }


  .nubo-quick-add-card__copy
  strong {
    font-size:
      15px !important;

    line-height:
      1.22 !important;

    text-align:
      center !important;
  }


  .nubo-quick-add-card__copy
  small {
    max-width:
      185px !important;

    color:
      #75877e !important;

    font-size:
      10.5px !important;

    line-height:
      1.5 !important;

    text-align:
      center !important;
  }


  /*
   * Flecha como control flotante superior.
   */

  .nubo-quick-add-card__arrow {
    position:
      absolute !important;

    top:
      13px !important;

    right:
      13px !important;

    width:
      30px !important;

    height:
      30px !important;

    border:
      1px solid
      color-mix(
        in srgb,
        var(--quick-accent) 20%,
        transparent
      ) !important;

    border-radius:
      11px !important;

    background:
      color-mix(
        in srgb,
        var(--quick-soft) 82%,
        white
      ) !important;
  }


  @media (hover: hover) {

    .nubo-quick-add-card:hover {
      transform:
        translateY(-3px) !important;

      box-shadow:
        0 17px 34px
        rgba(24, 62, 42, 0.105),
        inset 0 1px 0
        rgba(255, 255, 255, 0.98) !important;
    }


    .nubo-quick-add-card:hover
    .nubo-quick-add-card__icon {
      transform:
        translateY(-2px)
        scale(1.035);

      box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.98),
        0 11px 22px
        rgba(23, 67, 43, 0.09) !important;
    }


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


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

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

    padding:
      14px
      21px !important;
  }


  .nubo-quick-add-footer {
    gap:
      18px !important;
  }


  .nubo-quick-add-trust__icon {
    flex-basis:
      40px !important;

    width:
      40px !important;

    height:
      40px !important;

    border-radius:
      14px !important;
  }


  .nubo-quick-add-trust__copy
  strong {
    font-size:
      10.5px !important;
  }


  .nubo-quick-add-trust__copy
  small {
    font-size:
      8.8px !important;
  }


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

    min-height:
      45px !important;

    border-radius:
      15px !important;
  }
}


/* ==========================================================
   ESCRITORIOS MUY ANCHOS

   Se conserva el máximo de 760 px para no convertir
   el modal en una ventana excesivamente horizontal.
   ========================================================== */

@media (min-width: 1400px) {

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

    max-width:
      760px !important;
  }
}


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

@media (min-width: 900px) {

  html[data-theme="dark"]
  .nubo-quick-add-card::after {
    opacity:
      0.10;
  }


  html[data-theme="dark"]
  .nubo-quick-add-card__arrow {
    border-color:
      rgba(255, 255, 255, 0.06) !important;

    background:
      rgba(255, 255, 255, 0.045) !important;
  }
}


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

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

  .nubo-quick-add-card,
  .nubo-quick-add-card__icon,
  .nubo-quick-add-card__arrow {
    transition:
      none !important;
  }
}

/* NUBO_QUICK_ADD_WEB_V2_END */