/* =========================================================
   NUBO_MOBILE_HEADER_PILL_V1_START

   Convierte el encabezado móvil rectangular
   en una cápsula completamente redondeada.
   ========================================================= */

@media (max-width: 820px) {
  /*
   * El envoltorio exterior no debe dibujar
   * un rectángulo detrás de la cápsula.
   */
  .app-header {
    margin:
      max(
        6px,
        env(safe-area-inset-top)
      )
      7px
      0 !important;

    padding: 0 !important;

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

    background:
      transparent !important;

    box-shadow:
      none !important;

    overflow:
      visible !important;
  }

  /*
   * Contenedor real del menú superior.
   */
  .app-header
  .header-inner {
    width: 100% !important;

    min-height:
      clamp(
        64px,
        15vw,
        72px
      ) !important;

    margin: 0 !important;

    padding:
      8px
      clamp(
        14px,
        4vw,
        20px
      ) !important;

    border:
      1px solid
      rgba(
        177,
        215,
        199,
        0.64
      ) !important;

    border-radius:
      999px !important;

    background:
      linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.995),
        rgba(245, 252, 249, 0.99)
      ) !important;

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

      0 2px 5px
        rgba(18, 78, 56, 0.06),

      0 8px 20px
        rgba(18, 78, 56, 0.08)
      !important;

    overflow:
      hidden !important;

    box-sizing:
      border-box !important;
  }

  /*
   * Evita que pseudoelementos anteriores
   * vuelvan a dibujar esquinas cuadradas.
   */
  .app-header
  .header-inner::before,
  .app-header
  .header-inner::after {
    border-radius:
      inherit !important;
  }

  /*
   * El logo conserva su forma redondeada.
   */
  .app-header
  .brand-mark {
    border-radius:
      clamp(
        13px,
        4vw,
        18px
      ) !important;

    overflow:
      hidden !important;
  }

  /*
   * Avatar perfectamente circular.
   */
  .app-header
  .avatar,
  .app-header
  [class*="avatar"],
  .app-header
  [class*="profile"]
  > button {
    border-radius:
      999px !important;
  }
}

@media (
  max-width: 380px
) {
  .app-header {
    margin-left:
      5px !important;

    margin-right:
      5px !important;
  }

  .app-header
  .header-inner {
    min-height:
      62px !important;

    padding:
      7px
      12px !important;
  }
}

@media (
  max-width: 820px
)
and (
  orientation: landscape
) {
  .app-header
  .header-inner {
    min-height:
      60px !important;

    padding-top:
      6px !important;

    padding-bottom:
      6px !important;
  }
}

/* NUBO_MOBILE_HEADER_PILL_V1_END */